enterprise flex applications on tablet devices

©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Flex Enterprise apps on Tablet devicesMichaël Chaize | Flash Platform EvangelistRIAgora.com | @mchaize

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Flex 4.5.1

Additional OS’s

Flex Application

One Tool, One Language, One Codebase

Any Platform

Common codebase


Menu

!e rise of tablet devicesTablets and Enterprise apps

Opportunities for Enterprise developersDesign Driven Development

Tips for Flex developersWhy Flex 4.6 should help

Four tablets3


Enterprise applications

4

Easily interact with the Enterprise knowledgeanywhere & at any time

The ultimate goal for Enterprise users:


Enterprise applications

5

Real-Time ACCESS to my Enterprise Knowledge

INTERACTION

QUALITY IMPROVEMENT


Human interactions with the Enterprise knowledge

6

Working with paper•Interact directly on the information•One single plan•Learnt at school•Knowledge not centralized•Expensive

©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential. 7

Collaboration on a wall•Interact directly on the information•One single plan•Learnt at school•Knowledge is lost•One at a time



!e era of PC•Knowledge is centralized•Extended company & Collaboration•Mouse and Keyboard•Learning curve•No mobility at all



What inspired a PC is not inspiring

anymore



Laptops•First a"empt of mobility•Extends the work area (home vs office)•Confort•Network access•Worst interactions ever



Mobility......with some constraints



Smartphones•Total mobility•Confort•Typing experience•Small screen = less information



Tablets•Total mobility•Confort & autonomy•Typing experience•Large screen•Pleasure and work on the same device



Introduce a tablet in a company

IT Services Employees

Main challenges:

Process to secure con!guration and deploymentDeploy and managed approved appsEnsuring mobility is auditable and compliantReadying Help Desk for support calls(study by Impetus)Running existing applicationsWelcome a new Operating System

The facts:

Some PC cannibalization is expected to occur.One tablet for work and home

"ey want the latest tabletNative apps deliver the experience that people

expectCompanies will take years to de!ne a mobile strategy, but employees won’t wait that long.

"ey are already iPad ninjas.


"e rise of tablet devices

15

Yes, it’s already happening !But large organizations need expertise !


Tablets users in the Enterprise today

TopManagers

Salesforce

Audit /Inspection

Key factsClear

- Real-time information- Dashboards

> Improve decision making time and quality

Key factsClear

- Read and Write in the CRM

> Increased efficiency and productivity> Improve knowledge quality

Key factsClear

- Capture data on the !eld- Access to technical information

> Increased efficiency and productivity> Reduce the risk of errors

Extending our core RIA values


Tablets users in the Enterprise tomorrow

Anyone


How can we answer Enterprise basic needs ?

sync

LCDS DATA MASHUP LCCS

Offline/Online Data Synchronization

Dashboard and advanced data visualization

Real-time Collaboration


A$ention please !

Tablets are not the solution !!e classic El Dorado effectTablet is just a new asset to solve users problems

http://www.flickr.com/photos/_belial/




A classic IT fail

20

v

Cameras

Video chat Take pictures

Draw on pictures

Microphone

VoIP Voice Recognition


"e traditional way for Enterprise apps development

21

v

What do you need ?

Express the needs in a doc

Technical speci!cations

Back-end + UI developments Delivery

LOB IT


v

What problems are you facing ?

Observe, Observe, Observe

Find solutions designing the UI

Technical solutions to serve

the UIDelivery

D.D.D - Design Driven Development

Whatto build ?

Howto build ?to scale ? Analytics


Bridge betweenthe context, people,and the system•Gather local information•Extend your eyes, your ears

"e number one opportunity for our community


CareCloud demo

Use ANEto collect patient

data

Video ChatShare what you see, what you

hear

Get advice from an expert

Read patient documents from

the cloud

Consider the context and

adapt the userexperience


Design tips - Navigation


Design tips - Visual Feedback

visualfeedback


Design tips - Visual Feedback

Demo

www.lafabrick.com

http://www.lafabrick.com

http://www.lafabrick.com


