1. MOBILIZE ENTERPRISE
APPLICATION USING TITANIUM

2. Topics
 Preferred Architecture to Mobilize Enterprise Applications
 Basics of Titanium Alloy ?
 Proof of Concept – Mobilize SAP

3. Stacks
Mobile Apps.
Native ?
Hybrid ?
Data Security
SSL ?
VPN ?
VPN + SSL ?
Analytics
Mobile Device Management
BYOD ?

4. Typical Architecture

5. Use case
Problem :
Business decisions were pending with Senior executives who were travelling.
Solution:
Provide a simple solution to bring enterprise data on mobile device.

6. App in Work
http://www.youtube.com/watch?v=UQazkSyp09Q

7. Titanium Alloy Basics
Alloy utilizes the model-view-controller (MVC) paradigm, which separates the
application into three different components:
Models provide the business logic, containing the rules, data and state of the
application.
Views provide the GUI components to the user, either presenting data or
allowing the user to interact with the model data.
Controllers provide the glue between the model and view components in the
form of application logic.

8. Titanium Alloy Basics
Models are defined using a Javascript file.
Alloy views are built from Titanium UI components. Views are defined using
XML markup and style them using Alloy Titanium Style Sheets (.tss), which
abstracts the creation of these components without using Titanium API calls.
Alloy controllers generally have a one-to-one relationship with Alloy views. The
controller has access to all of the view components.

9. Titanium Alloy Basics
Titanium SDK Component
Alloy Component
Titanium.UI.createButton();
<!-- Creates a button --> <Button />
Titanium.UI.createButton(
{ text: "Foobar",
top: 0,
width: Ti.UI.SIZE });
<Button title="Foobar" top="0“ width="Ti.UI.SIZE"/>
var button =
Titanium.UI.createButton();
button.setTitle('Push Me!');
// Need to give the object an ID, for example, <Button
id="button" /> $.button.setTitle('Push Me!');
var button =
Titanium.UI.createButton();
button.addEventListener('click',
doClick);
<!-- doClick needs to be declared in the associated
controller --> <Button onClick="doClick"/>
TSS
"Button":{ title: "Foobar", top: 0, width: Ti.UI.SIZE }

10. Proof of Concept