Access a custom pojo as a property in client javascript

asked 2014-07-18 06:22:40 +0800

JustinFrost gravatar image JustinFrost
139 1 6

Hi All,

I have created a simple message component which displays an error message. I want to pass this message as a POJO by binding.

For example my custom component is:


public class Messagebox extends HtmlBasedComponent  {
    private Message _message;
    protected void renderProperties(org.zkoss.zk.ui.sys.ContentRenderer renderer)
    throws java.io.IOException {
        render(renderer, "message", getMessage());
    public Message getMessage(){
    return _message;
    public void setMessage(Message _message) {
    this._message = _message;
    smartUpdate("message", _message);

My javascript is:

foo.Messagebox = zk.$extends(zul.Widget, {
    _message: '',

    getMessage: function () {
    return this._message;

    setMessage: function(message) {
    this._message = message;

Message class is as follows:

public class Message implements Serializable{

       private static final String TYPE_ERROR = "error";
       private static final String TYPE_SUCCESS = "success";

    private String text = "";
    private String title = "";
    private String type = TYPE_ERROR;

    public Message(String text) {
        this.text = text;

    public Message(String text, String title, String type) {
        this.text = text;
        this.title = title;
        this.type = type;
    public String getText() {
        return text;
    public void setText(String text) {
        this.text = text;
    public String getTitle() {
        return title;
    public void setTitle(String title) {
        this.title = title;
    public String getType() {
        return type;
    public void setType(String type) {
        this.type = type;

I have bound a message object to the message property of my component, and it passes through to the client, but I am unsure if I can do anything with it...

How do I access the properties of the message POJO within the javascript code or is this not possible ??


delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2014-07-18 10:42:04 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

Maybe the following example will give you a hint. On the client-side you can access easily json data. So, why don't you create whatever you like on the server, then send it back to the client as a JSON object?

<window title="JSON Demo" border="normal"
        viewModel="@id('vm') @init('snippets.json.DemoVM')">

    <button label="Get JSON Data" onClick="@command('get-json-data')" />

    <div id="content" />    

<script type="text/javascript">

function showJsonData(data) {
  var user = JSON.parse(data);
  $("$content").html("<h1>" + user.name + "  (" + user.email + ")" + "</h1>");


And the view model:

public class DemoVM {

  public void onGetJsonData() {

    JSONObject jsonData = new JSONObject();
    jsonData.put("name", "Costas");
    jsonData.put("email", "costas@foo.com");
    Clients.evalJavaScript("showJsonData('" + jsonData.toJSONString() + "')");

Hope that helps


link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2014-07-18 06:22:40 +0800

Seen: 13 times

Last updated: Jul 18 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More