ZK - ZK Getting Started_Get ZK Up and Running With MVVM - Documentation

Embed Size (px)

Citation preview

  • 8/10/2019 ZK - ZK Getting Started_Get ZK Up and Running With MVVM - Documentation

    1/14

    /09/2012 ZK - ZK Getting Started/Get ZK Up and Running with MVVM - Documentation

    1oks.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM

    Search

    http://www.zkoss.org/support/http://www.zkoss.org/documentation/zatshttp://www.zkoss.org/documentation/zkjsphttp://www.zkoss.org/documentation/zkcalendarhttp://www.zkoss.org/documentation/zkpivottablehttp://www.zkoss.org/documentation/zkspreadsheethttp://www.zkoss.org/documentation/zkspringhttp://www.zkoss.org/documentation/zkstudiohttp://www.zkoss.org/documentationhttp://www.zkoss.org/documentationhttp://tracker.zkoss.org/secure/IssueNavigator.jspa?mode=hide&requestId=10001http://tracker.zkoss.org/secure/IssueNavigator.jspa?mode=hide&requestId=10002http://www.zkoss.org/documentation#Small_Talkshttp://books.zkoss.org/wiki/Blogospherehttp://books.zkoss.org/wiki/Hall_of_Famehttp://blog.zkoss.org/http://www.zkoss.org/forum/http://www.zkoss.org/community/http://www.zkoss.org/whyzk/Testimonialshttp://www.zkoss.org/whyzk/casestudieshttp://www.zkoss.org/whyzk/WhosUsinghttp://www.zkoss.org/whyzk/TopReasonshttp://www.zkoss.org/whyzk/featureshttp://www.zkoss.org/whyzk/http://www.zkoss.org/download/zatshttp://www.zkoss.org/download/zkjsphttp://www.zkoss.org/download/zkcalendarhttp://www.zkoss.org/download/zkpivottablehttp://www.zkoss.org/download/zkspreadsheethttp://www.zkoss.org/download/zkspringhttp://www.zkoss.org/download/zkstudiohttp://www.zkoss.org/download/zkhttp://www.zkoss.org/download/http://www.zkoss.org/demo/externalhttp://www.zkoss.org/zksandboxhttp://www.zkoss.org/zkmail/http://zcal.zkoss.org/http://www.zkoss.org/zkdemo/application/pivottablehttp://zssdemo.zkoss.org/http://www.zkoss.org/product/zkstudio/demohttp://www.zkoss.org/zkdemo/http://www.zkoss.org/demo/http://www.zkoss.org/product/zatshttp://www.zkoss.org/product/zkjsphttp://www.zkoss.org/product/zkcalendarhttp://www.zkoss.org/product/zkpivottablehttp://www.zkoss.org/product/zkspreadsheethttp://www.zkoss.org/product/zkspringhttp://www.zkoss.org/product/zkstudiohttp://www.zkoss.org/product/zkhttp://www.zkoss.org/product/
  • 8/10/2019 ZK - ZK Getting Started_Get ZK Up and Running With MVVM - Documentation

    2/14

    /09/2012 ZK - ZK Getting Started/Get ZK Up and Running with MVVM - Documentation

    2oks.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM

    Support Options

    Partners

    About Us

    Search..

    Custom Search Wiki Search

    ZK Getting Started/Get ZK Up and Running with MVVM

    From Documentation

    Contents

    1 Introduction

    2 Tutorial Objective

    3 Warm Up

    3.1 Setup Eclipse

    3.2 Install ZK in a Web Project

    3.3 Run an Application

    3.4 Import and Run Example Application

    4 Declaring Domain Class

    5 Building the User Interface

    6 Automatic UI Controlling6.1 Abstracting the View

    6.2 Binding UI to ViewModel

    6.3 Displaying Data Collection

    6.4 Implementing View Details Functionality

    7 Approach Comparison

    8 References

    Introduction

    This tutorial is intended for software developers who have experience in writing Java programs. We will guide you through how to build a modern web application with ZK. The targe

    simple car catalog application. In this article, we will present an approach which is classified as the Model-View-ViewModel (MVVM)design pattern. Using this approach, ZK can

    and it separates the UI from its controller clearly. In addition, you can also choose to go with the MVCapproach that is covered in another tutorial[1]

    .

    We also provide the complete source code with an Eclipse project zip file in Import and Run Example Application section.

    Tutorial Objective

    Our target application is a simple car catalog application. This application has two functions:

    1. Search cars.

    Enter a keyword in the input field, click Searchand search results will be displayed in the car list below.

    2. View details.

    Click an item from the car list, the area below the car list will show the selected car's details including name, price, description, and preview.

    http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Import_and_Run_Example_Applicationhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_note-0http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Referenceshttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Approach_Comparisonhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Implementing_View_Details_Functionalityhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Displaying_Data_Collectionhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Binding_UI_to_ViewModelhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Abstracting_the_Viewhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Automatic_UI_Controllinghttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Building_the_User_Interfacehttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Declaring_Domain_Classhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Import_and_Run_Example_Applicationhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Run_an_Applicationhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Install_ZK_in_a_Web_Projecthttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Setup_Eclipsehttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Warm_Uphttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Tutorial_Objectivehttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Introductionhttp://www.zkoss.org/support/abouthttp://www.zkoss.org/partner/http://www.zkoss.org/support/options
  • 8/10/2019 ZK - ZK Getting Started_Get ZK Up and Running With MVVM - Documentation

    3/14

    /09/2012 ZK - ZK Getting Started/Get ZK Up and Running with MVVM - Documentation

    3oks.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM

    Warm Up

    This section guides you through how to setup a project and use ZK in Eclipse. If you want to know how to build the application with ZK first, please skip it and start from Declaring D

    how to prepare an environment to build a ZK web application in including setting the IDE, installing ZK, and running an application in a server.

    Setup Eclipse

    In this tutorial, Eclipse IDE 3.7 (indigo) for Java EE developer is used to demonstrate the building of the car catalog application. (Download Eclipse (http://www.eclipse.org/dow

    extract the downloaded zip file to a folder and execute eclipse.exe to run Eclipse.)

    In order to edit ZK UI pages in Eclipse, add "zul" (ZK UI page's file extension name) as a content type of XML format following these steps below:

    1. Select Window \ Preferencesto open Preferences window

    2. On the left, select General --> Content Types. On right, expand Textnode in "Content types" box and select XML

    3. Click Addand type in the content type you wish to add which is *.zulin this case, then click OK

    After this has been done, Eclipse will use XML editor to open your zul file.

    Install ZK in a Web Project

    Download ZK

    Download the ZK CE first (http://www.zkoss.org/download/zk) (file name would look like zk-bin-[version].zip) and extract it to a folder.

    Create a Project

    To build a web application, first, create a "Dynamic Web Project" in Eclipse:

    1. Select File \ New \ Dynamic Web Project

    2. Enter warmupin Project name and keep every thing else default.

    http://www.zkoss.org/download/zkhttp://books.zkoss.org/wiki/File:Tutorial-add-contenttype.pnghttp://www.eclipse.org/downloads/packages/release/indigo/sr2http://books.zkoss.org/wiki/File:Eclipse-javaee.pnghttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Declaring_Domain_Classhttp://books.zkoss.org/wiki/File:Tutorial-searchexample.png
  • 8/10/2019 ZK - ZK Getting Started_Get ZK Up and Running With MVVM - Documentation

    4/14

    /09/2012 ZK - ZK Getting Started/Get ZK Up and Running with MVVM - Documentation

    4oks.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM

    You can leave "Target runtime" as "none".

    Notice that we set Dynamic web module versionto 3.0 because we want to use Servlet 3.0 to eliminate application configuration.

    Install ZK JAR

    To use ZK in your project, you have to copy ZK JAR files into your project's library folder.

    Copy the JAR files from the following directory to WebContent\WEB-INF\lib:

    {YOUR_ZK_UNZIP_FOLDER}\dist\lib

    {YOUR_ZK_UNZIP_FOLDER}\dist\lib\ext

    If you prefer to use an application server that supports older (< 3.0)Servlet specification or JDK 1.5, you need to add more configuration on web.xml. Please refer to ZK

    Create a Simple Page

    After installation, you can create a simple zul to verify if the installation has been successful or not.

    In Eclipse,

    1. Select File \ New \ File(or File \ New \ Other \ File ) to add a new file, hello.zul, under WebContent.

    2. Click Source tab to modify source.

    3. Copy and paste the following sample code into hello.zul and save.

    hello.zul

    Now, in Project Explorerview your project would look something like:

    123

    Hello World!

    http://books.zkoss.org/wiki/File:Tutorial-xmleditor.pnghttp://books.zkoss.org/wiki/File:Icon_info.pnghttp://books.zkoss.org/wiki/File:Tutorial-newproject.png
  • 8/10/2019 ZK - ZK Getting Started_Get ZK Up and Running With MVVM - Documentation

    5/14

    /09/2012 ZK - ZK Getting Started/Get ZK Up and Running with MVVM - Documentation

    5oks.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM

    If you cannot find Project Explorerview, select menu Window \ Show View \ Project Explorerto open it.

    Run an Application

    Before running a web application, we must create a server in Eclipse. Select Window \ Preferences to open Preferences window and select Server \ Runtime Environmentsfrom

    environment.

    Select Apache \ Tomcat v7.0 Serveras it supports Servlet 3.0 and tick Create a new local server, then click Next.

    If you use JDK 1.5, you could choose Tomcat v6.0 but you will need more configuration on web.xml. Please refer to ZK Installation Guide in References .

    http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Referenceshttp://books.zkoss.org/wiki/File:Icon_info.pnghttp://books.zkoss.org/wiki/File:Tutorial-preference-server.pnghttp://books.zkoss.org/wiki/File:Tutorial-project-structure.png
  • 8/10/2019 ZK - ZK Getting Started_Get ZK Up and Running With MVVM - Documentation

    6/14

    /09/2012 ZK - ZK Getting Started/Get ZK Up and Running with MVVM - Documentation

    6oks.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM

    If you have installed Tomcat 7 previously, simply provide the directory path. If you haven't, proceed with the following steps:

    1. Click Download and Installand choose a folder.

    Notice that the installation path must not contain non-ASCII characters.

    2. Accept the license agreement and wait.

    Eclipse will show an error message before installation completes, please ignore this message.

    Please wait and do not interrupt the installation before it completes to ensure that the installation has been done properly.

    Eclipse will download and install Tomcat into the folder you have specified.

    3. After the installation has been completed, click Finish

    Now you should be able to see a new entry inServer rumtime e nvironments.

    http://books.zkoss.org/wiki/File:Tutorial-installing-progress.pnghttp://books.zkoss.org/wiki/File:Tutorial-installing-unknown.pnghttp://books.zkoss.org/wiki/File:Tutorial-downloadinstall.pnghttp://books.zkoss.org/wiki/File:Tutorial-newserver.png
  • 8/10/2019 ZK - ZK Getting Started_Get ZK Up and Running With MVVM - Documentation

    7/14

    /09/2012 ZK - ZK Getting Started/Get ZK Up and Running with MVVM - Documentation

    7oks.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM

    Right click on hello.zul and select Run As \ Run on Serverto run this zul on an application server.

    Choose an existing Tomcat 7. Yon can also tick Always use this server when running this projectoption to avoid choosing a server each time you run the application in the future

    start running.

    After the server starts running, Eclipse will open a browser and connect to http://localhost:8080/hello.zul automatically . If you can see the following image, then your project is ready

    You can come back and follow these steps to run your application during this tutorial

    Import and Run Example Application

    We have prepared an Eclipse project zip file that contains the complete source code, you can download and import it to your Eclipse without having to start from scratch.

    To use example application, follow the steps below:

    1. Download example application project zip file (http://zkbooks.googlecode.com/files/tutorial-20120906.zip) .

    http://zkbooks.googlecode.com/files/tutorial-20120906.ziphttp://books.zkoss.org/wiki/File:Tutorial-hello.pnghttp://localhost:8080/hello.zulhttp://books.zkoss.org/wiki/File:Tutorial-choose-server.pnghttp://books.zkoss.org/wiki/File:Tutorial-runonserver.pnghttp://books.zkoss.org/wiki/File:Tutorial-server-complete.png
  • 8/10/2019 ZK - ZK Getting Started_Get ZK Up and Running With MVVM - Documentation

    8/14

    /09/2012 ZK - ZK Getting Started/Get ZK Up and Running with MVVM - Documentation

    8oks.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM

    2. In Eclipse, select File \ Import \ General \ Existing Projects into Workspace , choose Select archive fileto import example application zip file as a project into your Eclip

    3. Then follow the instructions from Run an Application to run it.

    Declaring Domain Class

    The following is the domain object that represents a car.

    Please refer to References section to see the complete code. [3]

    We then define a service class to perform the business logic (search cars) shown below:

    In this example, we have defined a class - CarServeImplthat implements the above interface. For simplicity, it uses a static list object as the data model. You can rewrite it so that it

    application. Implementation details are not in the scope of this article, please refer to References section. [4]

    Building the User Interface

    UI Design is a good start to building an application as it helps you define the scope of your application. ZK provides hundreds of readily-made UI components so developers can rap

    combining and mix matching these components without having to create them from scratch.

    In ZK, you can use ZK User Interface Markup Language (ZUML) [5], an XML-formatted language, to describe UI. By ZK's convention, the files to describe user interface with ZUM

    one component can be represented as an XML element (tag) and you can configure each component's style, behavior, and function by setting XML element's attributes. [6]

    In the case of this example application, first of all, we want to design a windowwith specified title and normal border as our application's frame.

    Extracted from se arch.zul

    As windowis the outermost component, it is called the root component. Windowis a commonly used container because it is a basic display element of a desktop-like application wh

    All other components inside windoware called child componentsand should be put in window tag's body. We set window's title bar text with "title" attribute and make windowdis

    attribute. For "width" attribute, use CSS like syntax such as "800px" or "60%".

    Basically, our example application's user interface is divided into 3 areas within the window, they are (from top to bottom) search function, car list, and car details.

    123

    456789

    publicclassCar { privateInteger id; privateString name;

    privateString company; privateString preview; privateString description; privateInteger price; //omit getter and setter for brevity}

    123456

    789

    101112131415

    publicinterfaceCarService {

    /** * Retrieve all cars in the catalog. * @return all cars */

    publicList findAll();/**

    * search cars according to keyword in name and company. * @param keyword for search * @return list of car that match the keyword */ publicList search(String keyword);}

    123

    http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_note-5http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_note-4http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_note-3http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_note-2http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#Run_an_Application
  • 8/10/2019 ZK - ZK Getting Started_Get ZK Up and Running With MVVM - Documentation

    9/14

  • 8/10/2019 ZK - ZK Getting Started_Get ZK Up and Running With MVVM - Documentation

    10/14

    /09/2012 ZK - ZK Getting Started/Get ZK Up and Running with MVVM - Documentation

    10/1oks.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM

    The Viewmeans user interface. The zul page which contains ZK components represents this part. A user's interaction with components triggers events to be sent to controllers.

    The ViewModelis responsible for exposing data from the Model to the View and providing required action requested from the View. The ViewModel is type of View abstraction

    But ViewModel should contain no reference to UI components . ZK framework handles communication and state synchronization between View and ViewModel.

    Under this approach, we just prepare a ViewModel class with proper setter, getter and behavior methods, then assign data binding expression to a component's attributes in

    synchronize data between ViewModel and components and handle events automatically according to binding expressions. We don't need to control components by ourselves.

    Here we use search function to explain how MVVM works in ZK. Assume that a user click "Search" button then listboxupdates its content. The flow is as follows:

    1. A user clicks "Search" button and a corresponding event is sent.2. ZK's binder invokes the corresponding command method in the ViewModel.

    3. The method accesses data from Model and updates some ViewModel's properties.

    4. ZK's binder reloads changed properties from the ViewModel to update component's states.

    Abstracting the View

    ViewModel is an abstraction of View. Therefore when we design a ViewModel, we should analysis UI's functions for what stateit contains and what behaviorit has.

    The state:

    1. keyword from user input

    2. car list of search result

    3. selected car

    The behavior:

    1. search

    According to above analysis, the ViewModel should have 3 variables for above states and one method for the behavior. In ZK, creating a ViewModel is like creating a POJO, and it

    properties through setter and getter methods. The search method implements search logic with service class and updates the property "carList".

    SearchViewModel.java

    Annotation

    In ZK MVVM, any behavior which can be requested by a View is a commandin a ViewModel. We can bind a component's event to the command and ZK will invoke the method

    let ZK know which behavior (method) can be requested, you should apply an annotation @Commandon a method. We mark search()as a "command" with default command nam

    name. The command name is used in data binding expression we'll talk about in next section.

    123456789

    1011121314151617

    packagetutorial;importjava.util.List;importorg.zkoss.bind.annotation.*;publicclassSearchViewModel {

    privateString keyword; privateList carList; privateCar selectedCar;

    //omit getter and setter

    publicvoidsearch(){ carList = carService.search(keyword); }}

    http://books.zkoss.org/wiki/File:Tutorial-mvvm.png
  • 8/10/2019 ZK - ZK Getting Started_Get ZK Up and Running With MVVM - Documentation

    11/14

    /09/2012 ZK - ZK Getting Started/Get ZK Up and Running with MVVM - Documentation

    11/1oks.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM

    In search(), we change a ViewModel's property: carList. Thus, we should tell ZK this change with @NotifyChangeso that ZK can reload the changed property for us after it in

    For "search" command, it looks like:

    SearchViewModel.java

    For complete source code, please refer to References section. [9]

    Binding UI to ViewModel

    Under MVVM, we build our UI as same as we would with the MVC approach, then we specify relationship between a ZUL and a ViewModel by writing data binding expression in c

    components for us.

    To bind a component to a ViewModel, we should apply a composer called org.zkoss.bind.BindComposer. This composer processes data binding expressions and initializes the V

    component to a ViewModel by setting its viewModelattribute with following syntax:

    @id('ID') @init('FULL.QUALIFIED.CLASSNAME')

    @id() is used to set ViewModel's id to whatever we want like a variable name. We will use this id to reference ViewModel's properties (e.g. vm.carList) in a data binding exp

    We should provide full-qualified class name for @init()to initialize the ViewModel object.

    Extracted from searchMvvm.zul

    After binding the ViewModel to the component, all its child components can access the same ViewModel and its properties.

    We can bind View to both ViewModel's properties and behavior with data binding expression. Let's see how to use data binding to achieve search function.

    Since we have declared variables in ViewModel class for component's states in previous section, we can bind component's attributes to them. After binding a component's attribute to

    etween attribute's value and a ViewModel's property for us automatically. We can specify which attribute is bound to which propertyby writing data binding expression as a com

    @bind(vm.aProperty)

    Remember that vmis the id we have given it in @id()previously and now we use it to reference ViewModel object.

    There are 2 states which relate to search function to be stored in the ViewModel upon previous analysis. First, we want to store value of textbox in ViewModel's keyword. We can

    vm.keywordwith @bind(vm.keyword). Second, we want to store the data model of a listboxin ViewModel's carList, so we should bind listbox's "model" to vm.carList.

    Extracted from searchMvvm.zul

    We can only bind a component's event attribute (e.g. onClick) to ViewModel's behavior. After we bind an event to a ViewModel, each time a user triggers the event, ZK finds the bo

    order to handle clicking on "Search" button, we have to bind button's onClick attribute to a command method with following syntax:

    @command('COMMAND_NAME')

    We should look for command name specified in our ViewModel's command method.

    Extracted from searchMvvm.zul

    123456789

    101112131415

    packagetutorial;importjava.util.List;importorg.zkoss.bind.annotation.*;publicclassSearchViewModel {

    //omit other codes

    @Command @NotifyChange("carList") publicvoidsearch(){ carList = carService.search(keyword); }}

    1234

    1234567

    Keyword:

    http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_note-8
  • 8/10/2019 ZK - ZK Getting Started_Get ZK Up and Running With MVVM - Documentation

    12/14

    /09/2012 ZK - ZK Getting Started/Get ZK Up and Running with MVVM - Documentation

    12/1oks.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM

    After binding this "onClick" event, when a user clicks "Search" button, ZK will invoke search() and reload the property "carList" which is specified in @NotifyChange.

    Displaying Data Collection

    The way to display a collection of data with data binding is very similar to the way in MVC approach. we will use a special tag,

    [10]

    , to control the rendering of each itedata binding expression instead of EL.

    Steps to use :

    1. Useto enclose components that we want to create iteratively.

    2. Set template's "name" attribute to "model". [11]

    3. Use implicit variable, each, to assign domain object's properties to component's attributes.

    Extracted from searchMvvm.zul

    Implementing View Details Functionality

    The steps to implement the view details functionality are similar to previous sections.

    1. We bind attribute selectedItemof listboxto the property vm.selectedCarto save selected domain object.

    2. Because we want to show selected car's details, we bind value of labeland src of imageto selected car's properties which can be access by chaining dot notation like vm.sel

    3. Each time a user selects a listitem, ZK saves selected car to the ViewModel. Then ZK reloads selectedCar's properties to those bound attributes.

    You can view complete zul in References. [12]

    Approach Comparison

    The interaction picture at left side is MVC, and the one at right side is MVVM. The main differences are that Controller changes to ViewModel and there is a binder to synchronize d

    1234567

    Name Keyword:

    123456

    789

    101112131415

    $

    123456789

    10111213

    http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_note-11http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_note-10http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_note-9
  • 8/10/2019 ZK - ZK Getting Started_Get ZK Up and Running With MVVM - Documentation

    13/14

    /09/2012 ZK - ZK Getting Started/Get ZK Up and Running with MVVM - Documentation

    13/1oks.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM

    MVC MVVM Both approaches can achieve msome differences between them

    Building an application with M

    directly control what you see. Its strength is that you have total control of components, so that you can create child components dynamically, control custom components, or do anythin

    In MVVM, because ViewModel is loosely-coupled with View (it has no reference to components), one ViewModel may associate with multiple Views without modification. UI desi

    parallel. If data and behavior do not change, a View's change doesn't cause modifying ViewModel. In addition, as ViewModel is a POJO, it is easy to perform unit test on it without a

    ViewModel has better reusability, testabiliby, and better resistance against View change.

    To summarize, a comparison table is illustrated below:

    MVC MVVM

    Coupling with View Loose with layout Loose

    Coupling with Component Tight Loose

    Coding in View Component ID Data binding expression

    Controller Implementation Extends ZK's composer a POJO

    UI Data Access Direct access Automatic

    Backend Data Access Direct access Direct access

    UI Updating Manipulate components Automatic(@NotifyChange)

    Component Controlling Granularity Fine-grained Normal

    Performance High Normal

    References

    1. ZK Getting Started/Get ZK Up and Running with MVC

    2. ZK Installation Guide \ Create and Run Your First ZK Application Manually

    3. Car.java (http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/src/tutorial/Car.java)

    4. CarService.java (http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/src/tutorial/CarService.java) CarServiceImpl.java

    (http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/src/tutorial/CarServiceImpl.java)

    5. ZUML Reference

    6. ZK Component Reference

    7. search.zul (http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/WebContent/search.zul)

    8. MVVM in Developer's Reference

    9. SearchViewModel.java (http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/src/tutorial/SearchViewModel.java)

    10. ZK Developer's Reference/MVC/View/Template

    11. ZK Developer's Reference/MVC/View/Template/Listbox Template

    12. searchMvvm.zul (http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/WebContent/searchMvvm.zul)

    Retrieved from "http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM"

    Page |

    Discussion |

    View source |

    History

    TweetTweet 258

    Follow us via :

    ZK RSS

    StumbleUpon

    ZK LinkedIn Group

    twitter @zkoss

    facebook fan page

    Log in / create account

    http://books.zkoss.org/index.php?title=Special:UserLogin&returnto=ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVMhttp://www.facebook.com/zk.frameworkhttp://twitter.com/zkosshttp://www.linkedin.com/groups?home=&gid=995137http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.zkoss.org&title=ZKhttp://feeds.feedburner.com/zkosshttp://books.zkoss.org/index.php?title=ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM&action=historyhttp://books.zkoss.org/index.php?title=ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM&action=edithttp://books.zkoss.org/index.php?title=Talk:ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM&action=edit&redlink=1http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVMhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVMhttp://code.google.com/p/zkbooks/source/browse/trunk/tutorial/WebContent/searchMvvm.zulhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_ref-11http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/MVC/View/Template/Listbox_Templatehttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_ref-10http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/MVC/View/Templatehttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_ref-9http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/src/tutorial/SearchViewModel.javahttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_ref-8http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/MVVMhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_ref-7http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/WebContent/search.zulhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_ref-6http://books.zkoss.org/wiki/ZK_Component_Referencehttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_ref-5http://books.zkoss.org/wiki/ZUML_Referencehttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_ref-4http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/src/tutorial/CarServiceImpl.javahttp://code.google.com/p/zkbooks/source/browse/trunk/tutorial/src/tutorial/CarService.javahttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_ref-3http://code.google.com/p/zkbooks/source/browse/trunk/tutorial/src/tutorial/Car.javahttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_ref-2http://books.zkoss.org/wiki/ZK_Installation_Guide/Quick_Start/Create_and_Run_Your_First_ZK_Application_Manuallyhttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_ref-1http://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVChttp://books.zkoss.org/wiki/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM#cite_ref-0http://books.zkoss.org/wiki/File:Tutorial-mvvm.pnghttp://books.zkoss.org/wiki/File:Tutorial-separator.jpghttp://books.zkoss.org/wiki/File:Tutorial-mvc.pnghttp://twitter.com/search?q=www.zkoss.orghttps://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fbooks.zkoss.org%2Fwiki%2FZK_Getting_Started%2FGet_ZK_Up_and_Running_with_MVVM&source=tweetbutton&text=ZK%20-%20ZK%20Getting%20Started%2FGet%20ZK%20Up%20and%20Running%20with%20MVVM%20-%20Documentation&url=www.zkoss.org&via=zkoss
  • 8/10/2019 ZK - ZK Getting Started_Get ZK Up and Running With MVVM - Documentation

    14/14

    /09/2012 ZK - ZK Getting Started/Get ZK Up and Running with MVVM - Documentation

    What links here |

    Related changes |

    Special pages

    | Recent changes

    | Help

    This page was last modified on 17 August 2012, at 09:30.

    This page has been accessed 1,647 times.

    Disclaimers | Modified by ZK

    Partners :

    Partners

    http://www.zkoss.org/partner/http://www.zkoss.org/http://books.zkoss.org/wiki/Documentation:General_disclaimerhttp://books.zkoss.org/wiki/Help:Contentshttp://books.zkoss.org/wiki/Special:RecentChangeshttp://books.zkoss.org/wiki/Special:SpecialPageshttp://books.zkoss.org/wiki/Special:RecentChangesLinked/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVMhttp://books.zkoss.org/wiki/Special:WhatLinksHere/ZK_Getting_Started/Get_ZK_Up_and_Running_with_MVVM