0

can't load zul page from richlet

asked 2020-06-23 01:42:39 +0800

54patman gravatar image 54patman
13 2

updated 2020-06-23 08:16:54 +0800

Hi

I want to programmatically load a zul page from my richlet. I created a new Spring Boot app with zk-9.

To reprodcue follow:

In /src/main/resources/application.properties I only have: zk.richlet-filter-mapping=/app/*

In src/main/resources/metainfo/zk/zk.xml I have:

<zk>
<config-name></config-name>
    <richlet>
        <richlet-name>webcam</richlet-name>
        <richlet-class>com.patmangames.WebCam</richlet-class>
    </richlet>

    <richlet-mapping>
        <richlet-name>webcam</richlet-name>
        <url-pattern>/app/webcam/*</url-pattern>
    </richlet-mapping>  

</zk>

My zul page is actually following this: https://zkfiddle.org/sample/3g4588e/3-upload-canvas

But here it is my src/main/resources/web/cam_canvas.zul:

<zk xmlns:n="native" xmlns:w="client">

<n:canvas width="400px" height="300px" id="mycanvas"></n:canvas>

<script>
  function draw() {
    var context = mycanvas.getContext("2d");
    context.fillStyle = "#000000";
    context.fillRect(0, 0, 400, 300);
    context.fillStyle = "#ff0000";
    context.fillRect(50, 50, 300, 200);
  }

  var sidCounter = 0;

  function upload(wgt, canvas) {
    var blob = zUtl.convertDataURLtoBlob(canvas.toDataURL('image/png'));
    var formData = new FormData();
    var xhr = new XMLHttpRequest();
    var sid = sidCounter++;

    formData.append('file', blob);
    xhr.onload = function (e) {
        if (this.readyState === 4) {
            if (this.status === 200) {
                wgt.fire('onImageUpload', {sid: sid}, {toServer: true});
            } else {
                zk.error(xhr.statusText);
            }
        }
    };
    zk.UploadUtils.ajaxUpload(wgt, xhr, formData, sid);

  }
</script>

</zk>

The Java code is really simple:

public class WebCam extends GenericRichlet {

@Override
public void service(Page page) throws Exception {
    try {
        Window window = new Window("Main Window", "normal", false);
        window.setPage(page);

        final Div d = new Div();
        d.setId("internal_div");
        window.appendChild(d);

        Component createComponents = Executions.createComponents("cam_canvas.zul", d, null);
        d.appendChild(createComponents);

    } catch (Exception e) {
        e.printStackTrace();
    }
}

}

and

public class TestComposer extends GenericForwardComposer{

public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);

Image testOutput = new Image();
comp.appendChild(testOutput);


Button drawButton = new Button("draw");
drawButton.setWidgetListener("onClick", "draw()");
comp.appendChild(drawButton);

Button uploadButton = new Button("upload");
uploadButton.setWidgetListener("onClick", "upload(this, document.getElementById('mycanvas'))");
uploadButton.addEventListener("onImageUpload", event -> {
  Map data = (Map) event.getData();
  List<org.zkoss.image.Image> uploads = (List<org.zkoss.image.Image>) desktop.removeAttribute(uploadButton.getUuid() + "." + data.get("sid"));
  Clients.log(uploads.toString());
  //use uploads.get(0).getByteData() / getStreamData() to get the actual data
  testOutput.setContent(uploads.get(0));
});
comp.appendChild(uploadButton);

} }

I get this error:

org.zkoss.zk.ui.UiException: Page not found: /app/cam_canvas.zul
at org.zkoss.zk.ui.http.ExecutionImpl.getPageDefinition(ExecutionImpl.java:385)
at org.zkoss.zk.ui.impl.AbstractExecution.createComponents0(AbstractExecution.java:346)
at org.zkoss.zk.ui.impl.AbstractExecution.createComponents(AbstractExecution.java:307)
at org.zkoss.zk.ui.Executions.createComponents(Executions.java:176)
at com.patmangames.WebCam.service(WebCam.java:22)

I have tried different variation of the URI for the zul file but it never finds it.

The zul file and all the code works. I need to save the zul files contents as a String and call createComponentsDirectly() and it all work! But I need the page resolution to work with richlets.

Thanks

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2020-06-23 13:06:12 +0800

cor3000 gravatar image cor3000
5250 2 7
ZK Team

based on the location where you placed the zul file this would map to

Executions.createComponents("~./cam_canvas.zul", ...)

~./ is a ZK specific prefix to load resources from your classpath below the 'web' folder

Also mentioned in this section of the introduction article: https://www.zkoss.org/wiki/ZK%20Installation%20Guide/Quick%20Start/Create%20and%20Run%20Your%20First%20ZK%20Application%20with%20Spring%20Boot#Application_structure

side note: Your example is way to complex for your question (it's hard to find the relevant parts) - please try to focus on what's necessary to cause the problem to make it easier for the community to help.

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: 2020-06-23 01:42:39 +0800

Seen: 5 times

Last updated: Jun 23

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