Improving my Application Interface - Replicating the Windows Update Screen Menu (W10)

[Julian]

I’d like to replicate the visual appearance of the Windows Update screen, ie: the menu/options bar down the left hand side with the background that follows the mouse, any suggestions how to achieve this in code (without buying a third party product) ?

In some instances, the menu options down the LHS have two line text, the top line being bigger than the bottom, achieving that as well would be a bonus.

I’ve tried flat buttons with icons but they’re not quite right.

Thanks.

[Mike_Duglas]

How about a screenshot?

[Julian]

A sheet with the wizard attribute handles the RHS quite nicely.

The RHS shows an example of a two line entry.

[Mike_Duglas]

I would used custom drawn buttons.

[Mike_Duglas]

My custom draw buttons on the right side:

In short, you should override WM_PAINT.

[noyantis]

Hi Julian,

If you’re after updating the UI, then feel free to take a look at our range of wrapper templates for the Codejock UI suite of products
https://noyantis.com/product-category/codejock/

We’ll be training on this next week, here are a couple of screenshots of the app we’ll be creating…

Thanks,

Andy
noyantis.com

[Julian]

Hi Andy,
Yes, I want to improve my user interface, C10/11 is a bit behind, C12 promises more when it comes but I (not me personally, my apps) need a facelift relatively quickly.
When you say “Training”, are you referring to ClarionLive?
Julian

[noyantis]

Hi Julian,

Yes, but if you can’t make that then feel free to join us a week later for our weekly noyantis webinar.

Alternatively, drop me an email and I’ll simply setup an online meeting to take you through the capabilities…

Thanks, Andy

[Julian]

I turned checkboxes into sliders with a simple class.

Before …

After …

[jkuijt]

Looks really nice!

Are you willing to share this class?

Best regards
Jeffrey

[Julian]

Sure, here it is with a demo to see it working.
Julian.
jhSlider.zip (476.0 KB)

[jkuijt]

Thank you very much Julian!

Best regards
Jeffrey

[Julian]

Some progress, using the same technique employed in jhSlider, I changed this …

to this …

and was able to accommodate a second line of text.

If anybody’s interested, I can post a code sample after I’ve tidied it up ?

[jkuijt]

Hi Julian,

Looking good!
An example would be great!

Best regards
Jeffrey

[Julian]

Jeffrey (et al)

Here is my jhVerticalMenu class with an example to see it working, please see the .inc file for information.

Julian
jhVerticalMenu.zip (461.7 KB)

[jkuijt]

Great!
Thank you Julian!

Best regards
Jeffrey

[Mike_Duglas]

This approach has some obvious disadvantages.

1. It’s impossible to select (set focus on) the checkbox by keyboard (TAB/ShiftTAB).
2. It’s impossible to check/uncheck by spacebar.
3. It’s impossible to check/uncheck by clicking on a text.
4. Standard functions like ENABLE(feq), DISABLE(feq), HIDE(feq), UNHIDE(feq) aren’t supported, so an existing code would be broken.
5. This snippet is not supported as well and an existing code would be broken.
   checkVar = 1
   DISPLAY(?checkVar)

[jslarve]

Still looks neat.

In my picture button class from the 90s, I think I used an ENTRY control outside of the window dimensions so that I’d have something to take focus, then did a DrawFocusRect on the “actual” control. I also alerted a few keys, such as the spacebar. Not exactly elegant, but it solved that problem.

[sjreryan]

and hopefully clarion 12 addresses some of these nice controls and the universal display technology (any screen?) supports it… out of the box would be good.

Net Talk of course is a Web Generator and already supports the LOT…

[Julian]

Hi Mike

Thanks for your feedback.

Observing actual users we note that most people tend to prefer mouse over keyboard so we can live without TAB/ShiftTab/Spacebar.

jhSlider does have Enable/Disable and SetValue/GetValue by feq, so your example …

checkVar = 1
DISPLAY(?checkVar)

is achieved by …

slider.setvalue(?checkVar,1)