Layout-containers

From UWA
Jump to: navigation, search

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

Example 1

<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:

OpenWavevsPDAGrid.jpg OpenWavevsPDAVertical.jpg

Example 2

<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:

OpenWaveGridLayout.jpg OpenWaveHorizontalLayout.jpg OpenWaveVerticalLayout.jpg

Open issues

  • Re-read new layout specs coming from the CSS 3 WG and Microsoft
  • What if an author wants to use both approaches

References and related specs

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