Mapping an object to a string

[klercker]

My specific problem is that i want to style dynamic <listitem>s from values in a (XML) dataset:

<set>
<item style="green"/>
<item style="silver"/>
<item style="green"/>
<set>

would dynamically be used to generate for example a combobox like:

<combobox>
<textlistitem style="greenstyle"/>
<textlistitem style="silverstyle"/>
<textlistitem style="greenstyle"/>
</combobox>

So, I need a way to map the XML attribute string "green" to the class "greenstyle", the string "silver" to the class "silverstyle" etc. Of course, JavaScript is all about maps (every object is one), but I can't figure out how the code would look. Can someone please help?

cheers,
/Måns

[klercker]

BTW, this is how my attempt at solving this would look:

<canvas width="200" height="130">
<class name="mylistitem" extends="textlistitem" width="100%" height="20" style="${this[this.bgstyle]}">
<attribute name="bgstyle" type="string"/>
<greenstyle name="gs" selectedcolor="iceblue4"/>
<purplestyle name="ps" selectedcolor="iceblue4"/>
<method name="init">
super.init();
this["green"] = gs;
this["purple"] = ps;
</method>
</class>

<dataset name="items">
<item value="item1" style="green">item one</item>
<item value="item2" style="green">item two</item>
<item value="item3" style="purple">item three</item>
<item value="item4" style="green">item four</item>
</dataset>

<combobox x="5" y="5"
width="130" editable="false">
<mylistitem datapath="items:/item" text="$path{'text()'}"
bgstyle="$path{'@style'}"/>
</combobox>
</canvas>

It compiles and runs, but does not give the result I expect, the combo items in glourious color. Can it have something to do when the attribute "bgstyle" binds? I dunno... Any help would be greatly appreciated!

cheers,
/Måns

[metasarah]

The way to turn a string into an object is to use the [ ] syntax instead of dot. For example: this.foo is the same as this['foo']

While you can declare styles anywhere you want, its more efficient to declare them globally if they will be used by several components.

To bind an attribute to a specific datapath, you can use the $path{'xpath expression'} syntax.

Here's some code which does what you propose:


<canvas>

<greenstyle name="green"/>
<bluestyle name="blue"/>
<purplestyle name="purple"/>

<dataset name="mydata">
<set>
<item style="green" name="one"/>
<item style="silver" name="two"/>
<item style="purple" name="three"/>
</set>
</dataset>

<simplelayout/>
<combobox id="c" datapath="mydata:/set">
<textlistitem id="t" datapath="item"
style="${canvas[this.stylename]}" text="$path{'@name'}">
<attribute name="stylename" value="$path{'@style'}"/>
</textlistitem>
</combobox>

</canvas>


If I were doing this for real, I would definitely make a subclass of textlistitem like you did in your example, rather than just declaring an attribute on the instance.

[klercker]

Hi Sarah!

Just a few questions/comments re your great answer (thanks a M for that!) and the various issues you brought up:

1. If you declare any object with a @name, will it be always accessible as a property of its parent (like the named styles under canvas)?

2. JS spec (sec 11.2.1) specifies that obj.prop and obj['prop'] are identical in behavior. Is this the case in your JS implementation too, I couldn't quite make it out from your answer?

3. I haven't been able to find any docs on how declared objects become available to JS expressions (like the canvas being available as a global canvas variable etc.). In general, the JS integration docs are somewhat lacking, although there are plenty of examples scattered about to steal from. Or am I just looking in the wrong places?

4. From your performance note re declaring the styles globally, I gather that there is no similar functionality to the "static" keyword for Java classes? Perhaps this would be a nice addition?

Thanks again for a quick answer (and, of course, a great product), if this is the level of support we (l)users are going to get, I will certainly consdier doing a lot of dev with Laszlo in the future.

cheers,
/Måns

[metasarah]

Originally posted by klercker
1. If you declare any object with a @name, will it be always accessible as a property of its parent (like the named styles under canvas)?

Yes. The enclosing view is the parent. "canvas" is a global identifier. The XML node hierarchy can be accessed using Javascript.

<canvas>
<view name="foo">
<view name="bar"/>
</view>
<button onclick="parent.foo.bar.setX(100)"/>
</canvas>


2. JS spec (sec 11.2.1) specifies that obj.prop and obj['prop'] are identical in behavior. Is this the case in your JS implementation too, I couldn't quite make it out from your answer?

Yes. That is what I was trying to say.

3. I haven't been able to find any docs on how declared objects become available to JS expressions (like the canvas being available as a global canvas variable etc.). In general, the JS integration docs are somewhat lacking, although there are plenty of examples scattered about to steal from. Or am I just looking in the wrong places?

Have you found the developer's guide? It's distributed with LPS or on-line at: http://www.laszlosystems.com/lps-2.2/docs/guide/

This specific question is addressed in part here:
http://www.laszlosystems.com/lps-2.2/docs/guide/views-tutorial.html

4. From your performance note re declaring the styles globally, I gather that there is no similar functionality to the "static" keyword for Java classes? Perhaps this would be a nice addition?

no. I've always wanted something like that and maybe it will be added someday. In your particular styles example you still might want to use a style across multiple components of different types, so I wouldn't use a static in that case necessarily.

Thanks again for a quick answer (and, of course, a great product)

you're welcome :)

Sarah

[klercker]

Have you found the developer's guide? It's distributed with LPS or on-line at: http://www.laszlosystems.com/lps-2.2/docs/guide/

This specific question is addressed in part here:
http://www.laszlosystems.com/lps-2....s-tutorial.html

I did find it and found it very good indeed, but perhaps there should be more of a JS scripting reference somewhere, where info such as this could be easily found? All info I need probably is there somewhere, I just wished it could be destilled and condensed for easy reference, like the tags, classes and component references.

no. I've always wanted something like that and maybe it will be added someday. In your particular styles example you still might want to use a style across multiple components of different types, so I wouldn't use a static in that case necessarily.

So, if I used those <style> declarations within a class def, those style classes would be instantiated once in every instatiation of the declaring class? If I would create some kind of library with my colorized comboboxes, how would I go about creating a decently performant implementation (since I wouldn't want to rely on a library users declaring those styles themsleves)? I guess this goes for any "programmatic resource" that you want to create for your libraries.

cheers,
/Måns