How to set Image content in ZK from String parameter

Question

Need help i want to set url image from String parameter in my code below wich is i got from table path in my database here is my .zul code:

   <div data-u="slides" apply="id.my.berkah.web.controller.ListTopController" style="cursor: default; position: relative; top: 0px; left: 0px; width: 900px; height: 250px; overflow: hidden;">
            <div data-p="112.50" style="display: none;">
            <img data-u="image" src="ImageProgram/Tsel-Banner.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
            <img data-u="image" src="ImageProgram/Xl Baner.jpg" />
            </div>
            <div data-p="112.50" style="display: none;">
            <img data-u="image" src="ImageProgram/IndosatBnr.jpg" />
            </div>
            <div id="jssor_1" apply="id.my.berkah.web.controller.ListTopController" data-p="112.50" style="display: none;">
            <image id="bg4" data-u="image" src="" />
            </div>
            <a data-u="ad" href="http://www.jssor.com" style="display:none">Responsive Slider</a>

        </div>

and here is my Controller i am using import org.zkoss.zul.Image :

@Wire 
Image bg4;

 @Listen("onCreate=#listTop")
    public void initWindow() throws IOException {
    AImage tempImage=null;    
    prmTrxTop par=new prmTrxTop(); 
    par.setPrmOutlet("%%");
    ReportImpl list = new ReportImpl();
    List<TopModel> result = list.selectTop(par);
    String image1=result.get(0).getImageModel1();
    bg4.setSrc(image1);
    }

but it just give me null pointer exception, what should i do to set src Image from my table path in my database.

Answer 1

I first make some comments to see the direction what it was going.
The most easy fix is just changing to MVVM.

MVVM is easier to understand, no need to wire and reusable zul or ViewModel.

How do we start, first we change the zul :

Zul :

<div data-u="slides" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('id.my.berkah.web.controller.ListTopController')" style="cursor: default; position: relative; top: 0px; left: 0px; width: 900px; height: 250px; overflow: hidden;">
    <div data-p="112.50" style="display: none;">
        <img data-u="image" src="ImageProgram/Tsel-Banner.jpg" />
    </div>
    <div data-p="112.50" style="display: none;">
        <img data-u="image" src="ImageProgram/Xl Baner.jpg" />
    </div>
    <div data-p="112.50" style="display: none;">
        <img data-u="image" src="ImageProgram/IndosatBnr.jpg" />
    </div>
    <div id="jssor_1" data-p="112.50" style="display: none;">
         <image id="bg4" data-u="image" src="@load(vm.myImage)" />
         <button label="change img source" onClick="@command('changeSrc') onCreate="@command('changeSrc')"/>
    </div>
    <a data-u="ad" href="http://www.jssor.com" style="display:none">Responsive Slider</a>
</div>

Java:

public class ListTopController {
    private String myImage;

    @Init
    public void callMeWhateverYouWant() {
        // do what you need to fetch your src.
        myImage = "";
    }

    @Command
    @NotifyChange("myImage")
    public void changeSrc() {
        //This can be added to any event.
        //you can change your image or something else, but you need to notify what's changed.
        myImage="new img src";
    }

    public String getMyImage() {
        return myImage;
    }

    //setter not needed as we use only @load.
}   

First of all, if there any faults in the code just tell me and I'll correct them.
This reason for this is that I write the code life on SO, so there is always a typo possible. Now I added a button to show how you can call the command.
You see I can call it on any event I like as long they exist.
Just take attention, the command has to be called in the scope of the component where you declare the viewmodel. (but this is also for the Controller)

If there are any more questions, just make a comment and I'll clarify more.

Edit:

In order to complete the answer with the questions of the comment :

• @bind will not help you, this is a shortcut for @load + @save.
  
• You should check if your getter is called :
• Yes => the src will be incorrect.
• No => the NotifyChange is not there or set on something else then a command or setter. You could use BindUtils.postNotifyChange(null,null,myImage,"."); in order to tell the binder to reload the property. (getter should be called with this)
• About the html, are you working in a zul file or some other file?( It should be zul) Native html can be added in zul with native namespace.