0

Update grid using NotifyChange

asked 2019-04-12 07:58:48 +0800

FrankV427 gravatar image FrankV427
5 2

In my code, I have a textbox in which you can insert text and a button to 'publish' that text. Beneath there is a grid, in which all the previously published posts appear. The issue is that, using the @NotifyChange doesn't work, or I dont know how it works well enough to make it update the grid. Here is the .zul:

<zk>
    <borderlayout id="main" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('pojos.PostController')">

    <!--Skipping code-->

    <center style="padding:15px;" border="none">

        <window>

            <window title="Crear Publicacion " border="normal">

                <textbox id="publish" placeholder="Make a post" 
                         height="40px" width="67%" multiline="true">
                    <attribute name="onChanging">
                    <![CDATA[
                        String value = event.value;     
                        publSize.setValue("" + value.length() + "/300");
                    ]]>
                    </attribute>
                </textbox>
                <space width="1%"/>
                <textbox id="publSize" height="40px" width="6%" style="text-align:center" disabled="true" placeholder="0/300"/>    
                <space width="1%"/>
                <button id="publicaBttn" label="Publicar" height="40px" width="25%" onClick="@command('addNewPost', p=publish)"/>

            </window>

            <separator bar="false"/>

            <grid id="postGrid" height="550px" model="@init(vm.posts)" emptyMessage="Nothing in Posts.">

                <template name="model">

                    <row>

                        <window border="normal">

                            <caption id="userName" label="@load(each.username)"/> 
                            <textbox id="infoPost" readonly="true" value="@load(each.info)" multiline="true" rows="4" width="100%" mold="rounded"/>
                            <separator bar="true"/> 
                            <hlayout>
                                <div>
                                    <button label="Like" onClick="@command('addLike', index=each.index)"/>
                                </div>
                                <div hflex="true">
                                    <textbox id="likeTB" disabled="true" width="3%" style="text-align:center" value="@load(each.likes)"/>
                                </div>
                                <div style="padding-right">
                                </div>
                            </hlayout>

                        </window>

                    </row></template></grid></window></center><!--...--></borderlayout></zk>

Here is the java controller:

@Command("addNewPost")
@NotifyChange("hConn")
public void addPost(@BindingParam("p") Textbox tbx) {
    String text = tbx.getValue();
    if (text == "") {
        Messagebox.show("¡No se puede crear una publicacion sin texto!", null, 0, Messagebox.ERROR);
    }
    if (text.length() > 300) {
        Messagebox.show("¡La publicaciones deben de ser menores a los 300 caracteres!", null, 0, Messagebox.ERROR);
    } else {
        hConn.addPost(usuario,text);
    }
    tbx.setValue("");
}

@Command("addLike")
@NotifyChange("hConn")
public void addLike(@BindingParam("index") String index) {
    hConn.addLike(Integer.parseInt(index));
}

When I either add a like or make i new post, the grid doesnt update to show the new like or the new post added. How can i solve this?

delete flag offensive retag edit

1 Answer

Sort by » oldest newest most voted
0

answered 2019-04-17 10:33:52 +0800

hawk gravatar image hawk
3225 1 5
http://hawkphoenix.blogsp... ZK Team

The first problem is you specify model="@init(vm.posts) which tells ZK load vm.posts just once and no reload in the future. So @NotifyChange doesn't take effect. replace it with @load(vm.posts). please refer to http://books.zkoss.org/zk-mvvm-book/8.0/data_binding/initialization.html

Another problem is you specify vm.posts on the Grid, but you notify hConn. I don't see any relationship between these 2 objects. Normally, if you specify vm.posts, you should notify the same property, e.g. @NotifyChange("posts").

If you assign a ListModelList to a Grid's model, when you call any API to modify the ListModelList, it will notify the Grid automatically. No need to add @NotifyChange. So if you call ListModelList.add(newText) then Grid will render the new text.

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

Follow
1 follower

RSS

Stats

Asked: 2019-04-12 07:58:48 +0800

Seen: 16 times

Last updated: Apr 17 '19

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