📄 macro.zul
字号:
<?xml version="1.0" encoding="UTF-8"?><!--macro.zul{{IS_NOTE Purpose: Description: History: Thu Nov 13 16:07:16 TST 2008, Created by Flyworld}}IS_NOTECopyright (C) 2008 Potix Corporation. All Rights Reserved.{{IS_RIGHT}}IS_RIGHT--><window id="demo" apply="org.zkoss.zkdemo.userguide.DemoWindowComposer"> <html><![CDATA[ <h4>Macro components</h4> <p>Macros component is a way to develop new components without programming. First, use <?component?> to define a component by use of another ZUML page. Then, you could use this component anywhere as if it is a regular component.</p> ]]></html> <hbox> Take a look of the <toolbarbutton id="target" label="includedMacro.zul" popup="details"/>and see how easy it can be. </hbox> <separator /> <popup id="details" fulfill="target.onClick" width="550px"> <div style="border:1px solid #538BA2; background: #FFF; "> <html><![CDATA[<pre style='color:#000000;background:#ffffff;'><span style='color:#7f0055; '><</span><span style='color:#7f0055; '>groupbox</span> id=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>gb</span><span style='color:#2a00ff; '>"</span> mold=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>3d</span><span style='color:#2a00ff; '>"</span> width=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>200px</span><span style='color:#2a00ff; '>"</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '><</span><span style='color:#7f0055; '>style</span><span style='color:#7f0055; '>></span>
.desc { color:#008bb6;font-weight:bold;font-family:times New Roman; }
.pic { width:80px; height:80px; }
<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>style</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '><</span><span style='color:#7f0055; '>caption</span> label=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>${empty arg.title ? 'No Title': arg.title}</span><span style='color:#2a00ff; '>"</span> <span style='color:#7f0055; '>/></span>
<span style='color:#7f0055; '><</span><span style='color:#7f0055; '>hbox</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '><</span><span style='color:#7f0055; '>label</span> class=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>desc</span><span style='color:#2a00ff; '>"</span> value=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>${empty arg.desc ? 'This Product have no description.': arg.desc}</span><span style='color:#2a00ff; '>"</span> <span style='color:#7f0055; '>/></span>
<span style='color:#7f0055; '><</span><span style='color:#7f0055; '>image</span> class=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>pic</span><span style='color:#2a00ff; '>"</span> src=<span style='color:#2a00ff; '>"</span><span style='color:#2a00ff; '>${arg.img}</span><span style='color:#2a00ff; '>"</span> <span style='color:#7f0055; '>/></span>
<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>hbox</span><span style='color:#7f0055; '>></span>
<span style='color:#7f0055; '></</span><span style='color:#7f0055; '>groupbox</span><span style='color:#7f0055; '>></span>
</pre> ]]></html> </div> </popup>
<tabbox width="100%" tabscroll="false">
<tabs>
<tab id="demoView" label="Demo"/>
<tab id="srcView" label="View Source"/>
</tabs>
<tabpanels>
<tabpanel>
<window id="view">
</window>
</tabpanel>
<tabpanel>
<panel>
<panelchildren>
<textbox id="codeView" class="code" rows="20" width="95%">
<attribute name="value"><![CDATA[
<?component name="newProduct" macroURI="/userguide/misc/includedMacro.zul"?><zk> <hbox>
<newProduct /> <newProduct title="Monitor" img="/img/item1.jpg" desc="The new HDMI monitor"/> <newProduct title="Cell" img="/img/item2.jpg" desc="This is zPhone"/>
</hbox></zk>
]]></attribute>
</textbox>
</panelchildren>
<toolbar mold="panel">
<button id="tryBtn" label="Try me!"/>
<button id="reloadBtn" label="Reload" height="18px"/>
</toolbar>
</panel>
</tabpanel>
</tabpanels>
</tabbox></window>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -