https://www.zkoss.org/_w/index.php?title=Small_Talks/2007/May/Using_Wikibox_Component,_Part_II&feed=atom&action=historySmall Talks/2007/May/Using Wikibox Component, Part II - Revision history2024-03-29T05:40:37ZRevision 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_II&diff=14838&oldid=prevChar: /* The Purpose */2010-12-14T04:11:45Z<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:11, 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_Wikieditor_Component<del class="diffchange diffchange-inline">%2C_Part_I </del>here]), we have described how to use '''Wikibox''' Component. In this article, we talk about how to customize your '''filter''' and '''wikibutton'''.</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_Wikieditor_Component<ins class="diffchange diffchange-inline">,_Part_I|</ins>here<ins class="diffchange diffchange-inline">]</ins>]), we have described how to use '''Wikibox''' Component. In this article, we talk about how to customize your '''filter''' and '''wikibutton'''.</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_II&diff=7697&oldid=prevElton776: moved Small Talks/Using Wikibox Component, Part II to Small Talks/2007/May/Using Wikibox Component, Part II2010-09-21T01:23:11Z<p>moved <a href="/wiki/Small_Talks/Using_Wikibox_Component,_Part_II" class="mw-redirect" title="Small Talks/Using Wikibox Component, Part II">Small Talks/Using Wikibox Component, Part II</a> to <a href="/wiki/Small_Talks/2007/May/Using_Wikibox_Component,_Part_II" title="Small Talks/2007/May/Using Wikibox Component, Part II">Small Talks/2007/May/Using Wikibox Component, Part II</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_II&diff=6186&oldid=prevElton776: Created page with '{{Template:Smalltalk_Author| |author=Jumper Chen, Engineer, Potix Corporation |date=May 14, 2007 |version=Applicable to ZK 2.3 and later. ::Applicable to Ziki 0.8.1 and later. }…'2010-09-13T06:55:25Z<p>Created page with '{{Template:Smalltalk_Author| |author=Jumper Chen, Engineer, Potix Corporation |date=May 14, 2007 |version=Applicable to ZK 2.3 and later. ::Applicable to Ziki 0.8.1 and later. }…'</p>
<p><b>New page</b></p><div>{{Template:Smalltalk_Author|<br />
|author=Jumper Chen, Engineer, Potix Corporation<br />
|date=May 14, 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_Wikieditor_Component%2C_Part_I here]), we have described how to use '''Wikibox''' Component. In this article, we talk about how to customize your '''filter''' and '''wikibutton'''.<br />
<br />
=Introduction=<br />
<br />
'''Wikibox''' provides a property '''renderEngine''' to specify an engine for converting raw text to string of HTML format, and this engine must implement the org.zkoss.ziki.editor.util.RenderEngine interface. ZK provides a concrete implementation, SimpleRenderEngineImpl, which is built based on [http://radeox.org/ Radeox Engine] implementing '''RenderEngine''' . If you don't specify any renderEngine property on wikibox , the Wikibox will use SimpleRenderEngineImpl by default.<br />
<br />
In [http://radeox.org/space/Radeox+Architecture Radeox Architecture], '''Filter''' reads content of wikibox and transforms those qualified our pre-defined signal or tag into HTML format, for example, "~exmaple~" will be transformed into "<i>exmaple</i>".<br />
'''Wikibutton''' is represented a button on the wiki editor area in browser.<br />
You can specify the following properties:<br />
<br />
* <span style="color:green">image</span> : set the source URI of the image.<br />
* <span style="color:green">prefix</span> : apply the prefix text to selection in wiki textarea.<br />
* <span style="color:green">postfix</span> : apply the postfix text to selection in wiki textarea.<br />
* <span style="color:green">tooltiptext</span> : set the text as the tooltip.<br />
* <span style="color:green">sampletext</span> : use the sampletext instead of selection if there is none.<br />
<br />
<br />
Please follow the procedures about how to customize your filter.<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. '''Get SimpleRenderEngineImpl object.'''<br />
<br />
:Get an instance of SimpleRenderEngineImpl as follows,<br />
<br />
<source lang="xml" ><br />
<wikibox id="mywiki" rows="10" width="500px"><br />
...<br />
</wikibox> <br />
<zscript><br />
SimpleRenderEngineImpl engine =(SimpleRenderEngineImpl)mywiki.getRenderEngine();<br />
...<br />
</zscript><br />
</source><br />
<br />
<br />
* Step 2. '''Configure the properties file.'''<br />
<br />
:*<span style="color:green">SimpleRenderEngineImpl.INPUT_BUNDLE_NAME</span> : Used to specify a definition file of find target pattern.<br />
<br />
:*<span style="color:green">SimpleRenderEngineImpl.OUTPUT_BUNDLE_NAME</span> : Used to specify a definition file for Radeox Engine to replace the target pattern with our-predefined pattern.<br />
<br />
The properties file must be in your classpath such as ziki.jar(or yourself.jar) or WEB-INF/classes/ directory. You can set the name of the file with:<br />
<br />
<source lang="java" ><br />
engine.setInfo(SimpleRenderEngineImpl.INPUT_BUNDLE_NAME, "ziki_markup");<br />
engine.setInfo(SimpleRenderEngineImpl.OUTPUT_BUNDLE_NAME, "ziki_markup");<br />
</source><br />
<br />
In above example, Radeox Engine then tries to load the input and output patterns, which are follow the step 3, from ziki_markup.properties file.<br />
<br />
<br />
* Step 3. '''Modify your definition.'''<br />
In the same above file name "ziki_markup.properties", you will see the "key=value" patterns, which is used to find matches in the "ziki_markup.properties". The content of "ziki_markup.properties" file must conform this pattern, which is key and the regular expression.<br />
This example is finding underline pattern for filter, the "underline" filter contains<br />
<br />
filter.underline.match=(?<!_)__(([^\\p{Space}])|([^\\p{Space}].*?[^\\p{Space}]))__(?!_)<br />
<br />
as input pattern, and this is an output pattern as follows,<br />
<br />
filter.underline.print=<span style="text-decoration: underline;">$1</span><br />
<br />
<br />
* Step 4. '''Implement Filter.'''<br />
<br />
The complete code of '''UnderlineFilter''' class is as follows,<br />
<br />
<source lang="java" ><br />
package org.zkoss.ziki.editor.impl.filter;<br />
import org.radeox.filter.CacheFilter;<br />
import org.radeox.filter.regex.LocaleRegexReplaceFilter;<br />
public class UnderlineFilter extends LocaleRegexReplaceFilter implements<br />
CacheFilter {<br />
protected String getLocaleKey() {<br />
return "filter.underline";<br />
}<br />
}<br />
</source> <br />
<br />
<br />
The '''getLocalekey''' method can find the above mentioned key with "filter.underline.match" in "ziki_markup.properties" file, and then replaces the vlaue of the key with "filter.underline.print".<br />
<br />
<br />
* Step 5. '''Specify a file for Filter.'''<br />
In this case, we assume the file name with "ZikiFilter" as follows,<br />
<br />
[[image:ziki2-1.gif]]<br />
<br />
'''Note:'''Each Filter must have full class name (as above highlight).<br />
<br />
Use the setFilterURI method from SimpleRenderEngineImpl for setting the URI of filter configuration, such as "~./ZikiFilter" or "/ZikiFilter". In addition, if the URI starts with "~./ZikiFilter", it is relevant to a foreign Web context called "/web". And, it will be converted to "/web/ZikiFilter" first (without prefix request.getContextPath()). Or if URI starts with "/", the context path, e.g., "/zkdemo", is prefixed. In other words, "/ZikiFilter" means it is relevant to the servlet context path (say, "/zkdemo").<br />
As we mentioned above, you can try the following.<br />
<br />
<source lang="xml" ><br />
<zscript><br />
...<br />
engine.setFilterURI("~./ZikiFilter");<br />
...<br />
</zscript><br />
</source><br />
<br />
<br />
* Step 6. '''Organize Wikibox of you customization in your zul file.'''<br />
Now, you can use the new filter into your zul as follows,<br />
<br />
<source lang="xml" ><br />
<wikibox id="mywiki" rows="10" width="500px"><br />
<wikibutton image="~./ziki/img/underline.gif" prefix="__"<br />
postfix="__" tooltiptext="UnderLine text" sampletext="UnderLine Text"/><br />
</wikibox> <br />
<zscript><br />
SimpleRenderEngineImpl engine = (SimpleRenderEngineImpl) mywiki.getRenderEngine();<br />
engine.setInfo(SimpleRenderEngineImpl.INPUT_BUNDLE_NAME, "ziki_markup");<br />
engine.setInfo(SimpleRenderEngineImpl.OUTPUT_BUNDLE_NAME, "ziki_markup");<br />
engine.setFilterURI("~./ZikiFilter");<br />
</zscript><br />
</source><br />
<br />
Run it in your browser, you will see as this.<br />
<br />
[[image:ziki2-2.gif]]<br />
<br />
'''Note:''' In this case, when you try to press on the button, it will generat a string with '''"__UnderLine Text__"'''(in step 6 example code), and then to call the getHtml() method from Wikibox, it will be replaced a string with '''"<span style="text-decoration:underline;">UnderLine Text</span>"'''(as we mentioned above in step 3)<br />
<br />
=Upgrade Notes (Ziki-0.8 version to Ziki-0.8.1 version)=<br />
<br />
*The '''wikieditor''' has been renamed to '''wikibox''' to follow the textbox, intbox naming pattern.<br />
<br />
*Renamed two method, '''setTooltiptext''' and '''setSampletext''', from '''Wikibutton'''.<br />
<br />
<br />
=Download=<br />
<br />
* <tracker url="http://sourceforge.net/project/showfiles.php?group_id=194261" > Ziki-latest-version</tracker><br />
<br />
=Summary=<br />
<br />
The above sample is easy to use to customize your filter and wikibutton on Wikibox. We use the convenient Radeox Engine to let you use to customize your own Wikibox as you want. 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_II</comment><br />
<br />
<br />
[[Category:Overview]]<br />
[[Category:ZK Component]]<br />
{{Template:Smalltalk_Footer|<br />
|name=Potix Corporation <br />
}}</div>Elton776