PDA

View Full Version : Problem regarding tabpane scrollbar

bhavana V
05-27-2008, 09:27 PM
Hi All,
I have a program with four Tabpanes .How to set the scrollbar for tabpane.In second tabpane have some data if suppose data will be more automatically the scrollbar will come to that tabpane . how to do it i tried but it will not come.

Here am sending my code (.lzx file and .xml file)................

This is the Laszlo file......

<canvas bgcolor="#E5E5E5">
<dataset name="invite" src="invite.xml"/>



<view x="4" y="0">
<text x="20" y="0" fontsize="14" fgcolor="#000080"><font face="Bookman Old Style"><b>Select Guests</b></font></text>

<tabs x="40" y="40" width ="800" height="180">


<tabpane >All
<simplelayout spacing="10"/>


</tabpane>


<tabpane bgcolor="#E5E5E5" inset_left="10" inset_top="10" inset_bottom="10" inset_right="10">Kids Friends


<text x="12" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">Name</font></text>
<checkbox x="0" y="20"><text x="16" datapath="invite:/inviteguests[1]/category1[1]/name[1]/text()"/></checkbox>
<checkbox x="0" y="40"><text x="16" datapath="invite:/inviteguests[1]/category2[1]/name[1]/text()"/></checkbox>
<checkbox x="0" y="60"><text x="16" datapath="invite:/inviteguests[1]/category3[1]/name[1]/text()"/></checkbox>
<checkbox x="0" y="100">All</checkbox>
<button x="40" y="100">Add NewGuest</button>


<text x="100" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">Comments</font></text>
<text x="100" y="60" fontsize="12" datapath="invite:/inviteguests[1]/category3[1]/comments[1]/text()"><font face="Bookman Old Style"></font></text>

<drawview>
<handler name="oncontext">
this.moveTo(194,0);
this.lineTo(194,200);

this.moveTo(310,0);
this.lineTo(310,200);

this.moveTo(540,0);
this.lineTo(540,200);

this.strokeStyle=000000;
this.lineWidth=1;
this.stroke();
</handler>
</drawview>
<text x="200" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">Kids</font></text>
<text x="210" y="20" fontsize="12" datapath="invite:/inviteguests[1]/category1[1]/kids[1]/text()"><font face="Bookman Old Style">2</font></text>
<text x="210" y="40" fontsize="12" datapath="invite:/inviteguests[1]/category2[1]/kids[1]/text()"><font face="Bookman Old Style">2</font></text>
<text x="210" y="60" fontsize="12" datapath="invite:/inviteguests[1]/category3[1]/kids[1]/text()"><font face="Bookman Old Style">1</font></text>

<text x="250" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">Adults</font></text>
<text x="260" y="20" fontsize="12" datapath="invite:/inviteguests[1]/category1[1]/adults[1]/text()"><font face="Bookman Old Style">1</font></text>
<checkbox x="280" y="20"/>
<text x="260" y="40" fontsize="12" datapath="invite:/inviteguests[1]/category2[1]/adults[1]/text()"><font face="Bookman Old Style">2</font></text>
<checkbox x="280" y="40"/>
<text x="260" y="60" fontsize="12" datapath="invite:/inviteguests[1]/category3[1]/adults[1]/text()"><font face="Bookman Old Style">1</font></text>
<checkbox x="280" y="60"/>

<text x="320" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">E-Mail</font></text>
<checkbox x="330" y="20"/>
<checkbox x="330" y="40"/>
<checkbox x="330" y="60"/>

<text x="380" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">SMS</font></text>
<checkbox x="390" y="20"/>
<checkbox x="390" y="40"/>
<checkbox x="390" y="60"/>


<text x="430" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">Call</font></text>
<checkbox x="440" y="20"/>
<checkbox x="440" y="40"/>
<checkbox x="440" y="60"/>

<text x="490" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">Print</font></text>
<checkbox x="500" y="20"/>
<checkbox x="500" y="40"/>
<checkbox x="500" y="60"/>

