ZK Framework in Navis TOS Edwin Yu Senior Software Engineer, Navis Framework Team [email protected] ZK U.S. User Group Nov 7, 2011, Cypress, CA Copyright © 2011 Navis, LLC. All Rights Reserved.

Agenda •

Background

•

• • •

Why ZK Framework? Product Demo ZK Framework Integration

•

•

2

Macro Component, Template

ZK Server+Client Fusion

•

• •

Navis

OpenLayers Map

Unit + Integration Testing Debugging Tips

Copyright © 2011 Navis, LLC. All Rights Reserved.

Navis • •

Oakland, CA Proven TOS functionality for State of The Art Automated Terminals

• •

•

3

Equipment automation Gate operation automation

Help Terminal Operators increase capacity and optimize operations to lower costs

Copyright © 2011 Navis, LLC. All Rights Reserved.

Navis TOS Client Locations

Terminals (in TEU) Up to 300,000

61

300,001 – 500,000 41 500,001 – 1 Mil 54 > 1Mil – 1.5 Mil 17 > 1.5 Mil

25

New Site TEU Data NA 11

209

4

Copyright © 2011 Navis, LLC. All Rights Reserved.

Product Demo •

5

[demo]

Copyright © 2011 Navis, LLC. All Rights Reserved.

Choosing a Web Technology ULC Client (Swing)

HTML

ULC

(Strut) Native Strut Programming

Native ULC Programming

Presentation Tier Business Tier

Persistence Tier 6

Copyright © 2011 Navis, LLC. All Rights Reserved.

Choosing a Web Technology •

Business Requirements

• •

•

Open Source Ajax Low Learning Curve - Productivity Component-based MVC (as opposed to request-based) Integration Friendly

2 Months Evaluation in 2009

• •

7

Engineers’ Skill Set

Technical Requirements

• • • •

•

Investment Protection

Prototyping Architecture Reviews

Copyright © 2011 Navis, LLC. All Rights Reserved.

Web Technology Evaluation

8

Copyright © 2011 Navis, LLC. All Rights Reserved.

Choosing ZK Framework • •

Check References Load Testing, Performance Comparison

•

•

9

Table with 150 Rows

Prototype

Copyright © 2011 Navis, LLC. All Rights Reserved.

ZK Framework Integration

ZK Client engine in browser

ULC Client (Swing)

Navis Framework ZK

ULC

Custom ZK widgets

Custom ULC widgets

Shared UI Logic

Presentation Tier Business Tier

Persistence Tier 10

Copyright © 2011 Navis, LLC. All Rights Reserved.

ZK Framework Integration

ZK Client engine in browser

ULC Client (Swing)

Navis Framework ZK

ULC

Custom ZK widgets

Custom ULC widgets

Shared UI Logic

Presentation Tier Business Tier

Navis App

Persistence Tier 11

Copyright © 2011 Navis, LLC. All Rights Reserved.

ZK Framework Integration •

To overcome our challenges, ZK Framework offers

• • • •

12

Swing-like Java API to build a UI tree

Desktop programming paradigm Macro components ZUL as templates

Copyright © 2011 Navis, LLC. All Rights Reserved.

Macro Component •

•

“Implement a new component by use of other components” – ZK reference documentation

Encapsulate a set of related functionality into a new reusable component

•

For an example in our app, every tab shows a table

• • • •

13

Backed by a hibernate entity

UI for Query Filters Context menu Pagination

Copyright © 2011 Navis, LLC. All Rights Reserved.

Macro Component Reusable in any zul or in code

lang-addon.xml zTable listbox com.navis.framework.zk.view.ZTable



a composite ui of the following

ZPopupMenuButton

Button

Paging

filter.zul

Listbox 14

Copyright © 2011 Navis, LLC. All Rights Reserved.

Zul as Template • •

Build skeleton UI structure quickly Dynamically Bind, via VariableResolver

• • •

•

Controller Data Model Custom Attributes

Reusable, Executions.createComponents(“template.zul”, args) ?

?

Presentation Tier

Business Tier Persistence Tier

Generic form.zul

15

… …

Copyright © 2011 Navis, LLC. All Rights Reserved.

Dynamic Layout •

• •

Dynamically populated view means we can’t hard-code the width and height in our views (in code or in zul)

How is the width calculated? Outside-in layout

• •

•

16

