1 / 19

New ZEN Components for Mobile Interfaces

New ZEN Components for Mobile Interfaces. Stefan Wittmann Zen Product Specialist. Agenda. Option 1 – Zen Mobile / Zen Desktop Option 2 - % ZEN.Mobile.mobilePage New Components Demonstration. The environment. Native App. Native App. Browser. Native Code. HTML Code. HTML Code.

fox
Download Presentation

New ZEN Components for Mobile Interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. New ZEN Components for Mobile Interfaces Stefan Wittmann Zen Product Specialist

  2. Agenda • Option 1 – Zen Mobile / Zen Desktop • Option 2 - %ZEN.Mobile.mobilePage • New Components • Demonstration

  3. The environment Native App Native App Browser Native Code HTML Code HTML Code Device API Device API Device API Native Hybrid Web

  4. Zen Mobile / Zen Desktop • Set ofclassesthat form a templatefor mobile appsbuiltwith ZEN • Applicationclass • Page class • Templates

  5. Zen Mobile / Zen Desktop • Client Side • Communication : JSON • Data Channel : Request / Submit • Two Rendering Modules • Plugin 3rd Party Libraries

  6. Demo

  7. Additional Base Class • %ZEN.Mobile.mobilePage • Extends %ZEN.Component.page • HTML5 based • Provideseventhandlersfortouchanddevicemotionevents • Can beoverwritten in a ‚mobile‘ pagetoimplement a specificbehavior

  8. Demo

  9. New Components • Navigator • Canvas • Scribble Area • MapView

  10. Navigator • Providesnavigationand simple settingsinterface • Look-and-Feelsimiliartothatfound on mobile devices

  11. Navigator • HTML5 • JSON objectasdatasource • Callback must beimplementedtocreatethe JSON object • Stackof ‚Pages‘ • Ifdrilled down onelevel, a newpageisplaced on top ofthestack

  12. Navigator • Supports thefollowinglistofedit-controls • 'string' --display a simply text entry box • 'slider' -- display a slider control • 'slider-toggle' -- display a slider control with a checkbox • 'stepper' -- display a up/down stepper control • 'stepper-value' -- display a stepper with a value • 'switch' -- display an on/off switch • 'choice' -- display a small set of choices as buttons

  13. Navigator • Different typesofpossibleactions • select – firesthe ‘onselect‘ Callback • link – navigatesto a new URL • drill – drills down onelevel • apply – firesthe ‘onchange‘ Callback Edit options Action

  14. Canvas • Wrapper forthe HTML5 canvaselement • Draw graphicsortext on thefly in a ZEN Page • The canvasisthecontainer • Draw thegraphicswith JavaScript Code todrawthegraphics

  15. Scribble Area • Capturespengestures such assignatures etc. • Scribbles canbesavedandrestoredfromthedatabase • Supports dataControllers

  16. MapView

  17. MapView Youcanset a marker

  18. MapView

  19. New ZEN Components for Mobile Interfaces Stefan Wittmann Zen Product Specialist

More Related