ZK framework (Direct RIA) - Planet Igalia · ZK framework (Direct RIA) Diego Pino García ... application programming model to the web. ... – All are members of the class org.zkoss.ui.Page

Master on Free Software

ZK framework(Direct RIA)

Diego Pino García ([email protected])

mailto:[email protected]

mailto:[email protected]


Index

1.Overview.

2.Doing a Hello World !!

3.Basic concepts.


1 – Overview


Overview (I)

● ZK framework definition.– What does it do? ZK enables creation of rich user

interfaces for web applications with no Javascript and little programming.

– What is it ?● ZK is a presentation layer tool.● ZK is a server-centric framework.● ZK is a component-based framework.


Overview (II)

● ZK framework definition.– What does it include?

● Event-driven engine. It brings the desktop application programming model to the web.

● Set of web components.– Two flavors:

● XUL components.● XHTML components.

● Markup language ZUML to describe rich interfaces.

– Web components are described in ZUML.


Overview (III)

● ZK framework definition.– Language it is written

● Server side: Java– Built over Servlet specification => It is needed a servlet

container to run the program (tomcat, jetty, etc).● Client side: Javascript

● ZK 5.– Very similar API.

– Developer centric (Server + Client).


Overview (IV)● Architecture (I).


Overview (V)● Architecture (II) - MVC.


Overview (VI)● Architecture (III) – Layered architecture.


2 – Doing a Hello World !


Doing a Hello World (I)

● Step 1: Create a Maven web archetypemvn archetype:create -DgroupId=com.igalia.mswl -DartifactId=todo2 -DarchetypeArtifactId=maven-archetype-webapp

# apt-get install jetty

● Step 2: Install Jetty.

An introduction to Maven:• Maven Getting Started Guide• Maven in 5 minutes

mvn archetype:create -DgroupId=com.igalia.mswl -DartifactId=todo2 -DarchetypeArtifactId=maven-archetype-webapp

http://maven.apache.org/guides/getting-started/index.html

http://maven.apache.org/guides/getting-started/maven-in-five-minutes.html


Doing a Hello World (II)● Step 3: Add maven-jetty-plugin to pom.xml.– Allows to run and stop Jetty from Maven.

– mvn jetty:stop; mvn jetty:run.

● Step 4: Create index.zul at WEB-INF.

<window title="My First window" border="normal" width="200px"> Hello, World!</window>


Doing a Hello World (III)● Step 5: Try to load it. Configure the file

web.xml– Need to add instructions on how to process .zml

files.

– Get it (pastebin).

● Step 6: Deploy the web application.


Doing a Hello World (IV)

● Playing a bit with <window> component properties:

Property Function Value

title Sets the title of the window Any text

border Sets the border style of thewindow

normal or none

height Sets the height of the window Number of pixels (e.g 100px)

width Sets the width of the window Number of pixels (e.g 100px)

closable Sets whether or not a windowcan be closed

true of false

sizeable Sets whether or not the windowcan be sized

true or false


Doing a Hello World (V)

● Injecting AJAX into the Hello World. Steps:– Define an id for the window component. Value for the

id win. Type (id=”win”).

– Create a button component and introduce it in the index.zul page.

– Define a label property with the value ”Change title” (label=”Change title”) for the button.

– Register an onClick event listener with the value “win.title="ZK application with AJAX"”


Doing a Hello World (VI)

● Injecting AJAX into the Hello World. Steps:

<window id="win" title="My Second window" border="normal"height="200px" width="200px" closable="true" sizable="true">Hello, World!<button label="change title"onClick="win.title="ZK applicaiton with Ajax""/></window>


3 – Basic Concepts


Basic Concepts (I)● Components

– Def: A component is a user interface object (such a label, a button, a tree). It defines the visual aspect and the behaviors of a particular user interface element.

– Note: It is a two world object. ● Java object ● Browser representation HTML + Javascript

– All component implements the org.zkoss.ui.Component interface.


Basic Concepts (II)● Pages

– Def: A page is a collection of components.

– All are members of the class org.zkoss.ui.Page class.

– A page object is created when the ZK Loader servlet interprets a ZUML page.

