Skinning

Just like a human skin the skin of the application covers the internal workings of an application. It gives a face to your application with which a human can communicate. Skinning can be used for branding and for optimizing the user experience. As said earlier Platform has a strict seperation of style. It allows a designer/developer to create skins with absolute freedom (limited to the reach of XHTML/CSS).

Javeline Platform comes with two sets of predefined skins. One is a standard Windows like skin. The other is a more original Javeline skin called Perspex. When creating an application I usually don’t want to be bothered with skinning. What I love about the clear seperation is that at any point in time I can choose to change the skin without affecting the application itself. I can work together with a designer on the same application without getting in eachothers way.

How to define a skin in Javeline Platform
A skin for Javeline components is defined in an xml file. This xml file contains skins for multiple components. Each component has its own skin definition which tells it how to draw itself on the screen. A skin is defined by a skin name. You can specify a default skin for a component by giving it the component’s tagName. Each skin consists of a <Style> section which contains the css, and a <Presentation> section which holds the XHTML definition. Let me give you an example of a simple skin for a Button (I left estethics out of this example):

<Button>
   <style><![CDATA[
      .button{
         border : 1px solid black;
         background-color : blue;
      }
      .buttonDown{
         background-color : green;
      }
      .buttonOver{
         border : 1px dotted black;
      }
      .buttonFocus{
         background-color : red;
      }
      .buttonDisabled{
         background-color : gray;
      }
   ]]></style>   

   <Presentation>
      <Main
         caption="./text()"
         icon="."
         background=".">
         <div class='button'>-</div>
      </Main>
   </Presentation>
</Button>

View Example

The controller of the widget, in this case the Button, will set the appropriate classes on the div element that is created. It uses the class of the div to set new classnames to define the button’s state. These states differ per component. In a later example I will show you the skin of a Tree which has more than 20 states. The states of the button are quite self-explanatory. The controller needs to know certain things about the XHTML you’ve specified. In the case of the button it wants to know which textnode to set for the caption, where to set the icon (either on an img tag, or as a background of an XHTML element) and where to set the background. These are set by attributes on the Main tag using Xpath expressions to point to the XHTML nodes.

The skin for a Tree element is fairly advanced. Only the skin of the datagrid has more parts. For clarity i’ve left out the CSS rules in the next example.

<Tree>
   <style><![CDATA[
      .tree{}
      .treeFocus{}
      .treeDisabled{}

      .tree .loading{}
      .tree .empty{}

      /* States of the plusmin button */
      .tree LI.last{}
      .tree LI.pluslast{}
      .tree LI.minlast{}
      .tree LI.plus{}
      .tree LI.min{}
      .tree LI.root{}

      /* Same states on the container */
      .tree UL.last{}
      .tree UL.pluslast{}
      .tree UL.minlast{}
      .tree UL.pluslast{}
      .tree UL.minlast{}
      .tree UL.last{}
      .tree UL.root{}

      /* Selection states */
      .tree .selected{}
      .treeFocus .selected{}
      .tree .indicate{}
      .treeFocus .indicate{}

      /* Drag&Drop states */
      .dragtree{}
      .tree .dragAppend{}
      .treeFocus .dragAppend{}
      .tree .dragInsert{}
      .tree .dragDenied{}
   ]]></style>

   <Presentation>
      <Main container="." startclosed="false">
         <ul class="tree">

         </ul>
      </Main>
      <Item
         class         = "."
         caption      = "text()"
         icon         = "."
         openclose   = "span"
         select      = "."
         container   = "ul"
      >
         <li><span></span>-
            <ul> </ul>
         </li>
      </Item>
      <DragIndicator>
         <div class='dragtree'><span></span>-</div>
      </DragIndicator>
      <Loading>
         <li class="loading">
            <span> </span>
            Loading...
         </div>
      </Loading>
      <Empty container=".">
         <li class="empty"></li>
      </Empty>
   </Presentation>
</Tree>

The Tree component has numerous states. Besides the basic ones, the controller sets states for selection, drag&drop and to specify wether or not an item is collapsed. Lets take a look at the Presentation part. Besides the Main part which we saw before in the button skin, there are four other parts. A tree can be filled with items. The <Item> tag specifies how an item is rendered and which elements take on which functionality. An item can have child items. Each item can have a caption, icon, and a openclose button to collapse it’s children. This example renders a simple tree from ul and li elements. The Javeline windows skin package has a more advanced skin, which uses more XHTML/CSS elements. The other elements describe how other states are rendered; DragIndicator, Loading and the Empty state.

Pages: 1 2 3 4 5 6 7 8 9 10 11