Your SlideShare is downloading. ×
Evaluating and Choosing ZK Framework
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Evaluating and Choosing ZK Framework

1,981

Published on

A presentation on how Navis TOC evaluated and come about to choose ZK framework

A presentation on how Navis TOC evaluated and come about to choose ZK framework

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,981
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ZK Framework in Navis TOSEdwin YuSenior Software Engineer, Navis Framework Teameyu@navis.comZK U.S. User Group Nov 7, 2011, Cypress, CA Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 2. Agenda• Background • Navis• Why ZK Framework?• Product Demo• ZK Framework Integration • Macro Component, Template• ZK Server+Client Fusion • OpenLayers Map• Unit + Integration Testing• Debugging Tips2 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 3. Navis • Oakland, CA • Proven TOS functionality for State of The Art Automated Terminals • Equipment automation • Gate operation automation • Help Terminal Operators increase capacity and optimize operations to lower costs 3 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 4. Navis TOS Client LocationsTerminals (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.
  • 5. Product Demo• [demo]5 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 6. Choosing a Web Technology ULC Client (Swing) HTML ULC (Strut) Native Strut Native ULC Programming Programming Presentation Tier Business Tier Persistence Tier6 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 7. Choosing a Web Technology• Business Requirements • Investment Protection • Engineers’ Skill Set• Technical Requirements • Open Source Ajax • Low Learning Curve - Productivity • Component-based MVC (as opposed to request-based) • Integration Friendly• 2 Months Evaluation in 2009 • Prototyping • Architecture Reviews7 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 8. Web Technology Evaluation8 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 9. Choosing ZK Framework• Check References• Load Testing, Performance Comparison • Table with 150 Rows• Prototype9 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 10. ZK Framework Integration ULC Client ZK Client engine in browser (Swing) Navis Framework ZK ULC Custom ZK widgets Custom ULC widgets Shared UI Logic Presentation Tier Business Tier Persistence Tier10 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 11. ZK Framework Integration ULC Client ZK Client engine in browser (Swing) Navis Framework ZK ULC Custom ZK widgets Custom ULC widgets Shared UI Logic Presentation Tier Business Tier Navis App Persistence Tier11 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 12. ZK Framework Integration• To overcome our challenges, ZK Framework offers • Swing-like Java API to build a UI tree • Desktop programming paradigm • Macro components • ZUL as templates12 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 13. 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 • Backed by a hibernate entity • UI for Query Filters • Context menu • Pagination13 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 14. Macro Componentlang-addon.xml Reusable in any zul or in code<component> <zk> <component-name>zTable</component-name> <extends>listbox</extends> <zTable apply=“…” customAttr=“…”/> <component-class>com.navis.framework.zk.view.ZTable</component-class></component> </zk> a composite ui of the following ZPopupMenuButton Button Paging filter.zul Listbox 14 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 15. 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 <zk> <window closable="true" > … <zForm apply=“…” customAttr=“…”/> … </window>15 </zk> Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 16. 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 • The UI resizes based on the size of the browser • We want our components embedded on the page to maximize the width and height the container allows• Inside-out layout • 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 height16 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 17. Inside-Out Calculations• 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: <window mode="modal“> <div hflex=“min”> <grid hflex=“min”> <columns> <column hflex=“min” align="right"/> <column hflex=“min”/> </columns> <rows> <row>….</row> <row>….</row> </rows> </grid> </div>17 </window> Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 18. 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: <window mode="modal“> <div hflex=“min”> <tabbox vflex=“1”> <tabs>...</tabs> <tabpanels> <tabpanel> <grid hflex=“1”> … </grid> </tabpanel> </tabpanels> </tabbox> </div> </window>18 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 19. Inside-Out Calculations• Leveraging hflex and vflex to auto-calculate the best minimal width and height for floating form dialogs, we can recursively build more complicated floating dialogs19 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 20. ZK Server+Client Fusion• ZK Server+Client Fusion architecture allows us to wrap Javascript libraries to the backend Java developers• OpenLayers • Free Maps for the Web (BSD License) • Pure JavaScript library for display map data • No server-side dependencies20 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 21. ZK Server+Client Fusion with OpenLayers• Yard Planning and Control Application• Replace existing C++ rich-gui desktop program• [demo] Application Server21 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 22. ZK Server+Client Fusion with OpenLayers Application Server OpenLayers 1. Populate map data Navis Yard to client Javascript lib Planning & Controller 2. Handle forwarded Controlling App events from client Navis Framework ZK lang-addon.xml 1. Encapsulate ZK mapping functionality Map.java zk.wpd Map.js 2. Send/receive client Map.java map events Map.js openlayers.js22 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 23. ZK Server+Client Fusion with OpenLayers OpenLayers Javascript lib Application ServerDOM Tree Map.js Map.java public class ZKComposer { Map = extends zul.Widget { class Map extends XulElement{ doAfterCompose() { variable : null, renderProperties() { _map = new Map(); _bind: function() { // render all properties } // load openLayers lib } }, updateData() { onXXX() { setXXX: function(arg) { smartUpdate("updateData", // server-side zk event } JSON data data); // can invoke map api } } } fire(evt,data) } } JSON Strings are converted to OpenLayers objects23 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 24. Testing• Selenium Unit Tests • Switch in IdGenerator for non-production build <system-config> <id-generator-class>com.navis.framework.zk.util.ZIdGenerator</id-generator-class> </system-config> • Give unique IDs to our components for selenium to identify• QTP (HP QuickTest Pro) • Integration Test • Add custom Javascript plugins • Access ZK components in the client-side context, using ZK client API24 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 25. Debugging Tips• Install Eclipse + ZK Studio • Create sample program for learning and testing• 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 • Sample zul • Video capture25 Copyright © 2011 Navis, LLC. All Rights Reserved.
  • 26. Q&A Copyright © 2011 Navis, LLC. All Rights Reserved.

×