User:Robertwenzel/LongOperations

Author
Robert Wenzel, Engineer, Potix Corporation

Date
January XX, 2015

Version
ZK 7.0.4

Introduction

Longoperations are useful - bla - leverage Java Threads - bla - here how to hide and reuse the technical details. support MVVM and MVC programming model

Long Operations de-mystified

A very Simple Example

This simple example shows a very simple use case of the LongOperation class. The operation creates a simple result which is added to the resultModel when it finishes. During the 3 seconds the default busy overlay is displayed, asking the user to wait.

public class SimpleLongOperationViewModel {
	private ListModelList<String> resultModel = new ListModelList<String>();

	@Command
	public void startLongOperation() {
		LongOperation longOperation = new LongOperation() {
			private List<String> result;

			@Override
			protected void execute() throws InterruptedException {
				Thread.sleep(3000); //simulate a long backend operation
				result = Arrays.asList("aaa", "bbb", "ccc");
			}

			protected void onFinish() {
				resultModel.addAll(result);
			};

			@Override
			protected void onCleanup() {
				Clients.clearBusy();
			}
		};

		Clients.showBusy("Result coming in 3 seconds, please wait!");
		longOperation.start();
	}

	public ListModelList<String> getResultModel() {
		return resultModel;
	}
}

• Line 10: Implement the execute callback to collecting the result asynchrously
• Line 15: Implement the onFinish callback to update the UI once the operation has finished successfully
• Line 26: Launch the operation

In the 'startLongOperation'-command handler the "busy"-overlay is shown. In onCancel it is cleared, however the long operation terminates (successful or not).

Here the straight forward zul code using this SimpleLongOperationViewModel and posting the startLongOperation-command

    <div apply="org.zkoss.bind.BindComposer" 
    	 viewModel="@id('vm') @init('zk.example.longoperations.example.SimpleLongOperationViewModel')">
        <button onClick="@command('startLongOperation')" label="start"/>
        <grid model="@load(vm.resultModel)" height="300px"/>
    </div>

Updating the UI during the Operation

	private static final String IDLE = "idle";
	private String status = IDLE;

...

	@Command
	public void startLongOperation() {
		LongOperation longOperation = new LongOperation() {
			private List<String> result;

			@Override
			protected void execute() throws InterruptedException {
				step("Validating Parameters...", 10, 500);
				step("Fetching Data ...", 40, 1500);
				step("Filtering Data...", 60, 1750);
				step("Updating Model...", 90, 750);
				result = Arrays.asList("aaa", "bbb", "ccc");
			}

			private void step(String message, int progress, int duration) throws InterruptedException {
				activate();
				updateStatus(progress+ "% - " + message);
				deactivate();
				Thread.sleep(duration); //simulate processing time for the current step
			}

			@Override
			protected void onFinish() {
				resultModel.addAll(result);
				updateStatus(IDLE);
			}
		};
		longOperation.start();
	}

	private void updateStatus(String update) {
		status = update;
		BindUtils.postNotifyChange(null, null, UpdatingStatusLongOperationViewModel.this, "status");
	}

• Line 21: activate the Thread for UI updates
• Line 23: deactivate the Thread to send the updates back to the browser
• Line 38: notify the change to update the UI

    <div apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('zk.example.longoperations.example.UpdatingStatusLongOperationViewModel')">
        <button onClick="@command('startLongOperation')" label="start" disabled="@load(vm.status ne 'idle')" autodisable="self"/>
        <label value="@load(vm.status)"/>
        <grid model="@load(vm.resultModel)" height="300px"/>
    </div>

• Line 3: The status label to update during the operation

Resulting Demo

The video below demonstrates the results of the two advanced usages described above. For ease of demonstration here we use a PDF printer so the resulting screen is a PDF file, but you can definitely specify a real printer to print out the desired results on papers. ERROR: Link hasn't been found

Summary

With the printing utility explained in the article, you can print the desired sections in a ZK page with only little effort -- you can even include custom headers & footers or change the style easily for better readability. For your convenience we have wrapped this utility as a ready-to-use jar file. Refer to download section to download the jar file and put it in your project's WEB-INF/lib folder.

Download

• The source code for this article can be found in github.
• Download the packed jar file from github.

Comments

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.