can't load zul page from richlet

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

54patman
13 ● 3

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