• Save
Rational HATS and CSS
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Rational HATS and CSS

  • 3,275 views
Uploaded 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.

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

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,275
On Slideshare
3,208
From Embeds
67
Number of Embeds
5

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 67

http://blog.strongbackconsulting.com 46
http://thejavablues.blogspot.com 16
http://www.slideshare.net 2
http://www.linkedin.com 2
http://www.health.medicbd.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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