combobox usage

[Peter_Chea]

are there examples on how to use the combobox. I try several things and have no luck. Here is what I have. None display the 12 months.

<canvas width="800" height="600" debug="true">
<dataset name="months">
<month>January</month>
<month>February</month>
<month>March</month>
<month>April</month>
<month>June</month>
<month>July</month>
<month>August</month>
<month>September</month>
<month>October</month>
<month>November</month>
<month>December</month>
</dataset>



<view name="mainView" width="800" height="600">


<combobox name="combo1" datapath="months:/month" width="400" shownitems="20"/>
<combobox datapath="months:/month/" width="400" shownitems="20"/>
<combobox datapath="months:/month/text()" width="400" shownitems="20"/>
<combobox datapath="months:/month[1-12]/text()" width="400" shownitems="20"/>

<view datapath="months:/month">
<combobox name="test2" datapath="text()" width="400" shownitems="20"/>
</view>
<simplelayout axis="y"/>
</view>
</canvas>

[antun]

Hey Peter_Chea

There is a bug with the combobox that ships with LPS-DR. We're working on new components altogether, so the combobox got left behind.

People have asked about this before - the best thing is to write something that works for your application. I would not recommend (although you can certainly try) looking at the source for combobox, as it is written in a much earlier style of LZX.

-Antun

[Peter_Chea]

Antun, is there a replacement for it in this version or the next version of laszlo server?

[antun]

It's not fixed yet, so it won't be corrected in the upcoming (next few weeks) release. The new, working combobox will be part of the components that will be shipped in the release after that (a few months).

-Antun

[Peter_Chea]

Antun, we need the dropdown because it is use alot in our application. I saw a dropdown in the calendar demo. It is after you go to detail and click on repeating event. By the way, dropdown and comboxbox are the same class right?

[antun]

The calendar demo was written a long time ago, and generated so we could continue to demo it without updating the code. As a result there is no code I can simply pull out from the calendar demo as it stands now, and hand to you. It won't work with the current version of the LPS.

I'll try to get you something to work with.

-Antun

[antun]

Here's a start to a pulldown in modern-day LZX. It's very raw, but feel free to tweak it depending on your needs.

This example has a pulldown button, can accept an XML dataset as its source, and can retrieve a value.

Extract the zip file, and run custompulldown_test.lzx . The button's there to show you how to retrieve the value.

Let me know how you get on.

-Antun

[Peter_Chea]

Thanks for the source. I am trying to modify the code to suit my need. Curently when the dropdown portion of the view appear, it push the rest of the view down. which is not what I what. Is there anyway to make it so it wouldn't affect the layout of other views or clip by other views.

[antun]

If you wrap the entire pulldown in a view with a fixed height, e.g.


<view height="20">
<custompulldown name="leaveMonth" width="142"
itempath="months:/month/text()" />
</view>


...would wrap an instance of the pulldown, or better still give the enclosing <class> tag a fixed height:


<class name="custompulldown" bgcolor="white" height="20">


... would get you the behaviour you want. The second method works because the class custompulldown class extends view by default.

The inside views will still grow and shrink as before - they won't get clipped, unless you set the clip="true" attribute.

-Antun

[Peter_Chea]

Now it is going under the the other views. Here is what I have. Try clicking on one of the month dropdown under travel.lzx.

[antun]

What you have to do is bring the combobox to the front when its clicked. I've done that in the attached LZX file.

In your case what I also had to do was to pass a variable to the class instance that specified which view to actually bring to front. This is because with the nesting, just bringing the instance of the combobox to the frontwasn't enough - I had to bring its parent to to the front. So when instantiating th


<view>
<text width="40">leave </text>
<custompulldown name="month" width="100"
itempath="months:/month/text()">
<attribute name="btfParent" init="this.parent" />
</custompulldown>
<custompulldown name="day" width="40"
itempath="days:/day/text()">
<attribute name="btfParent" init="this.parent" />
</custompulldown>
<custompulldown name="ampm" width="40"
itempath="ampm:/ampm/text()">
<attribute name="btfParent" init="this.parent" />
</custompulldown>

<simplelayout axis="x" spacing="5"/>
</view>


That way the encasing view gets brought to the front.

-Antun

[Peter_Chea]

please post bringToFront method:
custompulldown.lzx:57: call to undefined method 'bringToFront'

[antun]

bringToFront() is a method of View.

You are running travel.lzx, right?

-Antun

[Peter_Chea]

yes I am running travel.lzx. Somehow it couldn't find the bringToFront method.

[antun]

The travel.lzx you sent me does not include the updated code. You have to set the btfParent attribute when you instantiate the custompulldowns, like I explained in a previous post:


<custompulldown name="month" width="100"
itempath="months:/month/text()">
<attribute name="btfParent" init="this.parent" />
</custompulldown>


You pass it a pointer to the view that needs to be brought to the front (in most cases the parent).

-Antun

[Peter_Chea]

Thanks, It works for the first parent. I will try recursively loop up to handle the parent's parent and so on.

[antun]

The best thing to do is to specify the one parent that needs to be brought to the front.

Looping recursively might affect other parts of the app. The one place I think you might have to re-arrange some elements is where the tabelement clips the pulldown. Here I would say that you should set the maximum height of the pull down, and maybe give it a scrollbar?


I will try recursively loop up to handle the parent's parent and so on.

[johnagrandy]

<custompulldown name="month" width="100" itempath="months:/month/text()">
<attribute name="btfParent" init="this.parent" />
</custompulldown>

how is a simple attribute (btfParent) of an instance of a custom class (custompulldown) able to be referred in the class' code as if it was the containing view of the instance?

<method event="onclick">
parent.toggle();
parent.btfParent.bringToFront();
</method>

doesn't make sense to me.

[antun]

This bit of code:


<attribute name="btfParent" init="this.parent" />


sets an attribute of the enclosing view (called btfParent) to a pointer to its parent. This is actually quite common in JavaScript, for example, you might also do something like:


<dataset name="myDataset" ... />

... later, in script ...

var ds = canvas.datasets.myDataset;
var p = ds.getPointer();


-Antun