● Desktop– Def: A desktop is a collection of pages for serving the

same URL request.

– As a ZK application interacts with the user, pages can be added to the desktop or removed from it.


Basic Concepts (III)● Component life cycle

– ZK framework assumes some processing sequence diagram regarding loading and updating pages that might affect how you write ZK applications.

– It takes 4 phases for a ZK loader to load and interpret a ZUML page:

– Page Initialization.

– Component creation

– Event processing.

– Rendering.


Basic Concepts (IV)● Page initialization:

– ZK runs the processing instruction called init.● <?init class=”MyInit”>● An object of class MyInit is created and its doInit()

method is called

● Component creation phase– The ZK loader servlet interprets the ZUML page

creating and initializing the components with the configuration specified in the page.


Basic Concepts (V)● The event processing phase

– ZK invokes each listener for the events queued for the desktop one by one.

– An independent thread is started to invoke each listener (events can trigger new events, so an event might be temporally suspended).

● The rendering phase– After all events are processed, ZK renders the

components into a regular HTML page and sends the page to the browser.


Basic Concepts (VI)● Updating pages by the ZK AU Engine to

process ZK requests sent from clients.– Stages:

● Request processing.● Event processing.● Rendering.

– Request processing.● Depending on the specifications of the request,

the ZK AU Engine might update the content of affected components so that their content is the same as what it shows in the client.

● Then, it posts corresponding events to the queue.


Basic Concepts (VII)● Updating pages by the ZK AU Servlet to

process ZK requests sent from clients.– Event processing.

● The same that the event processing phase when loading a ZUML page.

– Rendering● After all the events are processed ZK renders all

the updated components and sends the responses to the client browser.

● The client engine (Javascript) updates the DOM tree of the page viewed in the browser.


Basic Concepts (VIII)● Component attributes – Commons

attributes for all components.– Attribute id.

● Purpose: Identifies a component and let you refer to it in the Java code or in EL expressions.

<window title="Vote" border="normal">Do you like ZK?<label id="label"/><separator/><button label="Yes" onClick="label.value = self.label"/><button label="No" onClick="label.value = self.label"/></window>


Basic Concepts (IX)● Component attributes – Commons

attributes for all components.– Attribute if.

● Purpose: Create a true-false statement which determines if a component is rendered or not. If it is evaluated to true then it is rendered.

<window><label value="Vote 1" if="${param.vote}"/></window>


Basic Concepts (X)● Component attributes – Commons

attributes for all components.– Attribute if.

● Purpose: Create a true-false statement which determines if a component is rendered or not. If it is evaluated to true then it is rendered.

<window><label value="Vote 1" if="${param.vote}"/></window>


Basic Concepts (XI)● Component attributes – Commons

attributes for all components.– Attribute forEach.

● Purpose: To create a component for each value passed in the list.

● A list of values is required.<window><zscript>contacts = new String[] {"Monday", "Tuesday", "Wednesday"};</zscript><listbox width="100px"><listitem label="${each}" forEach="${contacts}"/></listbox></window>


Basic Concepts (XII)● Component attributes – Common

attributes for all components.– Attribute use.

● To separate control code from ZUML pages.● It is a class which is associated with a component.

<window use="MyWindow"/>

import org.zkoss.zul.Window; public class MyWindow extends Window {

public void onCreate(){this.setTitle("my window");

}}


Basic Concepts (XII)● Component attributes – Commons

attributes for all components.– Attribute apply.

● The same purpose that the use attribute, but it in this case the MVC pattern is enforced.

<window apply="MyController"><button id="btn_1" label="test"/>

</window>

public class MyController extends GenericForwardComposer {

private Button btn_1; public void onClick$btn_1(Event event) { btn_1.setLabel("event handled"); }}


Basic Concepts (XIV)● <zscript> component

– Def: Element to embed Java code. It is Java but interpreted by BeanShell.

● Beanshell supports "loose" or dynamically typed variable. That is, you can refer to variables without declaring them first and without specifying any type.

– Two ways of using zscript:● Inside <zscript></zscript>● In event handlers.


Basic Concepts (XV)● EL expressions.

– Def: EL expressions is a scripting language.

– Syntax: The same that JSP EL expressions.● ${}

