Cascading Style Sheets

Ken Webb 2010-05-10T03:46:58Z

Cascading Style Sheets (CSS) is "a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language".

CSS can be used in Xholon to style and configure selected nodes in the composite structure hierarchy.

For example, to style an existing Swing subtree, you could paste the following into a JPanel node.

JPanel {Background: BLACK;}
JButton {
 Background: PINK;
 Foreground: BLUE;
 MinimumSize: "Dimension,100,100";
 PreferredSize: "Dimension,100,100";
 SetFont: "Monospaced,7,14";
JTextField {Background: ORANGE;}
JLabel {Foreground: GREEN;}

CssStylist is a client class that locates and invokes the CSS service. The CSS service (the CssService class) uses the CSS Parser to parse CSS strings passed to it by CssStylist and other clients. If you paste the above CSS stylesheet into a JPanel node in the Xholon tree, CssStylist and CssService will style all the JButton, JTextField, and JLabel nodes that are contained within the JPanel. The following image results when the stylesheet is pasted into the bottom JPanel, but not the top one.

In Xholon, CSS can be used to set the values of attributes of any kind, not just GUI attributes. For example, the following will set the value of all nodes within a subtree, where the nodes have classes that inherit from SmallMolecule.

SmallMolecule {val: "200000.0";}

A CSS stylesheet can be part of the XML composite structure file, or it can be a XML string that can be pasted into a running app at any time. In the following composite structure XML file, nine instances of JButton are created inside a JPanel. The CssStylist node styles all JButton nodes that are contained within the parent of CssStylist, which is a JPanel.

<JFrame Title="Xholon meTTTa" DefaultCloseOperation="3"> <!-- 2 3 -->
   <JPanel Background="0xF0F0F0">
     <GridLayout Rows="3" Columns="3"/>
     <!-- row 1 -->
     <JButton ActionCommand="select0"/>
     <JButton ActionCommand="select1"/>
     <JButton ActionCommand="select2"/>
     <!-- row 2 -->
     <JButton ActionCommand="select3"/>
     <JButton ActionCommand="select4"/>
     <JButton ActionCommand="select5"/>
     <!-- row 3 -->
     <JButton ActionCommand="select6"/>
     <JButton ActionCommand="select7"/>
     <JButton ActionCommand="select8"/>
JButton {
 MinimumSize: "Dimension,70,70";
 PreferredSize: "Dimension,70,70";
 SetFont: "Monospaced,7,48";
 Background: MAGENTA;
     <JButton Text="New Game" ActionCommand="newgame"/>
     <Strut Height="10"/>
     <JButton Text="Computer First" ActionCommand="computerfirst"/>

return to main page