CSS training session for Application programmers

October 19, 2011 Kevin Wong & Guillermo Sanchez

CSS topic covered today

Understanding Selectors. Common Swt CSS styles. Applying Swt CSS styles. Understanding layouts and which panel to use. Where to apply CSS?

Selectors

<div id=someFlowPanel class=Swt-FlowPanel> <table id=someFlexTable1 class=Swt-FlexTable> <tbody> <tr> <td>Blue</td> <td><span disabled=>Red</span></td> </tr> <tr> <td colspan=2> <table id=someFlexTable2 class=Swt-FlexTable> <tbody> <tr> <td><span class=highlight>Green</span></td> <td><span class=highlight disabled>Yellow</span></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>

How do we make Blue cell to be blue using CSS and not inline styles? What is the most effective CSS selector?

Selectors
<div id=someFlowPanel class=Swt-FlowPanel> <table id=someFlexTable1 class=Swt-FlexTable> <tbody> <tr> <td>Blue</td> <td><span disabled=>Red</span></td> </tr> <tr> <td colspan=2> <table id=someFlexTable2 class=Swt-FlexTable> <tbody> <tr> <td><span class=highlight>Green</span></td> <td><span class=highlight disabled>Yellow</span></td> </tr> Answer: Using direct child selectors and pseudo classes. </tbody> </table> </td> div.Swt-FlowPanel > table.Swt-FlexTable >tbody > tr:first-child </tr> { </tbody> color: blue; </table> </div> }

> td:first-child

Selectors

<div id=someFlowPanel class=Swt-FlowPanel> <table id=someFlexTable1 class=Swt-FlexTable> <tbody> <tr> <td>Blue</td> <td><span disabled=>Red</span></td> nd </tr> <tr> <td colspan=2> <table id=someFlexTable2 class=Swt-FlexTable> <tbody> <tr> <td><span class=highlight>Green</span></td> <td><span class=highlight disabled>Yellow</span></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>

What is the simplest selector to make the 2 Flex Table with a orange background?

Selectors
<div id=someFlowPanel class=Swt-FlowPanel> <table id=someFlexTable1 class=Swt-FlexTable> <tbody> <tr> <td>Blue</td> <td><span disabled=>Red</span></td> </tr> <tr> <td colspan=2> <table id=someFlexTable2 class=Swt-FlexTable> <tbody> <tr> <td><span class=highlight>Green</span></td> <td><span class=highlight disabled>Yellow</span></td> </tr> Answer: Using id selectors. </tbody> </table> </td> #someFlexTable2 { </tr> background-color: orange; </tbody> } </table> </div>

Selectors

<div id=someFlowPanel class=Swt-FlowPanel> <table id=someFlexTable1 class=Swt-FlexTable> <tbody> <tr> <td>Blue</td> <td><span disabled=>Red</span></td> </tr> <tr> <td colspan=2> <table id=someFlexTable2 class=Swt-FlexTable> <tbody> <tr> <td><span class=highlight>Green</span></td> <td><span class=highlight disabled>Yellow</span></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>

What is the simplest selector to make all span elements with disabled attribute have red text?

Selectors
<div id=someFlowPanel class=Swt-FlowPanel> <table id=someFlexTable1 class=Swt-FlexTable> <tbody> <tr> <td>Blue</td> <td><span disabled=>Red</span></td> </tr> <tr> <td colspan=2> <table id=someFlexTable2 class=Swt-FlexTable> <tbody> <tr> <td><span class=highlight>Green</span></td> <td><span class=highlight disabled>Yellow</span></td> </tr> Answer: Using attribute selectors. </tbody> </table> </td> span[disabled] { </tr> color: red; </tbody> } </table> </div>

Selectors

<div id=someFlowPanel class=Swt-FlowPanel> <table id=someFlexTable1 class=Swt-FlexTable> <tbody> <tr> <td>Blue</td> <td><span disabled=>Red</span></td> </tr> <tr> <td colspan=2> <table id=someFlexTable2 class=Swt-FlexTable> <tbody> <tr> <td><span class=highlight>Green</span></td> <td><span class=highlight disabled>Yellow</span></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div>

How do we set spans with highlight style to be green but when having highlight style and disabled style together will be yellow?

