Warning:
This wiki has been archived and is now read-only.

Layout-containers

From UWA

Jump to: navigation, search

1 Initial ideas to extend DIAL with containers and simple layout policies

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:

Error creating thumbnail: Unable to save thumbnail to destination

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:

Error creating thumbnail: Unable to save thumbnail to destination