<text x="560" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">eD</font></text>
<checkbox x="570" y="40"/>
<checkbox x="570" y="60"/>

<text x="620" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">eVite</font></text>
<checkbox x="630" y="20"/>

<vscrollbar y="0" x="760"/>

<!--<scrollbar name="scr2" axis="y"/>
<method event="onmousewheeldelta" reference="LzKeys" args="k">
if(this.getAttribute('visible')){
if(k == -3){
scr2.page(1);
}else if(k == 3){
scr2.page(-1);
}
}
</method>-->


</tabpane>


<tabpane inset_left="10" inset_top="10" inset_bottom="10" inset_right="10">Family
<simplelayout spacing="10"/>

</tabpane>

<tabpane inset_left="10" inset_top="10" inset_bottom="10" inset_right="10">Extend Family
<simplelayout spacing="10"/>

</tabpane>

<tabpane inset_left="10" inset_top="10" inset_bottom="10" inset_right="10">Neighbours

</tabpane>

<tabpane inset_left="10" inset_top="10" inset_bottom="10" inset_right="10">Friends
</tabpane>

<tabpane inset_left="10" inset_top="10" inset_bottom="10" inset_right="10">Relatives
</tabpane>

<tabpane inset_left="10" inset_top="10" inset_bottom="10" inset_right="10">More ->
</tabpane>



</tabs>

</view>
</canvas>

This is the .xml file.........

<inviteguests>
<category1>
<name>Deva</name>
<comments></comments>
<kids>2</kids>
<adults>1</adults>
</category1>

<category2>
<name>Rajan</name>
<comments></comments>
<kids>2</kids>
<adults>2</adults>
</category2>

<category3>
<name>Pavan</name>
<comments>srinivas kid</comments>
<kids>1</kids>
<adults>1</adults>
</category3>
<category4>
<name>Pavan</name>
<comments>srinivas kid</comments>
<kids>1</kids>
<adults>1</adults>
</category4>

</inviteguests>


Any body plz help me..........

Thanks,
bhavana V
rcyeager
05-29-2008, 06:13 AM
To use a scrollbar, you need an outer view with a fixed size that clips and an inner view w/o a fixed size that contains the contents:


<canvas >
<view width="100" height="100" clip="true">
<view>
<simplelayout axis="y"/>
<text text="scroll me"/>
<text text="scroll me"/>
<text text="scroll me"/>
<text text="scroll me"/>
<text text="scroll me"/>
<text text="scroll me"/>
<text text="scroll me"/>
<text text="scroll me"/>
<text text="scroll me"/>
<text text="scroll me"/>
</view>
<vscrollbar/>
</view>
</canvas>


Robert Yeager
http://www.qrowd.com
http://www.cooqy.com
jaivardhan
05-29-2008, 11:22 PM
Hi,

Here is the way to include scrollbar in tab pane. I have introduced simplelayout to increase the content height.

<canvas bgcolor="#E5E5E5">
<dataset name="invite" src="invite.xml" />



<view x="4" y="0">
<text x="20" y="0" fontsize="14" fgcolor="#000080">
<font face="Bookman Old Style">
<b>Select Guests</b>
</font>
</text>

<tabs x="40" y="40" width="800" height="180">


<tabpane>
All
<simplelayout spacing="10" />


</tabpane>


<tabpane bgcolor="#E5E5E5" inset_left="10" inset_top="10" inset_bottom="10" inset_right="10">
Kids Friends
<view width="${parent.width - 20}" height="${parent.height - 20}" bgcolor="green" clip="true">
<view bgcolor="red" width="${parent.width}">
<simplelayout></simplelayout>
<text x="12" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">Name</font></text>
<checkbox x="0" y="20"><text x="16" datapath="invite:/inviteguests[1]/category1[1]/name[1]/text()"/></checkbox>
<checkbox x="0" y="40"><text x="16" datapath="invite:/inviteguests[1]/category2[1]/name[1]/text()"/></checkbox>
<checkbox x="0" y="60"><text x="16" datapath="invite:/inviteguests[1]/category3[1]/name[1]/text()"/></checkbox>
<checkbox x="0" y="100">All</checkbox>
<button x="40" y="100">Add NewGuest</button>


