Personal tools

Gotchas

From OpenLaszlo

Contents

[edit]

Views

[edit]

Views overlap by default

This will draw two lines of text on top of each other: 

 <canvas>
   <text>line one</text>
   <text>line two</text>
 </canvas>

To lay them out automatically, you need a layout object: 

 <canvas>
   <simplelayout/>
   <text>line one</text>
   <text>line two</text>
 </canvas>

or: 

 <canvas layout="axis: y">
   <text>line one</text>
   <text>line two</text>
 </canvas>
[edit]

The default view is invisible

The default view has no content, and no size. This won't display: 

 <view/>

and neither will these: 

 <view width="10" height="10"/> // no content
 <view bgcolor="red"/> // a zero by zero box

To make a view display something, give it a size and a color: 

 <view width="10" height="10" bgcolor="red"/>

or put something an image or another view inside: 

 <view source="image.jpeg"/>
 <view><text>some text</text></view>
[edit]

Fonts disappear when rotated / fonts ignore opacity

Client fonts (such as the default font) disappear when rotated, and (mostly) ignore the opacity parameter.

This is a limitation of the Flash player. Use an embedded font if rotation or opacity is required.

[edit]

Text is fixed width

Text fields stay the same size by default, even when their content changes. To make a text field track the size of its content set the resize attribute to true. 

   <text resize="true">Some text that will be changed</text>
[edit]

Views become invisible when opacity=0

This produces odd effects in programs that use automatic layout; e.g. 

 <canvas layout="axis: x"/>
   <view width="20" height="20" bgcolor="red"/>
   <view width="20" height="20" bgcolor="blue" onclick="animate('opacity', 0, 1000)"/>
   <view width="20" height="20" bgcolor="green"/>
 </canvas>

This behavior can be avoided by declaring visibility explicitly; e.g. 

 ...
   <view width="20" height="20" bgcolor="blue" onclick="animate('opacity', 0, 1000) visible="true"/>
 ...
[edit]

Data

[edit]

Datasets don't load by default

This won't display anything, even if the dataset has the right shape: 

 <canvas>
   <dataset name="ds" src="http:data.xml"/>
   <text datapath="ds:/row/@name"/>
 </canvas>

You need to use the request="true" attribute on <dataset>. It's false by default (so the dataset won't request the data until ds.doRequest() is called).

[edit]

XPaths require a final text()

XML elements aren't implicitly converted into text when a string is needed, as they are in XPath and XSLT. This won't display anything: 

 <text datapath="ds:/path/to/data"/> // no text

You need this: 

 <text datapath="ds:/path/to/data/text()"/>

Attributes, on the other hand, are treated as strings. 

 <text datapath="ds:/path/to/@data"/> // works
[edit]

Databound text changes width

The two lines below will have a different width, even when ds:/text/text() evaluates to "text". 

 <text>text</text>
 <text dataset="ds:/text/text()"/>

This is because the size of a text field is computed when the program is compiled, and is never updated automatically.

[edit]

SOLO datasets request a different URL

SOLO dataset requests add a query parameter that isn't present in the source or API URL, unless the cache="client" attribute is set.

[edit]

Extra node during data replication

Replicated elements (elements that are replicated due to databinding) have an extra, invisible element. This leads to a number of confusing symptoms.

[edit]

Data APIs are complex

LZX supports the W3 DOM APIs, but they're hard to find among the other methods.

[edit]

Other

[edit]

Multiple-step constraints don't work

In a multiple-step constraint such as <view width="obj.a.b"/> the view's width will update if the value of the b property of obj.a changes, but it won't update if the value of the a property of obj changes, even though this will also generally cause the value of obj.a.b to change. This means that constraints can't be used alone to implement a Master-Detail Interface.

[edit]

JavaScript and XML colors have different syntaxes

Javascript colors are numbers. red is the name of a global variable. 

 view.setAttribute('bgcolor', 'red') // wrong; won't work
 view.setAttribute('bgcolor', red) // right

The 0xFF0000 syntax is Javascript, not XML. The first line below doesn't work; the remaining ones use valid CSS color specifiers, and do. 

 <view bgcolor="0xFF0000"/> // invalid color
 <view bgcolor="#FF0000"/>
 <view bgcolor="#F00"/>
 <view bgcolor="red"/>
 <view bgcolor="rgb(1.0, 0, 0)"/>

(But none of these will draw anything; see the "View size" gotcha, above.)

[edit]

initstage doesn't do what you think

The initstage attribute applies to the children of the element it's attached to, not to the element itself. For example, the following fragment will defer the instantiation of the <text> view, not the <view> that contains it. 

 <view initstage="defer">
   <text>child</text>
 </view>
[edit]

attributes only accept numeric data by default

The attribute tag need the type="string" if you give the "value" anything other than a number.

This does throws the error: "reference to undefined variable 'hello' ": 

 <view >
   <attribute name="MyAttrib" value="hello" />
 </view>

This works: 

 <view >
   <attribute name="MyAttrib" value="hello" type="string" />
 </view>
Retrieved from "http://wiki.openlaszlo.org/Gotchas"