Rational HATS and CSS


Published on

This is part of my classroom curriculum on IBM Rational Host Access Transformation Services. More material is available from our on site classroom courseware.

Published in: Technology, Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Rational HATS and CSS

    1. 1. Host Access Transformation Services V7.5 Cascading Style Sheets (CSS)
    2. 2. Agenda <ul><li>CSS Definition and Overview </li></ul><ul><li>How HATS uses Stylesheets </li></ul><ul><li>CSS Selectors </li></ul><ul><li>Reference </li></ul><ul><li>Lab </li></ul>
    3. 3. CSS Definition <ul><li>A cascading style sheet (CSS) </li></ul><ul><ul><li>A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. </li></ul></ul><ul><ul><li>Basically, a style sheet is made up of style rules that tell a browser how to present a document. </li></ul></ul>
    4. 4. CSS Overview <ul><li>CSS gives more control over the appearance of a Web page to the page creator than to the browser designer or the viewer. </li></ul><ul><li>With CSS, the sources of style definition for a given document element are in order of precedence </li></ul><ul><li>Promotes the separation of the presentation from the content </li></ul>
    5. 5. With and Without Style Sheets
    6. 6. What does HATS uses CSS for? <ul><li>Establish templates across all transformations </li></ul><ul><li>Maps host session colors/attributes to what is actually displayed on the JSP page. </li></ul><ul><li>There are several ways to change these mappings: </li></ul><ul><ul><li>Modify the appropriate CSS files themselves (for example, if you want to change a keypad button background color) </li></ul></ul><ul><ul><li>Add inline style tags to the source of your project's application.hap to configure the mapping of background colors, extended attributes, or extended colors across the entire host application. </li></ul></ul>
    7. 7. Linking to Style Sheets
    8. 8. Modifying a Stylesheet
    9. 9. Classic Terminal Theme (please don’t use this)
    10. 10. White Theme
    11. 11. Tan Theme
    12. 12. The CSS Syntax <ul><li>selector { attribute-name: property; </li></ul><ul><li>another attribute-name: property; </li></ul><ul><li>} </li></ul>
    13. 13. CSS Syntax: Selectors <ul><li>Identifies matching element(s) in the HTML DOM </li></ul><ul><li>Can be an HTML Element Name </li></ul><ul><ul><li>Body, table, div, span, p, blockquote, etc </li></ul></ul><ul><li>Can be an attribute name </li></ul><ul><ul><li>ID, class </li></ul></ul><ul><li>Can be a combination of element name </li></ul><ul><li>Can select child of a parent selector </li></ul>
    14. 14. CSS Selectors: the ID attribute <ul><li>Uniquely identifies the HTML element in the page. </li></ul><ul><ul><li>Think ID as in a driver's license </li></ul></ul><ul><ul><li>No one should have the same ID as you </li></ul></ul><ul><li>Should only be one per page </li></ul><ul><li>Use hash/pound/anoctothorpe to select </li></ul><ul><ul><li># customer { color: blue; } </li></ul></ul><ul><ul><li><span id =” customer ”>....</span> </li></ul></ul>
    15. 15. CSS Selectors: the class attribute <ul><li>Multiple elements can have the same class attribute name </li></ul><ul><ul><li>i.e. a class of students, a grouping </li></ul></ul><ul><li>Use the period notation to select: </li></ul><ul><li>.HATSTABLEHEADER { background-color : #006f00 ;} </li></ul><ul><li><table> </li></ul><ul><li><th class=”HATSTABLEHEADER”>... ..</th> </li></ul><ul><li></table> </li></ul>
    16. 16. CSS Selectors: Psuedo elements <ul><li>Add additional functionality based on the user interaction. </li></ul><ul><li>Append colon to your existing selector </li></ul><ul><li>Some browsers limited to 4 of these. </li></ul><ul><ul><li>a:link {color:#FF0000} /* unvisited link */ </li></ul></ul><ul><ul><li>a:visited {color:#00FF00} /* visited link */ </li></ul></ul><ul><ul><li>a:hover {color:#FF00FF} /* mouse over link */ </li></ul></ul><ul><ul><li>a:active {color:#0000FF} /* selected link */ </li></ul></ul>
    17. 17. CSS Selectors: Parent/Child Selectors <ul><li>Combine selectors to search the DOM for children of a selector: </li></ul><ul><ul><li>div.customer p{ color: red} </li></ul></ul><ul><ul><ul><li><div class=”customer”> <p> .... <p> </div> </li></ul></ul></ul><ul><ul><li>span # demographic . required {color: red} </li></ul></ul><ul><ul><ul><li>< span id=” demographic ”> </li></ul></ul></ul><ul><ul><ul><li><input class=” required ” type=”text” /> </li></ul></ul></ul><ul><ul><ul><li></span> </li></ul></ul></ul>
    18. 18. CSS Selectors: Combinations <ul><li>Separate selectors with a comma to apply to multiple </li></ul><ul><li>.HGREEN , input.REQUIRED { </li></ul><ul><li>color : #00ff00 ; </li></ul><ul><li>white-space : normal ; </li></ul><ul><li>letter-spacing : normal ; </li></ul><ul><li>} </li></ul><ul><li>Be sure to include the comma, otherwise you will be selecting the children of the .HGREEN class! A different rule altogether! </li></ul>
    19. 19. Order of Precedence <ul><ul><li>The STYLE attribute on an individual element tag </li></ul></ul><ul><ul><li>The STYLE element that defines a specific style sheet containing style declarations </li></ul></ul><ul><ul><ul><li>In a Web page, the STYLE element is placed between the TITLE statement and the BODY statement. </li></ul></ul></ul><ul><ul><li>LINK element that links to a separate document containing the STYLE element. </li></ul></ul><ul><ul><li>An imported style sheet, using the CSS @import notation to automatically import and merge an external style sheet with the current style sheet </li></ul></ul><ul><ul><li>Style attributes specified by the viewer to the browser </li></ul></ul><ul><ul><li>The default style sheet assumed by the browser </li></ul></ul>
    20. 20. Modifications to JSP override Stylesheets <ul><li>HATS Stylesheet settings are global </li></ul><ul><li>If you add Style tags to a transformation JSP these attributes will override the Stylesheet attribute settings for the application </li></ul><ul><li>Individual Style settings on transformation JSPs apply just to that JSP </li></ul>
    21. 21. CSS Limitations <ul><li>Not all browsers support CSS (think mobile browsers) </li></ul><ul><li>For comprehensive list of which browsers currently support CSS see http://www.w3.org/Style/CSS/#browsers </li></ul><ul><li>IE 6 has a broken model </li></ul><ul><li>Mozilla Firefox and Opera render the most true. IE 7 is much improved and a listed as a critical update for Windows </li></ul><ul><li>BEST PRACTICE: Develop in Firefox for ease of development, back port your code for IE6 (if IE7 is not the company’s supported browser) </li></ul><ul><li>BEST PRACTICE: Upgrade your corporate browser standard from IE6!!!! ...PLEASE!!! </li></ul>
    22. 22. CSS Reference Material <ul><li>Excellent Learning Examples </li></ul><ul><ul><li>http://meyerweb.com/ </li></ul></ul><ul><ul><ul><li>Eric Meyer is a leading web design expert. Great tips on this site. </li></ul></ul></ul><ul><ul><li>www.csszengarden.com </li></ul></ul><ul><ul><ul><li>A site which challenges designers to separate content from design. An excellent book available that matches the site. </li></ul></ul></ul><ul><ul><li>http://www.htmlhelp.com/reference/css/quick-tutorial.html </li></ul></ul><ul><ul><ul><li>CSS Quick tutorial </li></ul></ul></ul><ul><ul><li>http://www.cssbeauty.com/ </li></ul></ul><ul><ul><ul><li>Great source for CSS ideas </li></ul></ul></ul><ul><ul><li>http://thinkvitamin.com/ </li></ul></ul><ul><ul><ul><li>An online magazine for designers </li></ul></ul></ul>
    23. 23. More CSS References <ul><ul><li>www.w3schools.com </li></ul></ul><ul><ul><ul><li>EXCELLENT site for learning web technologies! </li></ul></ul></ul><ul><ul><li>http://htmlhelp.com/reference/css/ </li></ul></ul><ul><ul><ul><li>Web Design Group Guide to CSS </li></ul></ul></ul><ul><ul><li>http://www.w3.org/Style </li></ul></ul><ul><ul><ul><li>W3C Web Style Sheets </li></ul></ul></ul><ul><ul><li>http://www.w3.org/TR/REC-CSS2/ </li></ul></ul><ul><ul><ul><li>W3C CSS specification </li></ul></ul></ul><ul><ul><li>http://www.wdvl.com/Authoring/Style/Sheets/Tutorial.html </li></ul></ul><ul><ul><ul><li>WDVL Intro to Style Sheets </li></ul></ul></ul><ul><ul><li>http:// del.icio.us/klenny/webdesign </li></ul></ul><ul><ul><ul><li>All of these as well as my other web design links </li></ul></ul></ul>