Flex tips - don’t stress the Display list

Reduce your surface of rendering

Use dynamic layouts


Flex tips - <DEMO> Radio X-Track </DEMO>


<s:states> <s:State name="portraitPhone" stateGroups="phone,portrait"/> <s:State name="landscapePhone" stateGroups="landscape,phone"/> <s:State name="portraitTablet" stateGroups="portrait,tablet"/> <s:State name="landscapeTablet" stateGroups="landscape,tablet"/></s:states>

State groups

protected function application1_resizeHandler(event:ResizeEvent):void{ // TODO Auto-generated method stub var isPortrait:Boolean = height > width; isTablet = height > 960 || width > 960; currentState = (isPortrait ? "portrait" : "landscape") + (isTablet ? "Tablet" : "Phone");}

Resize handler

Flex tips - Dynamic layouts demo


<s:ViewNavigator includeIn="tablet"

id="tabletPlayView" width.landscapeTablet="{this.width - phoneViewNavigator.width}" height.landscapeTablet="{this.height}" x.landscapeTablet="270" y.landscapeTablet="0" height="100%" width.portraitTablet="100%" x.portraitTablet="0" y.portraitTablet="0" height.portraitTablet="{this.height - phoneViewNavigator.height}" />

Layout Properties

Flex tips - Dynamic layouts demo


Flex tips - Back to the <s:Application> tag


Flex tips - Persistence Manager

FlexGlobals.topLevelApplication.persistenceManager.setProperty("lastSearch",arrayCollectResults);//...FlexGlobals.topLevelApplication.persistenceManager.getProperty("lastSearch");

Persist some properties

var file:File = File.documentsDirectory.resolvePath('settings.inf');if (file.exists) file.deleteFile();var fileStream:FileStream = new FileStream(); //create a file streamfileStream.open(file, FileMode.WRITE); // and open the file for writefileStream.writeObject(object); //write the object to the filefileStream.close();

Write !les on tablet devices


Flex tips - Optimized SQLite Insert or Update queries

SQLite on tablet devices

_sqlStatement.sqlConnection = sqlc;_sqlStatement.text = "INSERT INTO "+tableName+"Followers(idFollower,name) VALUES (@ID,@SNAME)";sqlc.begin(); for (var i:int = 0; i < arrayIdFollowers.length; i++) { var idFollower:int = int(arrayIdFollowers.getItemAt(i)); //query("INSERT INTO "+ tableName+"Followers(idFollower) VALUES ('"+idFollower+"')");

_sqlStatement.parameters['@ID'] = idFollower.toString(); _sqlStatement.parameters['@SNAME'] = screenName; _sqlStatement.execute(); } sqlc.commit();closeDb();

10xfaster


Flex 4.6 and tablet devices

35

- Native Extensions- Callout Bu"on- SplitViewNavigator- Natural components:Spinner, SnapList, ToggleSwitch


Flex 4.6 - more tablet capibilities

36

ANE: No more limitation

ActionScript Native Extension

AS3 bridge

C, JAVA

Flex Mobileproject

ANE SWF

.AIR, .APK, .IPA, .BAR


Flex 4.6 - more components for your tablet devices

37


How to measure success ?

Looking at the stars ?


How to measure success ?


Key takeaways

40

1. Understand tablet users expectations.2. You must be proactive. Companies are lost.3. Sell Design Driven Developments.4. Experiment new Design layouts.5. Use the last Flex builds for your tablet apps.6. RIA experts should become Tablet experts.

Flex & Tablets


I’m giving away 4 tablets

41

- !e name of the company that is using tablets to enable Real-Time Collaboration between doctors.- What’s the new name of LCDS ?- What is DDD ?- What is the name of my blog ?


I’m giving away 4 tablets

42

- New generation of tablets- Built by French manufacturers

- 6.2 inches- 4 colors

- Best autonomy of the market- Target both geeks and women

©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.©2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.

Michaël Chaize | Flash Platform EvangelistRIAgora.com | @mchaize

enterprise flex applications on tablet devices

Technology