TIBCO General Interface – CSS GUDIE

                                      Rohan Chandane
                                ...
Style Guide


  Applying style to basic GUI component
    Select a component
      Ctrl + Click
      From Component Hiera...
Continued…


   Font (Some Common Properties)
     Name
     Size
     Weight
     Color

   Box (Some Common Properties)
...
Continued…


   CSS
     CSS Override
         This will override CSS class style

     CSS Rule
         This is CSS clas...
Applying Style


  Setting Style
    Using component properties (examples)
      Name: accept existing font name
      Siz...
Continued…


   Using CSS Override
     Style which is unable to achieved using basic styling properties, CSS override
   ...
Continued…


   CSS Rule
     This is the place where we can specify CSS class from the CSS Style file
     CSS Style clas...
CSS Override


  Overriding of CSS styles in GI



        CSS Rule (CSS Class)




           CSS Override            Thi...
Different ways to apply Style


  CSS File
  Overriding default CSS
  Dynamic Property File
  CDF document
  Component Edi...
Continued…


  CSS File
    Create CSS file (Menu > File > New > CSS File)
    Eg. : Style.css
    .bottonRight{
         ...
Continued…


    Project File Panel Setting
     To see the effect of the style on UI Screen, Right click on Style.css fil...
Continued…


  Overriding default(master) CSS
   There are default CSS classes for UI components, set by General
   Interf...
Continued…


   To override GI default CSS class, it need to prefix #JSX
   Eg. To override GI’s Dialog Box CSS class, it ...
Continued…


   jsx.css can also be tweaked. Its better idea to use modified duplicate of
   jsx.css than actually changin...
Continued…


   To apply style to GI’s label component, it need to write in this way
     #JSX .[classname]{}
     EG. #JS...
Continued…


  Dynamic Property File
   Use of this file is useful while applying CSS and reusability
     While applying ...
Continued…


      Eg. @TextBoxBorder : solid 1px #DDFFGG;
      Where ‘@TextBoxBorder ‘ is key and ‘solid 1px #DDFFGG;’ i...
Continued…


      The benefit of using this file is, when ever it need to change style for the component,
      style nee...
Continued…


  CDF document
   Style can be set using CDF document
   CDF document attribute
     jsxstyle
       Eg. <rec...
Continued…


  Component Editing
   Some component need to be styled by adding some tags into it’s xml
   structure
     T...
Continued…


  Value Template
   For Matrix component, formatting or coloring of data is achieved using
   fragments of XS...
Continued…


   Sample Value Template XSL
   <xsl:template match="record" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"...
Continued…


     ‘record’ is the <record> tag in CDF, which is the data provider for matrix
     <xsl:when test="{0}='Uni...
Component Specific Style


  Matrix
    Applying CSS to matrix component in different ways
      xslparameters tag
      M...
Imagination Action Joy




                                  www.mindtree.com

     © 2008 MindTree Consulting
Upcoming SlideShare
Loading in …5
×

TIBCO General Interface - CSS Guide

4,465 views

Published on

Published in: Technology, Education

TIBCO General Interface - CSS Guide

  1. 1. TIBCO General Interface – CSS GUDIE Rohan Chandane 8th September 2009 © 2008 MindTree Consulting
  2. 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. 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. 4. Continued… CSS CSS Override This will override CSS class style CSS Rule This is CSS class name in CSS file Slide 4
  5. 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. 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. 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. 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. 9. Different ways to apply Style CSS File Overriding default CSS Dynamic Property File CDF document Component Editing Value Template Slide 9
  10. 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. 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. 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. 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. 14. Continued… jsx.css can also be tweaked. Its better idea to use modified duplicate of jsx.css than actually changing jsx.css
  15. 15. Continued… To apply style to GI’s label component, it need to write in this way #JSX .[classname]{} EG. #JSX .headerText{…}
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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
  25. 25. Imagination Action Joy www.mindtree.com © 2008 MindTree Consulting

×