Shadow

Answered
0
0

Hi!

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

Thanks!

Ulisses.

  • You must to post comments
Best Answer
0
0

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.

cssclass
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:

shadow_css

defaulthtml

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

Attachment
  • You must to post comments
0
0

Thanks, guys!

  • You must to post comments
0
0

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.

  • Frank (ITG)
    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
  • You must to post comments
1
0

Hi Ulisses,

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

sceenshot

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

  1. 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\”)”);

  2. We defined a theme mixin with AppearanceKey “greenshadow” using decorators provided by the Qooxdoo library.

    mixin
    This appearance key is then assigned with the following code:

    this.panel1.AppearanceKey = “greenshadow”;

  3. In the same mixin we defined another AppearanceKey “greenshadow2” using CSS:

    mxini2
    This is assigned the same way as in 2):

    this.panel1.AppearanceKey = “greenshadow2”;

  4. 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

Attachment
  • You must to post comments
1
0

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

  • Ulisses
    Thanks, Luca. Please, send me this sample later… :-)
  • You must to post comments
Showing 5 results
Your Answer

Please first to submit.