May Unplugged Mobile Controls User Group

421 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
421
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

May Unplugged Mobile Controls User Group

  1. 1. UNPLUGGED MOBILE CONTROLS USER GROUP May 2014
  2. 2. Agenda  Deep Dive  UnpDialog  UnpAlert  UnpTabbedFooter  Case Study  Extracted Design Method (OneView Example)  Q & A
  3. 3. Deep Dive - UnpDialog  Problem: dialog(String); cannot be formatted
  4. 4. Deep Dive - UnpDialog  UnpDialog gives full range of customization  Size, color, background, font etc
  5. 5. Deep Dive - UnpDialog  Usage: 1) Drag a UnpDialog control onto your XPage 2) Complete Title and Callback custom properties 3) Drag in a label or computed text for content
  6. 6. Deep Dive - UnpDialog  Usage: 4) ‘Callback’ is an optional client side JS function executed on ‘OK’ 5) To trigger, call: unp.openDialog('dialogPopup');
  7. 7. Deep Dive - UnpDialog  Callback is a CSJS function:
  8. 8. Deep Dive - UnpDialog  Current Disadvantages: 1. Only 1 dialog per page as ID is hard coded 2. Cannot pass arguments into function call (‘Callback’ property)
  9. 9. Deep Dive - UnpDialog  OtherAdvantages: 1. Extendable and can include other controls
  10. 10. Deep Dive - UnpDialog  Example: Selecting an item from a list (2 Options) 1) ComboBox/Dropdown:
  11. 11. Deep Dive - UnpDialog  ComboBox/Dropdown:
  12. 12. Deep Dive - UnpDialog  Do not use xp:ListBox for this:  Blank as the HTML code generated in the same as for a xp:comboBox  But no ‘selected’ attribute can be set
  13. 13. Deep Dive - UnpDialog  Displayed list of items use xp:repeat and ul/li:
  14. 14. Deep Dive - UnpDialog  Scrollable area inside the dialog
  15. 15. Deep Dive - UnpDialog  Advantage 2 – Use SSJS (back to comboBox example)
  16. 16. Deep Dive - UnpDialog  Activate via hidden button
  17. 17. Deep Dive - UnpDialog  Exercise for viewer:  Apply SSJS to ul/li version  Hint use xp:panel with tagName =“li” for <li>
  18. 18. Deep Dive - UnpAlert  Simpler than UnpDialog – just a message and ‘Close’ button  Drag in and complete the custom properties ‘Title’ and ‘Content’  WIP currently – will be part of Controls 3.3 release  Want to parameterize title and content so multiple alerts can be used on same page
  19. 19. Deep Dive – UnpTabbedFooter  Aid with Navigation usually for large forms/high number of fields but can be used as alternative to the UnpNavigator control  Allows the compartmentalization of form ‘areas’
  20. 20. Deep Dive – UnpTabbedFooter  Usage:  Drag the custom control onto your XPage and set the synctype property to point to either 'none', 'currentDB' or 'alldbs' to allow syncing the current db only (default) or all dbs on device. If set to 'none' then the sync button will not appear.  Create 'tabs' to include tappable areas in the footer for navigation purposes.Within each 'tab' you can set the icon, text, icon when tapped and the page to navigate to.  A callback client side JS function is available to perform post tap events  PostSyncTarget will navigate the user to a specified XPage after a sync has completed *  Navigation via the tabbed footer is currently performed as a full page load. * Not for MobileWeb Browser Apps – only valid for Unplugged apps
  21. 21. Design Architecture – Abstracted Design  Creating a mobile design in one NSF that pulls data from other NSFs.
  22. 22. Design Architecture – Abstracted Design  Set up data in a view in existing DBs  View must be common
  23. 23. Design Architecture – Abstracted Design  In new ‘Design DB’:  Use data sources to external DB’s.
  24. 24. Design Architecture – Abstracted Design  Use beforeRenderResponse to collate data
  25. 25. Design Architecture – Abstracted Design  Use scoped var to sort data
  26. 26. Design Architecture – Abstracted Design  Store results in scoped var
  27. 27. Design Architecture – Abstracted Design  Use xp:repeat and Controls CSS to mimic UnpFlatView
  28. 28. Design Architecture – Abstracted Design  Result…
  29. 29. Design Architecture – Abstracted Design  For the form data, create the XPage content in the original DB  Use a ‘design’ XPage in the new design DB and load the data via UNID using AJAX
  30. 30. Q & A  @Unp_UG  @MobileAppsRule  @mattwhite  www.Teamstudio.com/Unplugged  https://github.com/unplugged/unplugged- controls

×