people
About Me
Companies
Technologies
NetLabs
Agenda
• Custom view introduction
• Demo
• High-level architecture of custom view framework
• Q & A
Mobile Application Landscape
Native
• Device integration
• User experience
• Push capabilities
• Offline access
• Performance
• Tuned for particular platform
• App Store
Mobile Web
• Single app for multiple platforms
• Leverage Web standards (Jscript, CSS3, HTML)
• Upgradability, flexibility – instant!
• Easy access via links browser, email
• Installation
Hybrids
• Leverage Web advantages while having native capabilities
Wish List
• Personalize
• Let me design my dashboard
• Let me configure my dashboard
• Let me action on my dashboard
• Let me change it
• Run my dashboard
• Enable reports
• Add more features over time
Custom view introduction (Mint use case)
Demo
How It Started
• Custom dashboard• Comparison (see things side by side)• Get functionality which is in the product but never exposed• Avoid extra release cycles• Provide customization on product/group/user level• Platform-agnostic• Environment:– Starting point:• Android – Mint – Tablet
– Target:• {IOS/Android/Windows/Web ?} – {Tablet/Phone/Desktop?}-{Intuit product}
Architecture Objectives
• Lego paradigm –Quickly build UX out of existing components– Be able to add 3rd-party components
• Platform is a glue
• Light interfaces– IOS & Java APIs – View representation ( HTML - <TABLE>, <H1> <A> …)
–Metadata registry
• Platform-independent view description– 3 type of layouts – vertical, horizontal, carousel– Additional aspects – scrolling, divider, background– Component configuration
Architecture Objectives (Continued)
• View instantiation– Take whole real estate– Take designated portion(s)
• View crafting– Custom view designer– Hand-crafted
• “Custom view” meaning could be highlighted for power users or administrators or hidden (ordinary users)
Environment
•Android 3.x+• IOS – 6.x+
Custom View Architecture
Native Platform
Local Storage
Custom View Manager
Custom View Interpreter
Custom View Designer
Metadata
Component registration
Cloud Custom View Repository
Custom View Manager
Custom View Interpreter
Custom View Designer
Custom View Cloud API service
Metadata
Component registration
Local Storage
Native Platform
Custom View Architecture
Custom View Architecture (Continued)
Cloud Custom View Repository
Architecture Components
Custom View Representation
(Custom View Layout, Configuration)
Custom View Metadata
Custom View APIs
Custom View Cloud Services
Custom View Representation
• JSON-based• Screen– Container• Content
<Screen>:= {Name = text,
[Title= text],[Description=text],[Constraints],[Orientation], Container}
<Container>:=
[background="image tag"],
[scrollable=true|false],
ExtentType=proportional|filled| fixed
ExtentValue=value ( weight for proportional, size for fixed) children={Container|Content}+,
type=vertical|horizontal|carousel
}
<Content>:= {tag=text ,[Configuration],ExtentType=proportional|variable| fixed
ExtentValue=value( weight for proportional, size for fixed)
}
Custom View Layout
• Containers – Vertical,– Horizontal– Carousel
• Touch-based layout tuning(gesture recognition)
Configurable
{ "tag": "webview", "configuration": "http://www.intuit.com", "flexible”: true, "suggestedLayout": { "type": "filled" }},
Flexible
Metadata Service
{ "type": "component-registry” "components": [ { "name": "Budget", ”icon”: ”budget.png” "tag": "current_budget", "description": "This month overall budget.\nNot configurable", "suggestedLayout": { "type": "fixed", "value": "120" } } ,{ "name": "Feed", "tag": "feed", "description": "Lists Mint alerts & advices.\nNot configurable", "suggestedLayout": { "type": "proportional", "value": "1" }},
Component registry platform-agnostic
Metadata Service (Continued)
{ "type": "tag-registry", "tags": [ { "type": "component", "tag": "blue", "value": "BlueViewController" }, { "type": "component", "tag": "budget", "value": "TrendsController_iPad" }, { "type": "component", "tag": "feed", "value": "VespaFeedsController" }, { "type": "component", "tag": "accounts", "value": "AccountsViewController_iPad" },
Component binding platform-specific
APIs
• Content (may be implemented by content provider)
• Screen instantiation– Inflate screen in view
• Components discovery and bindings
• Custom View management– Delete– Create– Find
• Cloud services– Get all– Delete– Publish
Content APIs
– VespaConfigurable
– VespaConfigurableView
– VespaConfigurableController
@protocol VespaConfigurable <NSObject>
-(void) configure:(NSString *)configuration;
-(NSString *) configuration;
-(void) flexConfiguration;
@end
@protocol VespaConfigurableController <VespaConfigurable>
- (id)initWithNibName:(NSString *)nibNameOrNil
bundle:(NSBundle *)nibBundleOrNil configuration:(NSString *) configuration;
- @end
package com.intuit.mobilelib.vespa.api;
public interface ConfigurableComponent {
public void setComponentConfiguration(String config);
public String getComponentConfiguration();
public void flexConfiguration(ComponentConfigurator configurator);
}
Custom View Interpreter
• Inflate screen
• Create layout hierarchy– Instantiate content– Configure content– Apply layout constraints– Binds components
Custom View Manager
• Manages screens– Create (Designer)– Delete– View (sort)– Edit
Custom View Designer
• Create/edit screens– Displays content repository– Layout selection– Layout tuning– Drag & drop interface–Orchestrate content
configuration
Custom View Discrimination
• By platform (any, Android, IOS) • By orientation (any, portrait, landscape)• By type (phone, tablet)• By tags – multi-tenancy (“Plumber”, “Sweet Bagels”)
Standard Components
• General–Web view– Image view– RSS feed–Weather– Stock
• Mint– Accounts– Budget– Transactions– Spending– Income– Reports
Custom Reports
28
Custom Reports –continued
29
Content Writers’ Guidelines
• Componentization!!!
• Do not use hardcoded sizes!!! (IOS)
• Make everything “relative”
• Maximize advantages of Android layouts & fragments and IOS autolayout
Takeaways
• It is possible to personalize, customize native user experience for certain type of applications
• You may achieve common dashboard, reporting capabilities in a platform agnostic way
• It is possible to distribute and share custom views among group of users (admin/crowd sourcing)
33
Intuit Speakers @ Silicon Code Camp 2013:SATURDAY9:45 a.m. - Ramakrishna Kollipara – “Complete Automation of Performance Testing” 1:45 p.m. - Joe Wells - “QBO: Journey From legacy Java app to a Client-side HTML5 app”3:30 p.m. - Naga Addagadde & Sangeeta Narang – “Intuit APIs for Financial Transaction Aggregation”5:00 p.m. Ted Drake –“Hitting the Accessibility High Notes with ARIA”
SUNDAY9:15 a.m. - Eugene Krivopaltsev –“Building Native Mobile Apps with Custom Views” 1:15 p.m. - Tim Hobson – “Developing Highly Instrumental Applications with Minimal Effort”
For more information about joining our organization visit our booth or connect with our onsite recruiter:
You don't want to miss out on a chance to win this cool headset. Stop by our booth to enter