vertical tabslider

[zilent]

need to make a vertical tabslider, with another tabslider inside, how to do this? just like the amazon demo

i have been trying to use the "rotation" on the outher tabslider, but it gets kind of messy, another way around?

[caclark]

Well, I swiped the code from the Amazon demo and used it. If you get the Laszlo download that includes the source, you'll get the source to the demos/samples, too. The Amazon demo in there seems to be slightly older than what's running on the web, but it's really close.

[geoff.smith]

Here's a crude but functional vertical tabslider. Except there's an inexplicable space being put between the tabs.
Any improvemens would be appreciated.


<?xml version="1.0" encoding="UTF-8" ?>
<canvas width="100%" height="100%">

<font name="verity">
<face src="verity/verity11.ttf" style="plain"/>
<face src="verity/verity11bold.ttf" style="bold"/>
</font>

<class name="vbtn" extends="button" rotation="90" width="${parent.height}" text="default">
<attribute name="viewtoaffect" type="expression"/>


<method event="onclick">
<![CDATA[
if (viewtoaffect.hide.isapplied) {
viewtoaffect.showIt();
parent.parent.switchView(this.viewtoaffect.name);
} else {
viewtoaffect.hideIt();
}
]]>
</method>
</class>


<class name="vtcontent" extends="view" visible="true">

<method name="showIt">
this.hide.remove();
this.show.apply();
</method>
<method name="hideIt" event="oninit">
this.show.remove();
this.hide.apply();
</method>
<state name="show">
<animatorgroup duration="600" process="sequential">
<animator attribute="width" to="300"/>
<animator attribute="opacity" to="1.0"/>
</animatorgroup>
</state>
<state name="hide" apply="true">
<animatorgroup duration="200" process="sequential">
<animator attribute="opacity" to="0.0"/>
<animator attribute="width" to="0"/>
</animatorgroup>
</state>
</class>

<class name="vtcontainer" extends="view">
<method name="switchView" args="active_view">
<![CDATA[
for (var i=0; i < this.subviews.length; i++) {
var s = subviews[i].toString();
if (s.indexOf("vtcontent",0) == 0) {
if (subviews[i].name == active_view) {
subviews[i].showIt();
} else {
subviews[i].hideIt();
}
}
}
]]>
</method>
</class>

<window width="600" height="400" font="verity" fontsize="8" >
<vtcontainer x="30" height="300" width="550" bgcolor="silver">

<simplelayout axis="x" spacing="0"/>

<vtcontent name="content1" x="0" width="300" height="300" bgcolor="silver">
<text>tab1 content goes here</text>
</vtcontent>

<view width="20" height="300">
<vbtn text="tab1" viewtoaffect="${parent.parent.content1}">
</vbtn>
</view>

<vtcontent name="content2" x="0" width="300" height="300" bgcolor="silver">
<text>tab2 content goes here</text>
</vtcontent>

<view width="20" height="300">
<vbtn viewtoaffect="${parent.parent.content2}">tab2</vbtn>
</view>
</vtcontainer>
</window>
</canvas>

-Geoff

[dougpan]

Maybe this can help...

<canvas title="Net Software Group">
<debug y="300"/>
<font name="serifFont">
<face src="timmonsr.ttf"/>
<!--
I found that you need to embed a font otherwise you cant see the text.
-->
<face src="timmonsb.ttf" style="bold"/>
</font>
<!--
Added a bit of background shanding and center text or right justify
Here is the simple way to rotate your image. Just use rotation="-90" inside a view
-->
<view font="serifFont"
rotation="-90"
height="300" width="170"
x="175" y="180"
bgcolor="#CBC2A9"
name="vText">
<text font="serifFont" fontsize="18" align="center">
Administators Screen
</text>
</view>
<!--
Simple use of rotation="-90" in a view that contains a tabslider
-->
<view rotation="-90"
font="serifFont"
height="30" width="350"
x="200" y="170"
name="vTabSlider">
<!--
Place the tabslider within the view
-->
<tabslider width="150" height="270">
<tabelement text="Groups" fontsize="16" selected="true">
<!--
Found I had to use width="5" in each tabelement below to tell the view to start 5 pixels down from inside the top of the tabelement
-->

<view align="right" width="0" font="serifFont" fontsize="14" rotation="90">
<tabslider width="185" height="130">

<tabelement text="Head Office" fontsize="13" selected="true">
<radiogroup>
<radiobutton text="David Smith" font="serifFont" />
</radiogroup>
</tabelement>

<tabelement text="Reps" fontsize="13" selected="true">
<radiogroup>
<radiobutton text="Dave " font="serifFont" />
<radiobutton text="Doug Panchyshyn" font="serifFont" />
</radiogroup>
</tabelement>

