+ All Categories
Home > Technology > April Unplugged Mobile Controls User Group

April Unplugged Mobile Controls User Group

Date post: 18-Dec-2014
Category:
Upload: teamstudio
View: 101 times
Download: 0 times
Share this document with a friend
Description:
The April 3rd Unplugged Mobile Controls User Group meeting covers: - Changes to the UnpNavigator and why UnpComputedNavigator should now be used - Barbara Houchin from SMC presents their mobile Field Service application built using a mix of the Unplugged Controls and JQuery Mobile (with camera integration) - Q&A
25
UNPLUGGED MOBILE CONTROLS USER GROUP April 2014
Transcript
Page 1: April Unplugged Mobile Controls User Group

UNPLUGGED MOBILE CONTROLS USER GROUP

April 2014

Page 2: April Unplugged Mobile Controls User Group

Agenda

Deep Dive UnpNavigatorComputed Control

Case Study SMC – Barbara Houchin

Next Month UnpDialog

CapEx Approvals app

Q & A

Page 3: April Unplugged Mobile Controls User Group

Deep Dive - UnpNavigatorComputed

Control for displaying nav categories

Features include:

Icon

Sub-Menus

Auto-highlight

Auto-size/display

Page 4: April Unplugged Mobile Controls User Group
Page 5: April Unplugged Mobile Controls User Group
Page 6: April Unplugged Mobile Controls User Group

Replaces Old UnpNavigator

Page 7: April Unplugged Mobile Controls User Group

UnpNavigatorComputed Config

Uses JSON objects to populate categories

Page 8: April Unplugged Mobile Controls User Group

UnpNavigatorComputed Properties

label string - label on tile

hasSubMenu boolean – expands to subsection

page string - XPage to load when tapped

icon (optional) string - Icon displayed on left of tile – uses FontAwesome*

ajaxloadid string - Target div of content to load from ‘page’

ajaxtargetid string - Target div to load content into current xpage

disabled boolean - Tile is tappable or section header

Page 9: April Unplugged Mobile Controls User Group

UnpNavigatorComputed Properties

If hasSubMenu: true

subMenu: [

{ …properties from last slide… }

]

Sub-menus can be 2 levels deep

Page 10: April Unplugged Mobile Controls User Group

Other considerations

UnpHeader:

viewsButton=“true”

UnpFlatView, UnpAccordionView, UnpFormEditor, UnpFormViewer:

Position=“menu-aligned” (default)

Page 11: April Unplugged Mobile Controls User Group

UnpNavigatorComputed - Demo

Lets build one….

Page 12: April Unplugged Mobile Controls User Group

Case Study

Over to Barbara at SMC

Page 13: April Unplugged Mobile Controls User Group

Next Month

Meeting on Thurs 8th May

Deep Dive

UnpDialog

Case Study

CapEx Approvals App

Wireless Wednesday – Matt White and Myself

Wednesday 7th May

JQuery Mobile

Page 14: April Unplugged Mobile Controls User Group

Q & A

@Unp_UG

@MobileAppsRule

@mattwhite

www.Teamstudio.com/Unplugged

https://github.com/unplugged/unplugged-controls

Page 15: April Unplugged Mobile Controls User Group

SMC Corporation of America

– Pneumatics industry Leader

– Forbes list of World’s Most Innovative Companies

MOBILE ENERGY ASSESSMENTS

Barbara Houchin – Application Developer

@BarbHouchin

[email protected]

Page 16: April Unplugged Mobile Controls User Group

Mobile Energy Assessments (MEA)

– Domino 9 XPages app

– Designed for iPad

– Using

– Unplugged Mobile Controls

Eliminated transcription task

Automated report generation

Integrated photos

Improved data for Sales Mgmt

MOBILE ENERGY ASSESSMENTS

[email protected]

Page 17: April Unplugged Mobile Controls User Group

MOBILE ENERGY ASSESSMENTS

Assessment

Machine(s)

Component(s)

[email protected]

Page 19: April Unplugged Mobile Controls User Group

Unplugged Mobile Controls (v1.5)

MOBILE ENERGY ASSESSMENTS

UnpHeader

UnpFooter

UnpScrollableArea

UnpFlatView

[email protected]

Page 20: April Unplugged Mobile Controls User Group

MOBILE ENERGY ASSESSMENTS

Up to 4 different document types available via a “portal-like” XPage. – Machines for this Assessment listed in white section

– Click on binoculars (xp:button wi/icon) to reveal Machine’s Components in blue section.

– Click on Machine or Component line to open that document.

[email protected]

Page 21: April Unplugged Mobile Controls User Group

MOBILE ENERGY ASSESSMENTS

Each page shows multiple layers of data.

– Navigate backward by clicking in a color-coded section for that

“parent” or “grandparent’.

– The last “child” of a document type will be highlighted

– Collapsible sections for Photos (separate documents) and Notes

– Multiple independently scrollable areas

[email protected]

Page 22: April Unplugged Mobile Controls User Group

MOBILE ENERGY ASSESSMENTS

Machine and Component pages have fields grouped into Collaplisble

“title-pane” style sections – Using jQuery plugin

– Modified plugin to allow nesting

– Added Collapse All function

[email protected]

Page 23: April Unplugged Mobile Controls User Group

Photos are taken using Unplugged photo capture integration with iOS.eice. – Uses File Upload control with parameters set to tell Unplugged to perform photo

capture

MOBILE ENERGY ASSESSMENTS

[email protected]

Page 24: April Unplugged Mobile Controls User Group

Photo Gallery allows for ease in scrolling through all photos on one page. – Tap on photo to open Photo document.

MOBILE ENERGY ASSESSMENTS

[email protected]

Page 25: April Unplugged Mobile Controls User Group

MOBILE ENERGY ASSESSMENTS

Mobile app using

– Unplugged Mobile Controls from OpenNTF for Native look & feel

– Rapid Development + Ability to work offline

– Photo Capture integration

Portal-like UI

– Multi-level data on a page

– Independent scrolling areas

– Touch a panel to open another page

– Highlight most recent visited documents

– Collapsible panel within scrollable area

– Scrollable Photo Gallery

JQuery calendar (coming soon)

[email protected]


Recommended