The Basic Login"

From Documentation
m
m (Redirected page to ZK Essentials)
 
Line 1: Line 1:
 +
#REDIRECT [[ZK Essentials]]
 +
 
{{ZKEssentialsPageHeader}}
 
{{ZKEssentialsPageHeader}}
  

Latest revision as of 00:00, 29 March 2013

Redirect to:

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


Here we'd like a simple login page that prompts user for their name and password:

ZKEss StoreLogin.png

Login Behavior

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

Building the Login UI

The first thing we need to do is to create the log-in interface using a ZUL file. The basic ZUL markup representing 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 : 2013/03/29

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