May Unplugged Mobile Controls User Group
0 likes508 views
This document summarizes a user group meeting about Unplugged mobile controls. It includes deep dives on the UnpDialog, UnpAlert, and UnpTabbedFooter controls. It also discusses an abstracted design method using OneView as an example to pull data from multiple databases into a single mobile application design. The document ends with contact information for questions.
Ad
More Related Content
Viewers also liked (15)
Similar to May Unplugged Mobile Controls User Group (20)
Ad
More from Teamstudio (20)
Ad
Recently uploaded (20)
May Unplugged Mobile Controls User Group
- 1. UNPLUGGED MOBILE CONTROLS USER GROUP May 2014
- 2. Agenda Deep Dive UnpDialog UnpAlert UnpTabbedFooter Case Study Extracted Design Method (OneView Example) Q & A
- 3. Deep Dive - UnpDialog Problem: dialog(String); cannot be formatted
- 4. Deep Dive - UnpDialog UnpDialog gives full range of customization Size, color, background, font etc
- 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. Deep Dive - UnpDialog Usage: 4) ‘Callback’ is an optional client side JS function executed on ‘OK’ 5) To trigger, call: unp.openDialog('dialogPopup');
- 7. Deep Dive - UnpDialog Callback is a CSJS function:
- 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. Deep Dive - UnpDialog OtherAdvantages: 1. Extendable and can include other controls
- 10. Deep Dive - UnpDialog Example: Selecting an item from a list (2 Options) 1) ComboBox/Dropdown:
- 11. Deep Dive - UnpDialog ComboBox/Dropdown:
- 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. Deep Dive - UnpDialog Displayed list of items use xp:repeat and ul/li:
- 14. Deep Dive - UnpDialog Scrollable area inside the dialog
- 15. Deep Dive - UnpDialog Advantage 2 – Use SSJS (back to comboBox example)
- 16. Deep Dive - UnpDialog Activate via hidden button
- 17. Deep Dive - UnpDialog Exercise for viewer: Apply SSJS to ul/li version Hint use xp:panel with tagName =“li” for <li>
- 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. 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. 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. Design Architecture – Abstracted Design Creating a mobile design in one NSF that pulls data from other NSFs.
- 22. Design Architecture – Abstracted Design Set up data in a view in existing DBs View must be common
- 23. Design Architecture – Abstracted Design In new ‘Design DB’: Use data sources to external DB’s.
- 24. Design Architecture – Abstracted Design Use beforeRenderResponse to collate data
- 25. Design Architecture – Abstracted Design Use scoped var to sort data
- 26. Design Architecture – Abstracted Design Store results in scoped var
- 27. Design Architecture – Abstracted Design Use xp:repeat and Controls CSS to mimic UnpFlatView
- 28. Design Architecture – Abstracted Design Result…
- 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. Q & A @Unp_UG @MobileAppsRule @mattwhite www.Teamstudio.com/Unplugged https://github.com/unplugged/unplugged- controls