Shadow

[itg-assistant]

Ulisses asked 2017-07-03 17:13:22 UTC

Hi!

How can I apply a shadow in a panel (or other object)?

Thanks!

Ulisses.

[itg-assistant]

Luca answered 2017-07-03 17:29:43 UTC

You can:

1- Use the StyleSheet extender. It lets you add CSS rules to the extender, or reference a CSS file with rules. It then adds a new ClassName property to all controls on the container. I.e. add a CSS rule ".green-shadow: { .... }" then add the class name "green-shadow" to the controls that you want to use the green shadow on.

2- Add an appearance key on a mixin theme. But in this case you have to extend a specific key. For example, add an appearance key "greeen-shadow-button" inheriting from "button". Then set the AppearanceKey property of a button to "green-shadow-button".

3- Use javascript directly to add CSS styles to any component: "this.getContentElement().setStyles({ style map});

I can send you a sample with all three techniques later.

HTH

/Luca

[itg-assistant]

Ulisses answered 2017-07-03 17:46:41 UTC

Thanks, Luca. Please, send me this sample later… :-)

[itg-assistant]

Frank (ITG) answered 2017-07-03 21:59:31 UTC

Hi Ulisses,

please find a sample here that shows how to add a shadow to a panel in 4 ways:

http://wisej.s3.amazonaws.com/support/attachments/ShadowPanel.zip

• We added a StyleSheet extender to Page1 and added the following CSS code to it.
  **.greenshadow { box-shadow: 10px 10px 5px #355732; } **

(Setting the properties Horizontal-Shadow, Vertical-Shadow, Blur distance and color).
We then assign the class like this:

this.panel1.Eval("this.getContentElement().addClass ("greenshadow")");

• We defined a theme mixin with AppearanceKey "greenshadow" using decorators provided by the Qooxdoo library.

This appearance key is then assigned with the following code:

this.panel1.AppearanceKey = "greenshadow";

• In the same mixin we defined another AppearanceKey "greenshadow2" using CSS:

This is assigned the same way as in 2):

this.panel1.AppearanceKey = "greenshadow2";

• Using javascript directly:

this.panel1.Eval("this.getContentElement().setStyles ({ "box-shadow": "10px 10px 5px #355732"})");

Please let us know if you have any questions about the sample or any of the four ways to set the shadow to the panel.

Hope that helps.

Best regards
Frank

[itg-assistant]

Frank (ITG) answered 2017-07-04 11:09:29 UTC

Hi Ulisses,

there are actually more ways to add the shadow and I have revised the sample. Find an updated version here:

http://wisej.s3.amazonaws.com/support/attachments/ShadowPanel2.zip

When you add a StyleSheet extender to a container (page/window), all controls get a new property CssClass that can be set directly in the designer.

So you could use greenshadow here and the panel will be shown with the shadow border.
Internally this code gets added to InitializeComponent:

this.styleSheet1.SetCssClass(this.panel1, "greenshadow");

Since for this sample we don´t want to have the panel displayed with the shadow border on create, I removed that property value again and placed that call under Button1.

Another option is to use a css file that is referenced in default.html:

Please note that I named the style greenshadow_css here to distinguish it from the style defined in the stylesheet extender.

Button 5 now uses the following code to assign the style:

this.panel1.Eval("this.getContentElement().addClass ("greenshadow_css")");

Best regards
Frank

[itg-assistant]

Tiago (ITG) answered 2017-07-04 12:38:18 UTC

I know Wisej, I know it's rich and powerful, I know it's easy to work with. Nevetheless I'm amazed there are so many different ways to do big visual changes in a very localized context, with so little effort.

The issue here is Frank isn't always at hand and there isn't (yet) a tutorial for this kind of knowledge - something like local visual style changes.

[itg-assistant]

Ulisses answered 2017-07-04 13:22:26 UTC

Thanks, guys!

[itg-assistant]

Frank (ITG) answered 2017-07-04 13:27:05 UTC

Thanks Tiago, while we here are almost always at hand (gg), we will still keep adding to the blogs and tutorials as you have a good point here. Best regards, Frank