Tips and tricks for using pseudo CSS in OpenLaszlo 4

[digg=http://www.digg.com/programming/Tips_and_tricks_for_using_pseudo_CSS_in_OpenLaszlo_4] Having had to deal with this stuff lately with the Dokeos videoconference development, I thought it might be useful. The mainstream page is located on the Dokeos wiki, so in the following weeks, I recommend, looking at it over there. Here goes... The new version of the videoconference tool (to be out at the same time as Dokeos 1.8.5) can be theme-modified via CSS. Here are some tips and tricks to do this, as it is not completely using the CSS standards, but is largely inspired by them. You will need the videoconference tool sources (downloadable from SVN) in order to modify the style, and then you will need to recompile the application with OpenLaszlo 4, as the CSS is statically bound. Tips and tricks:
  • A CSS can be loaded from the main .lzx file by using the following syntax, right after the <canvas> tag opening:
	 <stylesheet src="resources/css/videoconf.css" />
  • The CSS cannot dictate the canvas dimensions. These have to be defined in the <canvas> tag attributes width and height.
  • When using a CSS, the property to be used has to be bound to the object by defining the object in t}e CSS with either:
    • in the case of an object having a specific tagname:
		 objectname{
		   property: xx;
		 }
    • in the case of having an id attribute in the object:
		 #objectid{
		   property: xx;
		 }
    • in the case of having a name attribute in the object:
		 [name='objectname']{
		   property: xx;
		 }
  • Underscores (_) cannot be used in object names or ids or name attributes because this will cause OpenLaszlo to break upon compilation
  • If you want do define a 'visible' attribute via CSS, you have to define this attribute last in the tag declaration, and you have to use a value of 0 or 1 (you cannot use true or false). The CSS property used could be 'display' (that sounds the closest to normal CSS)
  • Property values should be expressed without units (34 and not 34px). They will be considered as pixels.
  • If you want to load a specific resource (external image or something similar) through CSS, use the 'source' attribute in the OpenLaszlo object declaration, not the 'resource' attribute, which will want to load a previously-declared resource.
  • Resources "frame" tags do not appear to be an acceptable place where to put an "id" attribute...
Overall, the integration of CSS-style design is a very big improvements, as it provides an easy way for designers to contribute new styles without having to delve into the OpenLaszlo code. Here is a link to the official documentation of OpenLaszlo 4 and CSS