<tabelement text="Managers" fontsize="13" selected="true">
<radiogroup>
<radiobutton text="Dave " font="serifFont" />
</radiogroup>
</tabelement>

<tabelement text="Administrators" fontsize="13" selected="true">
<radiogroup>
<radiobutton text="Dave " font="serifFont" />
</radiogroup>
</tabelement>

</tabslider>
</view>
</tabelement>

<tabelement text="Screens" fontsize="16" >
<view width="5" font="serifFont" fontsize="14" align="right" rotation="90">
<simplelayout axis="y" spacing="10"/>
<checkbox text="Index"/>
<checkbox text="Search"/>
<checkbox text="Categories"/>
<checkbox text="Users"/>
<checkbox text="Send Bullitins"/>
</view>
</tabelement>

<tabelement text="Categories" fontsize="16" >
<view width="5" font="serifFont" fontsize="14" align="right" rotation="90">
<simplelayout axis="y" spacing="10"/>
<checkbox text="Index"/>
<checkbox text="Search"/>
<checkbox text="Categories"/>
<checkbox text="Users"/>
<checkbox text="Send Bullitins"/>
</view>
</tabelement>

<tabelement text="Sub-Categories" fontsize="16" >
<view width="5" font="serifFont" fontsize="14" align="right" rotation="90">
<simplelayout axis="y" spacing="10"/>
<checkbox text="Index"/>
<checkbox text="Search"/>
<checkbox text="Categories"/>
<checkbox text="Users"/>
<checkbox text="Send Bullitins"/>
</view>
</tabelement>

</tabslider>
</view>
</canvas>

[dougpan]

Oh ya I almost forgot.

If you want to display the tab sliders diagonally all you have to do is change the view rotation to something like view rotation="-45".

Cool huh?

Doug

[sergiomb]

Originally posted by dougpan
Maybe this can help...
<canvas title="Net Software Group">
<debug y="300"/>
<font name="serifFont">
<face src="timmonsr.ttf"/>
<!--
I found that you need to embed a font otherwise you cant see the text.
-->
<face src="timmonsb.ttf" style="bold"/>
</font>


Hi this help me , but this of needing embed a font is a big bug isn't it ?
have you reported ?

[Shelby]

I believe you have to have an embedded font in order to rotate it.

[dougpan]

It would be nice if this was really a bug because it would require the Laszlo team to creat very complex code or a default font into the runtime of Laszlo, but as it is it is not really a bug.

I imagine the reason for them not including a built in font is so that developers like myself could keep an applications footprint really small if necessary.

Doug

[laby01]

Hi,
I'm new to Laszlo, and I just had a quick question about including a combobox inside the vertical tabslider (code kindly contributed by dougpan). Has anyone encountered the problem where the combobox and it's textlistitems are "disconnected" from each other? For example, you have your combobox located at position x="0", y="0" in the vertical tabslider and when you click on it to select an option, the textlistitems pop up somewhere in the middle of the tabslider, completely separate from the combobox itself.

I have been trying to figure out for a while on why it does that but still nothing. It would be really great if someone who has encountered this same problem could share the solution with me.

Thanks in advance.

[clillo]

I encountered the same problem as "laby01" described earlier where the combobox inside the vertical tabslider is totally disconnected from the combobox itself when you click on it.

I also been trying to resolve this problem but without much success so I'm looking for some help/guidance to fix this issue.

Thanks in advance

[dougpan]

I don't know if this helps but I've found that the best way to visualize what is happening, when you rotate a view is to work with physical pieces of paper.

One piece of paper per view. Each fitting inside the other.

For instance use two pieces of paper to physically represent one view inside the other. First place one large piece of paper on a table and then place another smaller piece of paper on top of it.

If you intend on rotating the inside piece of paper, remember that you are rotating it on its x,y axis of 0,0 inside the larger piece.

Once you rotate it, remember to keep track that you rotated the paper so that your horizontal has now becomes vertical, but when you work with it, it is actually still horizontal.

Placing a pin in the top left hand corner helps you determine where things went when you don't see anything appear on your screen. Remember that when you rotate that 0,0 (x,y) always stays where it is unless you change its horizontal and vertical axis.


E.g.
Not Rotated
0,0_____________________
| |
| |
| |
| 0,0______ |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| |________| |
| |
| |
| |
| |
|_______________________|

Rotated
0,0_____________________
| |
| |
| |
| 0,0________________|____
| | | |
| | | |
| | | |
| |__________________|____|
| |
| |
| |
| |
| |
| |
| |
|_______________________|

[clillo]

Thanks Doug for your explanation which clearly defined the concept.

A combobox in a rotated view display just fine but its contents when clicked are detached from the combo's location. Somehow I need to find the attributes of the contents and change it to the proper x,y coordinates.

