New in 1.1 : CSS classes

[jeroenvandera]

With the 1.1 now in GA i thought i would address some of the new features in the new version. In this blog I will look at the CSS Class option and what you can do now using using CSS class with a little help of the Global or local variables.

A very nice feature in version 1.1 is the possibility to add css classes to the application. Upload a custom CSS file to the application and you have the option to set the option CSS class for many components.

A CSS class starts with the name of the class and between brackets {} you are able to set up the lay out.

For example.

If you want to have a really fancy looking button you can insert CSS code like this:

.button

{

border:2px solid #a1a1a1;

padding:10px 30px;

background:#dddddd;

border-radius:25px;

font-family:"Verdana", Arial, serif;

color:rgb(128,128,128);

box-shadow: 5px 5px 2px #666666;

font-size:150%;

font-weight:500;

}

In my new weather application I use this class mentioned above for textboxes that are used as buttons the user can press. The screen then looks like this:

Now we have a look at the same screen but now with a button pressed. The listbox and the textboxes also have css classes appointed. The graphs have been edited by making use of the new layout possibilities.

Note that the button that was last pressed is a different color. You can set the css class dynamically. For example if you wish that the last button pressed looks different than the rest you simply add a line of code to the on click handler of the button.

The code for resetting all the buttons then looks like this

each button has a version of the code above in their on click handler with setting themselves to the class "ButtonSelected".

More dynamics.

In the scorecard example we had to write a lot of code to set the images of the scorecard. We now can replace this by making CSS classes for a red light, a yellow light or a green light. But why stop there, you are able to set up a CSS class for every conditional format value possible.

We now can be much more flexible with the use of a local variable.

We even could have shrunken it to one line by not assigning the value to the variable first.

var AlertLevel = DS_TEMPERATURES.getConditionalFormatValue("4SXOC7KKW08KCIPZNU6CUKIWZ", {});

Text_1.setCSSClass("alert" + AlertLevel);

The returned value of the getConditionalFormatValue can get a value of 0 (no format) or 1-9. By setting CSS classes alert1 through alert9 you now are able to build a scorecard without big if then trees to catch all the possibilities. Let the bex query worry about the exceptions and you simply use the passed value to apply a CSS class.

This first look at CSS classes shows a lot of new possibilities for layout. By building classes and using them throughout your application you can apply a lot of layout to your application. If a change is made to the CSS file that change will be set for all the components that use the CSS class.

The second very useful part are the dynamics. All kinds of scenario's become available with setting the CSS class dynamically in your script.

This is only one new feature. In future blogs I will look at other new features of 1.1