Visual LANSA Forum

Hi all.

We're working with the latest version of LANSA on a new project and have a couple of questions regarding the default appearance of Material Design vs non-Material Design controls. For the sake of simplicity in this post I'm going to use push buttons as an example.

With non-Material Design push buttons, when we drag and drop a #PRIM_PHBN from the controls palette onto a web page, by default the appearance of the button can be set if a DrawStyle with name #PushButton has been defined in the associated Theme. In this way, whenever we drag on a button we pick up the same appearance (with borders, mouseover effects etc etc). Note that the ThemeDrawStyle for these button is always blanks; the connection between the control and the default DrawStyle appears to be based on a "behind the scenes" cross reference (https://docs.lansa.com/14/en/lansa016/p ... e_name.htm). We can always "override" the default by entering a specific ThemeDrawStyle.

However with Material Design buttons (for example #PRIM_MD.RaisedButton) a different "default" approach appears to be used. Depending on the particular button chosen, a different ThemeDrawSyle is included. For example if the PRIMARY button is dragged onto a web page the default ThemeDrawStyle is "MediumTitle". If the Theme happens to contain a DrawStyle named "MediumTitle", then that will be used. If the specific button's ThemeDrawStyle is blanked out, then the #PushButton DrawStyle is not automatically picked up... so we're assuming that the "behind the scenes" connection between a #PRIM_PHBN is not there for a #PRIM_MD.RaisedButton.

So, my first question is... is that expected behaviour?

Therefore to create a "default" appearance for a #PRIM_MD.RaisedButton we could create a DrawStyle "MediumTitle" in the Theme as we know that this will always be used when we drag on the PRIMARY button from the controls palette. But we've noticed that "MediumTitle" is used elsewhere. For example #PRIM_MD.AppDrawer uses "MediumTitle" as its default ThemeDrawStyle. So if we were to define our "MediumTitle" DrawStyle as per our requirement for push button appearance, we would have to create another DrawStyle for any AppDrawers.

However some of the MD controls use combinations of DrawStyles. The #PRIM_MD.FlatButton has a default ThemeDrawStyle of "Borders1+BorderTheme500+ForegroundMediumPrimary" so it would become more complex to create our own override DrawStyle (as we would have to override 3 different DrawStyles and there is therefore a higher chance that these are used elsewhere and we would adveresely effect other controls).

I guess the simplest answer here is to create a new reusable, encapsulating a #PRIM_MD.RaisedButton (or #PRIM_MD.FlatButton, etc) and then we could set the ThemeDrawStyle to be a specific new DrawStyle that we have created in the Theme for that particular type of control. But then whenever we need to use a button we would have to go to the Repository, rather than the Controls palette to pick up the button. Also it doesn't appear that a #PRIM_MD component can be used as an ancestor so the reusable would have to be a #PRIM_PANL and therefore would not by default publish all relevant properties, events and methods.

Sorry for the long explanation... the question here is are we missing something? Is there a simple way to create a "default" Material Design button appearance which is always applied, i.e something similar to that which we see when working with non-Material Design controls?

Any suggestions, advice etc would be most appreciated.

Cheers for now.

Marcus.

I think this comes down to how Material Deign works.
Checkout the Material Design color palettes at https://material.io/design/color/the-co ... e-palettes

You basically have 2 colors; primary and secondary. These three colors also have variants i.e. medium, dark and light.

From the MD docs:

Your app’s primary and secondary colors, and their variants, help create a color theme that is harmonious, ensures accessible text, and distinguishes UI elements and surfaces from one another

Since MD is all about creating a "harmonious" UI all the MD components build off the Theme.

However you can still define your own drawstyles in a custom Theme.

If you want to deviate from that theme, i.e. have a button that does not partake in the MD theme, just us the default button and add attach your custom drawstyle.

I don't think I would go so far as to create a new RP just to encapsulate the button, I would rather spend some time on the Theme getting the primary and secondary colors right and when I need to, creating my own custom drawstyles.

So to answer you question of

Is there a simple way to create a "default" Material Design button appearance which is always applied, i.e something similar to that which we see when working with non-Material Design controls?

Yes, create a custom theme, define your primary and secondary colors, and set your Page's theme to your custom theme. You can also have the IDE use your custom theme so that the design will look like the actual page.

For example, I have a theme where my primary and secondary colors are blue and purple. The buttons look like this in the IDE. The page itself is basic and the Theme is defined as When I drag a Primary Button on the page, it shows up as blue, a Secondary Button shows up as purple.

Hope this helps,
Joe

Hi Marcus,

it sounds like the default appearance you're after has more to do with shape than color, as color is pretty well defined by the theme.

Just out of curiosity, what exactly are you after?

Cheers,
Danny

Hi guys.

Thanks for the code snip Joe and the follow up Danny.

I can see exactly what you're suggesting Joe, and it does indeed help

The problem we have is that the requirement is to be able to set not just the base colour, but also set the mouseover colour, border/corner style etc. In your example there is a change in colour when mouseover occurs... but its very subtle (looks like it slightly darkens) and I can't see a way to control how subtle (or not) the mouseover colour is, or how to set a completely different (i.e non-harmonious) colour. But even if there is a way to do that... we would also need to adjust the borders.

The only way I can see to do this is to define a full blown DrawStyle in the Theme (as you suggest and have done for DangerTitle and NeutralTitle)... but to use those DrawStyles I have to drag an PRIM_MD button onto the form and then manually set the ThemeDrawStyle for each button. If use a lot of these buttons, then it requires an additional step for each button - granted not a huge amount of work, but definitely something extra for the developer to remember to do.

So really the question boils down to is there a way to make a specific custom DrawStyle the default ThemeDrawStyle for a PRIM_MD button as it is dragged onto a form, like we can with non-MD buttons?

If not that's absolutely fine - but didn't want to go down one particular route if there was a cool default/shortcut feature that we were missing.

Cheers for now and thanks once again

Marcus.