The Basic Login"

From Documentation
Line 5: Line 5:
 
[[File:ZKEss_LoginUsecase.png]]
 
[[File:ZKEss_LoginUsecase.png]]
 
   
 
   
The first thing we need to do is create the interface log-in using a ZUL file. The basic ZUL markup which represents our login form is shown below.
+
The first thing we need to do is to create the log-in interface using a ZUL file. The basic ZUL markup which represents our login form is shown below.
  
 
<syntax lang="xml">
 
<syntax lang="xml">

Revision as of 01:16, 23 June 2011

Stop.png This article is out of date, please refer to http://books.zkoss.org/zkessentials-book/master/ for more up to date information.


Before starting to implement the login, first let us define the behavior that is required in the use case. The use case below represents the flow we would like to deliver to users upon entry or login to the system.

ZKEss LoginUsecase.png

The first thing we need to do is to create the log-in interface using a ZUL file. The basic ZUL markup which represents our login form is shown below.

<syntax lang="xml"> <?page title="ZK Store - Login"?> <window id="loginWin" border="normal" width="300px" title="You are using: ${desktop.webApp.version}">

<grid> <rows> <row> Name: <textbox id="nameTxb"/></row> <row> Password:<textbox id="passwordTxb" type="password"/></row> </rows> </grid> <button id="confirmBtn" label="confirm"/> <label id="mesgLbl"/> </window> </syntax>

The ZUL representation is very simple and consists of a Grid which aids the layout of the Textbox along with a Button to perform the confirm action and a Label to notify the user of any issues with the login process. At the moment the ZUL file represents a dumb login page as the button is not mapped to an action.

The recommended way to add functionality to your UI is to follow the MVC pattern of development. The following section details how to implement ZK using the MVC pattern.



Last Update : 2011/06/23

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