0

Templates - missing feature..

asked 2010-09-22 02:45:54 +0800

Newion gravatar image Newion
78 1 1

I'm looking for templating solution similiar to that provided by facelets.

Am I right that it is not possible in ZK to create template like this:

<groupbox mold="3d">
    <caption label="${c:l('common.Filter')}" image="${c:l('common.Filter.image')}">
		<toolbarbutton label="Reset" forward="onResetFilters"/>
   </caption>
   <hbox style="padding: 10px">
         <ui:insert/> <!-- insert content provided as body of this template -->
   </hbox>
</groupbox>

See Wrapping Content within a Template for more information and detailed examples using facelets.

delete flag offensive retag edit

30 Replies

Sort by ยป oldest newest

answered 2010-09-26 21:16:53 +0800

iantsai gravatar image iantsai
2755 1

ZK has better technology to do this, you can use Macro Component to do this.
Or you can combine Executions.createComponents(), Components.wireVariables() and Components.addForwards() to do more.

the way to compose a Component tree in ZK is free.

link publish delete flag offensive edit

answered 2010-10-09 11:57:26 +0800

Newion gravatar image Newion
78 1 1

>>ZK has better technology to do this, you can use Macro Component to do this.
Macro Components are quite limited comparing to facelets. If they are better as you suggest, please give us some examples.

>>Or you can combine Executions.createComponents(), Components.wireVariables() and Components.addForwards() to do more.
This is not what I'm looking for. I want to have templates mechanism being part of page definition language.

link publish delete flag offensive edit

answered 2010-10-11 21:48:03 +0800

iantsai gravatar image iantsai
2755 1

The second one I believe is what you want, please read the javadoc API of Executions.createComponents(uri, parent, arg), it can helps you parse the zul file as a content of a parent component.
and Components.wireVariables() +Components.addForwards() can helps you wire the content's Event Listening methods and variables to your pure Java code.

The steps are bellow:

1. Create a Java class extends a zk container component such as Div.

2. inside this sub-class's constructor, declare Executions.createComponents(uri, this, null) to parse a zul uri, and make it as this java classes content.

3. use Components.wireVariables() +Components.addForwards() to make this java class become a ZK MVC controller, which you can register event listening methods and wire component members.

4. use page component definition in your zul file, <?component name="Component-xmltag-Name" extends="comp-super-class" class="component-class" ?>

5. use this tag as a normal component in your zul.

link publish delete flag offensive edit

answered 2010-10-12 14:58:56 +0800

Newion gravatar image Newion
78 1 1

If I understood correctly, the solution you described is just alternative to macro components.
What I'm looking for is more flexible template. Here is the example from the facelets documentation (see link in my first post):

<!-- template document -->
...
<span class="repeatingBox">
  <c:forEach begin="1" end="10">
    <ui:insert/><br/>
  </c:forEach>
</span>
...

<!-- template client document -->
...
<ui:composition template="template.xhtml">
  I'm in the spin cycle <h:outputText value="#{random.name}"/>!
</ui:composition>

link publish delete flag offensive edit

answered 2010-10-12 16:46:39 +0800

caclark gravatar image caclark
1753 2 5
http://clarktrips.intltwi...

Newion, did you read this smalltalk: http://www.zkoss.org/smalltalks/zk3.5.2/ ? Search for the section labeled "Use Template to Layout Web Pages". I don't use them and can't really tell you more than what's on that page, but I know something closer to facelets' template exists other than the Executions.createComponents(), Components.wireVariables(), Components.addForwards() approach.

link publish delete flag offensive edit

answered 2010-10-18 07:57:46 +0800

Newion gravatar image Newion
78 1 1

caclark, thanks for the link. I must have somehow missed it.
So.. I tested composition mechanizm offered by ZK and must say that it is very, very limited compared to the facelets. Maybe it is good for creating main layout of the site, but not for component composition.
So.. component composition is a missing feature. Beside this ZK is great!

link publish delete flag offensive edit

answered 2010-10-19 00:27:38 +0800

iantsai gravatar image iantsai
2755 1

updated 2010-10-19 00:40:43 +0800

Okay, so if I'm right, what you really want to have is having annotate data binding mechanism in template and making it be possible to cooperate with it's template-user.

here is an example that I build in a very quick manner, first, please read this article:
http://docs.zkoss.org/wiki/Data_binding

I'll use the Person bean in this article to present how the whole stuff works.
then, imagine that I have a zul like this one:

index.zul
----------------------------------------------

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<?component name="my-form" extends="window" class="demo.MyForm"?>
<window>
	<zscript><![CDATA[
		import demo.databinding.*;
		List people = PersonDAO.getAll();//implement this yourself
	]]></zscript>

	<listbox rows="4" model="@{people}" selectedItem="@{selected}">
		<listhead>
			<listheader label="Full Name" />
		</listhead>
		<!-- define variable person here-->
		
		<listitem self="@{each='person'}">
			<listcell label="@{person.fullName}" />
		</listitem>
	</listbox>

	<my-form id="myForm" person="@{selected}" />
</window>

This is a Master-Detail concept demonstration, and I want to make my detail presentation be swappable. which means I'll have a "detail" zul template like this:

_MyForm.zul
------------------------------------------------

<zk>
	<grid width="400px">
		<rows>
			<row> First Name: 
				<textbox id="firstName" value="@{person.firstName, save-when='myBtn.onClick'}"/>
			</row>
			<row> Last Name: 
				<textbox id="lastName" value="@{person.lastName, save-when='myBtn.onClick'}"/>
			</row>
			<row> Full Name: 
				<label id="fullName" value="@{person.fullName}"/>
			</row>
		</rows>
	</grid>
	<button id="myBtn" label="save"/>
</zk>


About how to glue index.zul and _MyForm.zul together, here is MyForm.java, which is a composite component that plays like a MVC controller(but still a valid ZK Component):

MyForm.java
------------------------------------------------

package demo;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zkplus.databind.AnnotateDataBinder;
import org.zkoss.zul.Window;

public class MyForm extends Window {
	protected AnnotateDataBinder binder; 
	public MyForm(){
		Executions.createComponents("/databinding/_MyForm.zul", this, null);
		binder = new AnnotateDataBinder(this);
		binder.loadAll();
	}
}

now, if you don't like the _MyForm.zul, you want to use other one, just make it your own by change the implementation of MyForm.java or change the class Attribute in index.zul's page component definition.

In ZK, how to integrate technology together is Application developer's work, ZK tried to make every part's concept stand alone and independent, which means Developer can get the most great power by freely combining them together.

And that's it, hope this is what you want.

PS: about how to bind outer Binder and inner binder, it's another topic so I won't discuss it here.

link publish delete flag offensive edit

answered 2010-10-19 03:01:00 +0800

Newion gravatar image Newion
78 1 1

iantsai, thanks for the example, I appreciate it.
But, you showed us how to create custom component and still be able to use databinding. This does not address the problem I described.
There is no template in your example.

Please look at the template I created for testing ZK template functionality (documented here: http://www.zkoss.org/smalltalks/zk3.5.2/#template):

<panel border="none" vflex="1">
	<panelchildren self="@{insert(contentList)}">
		<groupbox mold="3d" self="@{insert(filterGrid)}">
			<caption>
				<toolbarbutton label="Reset / Refresh" forward="onResetFilters"/>
			</caption>
			//grid should be inserted here
		</groupbox>
		//listbox should be inserted here
	</panelchildren>
	<toolbar align="end">
		<button-add forward="onAdd"/>
		<button-delete disabled="@{controller.deleteDisabled}" forward="onDelete"/>
	</toolbar>
</panel>

This is the template I want to reuse in all my pages displaying list of data with filter panel on top of it and action buttons at the bottom.
Example page using this template:

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./myWindow" ?>
<?init class="org.zkoss.zk.ui.util.Composition" arg0="/WEB-INF/pages/main/listWindow.zul"?>

<window id="myWindow" apply="${myCtrl}">
	<grid self="@{define(filterGrid)}">
		<columns>
			...
		</columns>
		<rows>
			...
		</rows>
	</grid>
	<listbox self="@{define(contentList)}"
			 id="listBox" model="@{controller.listModel}" selectedItem="@{controller.selected}">
		<listitem self="@{each='myitem'}">
			<listcell/>
			...
		</listitem>
	</listbox>
</window>

The problem is...it doesn't work. Binding doesn't work. And composition doesn't work correctly (caption of groupbox and toolbar are not displayed correctly).

More datailed documentation:
http://www.zkoss.org/javadoc/5.0.4/zk/org/zkoss/zk/ui/util/Composition.html

You can read there: "Also note that a "define" components must be a root component of the page."
Very limiting...

link publish delete flag offensive edit

answered 2010-10-19 08:00:16 +0800

iantsai gravatar image iantsai
2755 1

updated 2010-10-19 08:02:06 +0800

..... So this is what you want.

then, you did some incorrect configuration in your application, please follow this as the example:

MainLayout.zul

<?init class="org.zkoss.zk.ui.util.Composition" arg0="_ContentElement.zul"?>
<zk>
	<groupbox mold="3d" self="@{insert(topPanel)}">
		<caption>
			<toolbarbutton label="Reset / Refresh"/>
		</caption>
		<!-- showed here -->
	</groupbox>
	<groupbox mold="3d" self="@{insert(bottomPanel)}">
		<caption>
			<toolbarbutton label="Reset / Refresh"/>
		</caption>
		<!-- showed here -->
	</groupbox>
</zk>

_ContentElement.zul

<zk>
	<window self="@{define(topPanel)}" title="test 1"  border="normal">
		<label value="test test test test test test "/>
	</window>
	
	<window self="@{define(bottomPanel)}" title="test 2" border="normal">
		this is a test of Composition.
	</window>
</zk>


User should navigate to MainLayout.zul.

link publish delete flag offensive edit

answered 2010-10-19 09:16:47 +0800

Newion gravatar image Newion
78 1 1

updated 2010-10-19 09:17:10 +0800

Your example doesn't help much. It introduces even more problems (why you use windows in ContentElement.zul?).
Or maybe I don't get it:)

Let me repeat: I want to have a template for displaying list of data with filter panel (groupbox component with caption) on top of it and action buttons (toolbar component) at the bottom.
I don't want to define and layout groupbox and toolbar components on each page.

Please correct my example if you can.

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-09-22 02:45:54 +0800

Seen: 3,503 times

Last updated: Oct 05 '11

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More