– Where do you can put it ?● Anywhere except within:

– Attribute names.– Element names.– Processing instructions

– It is only used to read elements.● EL expressions cannot change anything.

– It does not have the assigment (=) operator.


Basic Concepts (XVI)● EL expressions.

– More info: http://java.sun.com/j2ee/1.4/docs/tutorial/doc/JSPIntro7.html

<window title="EL Test" width="200px"><zscript>String abc = "ABC";</zscript><button label="${abc}"/></window>

http://java.sun.com/j2ee/1.4/docs/tutorial/doc/JSPIntro7.html


Basic Concepts (XVII)● Id spaces

– Def: A id space is a subset of components of a desktop.

– The attribute id of components has to be unique inside a IdSpace

– There are two types of components:● Space owners.

– Implement the interface org.zkoss.ui.IdSpace.– A page also implements org.zkoss.ui.IdSpace– The space owner and its children from the IdSpace.

● Regular component.– Not implement a new IdSpace (window is a space

owner).


Basic Concepts (XIX)● Diagram


Basic Concepts (XX)● Id spaces

– Getting a fellow that is inside the IdSpace● getFellow(ComponentId)● Component spaceOwner = getSpaceOwner()

– Getting a component which is outside the IdSpace of the component

● getFellow(spaceOwnerId, componentId)– Getting a component from another page

● Path.getComponent("//page1/winA/labelD")● // indicates the current desktop


Basic Concepts (XXI)● Events

– An event is an object of class org.zkoss.zk.ui.Event and it is used to notify a class about what has happened.

● Each type of event is represented by a different class

– E.g. MouseEvent represent a mouse activity, such as clicking.

– To respond to an event an application must declare one or more event listeners.


Basic Concepts (XXII)● Events

– Three ways to declare an event listener:● Especify onXXX as component attribute in the

ZUML.<window title="Hello" border="normal"><button label="Say Hello" onClick="alert("Hello World!")"/></window>

● Register the event by defining the onXXX() method in the associated component class.

● By calling the addEventListener method for the component or the page you want to listen


4 – ZK5


Introduction

● Server + Client Fusion (Developer centric)– Still leverages strongly on server-side, but gives

developers flexibility to work on the client-side.

– Eases Javascript programming on client-side. jQuery built-in.

– Other minor changes on server API.

– ZK5.0.7 (stable)

– Client side programming with ZK5

– Client computing with ZUML

http://docs.zkoss.org/wiki/Client_Side_Programming

http://docs.zkoss.org/wiki/ZK5:_Client_Computing_with_ZUML%20


ZK5 - Examples

● Client-side event– In order to write client-side code, you are required to specify the

XML namespace http://www.zkoss.org/2005/zk/client.

<zk xmlns:w="http://www.zkoss.org/2005/zk/client">

<window> <button label="client" w:onClick="alert('clicked')"/> </window>

</zk>

– Refer to components with this (like self).

<label value="change me by click " w:onClick="this.setValue('clicked')"/>


ZK5 - Examples

● Jquery<window xmlns:w="http://www.zkoss.org/2005/zk/client"> <vbox> <label id="labelone" value="click to change" w:onClick="this.setValue('changed by click label');" />

<button label="button" w:onClick="this.$f('labelone').setValue('changed by button');" />

<html><![CDATA[ <a href="javascript:;" onclick="zk.Widget.$(jq('$labelone')[0]).setValue('changed with jq');">not widget</a> ]]></html> </vbox></window>


ZK5 - Examples

● Functions:– widget.$f(id). Same as getFellow(id)

– jq(@window), returns all DOM elements of type window.

– jq($win1), returns all DOM elements whose id is win1.

– zk.Widget.$(), util function to return particular zk widget by given if of DOM element.

● Can use jQuery effects:– Live demo: animatons

http://www.zkoss.org/zkdemo/window/modal_dialog;jsessionid=D22DD834735288826464001AED094C7F.zkdemo?search=animation

ZK framework (Direct RIA) - Planet Igalia · ZK framework (Direct RIA) Diego Pino García ... application programming model to the web. ... – All are members of the class org.zkoss.ui.Page

Documents