2. Style Guide
Applying style to basic GUI component
Select a component
Ctrl + Click
From Component Hierarchy
Choose Properties Editor
Ctrl + 2
Menu > Palettes > Properties Editor
Most of the components have two-three common sections in properties
Font and Box
CSS
Slide 2
3. ContinuedâŠ
Font (Some Common Properties)
Name
Size
Weight
Color
Box (Some Common Properties)
BG Color
Padding
Margin
Border
Text Align and Overflow
Slide 3
4. ContinuedâŠ
CSS
CSS Override
This will override CSS class style
CSS Rule
This is CSS class name in CSS file
Slide 4
5. Applying Style
Setting Style
Using component properties (examples)
Name: accept existing font name
Size: font size in px
Weight: Bold/Normal
Color : [Hex code, Eg. #00FF00]
BG Color: [Hex code, Eg. #00FF00]
Padding: padding in px [Eg. 5 or 5 10 5 10]
Border: [Eg. Solid 1px, Solid 1px #b90010, dashed 2px #00FF00]
Overflow : Scroll/Hidden/Expand
Slide 5
6. ContinuedâŠ
Using CSS Override
Style which is unable to achieved using basic styling properties, CSS override
allow to write actual CSS syntax.
Eg.
border-top:solid 1px #c6c6c6;border-bottom:solid 1px #c6c6c6;border-right:solid 1px
#c6c6c6;
This can be also used to override CSS Rule (which is CSS calss)
Slide 6
7. ContinuedâŠ
CSS Rule
This is the place where we can specify CSS class from the CSS Style file
CSS Style class file can be created using
Menu > File > New > CSS File
CSS Class can be written like this
.cssClassName{
[some CSS style];
}
While writing the class name in the CSS Rule Name property it should be
without â . â (dot)
Eg.
Slide 7
8. CSS Override
Overriding of CSS styles in GI
CSS Rule (CSS Class)
CSS Override This will override CSS classâs style
Styling Properties This will override CSS Overrideâs style
Slide 8
9. Different ways to apply Style
CSS File
Overriding default CSS
Dynamic Property File
CDF document
Component Editing
Value Template
Slide 9
10. ContinuedâŠ
CSS File
Create CSS file (Menu > File > New > CSS File)
Eg. : Style.css
.bottonRight{
background: url(dialog-overlay_squard-cornered.gif) bottom left no-repeat;
}
.formBoxHeaderText{
font-family: Tahoma,Arial,sans-serif;
font-size: 13px;
color: #001f45;
font-weight: bold;
}
Use this class using âCSS Rule Nameâ Property
11. ContinuedâŠ
Project File Panel Setting
To see the effect of the style on UI Screen, Right click on Style.css file. Click on
Auto Load.
Auto Load option can be changed from Edit Profile⊠Option too. You can either
keep it Auto load at application init or can load it manually.
Whenever changes made in style and want to see how it reflect on screen, it
need to Load/Reload option
Context Menu showing option
- Auto Load
- Edit ProfileâŠ
- Load/Reload
12. ContinuedâŠ
Overriding default(master) CSS
There are default CSS classes for UI components, set by General
Interface in CSS file.
There are different CSS files for different browsers
For Internet explorer , at JSXcssieJSX.css
For Firefox , at JSXcssfxJSX.css
For Safari , at JSXcsssafJSX.css
To change the particular component âs style in GI, it need to find CSS
class for that component from JSX.css and override it in user created CSS
file
13. ContinuedâŠ
To override GI default CSS class, it need to prefix #JSX
Eg. To override GIâs Dialog Box CSS class, it should be like this
Here, overriding border-width from 1px to 0px. Default is 1px
#JSX .jsx30dialog {
border-style: solid;
border-width: 0px;
border-color: #c6c6c6 #a6a6a6 #a6a6a6 #c6c6c6;
}
14. ContinuedâŠ
jsx.css can also be tweaked. Its better idea to use modified duplicate of
jsx.css than actually changing jsx.css
15. ContinuedâŠ
To apply style to GIâs label component, it need to write in this way
#JSX .[classname]{}
EG. #JSX .headerText{âŠ}
16. ContinuedâŠ
Dynamic Property File
Use of this file is useful while applying CSS and reusability
While applying CSS using Properties Editor, many times CSS style gets repeat for
repeated components
Eg. For Textboxes used on form, We need to override border for certain textbox
repeatedly using Border property from Property Editor, Then instead of repeating same
style [like âsolid 1px #DDFFGGâ] at all the places, it is good practice to use Dynamic
Property File.
In this file we create key-value pair, where key is name which we want to give for
particular style and value is CSS style which need to apply against the name.
17. ContinuedâŠ
Eg. @TextBoxBorder : solid 1px #DDFFGG;
Where â@TextBoxBorder â is key and âsolid 1px #DDFFGG;â is value
Other than this it need to specify type for which property we need to create this key-
value pair. For example â
jsxtext
jsxbgcolor
jsxborder etc.
By right clicking on that particular property in Properties Editor, key name will be
appear in context menu. Select that as property value.
Dynamic Property File view for setting CSS key-values
18. ContinuedâŠ
The benefit of using this file is, when ever it need to change style for the component,
style needs to update dynamic property file and it will be reflected to all as key is set
for all related component. It helps to reduce change in style for all components needed.
Right click on Border will give
option in Dynamic Property File
19. ContinuedâŠ
CDF document
Style can be set using CDF document
CDF document attribute
jsxstyle
Eg. <record id=â01â jsxtext=âHelloâ jsxstyle=âcolor:#00FF00â/>
Can be used with matrix, tree, table
20. ContinuedâŠ
Component Editing
Some component need to be styled by adding some tags into itâs xml
structure
This is when, it doesnât have properties to define class or they doesnât have
specific CSS properties
Eg. Matrix Component
In order to style its alternative rows all together (columns) it need to add
â<xslparameters >â tag
<xslparameters jsx_rowbg1="#E4EEFA" jsx_rowbg2="#C4D6EC">
</xslparameters>
21. ContinuedâŠ
Value Template
For Matrix component, formatting or coloring of data is achieved using
fragments of XSL style sheets known as value templates
Columns of a Matrix component have a property field called value
template where XSL can be placed to affect the output during runtime
http://www.tibcommunity.com/docs/DOC-1594
22. ContinuedâŠ
Sample Value Template XSL
<xsl:template match="record" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<div>
<xsl:choose>
<xsl:when test="{0}='United Kingdom'">
<xsl:attribute name="style"> background-color: pink;</xsl:attribute></xsl:when>
</xsl:choose> <xsl:value-of select="{0}"/> </div> </xsl:template>
ârecordâ is the <record> tag in CDF, which is the data provider for matrix
23. ContinuedâŠ
ârecordâ is the <record> tag in CDF, which is the data provider for matrix
<xsl:when test="{0}='United Kingdom'">
It means when column is âUnited Kingdomâ
Example
24. Component Specific Style
Matrix
Applying CSS to matrix component in different ways
xslparameters tag
Matrix Components CSS properties
Value templates
Dynamic property file
There is no direct method to apply CSS class directly to matrix or its cells
