Warning:
This wiki has been archived and is now read-only.
Layout-containers
Initial ideas to extend DIAL with containers and simple layout policies
Contributors: José Manuel Cantera Fonseca, Telefónica I+D
Date: September 2007
Option 1 : Simple layout definition via CSS
DIAL might define a simple mechanism to specify the layout in a device independent schema. The mechanism is based on the definition of layouts using CSS and enables the redefinition of layouts for different kind of devices (using CSS Media Queries or DISelect). For example, a cool grid layout of two columns in a PDA could be redefined as a vertical layout for mobile phones. The mechanism will be based on the use of a CSS pseudoelement called -layout.
The -layout pseudoelement
This CSS pseudo element will be present for each container suitable of having a layout. The programmer will have to specify the layout parameters by means of a set of properties that will specify the behaviour of the associated layout manager bound to the container.
Core Layout properties
The following CSS properties can only be used inside a layout pseudoelement.
Name | Values | InitialValue | Applies when |
---|---|---|---|
-disposition | horizontal | vertical | grid | horizontal | |
-column-count | <number> | -disposition = grid | |
-columns-width | Comma separated list of <number> | -disposition = grid | |
-align | left | right | center | left | |
vertical-align | baseline | sub | super | top | middle | bottom | left | |
-gap | <number> | 0 | |
-vertical-gap | <number> | 0 |
CSS properties bound to DIAL elements for setting layout constraints
Also there will be CSS properties specific to UI components that will define specifc layout parameters. An initial list of those properties is detailed below:
Name | Values | InitialValue | Applies when |
---|---|---|---|
-column-span | <number> | 1 | -disposition = grid |
-row-span | <number> | 1 | -disposition = grid |
-expand | <boolean> | false | |
-vertical-expand | <boolean> | false |
Examples
<div id="mybox" class="bclass"> <input ref="name"> <label id="lname">Name:</label> </input> <textarea ref="desc"> <label id="ldesc">Description:</label> </textarea> <input ref="url"> <label id="lurl">URL:</label> </input> </div>
div.bclass::-layout { -disposition: grid; -columns: 2; -align: left; -gap: 2px; -gap-vertical: 2px; } label#lname { -column-span:2; } label#ldesc { -column-span:2; } label#lurl { -column-span:2; }
Result:
<div id="mybox" class="bclass dgclass"> <span class="lclass">John</span> <span class="lclass">Joy</span> <span class="lclass">Kell</span> <span class="lclass">Kim</span> </div>
div.dgclass::-layout { -disposition: grid; -columns: 2; } div.dvclass::-layout { -disposition: vertical; } div.bclass::-layout { -align: center; -gap: 2px; -gap-vertical: 2px; } span.lclass { -column-span:2; }
Result:
Open issues
- Re-read new layout specs coming from the CSS 3 WG and Microsoft
- What if an author wants to use both approaches
SMIL 2.0 Layout Module
NexaWeb's XAL declarative language (layouts)
CSS 3 Basic Box Module
CSS 3 Grid Positioning
CSS 3 Multicolumn Layout
CSS 3 Advanced Layout Module
CSS 3 Media Queries