Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi everybody,
I'm customizing the client drag&drop functionality overwriting the zk.DnD.getDrop and zk.DnD.ghost javascript utilities ZK offers.
The problem is that I'm stuck when looking for a consistent method for internationalizing some new messages I'm adding.
After some research, I've found that zul.jar includes a javascript package named "zul.lang" (web/js/zul/lang/zk.wpd) in which the internationalization files are referenced:
<package name="zul.lang" cacheable="false"> <!-- To minimize # of JS files, we copy the content of zk.lang.wpd here --> <script src="../../zk/lang/msgzk*.js"/> <function class="org.zkoss.zk.ui.http.Wpds" signature="java.lang.String outLocaleJavaScript()"/> <script src="msgzul*.js"/> <function class="org.zkoss.zul.impl.Utils" signature="java.lang.String outLocaleJavaScript()"/> </package>
This package calls two outLocaleJavaScript() methods to init the language files. As I've found the documentation on this matter short to some extent, I'm not sure how to extend this strategy to my customizations.
I'm using ZK 5.0.7
Any help would be appreciated.
Best regards,
Will.
Hi ,
could you have a description to explain what kind of customization your are planing ?
you are going to change the DND ghost message and want to also support the internationalization for it?
I mean , it's better if you have a simple use-case and then I could explain how to handle this for your use-case.
Hi TonyQ,
sorry, maybe I wasn't too specific. That's exactly what I want to do: customize the DND ghost message adding I18n support for it.
Should I create a js with my I18n messages and pack it altogether with zk wpd? How can I tell ZK to load my wpd when it loads its own js packages?
Thanks in advance.
Will.
For the i18n support , you could use the merge way.
http://books.zkoss.org/wiki/ZK%20Developer's%20Reference/Performance%20Tips/Minimize%20Number%20of%20JavaScript%20Files%20to%20Load
I am not sure if you are writing a standalone custom component project or want to customize in your web application.
But the basic idea is to setup a language add-on file , a zk wpd folder in your classpath and merge the wpd to zk.wpd in your lang-addon.
(If you are writing a new custom component , you need not to merge it to zk.wpd since you could load it in your own wpd with your widget.)
Here's a sample for I18n message customization.
zk.xml
------
<zk>
<!-- ....... -->
<language-config>
<addon-uri>/WEB-INF/lang-addon.xml</addon-uri>
</language-config>
</zk>
WEB-INF\lang-addon.xml
---------
<language-addon>
<addon-name>mymsg</addon-name>
<language-name>xul/html</language-name>
<javascript package="mymsg" merge="true" />
</language-addon>
---------
web\js\mymsg\zk.wpd
Note: you have to make sure the web\js\mymsg is in your CLASSPATH . (my test case's fullpath is src\web\js\mymsg)
<?xml version="1.0" encoding="UTF-8"?>
<package name="mymsg" language="xul/html" >
<script src="mymsg.js" /> <!-- set the default language when the specific language not found -->
<!-- Note the "*" do means locale actually .
for example , if your browser local is zh_TW , it does only map to mymsg_zh_TW.js -->
<script src="mymsg*.js" />
</package>
web\js\mymsg\mymsg.js
------
mymsg = {};
mymsg.MY_MESSAGE = "default";
web\js\mymsg\mymsg_zh_TW.js Create all the msg files as you need here.... here the zh_TW is just a sample ....
------
mymsg = {};
mymsg.MY_MESSAGE = "default with ZH_TW";
-----
index.zul And then wrote a sample zul to test it.
----------
<window title="Hello World!!" border="normal" width="200px"> <script> alert(mymsg.MY_MESSAGE); </script> </window>
For ghost message, reference to this sample first
<zk>
<listbox width="100px">
<listitem label="default" draggable="true"/>
<listitem label="custom text" draggable="true" id="li"/>
</listbox>
<zscript><![CDATA[
li.setWidgetOverride("getDragMessage_","function(){return 'Hello';}");
]]></zscript>
</zk>
It's actually a complicated question and I might not explain it well, let me know if you need further assistance.
Thank you so much TonyQ for your detailed answer.
I've been working following your steps and finally managed to get the labels (almost) working. It just took me a while to realize that is a must to store the labels in the exact path /web/js.
My problem now is that although my own labels do render while showing the dnd ghost, they don't change when switching the browser's locale.
I have created 3 label files under /src/web/js/labels:
labels_es.js
labels_fr.js
labels.js
And under the same directory, zk.wpd:
<?xml version="1.0" encoding="UTF-8"?> <package name="labels" language="xul/html" > <script src="labels.js" /> <script src="labels*.js" /> </package>
The relevant snippet in my DnD customization is:
zk.DnD.ghost = function(drag, ofs, msg) {
// ...
jq(document.body).append(
'<div id="zk_ddghost" class="z-drop-ghost z-drop-disallow" ' +
' style="position: absolute; top:' + ofs[1] + 'px; left: ' + ofs[0] + 'px; border: 0">' +
' <div class="z-label">' +
' <span id="zk_ddghost-img" class="z-drop-disallow"></span>' +
// Message begins
' <span style="font-weight: bold; padding-left: 5px;">' +
labels.global_dnd_moving + msgzul.UNKNOWN_TYPE +
' </span>' +
' <br></br>' +
' <![CDATA[<ul>' +
objectList +
' </ul>' +
// Message ends
' </div>' +
'</div>');
// ...
}
In the previous code, "labels.global_dnd_moving" is a custom label that always renders in the same language. Surprisingly the label does not render in the default language, but in spanish (which is my computer default language, I don't know if this has something to do with it).
I added the zk label "msgzul.UNKNOWN_TYPE" to test if a ZK label inside my function would render correctly and it does, accordingly to the browser's locale.
Am I missing something here? Why does the zk label change with the browser's locale but not mine? Should I add a function call in my wpd in the fashion of those found in zul.jar/web/js/zul/zk.wpd?
Thanks for your help,
Will.
No , the function call is only for some system message .
Let me test it more carefully and see if I miss anything later. :)
I have received from the forum bot TonyQ's answer in my email account, but it seems that the message got lost somehow.
I paste it here so anyone interested may read it because it resolved my issue (thanks TonyQ).
@TonyQ: maybe a smalltalk about this topic would be appreciated by the community as the documentation for this kind of tweaking is a bit short.
By: TonyQ
Hi ,
After digging more into this issue and had some simple discussion with others, finally find out the reason.
The way to merge it to zk.wpd is not working since the zk.wpd was cached.
So my final suggestion is :
Remain the config/file above , but change some details.
1. in our wpd , setup a cacheable="false" flag
<package name="mymsg" language="xul/html" cacheable="false">
2.modify the lang-addon and remove the merge="true" for the javascript tag
<javascript package="mymsg" />
3.And one more steps , load the package in every page by default.
setup the following setting in your zk.xml under the <zk> tag
<device-config>
<device-type>ajax</device-type>
<embed>
<![CDATA[
<script type="text/javascript">
zk.$import("mymsg"); //mymsg is the package name
</script>
]]>
</embed>
</device-config>
This time it should work perfectly...:P
Asked: 2011-09-14 04:48:46 +0800
Seen: 845 times
Last updated: Oct 04 '11