Selectors
<div id=someFlowPanel class=Swt-FlowPanel> <table id=someFlexTable1 class=Swt-FlexTable> <tbody> <tr> <td>Blue</td> <td><span disabled=>Red</span></td> </tr> <tr> <td colspan=2> <table id=someFlexTable2 class=Swt-FlexTable> <tbody> <tr> <td><span class=highlight>Green</span></td> <td><span class=highlight disabled>Yellow</span></td> </tr> Answer: Using multiple class selectors. </tbody> </table> </td> span.highlight { </tr> color: green; </tbody> } </table> </div>

span.highlight.disabled { color: yellow; }

10

Common Swt Styles Button Panels

11

Common Swt Styles Button Panels

<widget type="swt:SwtSimplePanel" style="swt-topBorder"> <children> <widget type="swt:SwtSimplePanel" style="floatRight"> <children> <widget hAlignInParent="Right" horizontalAlignment="Right" id="horizontalpanelFooter" type="swt:SwtHorizontalPanel" style="swt-bottomControlButtonPanels"> <children> <widget helpID="Portal/index_CSH.htm#691100300" id="buttonClose" tabIndex="3029" type="swt:SwtButton"> <caption> <transText text="xClose" textID="portal61a_buttons_btnClose" /> </caption> </widget> </children> </widget> </children> </widget> </children> </widget>

12

Common Swt Styles - layout

13

Common Styles layout

Div slices
There are main alignments setup already
.swt-full ( 100% ) .swt-half-split ( 50% ) .swt-one-third-split, .swt-two-third-split ( 33%, 66%) .swt-one-quart-split, .swt-three-quart-split (25%, 75%)

Horizontal Alignment
There are 3 styles to help with horizontal alignment
.floatLeft .floatRight .clear

Note: these styles works on flow panels and simple panels only.
14

Common styles - layout

15

Common styles box containers

16

Common styles box containers

<widget type="swt:SwtFlowPanel" style="swt-BoxContainer"> <children> </children> </widget>

Note: This style works on flow panels only.

17

Common styles fieldsContainer

18

Common styles fieldsContainer

<widget type="swt:SwtFlowPanel" style="swt-FlowPanel fieldsContainer"> <children> </children> </widget> Note: style only works on Simple and Flow Panels but only recommended using Flow Panels with this style.

19

Common styles Control Button Panels

20

Common styles Control Button Panels

<widget type="swt:SwtFlowPanel" style= swt-ControlButtonPanels "> <children> </children> </widget> Note: Style only works on Simple and Flow Panels but only recommended using Flow Panels with this style.

21

Common style sectionContainer

22

Common style sectionContainer

<widget id="flowPanelOeOrdersCOMMENT" type="swt:SwtFlowPanel" style="sectionContainer"> <children> </children> </widget>

Note: This style only applies to Flow panels.

23

Common Styles Secondary Navigator container

24

Common Styles Secondary Navigator container

<widget id="verticalpanelLineNoContent" style="swt-VerticalPanelWithBorder swt-Navigatorsecondary-level-container type="swt:SwtVerticalPanel"> <children> </children> </widget>

25

Understanding layout

26

Use of Simple Panels and Flow Panels

Common question is when to use Flow Panels and Simple Panels?
Use them when you rows of input fields to hide. Multi-column setup.

Should we always use Simple Panels and Flow Panels?

No. In fact, there are cases it is easier to keep FlexTables, Horizontal Panels, Vertical Panels IF AND ONLY IF you do not have hide and show multi-columns and multi-rows.

27

Applying CSS styles

Common question is where to apply CSS styles.
SWT level? Application level? Inline? Ask yourself this question.
Does it affect one ore more screen?
If so, you should apply it to SWT level.

Does your CSS affect only a particular type of widget in a screen?

If so, you might want to apply the style in the SWT level and start mapping it to common styles

Is your styling a special case of something that doesnt apply to anything.

In the rare case, it might be easier to use the application CSS file to make the tweak but strongly discouraged to do so.

Note: At all cost, avoid setting inline styles.

28

Vision - Simplifying the Process

Creating layout widgets with applied styles.
Pros:
No CSS involved Auto width calculation on fields Application developers no longer need to understand the CSS or too much of the layout.

Cons:
Widget set gets bigger. More complexity within the widgets.

29

References
CSS Reference
http://www.w3schools.com/cssref/

CSS selectors reference

http://www.w3schools.com/cssref/css_selectors.asp

CSS Box model

http://www.w3.org/TR/css3-box/

News about CSS3 development

http://www.css3.info/

30

Questions?

31