Will you know which attributes I will need to change? I tried looking at the basecombobox file without any luck.

Thanks again.

Cesar

[dougpan]

Can you send me some sample code to give me a better concept of what is happening?

Please try to reduce the complexity of the code you send me by not including unnecessary surrounded code.

Doug

[clillo]

Here is a small sample using the vertical code you provide above; the combobox contents (textlistitem) will be disconected; you'll see what I mean when you run it:


<canvas title="Net Software Group">
<debug y="300"/>
<font name="serifFont">
<face src="timmonsr.ttf"/>
<face src="timmonsb.ttf" style="bold"/>
</font>

<view rotation="-90"
font="serifFont"
height="30" width="350"
x="200" y="170"
name="vTabSlider">

<tabslider width="150" height="270">
<tabelement text="Groups" fontsize="16" selected="true">

<view align="right" width="0" font="serifFont" fontsize="14" rotation="90">

<combobox id="cbox" x="5" y="5" width="130" editable="false">
<textlistitem text="Dark Blue" value="0x000055"/>
<textlistitem text="Turquoise" value="0x66dddd"/>
<textlistitem text="Light Blue" value="0xaaddff"/>
</combobox>

</view>

</tabelement>

</tabslider>
</view>

</canvas>

[dougpan]

Ken and I had a look at this and it seems like the textlistitem is acting as an independant object from the combobox so wrapping it in a view of its own without rotation helps.

Try this...


<canvas title="Net Software Group">

<view height="200" y="200" width="200" rotation="-90">

<text>hello there</text>
<view height="200" width="200" rotation="90">
<view x="20" y="-60" height="200" width="200">
<combobox id="cbox" width="130" editable="false">
<textlistitem text="Dark Blue" value="0x000055"/>
<textlistitem text="Turquoise" value="0x66dddd"/>
<textlistitem text="Light Blue" value="0xaaddff"/>
</combobox>
</view>
</view>

</view>

</canvas>

[clillo]

Your example code works just fine but as soon as you introduce the tabslider component inside the view you still get the combobox disconnection content (see attached image); here's what I tried with the code you provided:

<canvas title="Net Software Group">
<debug y="300"/>
<font name="serifFont">
<face src="timmonsr.ttf"/>
<face src="timmonsb.ttf" style="bold"/>
</font>

<view rotation="-90"
font="serifFont"
height="30" width="350"
x="200" y="170"
name="vTabSlider">


<tabslider width="150" height="270">

<tabelement text="Groups" fontsize="16" selected="true">

<view height="200" width="200" rotation="90" font="serifFont">

<view x="20" y="-60" height="200" width="200">
<combobox id="cbox" width="130" editable="false">
<textlistitem text="Dark Blue" value="0x000055"/>
<textlistitem text="Turquoise" value="0x66dddd"/>
<textlistitem text="Light Blue" value="0xaaddff"/>
</combobox>
</view>

</view>

</tabelement>

</tabslider>

</view>

</canvas>

[dougpan]

Rotations are like trying to fly two remote control helicopters at the same time toward you, one upside down and the other right side up, it can get really confusing.

I think you have two alternatives.

1. Keep playing around with the rotation and determine just what rotation is causing the texlistitems to appear elsewhere on the canvas by playing with the x and y values (e.g. x="-50" or x="10%" etc...)

or

2. You can avoid wrapping the combobox in a rotation view (just leave it outside like I did in the sample) and then make the combobox visible by utilizing the onclick event of the tabsider. (Remember to make invisible all other items you don't want appearing in your other tabsliders.)

The second one seems easiest if you want to get something up and running quickly. Just avoid using automatic layouts.

Doug

[dougpan]

Another thought...

You could grow and roll your own combo box by creating a class that has both a button (or view) to click on with a separate texlistitem-list that is dependant on the x,y values of the button (or view) so that it appears just below the button (or view) and a few pixels to the right.

Doug

[clillo]

Doug,
I want to thank you for taking the time to help me with this problem. At this time I decided to use the horizontal tabslider instead rather than just trying to get this to work. I will prefer and hope that at some point in the next releases of Laszlo this was part of the component.

Cesar

[fguigou]

Ok, all these improvements work fine when compiling to SWF, but none of them work well in DHTML.
Amazon sample is quite close to what we are talking about here, but the size of the whole panel is increased each time a pane is opened.
Did someone go any further with this ?

[fguigou]

I've seen many posts, asking for an horizontal tabslider.
The problem I had with "rotate" is that it doesn't work for DHTML (only SWF).
This is maybe a more general solution for horizontal tabslider :

http://forum.openlaszlo.org/showthread.php?p=30704#post30704

Of course, with "rotate" you can turn your slider in any angle you want.
htabslider is only horizontal, but works for both SWF and DHTML.