We want our components embedded on the page to maximize the width and height the container allows

Inside-out layout

• •

•

The UI resizes based on the size of the browser

Our floating form dialogs resize based on its content

We want our form dialog to minimize its width and height to show its content fully.

ZK offers ways for us to achieve without hard-coding width and height Copyright © 2011 Navis, LLC. All Rights Reserved.

Inside-Out Calculations •

•

17

hflex=“min” means it depends on the width of the inner container

To show a floating form dialog with minimal width without specifying a fixed width in our code: …. ….
Copyright © 2011 Navis, LLC. All Rights Reserved.

Inside-Out Calculations •

•

hflex=“1” means it depends on the width of the outer container

To maximize the available space the child components can occupy:
public class ZKComposer { doAfterCompose() { _map = new Map(); } onXXX() { // server-side zk event // can invoke map api } }

JSON Strings are converted to OpenLayers objects 23

Copyright © 2011 Navis, LLC. All Rights Reserved.

Testing •

Selenium Unit Tests

•

Switch in IdGenerator for non-production build com.navis.framework.zk.util.ZIdGenerator

•

•

QTP (HP QuickTest Pro)

• • •

24

Give unique IDs to our components for selenium to identify

Integration Test Add custom Javascript plugins Access ZK components in the client-side context, using ZK client API

Copyright © 2011 Navis, LLC. All Rights Reserved.

Debugging Tips •

Install Eclipse + ZK Studio

•

•

Install Firefox with Firebug and ZK Jet

• • •

• •

Help identify the problems Generate ZK zul which can be copied and pasted out Debug in an Eclipse project

User Forum ZK Support

• •

25

Create sample program for learning and testing

Sample zul Video capture

Copyright © 2011 Navis, LLC. All Rights Reserved.

Q&A

Copyright © 2011 Navis, LLC. All Rights Reserved.

Navis - ZK

App. ZK. ULC. Custom ULC widgets. Custom ZK widgets. Navis Framework. ZK Client .... Javascript libraries to the backend Java developers. • OpenLayers.
Download PDF
2MB Sizes 3 Downloads 144 Views
Report

Recommend Documents

Navis - ZK
ZK Framework Integration. Presentation Tier. Business Tier. Persistence Tier. ULC Client. (Swing). Shared UI Logic. Navis. App. ZK. ULC. Custom ULC widgets.
Nouméa TownHall - ZK
The project was built with ZK, Maven, Spring, Hibernate, Travis,. Versioneye, Postgresql 9.x, Tomcat 7.x, CentOS and docx4j. Open source components were used all the time. Why ZK. Prior to this project, we were using an internally developed framework
Nouméa TownHall - ZK
Architecture. The project was built with ZK, Maven, ... secured front-end as all business logic is on the server side. We especially like ZK for its open source ...
zk dvo pdf
Loading… Page 1. Whoops! There was a problem loading more pages. zk dvo pdf. zk dvo pdf. Open. Extract. Open with. Sign In. Main menu. Displaying zk dvo ...
ZK TRENAZER B.pdf
... was a problem previewing this document. Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. ZK TRENAZER B.pdf.
MDR Codes over Zk
corresponds to the code word c = (c0,c1,c2,···,cn−1). Moreover multiplication by x corresponds to a cyclic shift. So, we can define a cyclic code of length n over Zk as an ideal of Zk[x]/(xn − 1). For generalizations of some standard results o
zapisnik 30 sj ZK usvojeno B (1).pdf
zapisnik 30 sj ZK usvojeno B (1).pdf. zapisnik 30 sj ZK usvojeno B (1).pdf. Open. Extract. Open with. Sign In. Main menu. Displaying zapisnik 30 sj ZK usvojeno B ...
On Generalized Weights for Codes over Zk
Jun 22, 2011 - introduced the GHWR of a linear code C over a finite chain ring and studied some properties of the GHWR. For any g, 1 ≤ g ≤ rank(C), we define the higher weight spectrum as. A g i = |{D : D is a Zk-submodule of C with rank(D) = g a
Maximum Distance Codes in Mat n,s(Zk) with a Non ...
Jun 22, 2011 - MDS code is fixed. Interestingly, these codes not only have a very strong relationship to uniform distributions but to association schemes as well; see [5] by ..... Let x1,x2,...,xr be points in Un, where xi = ∑ j a j i ki. −j is t