When I try the below code (as is suggested here by Ryan Wu for question):
<?page title="Auto Generated index.zul"?>
<window title="Hello World 2!!" border="none" width="600px">
<include id="inc" src="/zk/wind.zul" mode="instant" />
<button label="do it" onClick="inc$wind.doModal()" />
</window>
After pressing the button I am getting this error:
inc$wind.doModal();'' : Attempt to resolve method: doModal() on undefined variable or class name
The file wind.zul looks as
<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window id="wind" title="new page title" border="normal" visible="false" width="300px">
New Content Here!
</window>
</zk>
Can someone let me know what is wrong? Thanks...
According to http://books.zkoss.org/wiki/ZK%20Developer%27s%20Reference/UI%20Composing/ID%20Space
I need:
1. use 'Path'
2. add some ID for main window (f.i. id="w0")
and write in index.zul something similar ( file wind.zul not changed)
<?page title="Auto Generated index.zul"?>
<window id="w0" title="Hello World 2!!" border="none" width="600px">
<include id="inc" src="/zk/wind.zul" mode="instant" />
<button label="do it" onClick='Path.getComponent("/w0/inc/wind").doModal()' />
</window>
Thanks for me own :))
Related
As the question explains itself i've a button like firebug and i wanted to set there a number when some events happens like firebug doeas when it detects errors on the page.
Does anyone know how to set it?
This is the code of the top button that displays a panel, so i want to set there a number when certains events happens..
<panel id="asv-panel">
<hbox align="start">
<vbox>
<hbox align="center" style="background-color:#ffffff">
<image id="asvbutton-panel-icon" width="200px" height="50px" style="margin-left:10px"/>
</hbox>
<hbox style="background-color:#fff" id="menuPanelContainer">
<html:div style="margin-top:20px;margin-left:20px;width:150px" id="menuLogginInicial">
<description value="&asbutton.Signin;"/>
<html:hr/>
<image id="asvbutton-logoface" width="50px" height="50px" style="cursor:pointer" onclick="asvbutton.login();"/>
<image id="asvbutton-logogoogle" width="47px" height="45px" style="align:left;cursor:pointer"/>
<image id="asvbutton-logotwitter" width="50px" height="50px" style="align:left;cursor:pointer"/>
</html:div>
</hbox>
</vbox>
</hbox>
</panel>
</toolbarbutton>
After thousands of pages and samples... the easiest way was creating a div and doing an appendChild to it (old school method) :D
Hope this helps someone.
I can't reach component by id in the included .zul page. I have one main.zul with a controller and I need to get a component in included zul page through the java controller class, but it returns null.
I know the included method creates new id space but is there any way to get this component?
UPDATE
Here is my code:
the main zul page
<?page title="DealerVizard.zul"?>
<?page id="main" ?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./Dealer" ?>
<zk>
<style src="/resources/css/default.css" />
<window id="Dealer" class="index"
apply="com.i2i.prm.controller.IndexController">
<div class="content" width="100%">
<tabbox id="tb" forward="onSelect=onSelect">
<tabs id="tabs">
<tab id="info" label="INFO" />
<tab id="create" label="CREATE" />
<tab id="edit" label="EDIT" />
<tab id="test" label="TEST PANEL(LIST BOX)" />
</tabs>
<tabpanels>
<tabpanel id="DealerInfo">
<include id="DealerInfoContent"
src="View/Dealer/DealerInfo.zul" />
</tabpanel>
<tabpanel id="DealerCreate">
<include id="DealerCreateContent"
src="View/Dealer/DealerCreate.zul" />
</tabpanel>
<tabpanel id="DealerEdit">
<include id="DealerEditContent"
src="View/Dealer/DealerEdit.zul" />
</tabpanel>
<tabpanel id="PagingListBox">
<include id="PagingListBoxContent" // Included here
src="View/TEST/PagingListBox.zul" />
</tabpanel>
</tabpanels>
</tabbox>
</div>
</window>
</zk>
PagingListBox.zul (Included page)
<?page id="list" ?>
<zk>
<grid width="100%">
<columns>
<column label="" />
</columns>
<rows>
<row>
<listbox id="listModel" width="100%" height="100%"
visible="true" span="true" pagingPosition="top" rows="20"
selectedItem="#{DealerController.selected}"
model="#{DealerController.userList}"
forward="onSelect=//main/Dealer.onSelect">
<auxhead>
<auxheader colspan="1">
<textbox
value="#{DealerController.searchUser.name}" maxlength="9"
id="searchCO_ID" forward="onChanging=//main/Dealer.onSearch"
width="100%">
</textbox>
</auxheader>
<auxheader colspan="1">
<textbox
value="#{DealerController.searchUser.surname}" maxlength="21"
id="searchMSISDN" forward="onChanging=//main/Dealer.onSearch"
width="100%">
</textbox>
</auxheader>
<auxheader colspan="1">
</auxheader>
</auxhead>
<listhead>
<listheader label="Name"
sort="auto(UPPER(name))" />
<listheader label="Surname"
sort="auto(UPPER(surname))" />
<listheader label="Delete ?" />
</listhead>
<listitem self="#{each=USERLIST}">
<listcell>
<label value="#{USERLIST.user.name}" />
<textbox
value="#{DealerController.tmpUser.name}" visible="false" />
</listcell>
<listcell>
<label value="#{USERLIST.user.surname}" />
<textbox
value="#{DealerController.tmpUser.surname}" visible="false" />
</listcell>
<listcell>
<button label="Update"
forward="onClick=//main/Dealer.onUpdate" visible="false" />
<button image="icons/edit-delete.png"
label="Delete" forward="onClick=//main/Dealer.onDelete"
width="100%" disabled="true" />
<button label="Save"
forward="onClick=//main/Dealer.onSave" visible="false" />
<button label="Cancel"
forward="onClick=//main/Dealer.onCancel" visible="false" />
</listcell>
</listitem>
</listbox>
<paging id="pagingData" pageSize="20" />
</row>
</rows>
</grid>
</zk>
IndexCOntroller.java
public class IndexController extends GenericForwardComposer {
private List<User> userList = new ArrayList<User>() ;
AnnotateDataBinder binder;
Tabbox tb;
Window Dealer;
private int pageCount=0;
#Override
public void doAfterCompose(Component comp) throws Exception {
// TODO Auto-generated method stub
super.doAfterCompose(comp);
comp.setVariable(comp.getId() + "Controller", this, true);
binder = (AnnotateDataBinder) Dealer.getVariable("binder", true);
System.out.println(Path.getComponent("//list/listModel"));
}
public IndexController() {
// TODO Auto-generated constructor stub
}
}
Normally I wouldn't recommend using Path.getComponent() way to access other components as your application code becomes tightly coupled with your component structure in your view page.
In your case you simplest way is to use AbstractComponent#getFellow(String compId) method so for eg.
Include inc = (Include) Dealer.getFellow("PagingListBoxContent");
Listbox listModel = (Listbox) inc.getFellow("listModel");
System.out.println(listModel);
So in future even if you insert any other component in your ZUML page before your listbox your code will still work.
UPDATE: BTW there was an interesting blogpost on this very topic on ZK blog recently
if your include have id, you can use dollar sign to get the inner components
<zk>
<include id="inc" src="test.zul />
</zk>
test.zul
<zk>
<label id="lab1" value="test1" />
</zk>
you can use "inc$lab1" get the label in test.zul
You can access any component in any other id space using zscript or java. if it is on the same page, but different window then (component B in window A):
Path.getComponent("/A/B");
if it is on a different page then (component B in window A on page P):
Path.getComponent("//P/A/B");
You can find documentation here: http://books.zkoss.org/wiki/ZK%20Developer%27s%20Reference/UI%20Composing/ID%20Space
You can add in your IndexController.java:
...
private Include DealerInfoContent;
...
this way you can access the included component within the parent composer.
(I would suggest to use camelCase ids for it, though).
I want to display an array of images in my sidebar. The images should be clickable. This is what I got so far in my ff-sidebar.xul file but nothing is shown:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type"text/css" ?>
<!DOCTYPE page SYSTEM "chrome://pos/locale/overlay.dtd">
<page id="posSidebar" title="&posSidebar.label;"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script src="ff-sidebar.js"/>
<script src="ff-sidebar.css"/>
<vbox flex="1">
<label value="&posSidebar.label;" />
<image id="image1"/>
</vbox>
</page>
and the code of the css file:
#image1
{
list-style-image: url("chrome://myextension/skin/images/1.png" width='135' height='130');
}
Why are you trying to load in your CSS file as a script? also the script declarations should be like this:
<script type="application/x-javascript" src="chrome://rehostimage/content/password_manager.js" />
As for the images showing up, have you tried
<image src="chrome://myextension/skin/images/1.png" />
?
I want to create an image in my statusbar, but why it can't appear?
And, how to add menu in status bar when I click right the mouse?
This is my script:
<?xml version="1.0"?>
<!--
# Fungsi dari file ini adalah mengatur tampilan dan perilaku addon.
# Membuat menu "search hadits" pada saat user klik kanan pada halaman browser atau
# pada saat user klik kanan pada kata di halaman browser.
-->
<overlay id="inline_trans"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!--
# Membuat Menu Klik kanan pada halaman firefox.
# Memanggil fungsi pada haditsSearch.js untuk mulai melakukan pencarian hadits.
-->
<popup id="contentAreaContextMenu">
<menuitem class="inlinetrans" id="inlineContext" oncommand= "hadits_mean.startFind(null);"
label="Cari Terjemahan"/>
</popup>
<!-- ======================================================== -->
<!--
<window id="main-window">
<popupset id="mainPopupSet"></popupset>
<vbox id="hadits_holder" />
</window>
-->
<!--
<spacer flex="1"/>
<progressmeter mode="determined" value="82"/>
-->
<statusbar id="status-bar">
<statusbarpanel id="status-bar-inlinetrans"
src="chrome://inlinetrans/skin/imagesOn_kecil.png"
label="indonesia inline translator"
context="indonesia inline translator menu"
onclick="alert('okeh cuy')"
tooltiptext="inlinetrans versi 1.0"
/>
</statusbar>
</overlay>
You need an <image>. Something like:
<statusbar id="status-bar">
<statusbarpanel id="status-bar-inlinetrans">
<image src="chrome://inlinetrans/skin/imagesOn_kecil.png" />
</statusbarpanel>
</statusbar>
The other attributes can probably go on either the image or the statusbarpanel.
I'm working with XUL, and below is abasic slider/scale implementation:
<scale value="1" min="1" max="10" increment="1"/>
However I want a numbox next to it which displays the value selected in the slider, and maybe I didn't look hard enough in the XUL tutorial, but I couldn't find a feasible answer.
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<scale value="1" min="1" max="10" increment="1" id="a"/>
<textbox readonly="true" observes="a"/>
</window>