<text x="100" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">Comments</font></text>
<text x="100" y="60" fontsize="12" datapath="invite:/inviteguests[1]/category3[1]/comments[1]/text()"><font face="Bookman Old Style"></font></text>

<drawview>
<handler name="oncontext">
this.moveTo(194,0);
this.lineTo(194,200);

this.moveTo(310,0);
this.lineTo(310,200);

this.moveTo(540,0);
this.lineTo(540,200);

this.strokeStyle=000000;
this.lineWidth=1;
this.stroke();
</handler>
</drawview>
<text x="200" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">Kids</font></text>
<text x="210" y="20" fontsize="12" datapath="invite:/inviteguests[1]/category1[1]/kids[1]/text()"><font face="Bookman Old Style">2</font></text>
<text x="210" y="40" fontsize="12" datapath="invite:/inviteguests[1]/category2[1]/kids[1]/text()"><font face="Bookman Old Style">2</font></text>
<text x="210" y="60" fontsize="12" datapath="invite:/inviteguests[1]/category3[1]/kids[1]/text()"><font face="Bookman Old Style">1</font></text>

<text x="250" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">Adults</font></text>
<text x="260" y="20" fontsize="12" datapath="invite:/inviteguests[1]/category1[1]/adults[1]/text()"><font face="Bookman Old Style">1</font></text>
<checkbox x="280" y="20"/>
<text x="260" y="40" fontsize="12" datapath="invite:/inviteguests[1]/category2[1]/adults[1]/text()"><font face="Bookman Old Style">2</font></text>
<checkbox x="280" y="40"/>
<text x="260" y="60" fontsize="12" datapath="invite:/inviteguests[1]/category3[1]/adults[1]/text()"><font face="Bookman Old Style">1</font></text>
<checkbox x="280" y="60"/>

<text x="320" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">E-Mail</font></text>
<checkbox x="330" y="20"/>
<checkbox x="330" y="40"/>
<checkbox x="330" y="60"/>

<text x="380" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">SMS</font></text>
<checkbox x="390" y="20"/>
<checkbox x="390" y="40"/>
<checkbox x="390" y="60"/>


<text x="430" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">Call</font></text>
<checkbox x="440" y="20"/>
<checkbox x="440" y="40"/>
<checkbox x="440" y="60"/>

<text x="490" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">Print</font></text>
<checkbox x="500" y="20"/>
<checkbox x="500" y="40"/>
<checkbox x="500" y="60"/>

<text x="560" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">eD</font></text>
<checkbox x="570" y="40"/>
<checkbox x="570" y="60"/>

<text x="620" y="0" fontsize="12" fgcolor="#000080"><font face="Bookman Old Style">eVite</font></text>
<checkbox x="630" y="20"/>

</view>
<vscrollbar></vscrollbar>
</view>
</tabpane>


<tabpane inset_left="10" inset_top="10" inset_bottom="10"
inset_right="10">
Family
<simplelayout spacing="10" />

</tabpane>

<tabpane inset_left="10" inset_top="10" inset_bottom="10"
inset_right="10">
Extend Family
<simplelayout spacing="10" />

</tabpane>

<tabpane inset_left="10" inset_top="10" inset_bottom="10"
inset_right="10">
Neighbours

</tabpane>

<tabpane inset_left="10" inset_top="10" inset_bottom="10"
inset_right="10">
Friends
</tabpane>

<tabpane inset_left="10" inset_top="10" inset_bottom="10"
inset_right="10">
Relatives
</tabpane>

<tabpane inset_left="10" inset_top="10" inset_bottom="10"
inset_right="10">
More ->
</tabpane>



</tabs>

</view>
</canvas>