Div with vflex

answered 2007-07-19 01:40:09 +0800

admin
18691 ● 1 ● 10 ● 130

Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4420787

By: jebberwocky

Dear Bobo

Kool. Can you provide a short demo?

//Jeff

answered 2007-07-19 07:40:59 +0800

admin
18691 ● 1 ● 10 ● 130

Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4421083

By: bobobobo

Download the code and lib here:
http://www.easit.com/download/code/div-vflex.zip

Put div-vflex.jar (located in the lib directory) in your WEB-INF/lib directory.


Here is some zul that creates three windows, and the middle one extends to fill all available space in the browser window.

<?page id="mainPage" title="Hello" ?> <zk> <window border="normal" title="window">
This is my header window
</window>
<window border="normal" title="window">
<div mold="vflex">
This is my my content window
</div>
</window>
<window border="normal" title="window">
This is my footer window
</window>
</zk>

Hope you find it useful!

/Bobo

answered 2007-07-20 08:34:52 +0800

admin
18691 ● 1 ● 10 ● 130

Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4422854

By: vstyran

Hi Bobo,

You have done greate work. It's help me very much.
Thanks a lot.

answered 2007-07-20 12:27:32 +0800

admin
18691 ● 1 ● 10 ● 130

Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4423152

By: bobobobo

The vflex mold is now available through Div-Plus in ZK.Forge.
Div-Plus also supports a mold called childflex which resizes all childrens height to the divs height.
This can be used for complex layouts like the one shown on this picture http://www.easit.com/download/code/childflex.jpg

The .zul looks like this:
<?page id="mainPage" title="Hello" ?> <zk>
<div mold="vflex" style="height:200px;" width="600px">
<div width="400px" style="float:left; height:100%">
<div mold="childflex" style="float:left;width:200px;background:green;
height:50%">
<listbox rows="0">
<listhead sizable="true">
<listheader label="name" sort="auto"/>
<listheader label="gender" sort="auto"/>
</listhead>
<listitem>
<listcell label="Mary"/>
<listcell label="FEMALE"/>
</listitem>
<listitem>
<listcell label="John"/>
<listcell label="MALE"/>
</listitem>
</listbox>
</div>
<div mold="childflex" style="float:left;width:200px;background:brown;
height:50%">
<listbox rows="0">
<listhead sizable="true">
<listheader label="name" sort="auto"/>
<listheader label="gender" sort="auto"/>
</listhead>
<listitem>
<listcell label="Mary"/>
<listcell label="FEMALE"/>
</listitem>
<listitem>
<listcell label="John"/>
<listcell label="MALE"/>
</listitem>
</listbox>
</div>
<div mold="childflex" style="clear:both;float:left;width:400px;background:yellow;
height:50%">
<listbox rows="0">
<listhead sizable="true">
<listheader label="name" sort="auto"/>
<listheader label="gender" sort="auto"/>
</listhead>
<listitem>
<listcell label="Mary"/>
<listcell label="FEMALE"/>
</listitem>
<listitem>
<listcell label="John"/>
<listcell label="MALE"/>
</listitem>
</listbox>
</div>
</div>
<div mold="childflex" style="float:left;width:200px;background:blue;
height:100%">
<listbox rows="0">
<listhead sizable="true">
<listheader label="name" sort="auto"/>
<listheader label="gender" sort="auto"/>
</listhead>
<listitem>
<listcell label="Mary"/>
<listcell label="FEMALE"/>
</listitem>
<listitem>
<listcell label="John"/>
<listcell label="MALE"/>
</listitem>
</listbox>
</div>
</div>
</zk>

Hope you find this useful!

/Bobo

answered 2007-07-21 21:01:52 +0800

admin
18691 ● 1 ● 10 ● 130

Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4424734

By: razvanp

Hi Bobo,

I packed the files from subversion like:

uwwwMETA-INF
x MANIFEST.MF
x
uwwwmetainfo
x |wwwzk
x lang-addon.xml
x
uwwworg
x |wwwzkforge
x |wwwdivplus
x Version.class
x
|wwwweb
uwwwjs
x |wwwzul
x divplus.js
x
|wwwzul
|wwwhtml
divplus.dsp

but when running your zul sample, I get:
Failed to invoke zkDivPlus.init $int is not defined (Firefox) and in Internet explorer: Failed to invoke zkDivPlus.init Object expected

What can it be? How do I build the Div-Plus? Is it included in the main build script?

Razvan

answered 2007-07-22 12:44:23 +0800

admin
18691 ● 1 ● 10 ● 130

Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4425176

By: bobobobo

What version of ZK are you using?

/Bobo

answered 2007-07-22 21:50:44 +0800

admin
18691 ● 1 ● 10 ● 130

Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4425555

By: razvanp

2.4.0 .. should I use another one?

answered 2007-07-22 22:47:38 +0800

admin
18691 ● 1 ● 10 ● 130

Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4425594

By: bobobobo

Try switching to 2.4.1, and don't forget to clear your browser cache so you get all new .js-files :-) I think that should solve the problem. I probably should update the lang-addon.xml to require zk 2.4.1 or later.

Let me know if you run into any more problems!

/Bobo

answered 2007-07-23 07:16:27 +0800

admin
18691 ● 1 ● 10 ● 130

Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4425904

By: vstyran

Hi bobo,

Where can I download lib with childflex?

answered 2007-07-23 09:43:08 +0800

admin
18691 ● 1 ● 10 ● 130

Orignial message at:
https://sourceforge.net/forum/message.php?msg_id=4426499

By: bobobobo

You can download the code from zk.forge svn.
I have built a .jar and it is available from http://www.easit.com/download/code/divplus.jar

/Bobo