https://www.zkoss.org/_w/index.php?title=Small_Talks/2007/May/Using_Wikibox_Component,_Part_III&feed=atom&action=historySmall Talks/2007/May/Using Wikibox Component, Part III - Revision history2024-03-28T10:34:26ZRevision history for this page on the wikiMediaWiki 1.35.1https://www.zkoss.org/_w/index.php?title=Small_Talks/2007/May/Using_Wikibox_Component,_Part_III&diff=14837&oldid=prevChar: /* The Purpose */2010-12-14T04:06:08Z<p><span dir="auto"><span class="autocomment">The Purpose</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 04:06, 14 December 2010</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l10" >Line 10:</td>
<td colspan="2" class="diff-lineno">Line 10:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=The Purpose=</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=The Purpose=</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>In the previous article([<del class="diffchange diffchange-inline">http:</del>//<del class="diffchange diffchange-inline">docs.zkoss.org/wiki</del>/Using_Wikibox_Component<del class="diffchange diffchange-inline">%2C_Part_II </del>this]), we have described how to customize your '''filter''' and '''wikibutton'''. In this article, we will demonstrate how to use another way ('''Macro''') to render the content of your wikibox, this way is more suitable for dealing with a large number of text.</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>In the previous article([<ins class="diffchange diffchange-inline">[Small_Talks</ins>/<ins class="diffchange diffchange-inline">2007</ins>/<ins class="diffchange diffchange-inline">May</ins>/Using_Wikibox_Component<ins class="diffchange diffchange-inline">,_Part_II |</ins>this<ins class="diffchange diffchange-inline">]</ins>]), we have described how to customize your '''filter''' and '''wikibutton'''. In this article, we will demonstrate how to use another way ('''Macro''') to render the content of your wikibox, this way is more suitable for dealing with a large number of text.</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=Introduction=</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=Introduction=</div></td></tr>
</table>Charhttps://www.zkoss.org/_w/index.php?title=Small_Talks/2007/May/Using_Wikibox_Component,_Part_III&diff=7699&oldid=prevElton776: moved Small Talks/Using Wikibox Component, Part III to Small Talks/2007/May/Using Wikibox Component, Part III2010-09-21T01:23:36Z<p>moved <a href="/wiki/Small_Talks/Using_Wikibox_Component,_Part_III" class="mw-redirect" title="Small Talks/Using Wikibox Component, Part III">Small Talks/Using Wikibox Component, Part III</a> to <a href="/wiki/Small_Talks/2007/May/Using_Wikibox_Component,_Part_III" title="Small Talks/2007/May/Using Wikibox Component, Part III">Small Talks/2007/May/Using Wikibox Component, Part III</a></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<tr class="diff-title" lang="en">
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="1" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 01:23, 21 September 2010</td>
</tr><tr><td colspan="2" class="diff-notice" lang="en"><div class="mw-diff-empty">(No difference)</div>
</td></tr></table>Elton776https://www.zkoss.org/_w/index.php?title=Small_Talks/2007/May/Using_Wikibox_Component,_Part_III&diff=6189&oldid=prevElton776: Created page with '{{Template:Smalltalk_Author| |author=Jumper Chen, Engineer, Potix Corporation |date=May 16, 2007 |version= Applicable to ZK 2.3 and later. ::Applicable to Ziki 0.8.1 and late…'2010-09-13T06:57:01Z<p>Created page with '{{Template:Smalltalk_Author| |author=Jumper Chen, Engineer, Potix Corporation |date=May 16, 2007 |version= Applicable to ZK 2.3 and later. ::Applicable to Ziki 0.8.1 and late…'</p>
<p><b>New page</b></p><div>{{Template:Smalltalk_Author|<br />
|author=Jumper Chen, Engineer, Potix Corporation<br />
|date=May 16, 2007<br />
|version= Applicable to ZK 2.3 and later.<br />
<br />
::Applicable to Ziki 0.8.1 and later.<br />
}}<br />
<br />
<br />
=The Purpose=<br />
<br />
In the previous article([http://docs.zkoss.org/wiki/Using_Wikibox_Component%2C_Part_II this]), we have described how to customize your '''filter''' and '''wikibutton'''. In this article, we will demonstrate how to use another way ('''Macro''') to render the content of your wikibox, this way is more suitable for dealing with a large number of text.<br />
<br />
=Introduction=<br />
<br />
In [http://radeox.org/ Radeox], '''Macro''' is a command function, which render content into our own pre-defined format. The standard form of Macros is "{MacroName}" and it can accept none or several arguments. For example,<br />
<br />
<source lang="java" ><br />
{MacroName:arg1|arg2|arg3...}<br />
This is an example code.<br />
{MacroName}<br />
</source> <br />
<br />
<br />
In the following example, usually we want to show some source code on browser, so we need to encode the source code:<br />
<br />
<source lang="java" ><br />
&lt;wikibox&gt;<br />
&lt;attribute name=&quot;value&quot;&gt;<br />
Example code<br />
&lt;/attribute&gt;<br />
&lt;/wikibox&gt;<br />
</source> <br />
<br />
<br />
if we define a '''{code} Macro''' , those text enclosed by '''{code}''' tag will be rendered to the format of source code :<br />
<br />
<source lang="java" ><br />
{code}<br />
<wikibox><br />
<attribute name="value"><br />
Example code<br />
</attribute><br />
</wikibox><br />
{code}<br />
</source> <br />
<br />
<br />
is rendered as<br />
<br />
<source lang="java" ><br />
<wikibox><br />
<attribute name="value"><br />
Example code<br />
</attribute><br />
</wikibox><br />
</source> <br />
<br />
<br />
This is a convenient way to improve our behavior.<br />
<br />
In [http://radeox.org/space/Radeox+Architecture Radeox Architecture], if we want to render the content of wikibox by using Macro, Filter is responsible for finding Macro definition. ZK provides a concrete implemented org.zkoss.ziki.editor.impl.filter.MacroFilter which will find macro definition defined in SimpleRenderEngineImpl.(more detail)<br />
<br />
Please follow the steps about how to create '''Macro''' by yourself.<br />
<br />
<br />
=Step-By-Step=<br />
<br />
The steps specified here is specific to the SimpleRenderEngineImple. That is, it is only for Radeox Engine based implementation.<br />
<br />
<br />
* Step 1. '''Create a Macro class.'''<br />
<br />
This example assume that we want to enrich a text with backgorund image and richer text-format. Now, create a LogoMacro for Macro, this class we use the package with '''macro''' as follows,<br />
<br />
<source lang="java" ><br />
package macro;<br />
<br />
import java.io.IOException;<br />
import java.io.Writer;<br />
import org.radeox.macro.BaseMacro;<br />
import org.radeox.macro.parameter.MacroParameter;<br />
<br />
public class LogoMacro extends BaseMacro {<br />
public void execute(Writer writer, MacroParameter params)<br />
throws IllegalArgumentException, IOException {<br />
if (params.getLength() == 1) {<br />
final String style = "color:#EBDFB5;font-size:25px;" +<br />
"font-weight:bold;padding-left:36px;padding-top:16px;";<br />
writer.write("<div style=\"background-image: url(");<br />
writer.write(params.get("0"));<br />
writer.write(");background-repeat:repeat-y;\"/>");<br />
writer.write("<p style=\"" + style + "\">");<br />
writer.write(params.getContent() == null ? "" : params.getContent());<br />
writer.write("</p></div>");<br />
} else {<br />
throw new IllegalArgumentException(<br />
"Number of arguments does not match. Please follow the pattern \"{logo&#58ImgURL}\".");<br />
}<br />
}<br />
<br />
public String getName() {<br />
return "logo";<br />
}<br />
<br />
public String getDescription() {<br />
return "This is a Logo function.";<br />
}<br />
<br />
}<br />
</source> <br />
<br />
<br />
To write a '''Macro''' is to inherit from org.radeox.macro.BaseMacro and implement execute method:<br />
<br />
<source lang="java" ><br />
public class LogoMacro extends BaseMacro {<br />
public void execute(Writer writer, MacroParameter params)<br />
throws IllegalArgumentException, IOException {<br />
...<br />
writer.write(params.get("0"));<br />
...<br />
}<br />
</source> <br />
<br />
The execute method of '''Macro''' gets a MacroParameter object. This object encapsulates useful information about the execution context. To use the follow two way get parameter of '''Macro''':<br />
* Get Parameter By Number: You can use '''get''' method with number to get the anonymous parameter. For example, the Macro can now be used with a parameter: {logo:URL0|URL1|URL2}, we will use params.get("0"); to get a parameter with "URL0".<br />
* Get Parameter By Name: You can use '''get''' method with name to get parameter, for this example {logo:image=url|info=information}, we will use params.get("image"); to get a parameter with "url".<br />
'''Note:''' The several arguments are separated with a "|".<br />
<br />
<br />
Use params.getContent(); to get those text enclosed by {logo} tag, for example:<br />
<br />
{logo:http://www.zkoss.org/layout/headerbg.png}Using Wikibox Component, Part III.{logo}<br />
<br />
You will get the string with "Using Wikibox Component, Part III."<br />
<br />
To make this Macro a command name. We take "logo" for this one. Add a getName method to the Macro:<br />
<br />
<source lang="java" ><br />
public String getName() {<br />
return "logo";<br />
}<br />
</source><br />
<br />
<br />
Each Macro has to describe itself. There is a method called getDescription:<br />
<br />
<source lang="java" ><br />
public String getDescription() {<br />
return "This is a Logo function.";<br />
}<br />
</source><br />
<br />
'''Note:''' The default description of getDescription is empty, so we have to override this method to show our.<br />
<br />
<br />
* Step 2. '''Specify a file for Macro.'''<br />
In this case, we assume the file name with "MyMacro" as follows,<br />
<br />
[[image:ziki3-1.gif]]<br />
<br />
'''Note:'''Each Macro must have full class name (as above figure). The CodeMacro is implemented Ziki component for providing to render source code, for example<br />
<br />
<source lang="java" ><br />
{code}<p> this is a source code.</p>{code}<br />
</source><br />
<br />
<br />
is rendered as.<br />
<br />
<source lang="xml" ><br />
<p> this is a source code.</p><br />
</source><br />
<br />
Use the setMacroURI method from SimpleRenderEngineImpl for setting the URI of Macro configuration.(as setFilterURI)<br />
<br />
<br />
<source lang="xml" ><br />
<zscript><br />
...<br />
SimpleRenderEngineImpl engine =(SimpleRenderEngineImpl)mywiki.getRenderEngine();<br />
engine.setMacroURI("/MyMacro");<br />
...<br />
</zscript><br />
</source><br />
<br />
<br />
* Step 3. '''Deployment.''' <br />
<br />
:*1. Put the '''LogoMacro''' class under your classpath such as WEB-INF/classes/ directory.<br />
<br />
:*2. Put the '''MyMacro''' file under your project-root such as zkdemo/ directory (assume this project name "zkdemo").<br />
<br />
<br />
<br />
* Step 4. '''Create Zul file.'''<br />
In ziki-sample-3.zul file as follows,<br />
<br />
<source lang="xml" ><br />
<window><br />
<tabbox><br />
<tabs><br />
<tab label="Edit"/><br />
<tab label="Preview"/><br />
</tabs><br />
<tabpanels><br />
<tabpanel><br />
<wikibox id="mywiki" rows="30" width="600px" <br />
onCreate="h.content = mywiki.html;" onChange="h.content = mywiki.html;"><br />
<wikibutton image="~./ziki/img/bold.gif" prefix="##" <br />
postfix="##" tooltiptext="Bold text" sampletext="Bold Text"/><br />
<wikibutton image="~./ziki/img/italic.gif" prefix="~~" <br />
postfix="~~" tooltiptext="Italic text" sampletext="Italic text"/><br />
<wikibutton image="~./ziki/img/underline.gif" prefix="__" <br />
postfix="__" tooltiptext="UnderLine text" sampletext="UnderLine Text"/><br />
<wikibutton image="~./ziki/img/hr.gif" prefix="----" <br />
postfix="" tooltiptext="Horizontal ruler" sampletext=""/><br />
<wikibutton image="~./ziki/img/link.gif" prefix="[" <br />
postfix="]" tooltiptext="External Link" sampletext="alias|link"/><br />
</wikibox><br />
</tabpanel><br />
<tabpanel><br />
<div width="600px"><br />
<html id="h"/><br />
</div><br />
</tabpanel><br />
</tabpanels><br />
</tabbox><br />
<zscript><br />
SimpleRenderEngineImpl engine =(SimpleRenderEngineImpl) mywiki.getRenderEngine();<br />
engine.setMacroURI("/MyMacro");<br />
</zscript><br />
</window><br />
</source><br />
<br />
Run it in your browser and typing some information, you will see as this.<br />
<br />
[[image:ziki3-2.gif]]<br />
<br />
And then you press on the '''Preview''' tab, you will see the following figure.<br />
<br />
[[image:Ziki3-3.gif]]<br />
<br />
=Download Source=<br />
<br />
Download the [http://zkoss.org/smalltalks/ziki3/Ziki-sample-3.zip Ziki-sample-3.zip] for the article here.<br />
<br />
<br />
=Summary=<br />
<br />
At reading the article above, you should know about how to build enrichment Wiki project by using the Macro of Radeox. We provide some convenient way to use those functionalities of Radeox through MacroFilter and SimpleRenderEngineImpl. If you have another good ideas, please let us know your feedback, we will improve effort this component. If you want to know more detail with Radeox Engine, please take a look at [http://radeox.org/space/Developer Radeox Developer].<br />
<br />
<br />
<comment>http://docs.zkoss.org/wiki/Using_Wikibox_Component%2C_Part_III</comment><br />
<br />
[[Category:Overview]]<br />
[[Category:ZK Component]]<br />
{{Template:Smalltalk_Footer|<br />
|name=Potix Corporation <br />
}}</div>Elton776