0

Navigation menu and layouts

asked 2009-12-30 10:14:02 +0800

hector123 gravatar image hector123
21 1

Hello,
im new in ZKoss and im trying to make a web with 3 parts, north, west and center. The north and west would have links that would change the center page, as most real websites.
I have been testing ZK Web Flow, but I thing its not possible to do that with it, because when a I put a button in any place that is not the working "frame", it does nothing. And when I specify two URIs (menu and content) separated by comas in a view-state in the *.xml web flow config file, they appear one below the other.
I would like to know if there is any way to do this navigation with web flow or any other tool.

Thanks

delete flag offensive retag edit

6 Replies

Sort by ยป oldest newest

answered 2009-12-30 16:08:07 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

If this app is working as you like than you can download the codes here.

link publish delete flag offensive edit

answered 2009-12-30 18:59:39 +0800

samchuang gravatar image samchuang
4084 4

Hi ~

Have you use the zk demo, in the layout demo, it has 2 border layout example, you could refer to the source code for using layout

link publish delete flag offensive edit

answered 2009-12-31 06:03:32 +0800

hector123 gravatar image hector123
21 1

I havent seen the ZK Demo, but thats exactly what i need. Thanks both

link publish delete flag offensive edit

answered 2010-01-05 05:05:02 +0800

hector123 gravatar image hector123
21 1

Hi,
now I have a borderlayout with north, west and center. In the west I have the menu and in the center the contents. When i click in one menu option, the contents changes, but i need to change the content from any link in the content itself. This is the code:

index.zul

<?page title="ZK Web Flow Sample Application" contentType="text/html;charset=UTF-8"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver" ?>

<zk xmlns="http://www.zkoss.org/2005/zul">
	<window id="pantallaLogin" visible="pantallaLoginVisible">
		<include src="/login.zul"/>
	</window>
	<borderlayout id="main" forward="onCreate=onMainCreate"
		apply="${menu}">
		<north id="cabecera">
			<include style="padding:3px;" src="/cabecera.zul"/>
		</north>
		<west title="Menu" maxsize="300" size="15%">
			<panel>
				<panelchildren>
					<listbox id="itemList" oddRowSclass="non-odd"
						itemRenderer="${main$Menu.itemRenderer}"
						model="${main$Menu.selectedModel}" fixedLayout="true"
						vflex="true">
					</listbox>
				</panelchildren>
			</panel>
		</west>
		<center>
			<include style="padding:3px;" id="xcontents" />
		</center>
	</borderlayout>
</zk>

Here, the menu class is created by and taken from Spring and i specify it in the apply attribute of the borderlayout component, im not sure if this is ok.
An the Menu class that populate the menu and specify the content include component
[...]
public class Menu extends GenericForwardComposer {
	private final int NUMERO_ITEMS_MENU = 3;
	
	private final String URI_PRINCIPAL="/index1.zul";

	Listbox itemList;

	Include xcontents;
	
	Listitem selected;
	
	private boolean pantallaLoginVisible;
	
	

	private static final ListitemRenderer _defRend = new ItemRender();

	public void onMainCreate(Event event) {
		final Execution exec = Executions.getCurrent();
		final String loginParam = exec.getParameter("login");
		Window pantallaLogin=(Window)self.getFellow("pantallaLogin");
		if(loginParam!=null){
			try {
				pantallaLogin.doModal();
			} catch (SuspendNotAllowedException e) {
				e.printStackTrace();
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
			pantallaLoginVisible=true;
		}else{
			pantallaLoginVisible=false;
		}
		
		Listitem item = null;
		final LinkedList list = new LinkedList();
		final MenuItem[] items = getMenuItems();
		for (int i = 0; i < items.length; i++) {
			list.add(items<i >);
		}
		if(selected==null)
			xcontents.setSrc(URI_PRINCIPAL);
		
		if (!list.isEmpty()) {
			itemList.setModel(new ListModelList(list));
			itemList.renderAll();

		}
		


	}
	
	public ListModel getSelectedModel() {
		return new ListModelList(getMenuItems());
	}
	

	
	private static class ItemRender implements ListitemRenderer, java.io.Serializable {
		public void render(Listitem item, Object data) {
			MenuItem di = (MenuItem) data;
			Listcell lc = new Listcell();
			item.setValue(di);
			lc.setHeight("30px");			
			lc.setLabel(di.getNombre());
			lc.setParent(item);
		}
	};
	
	public void onSelect$itemList(SelectEvent event) {
		Listitem item = itemList.getSelectedItem();
		selected=item;
		if (item != null) {
			
			// sometimes the item is unloaded.
			if (!item.isLoaded()) {
				itemList.renderItem(item);
			}
			
			
			xcontents.setSrc(((MenuItem) item.getValue()).getUri());
		}
	}

	public Menu() {

	}
	
	public void setContenido(String uri){
		Include contenido=(Include)self.getFellow("xcontents");
		contenido.setSrc(uri);
		Executions.sendRedirect("");
	}
	
	public void onSetContenido(Event event){
		String label=event.getTarget().getId();
		setContenido("/"+label+".zul");
	}
	
	public ListitemRenderer getItemRenderer() {
		return _defRend;
	}

	//Aqui relleno los elementos del menu
	public MenuItem[] getMenuItems() {
		MenuItem[] menuItems = new MenuItem;
		menuItems[0] = new MenuItem("Campings", "", "/campings.zul");
		menuItems[1] = new MenuItem("Camping2", "", "/camping1.zul");
		menuItems[2] = new MenuItem("Camping3", "", "/camping3.zul");
		return menuItems;
	}
	
	public boolean isPantallaLoginVisible() {
		return pantallaLoginVisible;
	}

	public void setPantallaLoginVisible(boolean pantallaLoginVisible) {
		this.pantallaLoginVisible = pantallaLoginVisible;
	}

}

This works properly. Now i have the campings.zul and its bean Campingbean:

campings.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<hbox apply="${campingBean}">
CAmpings
<button id="btn_prueba" label="prueba"/>
</hbox>

CampingBean.java

[...]
public class CampingBean extends GenericForwardComposer{
	private CampingBusiness campingBusiness;
	private Menu menu;
	
	
	public void onClick$btn_prueba(Event event){
		menu.setContenido("/prueba.zul");
	}
	
	//getter and setters
}


When i click in button btn_prueba i get this error:
GRAVE: Method setSelf not found for class org.zkoss.zul.Window
I have already debugged and I know it fails in createComponents method, but it doesnt help me.
Im using Spring 2.0.8 and ZK 3.6.3.

link publish delete flag offensive edit

answered 2010-01-07 14:14:56 +0800

real54 gravatar image real54
3

Hello Terry Tornado....
Im new in zk Framework, but im very intersted in learning.
i ve seen your test application and its very interesting.

i would like to ask you to help me in some aspects, coz im also developing an application and i want to do it with zk.

in this post i read something about download source code, but i ve never seen it. is there any source code?

tSX

link publish delete flag offensive edit

answered 2010-01-07 15:41:03 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

Yes, you can check out the codes. They are hosted on code.google as two eclipse projects.

frontend: http://code.google.com/p/zk-sample-gui/
backend: http://code.google.com/p/zk-sample-db/

Only checkout both projects in your eclipse workspace. They are well configured to run out of the box
with a inMemory H2 database. Tomcat must be installed.

zk-sample-gui --> run as --> run on server


In a few days the next version will be checked in as a new project. We are on time by writting the documentation.
But as newBi in ZK i recommended you to have a look on the codes above.

best
Stephan

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: 2009-12-30 10:14:02 +0800

Seen: 1,759 times

Last updated: Jan 07 '10

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