PDA

View Full Version : Fun with Tabslider...

mdavis
02-28-2003, 02:52 PM
Here's a quick example of some of the fun you can have with tabslider. There are a total of 4 files for this little web-toy. The image you need is attached (grad_15.png)

This is designed to replace the left navigation area of most sites with a Laszlo app. It uses the tabslider component and LzBrowser.loadURL.

I just loaded a couple of links to outside sites that I like, the real use would be to link to internal pages.


File 1: Frameset

<html>
<head><title>Mark's Toy</title></head>
<frameset COLS="128,*" border="1">
<frame NAME="md_lz_nav" src="nav_l.html"></frame>
<frame NAME="md_lz_main" src="index.html"></frame>
</frameset>
</html>

The two important bits there are the names of the frames, we'll need those later.

File 2: LZX Wrapper (nav_l.html)

<html><head><title>Laszlo Application</title>
<link rel="SHORTCUT ICON" href="http://www.laszlosystems.com/images/laszlo.ico"></head>

<body bgcolor="white" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
width="128" height="400" >
<param name="movie" value="http://lyta:8080/lps-dr/my-apps/nav.lzx?lzt=swf"/>
<param name="quality" value="high"/>
<param name="scale" value="exactfit"/>
<param name="salign" value="LT"/>
<param name="menu" value="false"/>
<param name="bgcolor" value="#ffffff"/>
<embed src="http://lyta:8080/lps-dr/my-apps/nav.lzx?lzt=swf"
quality="high"
scale="exactfit"
salign="lt"
width="128"
height="400"
bgcolor="#ffffff"
type="application/x-shockwave-flash"
other="foo"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"/>
</object>
Click on one of the teal bars above to navigate!
</body></html>


And now the tabslider Navigation Bar: (nav.lzx)


<canvas width="128">
<resource name="g" src="grad_15.png"/>
<include href="lz/tabslider.lzx"/>
<tabslider id="tslider"
oninit="this.opentab(this.title,true)"
bgcolor="white"
height="immediateParent.height"
width="immediateparent.width"
spacing="0"
minTabHeight="15"
slideDuration="333" >
<tabelement name="title" bgcolor="0x408080">
<view resource="g" stretches="width" width="parent.width"/>
<text fgcolor="white">Mark's Laszlo Thing</text>
</tabelement>
<tabelement bgcolor="0x1b5d6d">
<view resource="g" stretches="width" width="parent.width"/>
<text fgcolor="white">Search</text>
<text y="15" fgcolor="white"
onclick="LzBrowser.loadURL('http://www.google.com','md_lz_main')">Google</text>
</tabelement>
<tabelement bgcolor="0x1b5d6d">
<view resource="g" stretches="width" width="parent.width"/>
<text fgcolor="white">News</text>
<text y="15" fgcolor="white"
onclick="LzBrowser.loadURL('http://linuxtoday.com','md_lz_main')">Linux News</text>
</tabelement>
<tabelement bgcolor="0x1b5d6d">
<view resource="g" stretches="width" width="parent.width"/>
<text fgcolor="white">Sports</text>
<text y="15" fgcolor="white"
onclick="LzBrowser.loadURL('http://www.sj-sharks.com','md_lz_main')">Sharks' Homepage</text>
<text y="30" fgcolor="white"
onclick="LzBrowser.loadURL('http://sports.yahoo.com/nhl/teams/san','md_lz_main')">Yahoo! Sharks</text>
</tabelement>
<tabelement bgcolor="0x1b5d6d">
<view resource="g" stretches="width" width="parent.width"/>
<text fgcolor="white">Comics</text>
<text y="15" fgcolor="white"
onclick="LzBrowser.loadURL('http://www.userfriendly.org','md_lz_main')">User Friendly</text>
</tabelement>
<tabelement name="dev" bgcolor="0x1b5d6d">
<view resource="g" stretches="width" width="parent.width"/>
<text fgcolor="white">Dev</text>
<text y="15" fgcolor="white"
onclick="LzBrowser.loadURL('http://lyta','md_lz_main')">lyta</text>
</tabelement>
</tabslider>
</canvas>


Enjoy!
~davis
mdavis
03-03-2003, 02:42 PM
Below is an example of using the natural inheretance to propagate some parameters. This replaces the sports tabelement and has a couple of nice things about it.

#1 the bgcolor is darker than the tab header, so the sunken look is reinforced.

#2 using simplelayout saves us from having to place the links

#3 fgcolor is inhereted by the links


<tabelement bgcolor="0x1b5d6d">
<view resource="g" stretches="width" width="parent.width"/>
<text fgcolor="white">Sports</text>
<view y="15" fgcolor="white" clickable="false" width="parent.width" height="parent.height - 15" bgcolor="0x0b4d5d">
<simplelayout axis="y"/>
<text onclick="LzBrowser.loadURL('http://www.sj-sharks.com','md_lz_main')">Sharks' Homepage</text>
<text onclick="LzBrowser.loadURL('http://sports.yahoo.com/nhl/teams/san','md_lz_main')">Yahoo! Sharks</text>
</view>
</tabelement>
mdavis
03-04-2003, 04:07 PM
Well mannered tabs would put themselves away if they were currently open...

If you name all your tabs properly, they can be opened and closed from one another. So ab A could open tab B if A was already open:

<tabelement name="t2" bgcolor="0x1b5d6d">
<view resource="g" stretches="width" width="parent.width"
onclick="if (tslider.t2.height!=tslider.t2.minheight)
{tslider.opentab(tslider.t1,true)}
else
{tslider.opentab(parent,true)}"/>
<text fgcolor="white">News</text>
<view y="15" fgcolor="white" width="parent.width" height="parent.height - 15" bgcolor="0x0b4d5d">
<simplelayout axis="y"/>
<text onclick="LzBrowser.loadURL('http://linuxtoday.com','md_lz_main')">Linux News</text>
<text onclick="LzBrowser.loadURL('http://slashdot.org','md_lz_main')">Slashdot</text>
</view>
</tabelement>
<tabelement name="t3" bgcolor="0x1b5d6d">
<view resource="g" stretches="width" width="parent.width"
onclick="if (parent.height!=parent.minheight)
{tslider.opentab(tslider.t2,true)}
else
{tslider.opentab(parent,true)}"/>
<text fgcolor="white">Sports</text>
<view y="15" fgcolor="white" width="parent.width" height="parent.height - 15" bgcolor="0x0b4d5d">
<simplelayout axis="y"/>
<text onclick="LzBrowser.loadURL('http://www.sj-sharks.com','md_lz_main')">Sharks' Homepage</text>
<text onclick="LzBrowser.loadURL('http://sports.yahoo.com/nhl/teams/san','md_lz_main')">Yahoo! Sharks</text>
</view>
</tabelement>

Ugly code, but well mannered tabs :p