Setting Up Titanium Studio and Creating an App Using Appcelerator

Tutorial: Setting Up Titanium Studio and Creating an App Using Appcelerator A Complete Reference Guide, Including Code for a Mobile Retail App

Setting Up Titanium Studio and Creating an App Using Appcelerator

2

TABLE OF CONTENTS

INTRODUCTION ................................................................................................................................................. 3

Getting started (for Windows/MAC OS users) ................................................................................................ 3

Downloading and Installing Titanium Studio..................................................................................................... 3

Launching Titanium Studio ................................................................................................................................ 3

Configuring Titanium Studio .............................................................................................................................. 4

Installing Xcode and the iOS SDK ....................................................................................................................... 6

Selecting the Active Xcode Version ................................................................................................................... 6

Default Android SDK .......................................................................................................................................... 7

Creating an Project in Titanium Studio ............................................................................................................ 8

Project File System Layout............................................................................................................................... 10

Running your app ............................................................................................................................................ 11

Basic Functions in Titanium Studio .................................................................................................................. 13

Application Screen Shots ................................................................................................................................. 15

Wrappers ......................................................................................................................................................... 15

Onboarding without Captcha: ......................................................................................................................... 15

Onboarding with Captcha: ............................................................................................................................... 17

Retrieving Response as text/data, XML and Image from a client call: ............................................................ 21

Retrieving data from resource bundle: ........................................................................................................... 24

Post Request: ................................................................................................................................................... 25


3

INTRODUCTION Appcelerator enables you to Develop Mobile APP’s on Andriod, Apple, BlackBerry, Windows Devices Using the API’s provided by Titanium Studio which was built on HTML5, jQuery which simulates the native APP experience on respective device. This tutorial will guide you towards downloading and installing Titanium Studio. Along with that, it will enable you to create your own app.

GETTING STARTED (FOR WINDOWS/MAC OS USERS)

Downloading and Installing Titanium Studio

To download and use Titanium Studio, a valid Appcelerator Network account is required. You may get one

via the Sign Up page.

Then, download the installer from http://my.appcelerator.com, extract it if necessary, run it and following any

on-screen instructions.

Launching Titanium Studio

When you launch Titanium Studio for the first time, login with your Appcelerator Network username and

password, before logging in check for Proxy Set up. Select a "workspace", which is simply a folder where

Titanium Studio places all of the project files and IDE preferences data.

https://my.appcelerator.com/auth/signup

http://my.appcelerator.com/


4

When Studio launches for the first time, it automatically starts installing the latest Titanium SDKs. Once this

is complete, confirm that no further updates are pending and that Studio is at the latest version.

Run Help > Check for Updates to ensure that the latest version of Titanium Studio is installed.

Run Help > Check for Titanium SDK Updates to ensure that all the official Titanium SDK releases are

installed.

Repeat these two steps until there are no more updates available.

Configuring Titanium Studio

If the Titanium Studio Dashboard is not already open, click the toolbar button with the Appcelerator logo,

click the dashboard "Configure" tab and then the "Let's get things set up!" button that appears.


5

click each of the Android and iOS platform icons in turn and follow the resulting instructions to install and

configure the respective native SDKs.


6

Installing Xcode and the iOS SDK

Note that to develop iOS applications for Apple devices, such as the iPhone and iPad, you will need to have

an iOS developer account. The account is free, but to run on device you will need to sign up for the iOS

Developer Program, costing $99/year. Also be aware of Apple's license terms, which prohibit the building

and execution of iOS applications on anything other than Apple hardware.

After clicking the Titanium Studio Dashboard iOS icon, follow the on-screen instructions to download Xcode,

and install the resulting software image file.

Selecting the Active Xcode Version

For systems with multiple Xcode versions installed, the current version can be selected by running sudo

xcode-select at the command-line. For Xcode 4.2.x installed in the default location, run the following

command:

sudo xcode-select -switch /Developer/

For Xcode 4.3.x or later installed in the default location, run the following command:

sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer/

Refer to the Titanium Compatibility Matrix for the versions of Xcode currently supported by Titanium.

Installing the Android SDK

After clicking the Titanium Studio Dashboard Android icon, follow the on-screen instructions to download

and install the Android SDK.

when the Android SDK installer starts, set the destination directory.

The Android SDK Manager will present a list of package categories.

select those supported by the latest official Titanium SDK, as described in the Titanium Compatibility

Matrix.

ensure that the Prerequisite Android SDK / API for the latest official Titanium SDK is selected.

to reduce install time, expand each category and de-select unnecessary components, such as

Documentation, Samples and Sources.

click the Install x packages button to proceed.

http://docs.appcelerator.com/titanium/latest/#!/guide/Titanium_Compatibility_Matrix-section-29004837_TitaniumCompatibilityMatrix-Xcode

http://docs.appcelerator.com/titanium/latest/#!/guide/Titanium_Compatibility_Matrix-section-29004837_TitaniumCompatibilityMatrix-AndroidSDK%2FTargetAndroidPlatform

http://docs.appcelerator.com/titanium/latest/#!/guide/Titanium_Compatibility_Matrix-section-29004837_TitaniumCompatibilityMatrix-AndroidSDK%2FTargetAndroidPlatform

http://docs.appcelerator.com/titanium/latest/#!/guide/Titanium_Compatibility_Matrix-section-29004837_TitaniumCompatibilityMatrix-PrerequisiteAndroidSDK%2FAPI


7

Default Android SDK

It's important to ensure that the Default Android SDK is correctly set to a SDK supported by the Titanium

SDK you will be using most, as all applications will use this when they are launched for the first time. Thus,

open the Preferences dialog.

on OS X, select Preferences from the Titanium Studio menu and navigate to OS X Menu Bar >

Preferences.

on Windows and Linux, use the Window menu and navigate to Windows Menu Bar > Preferences.


8

CREATING AN PROJECT IN TITANIUM STUDIO

Once the Studio Setup is done, one can start with creating a sample project/App which runs on the selected devices. Below are the steps in creating a project.

1) Select the file->New->Titanium Mobile Project

2) Provide App Name (Project Name) and APPID (Bundle Identifier should be in package and

Appname format ex: com.example.Appname) Click on Next.

3) One can select the Template in which Project should be created, if not default Template will be

picked up, click on finish to complete the steps.


9


10

Project File System Layout

The project filesystem layout is always the same.

Resources folder - your project's code files and graphics are stored in this folder.

app.js - your project's bootstrap file. Every project has one; it's the file loaded first when your app is

launched.

tiapp.xml - the details you enter in the new project wizard are used to populate the tiapp.xml file.

Those are essentially the only required files, but you can create others to produce a manageable and

scalable code base. For example, you could put all your graphics in the Resources directory, or you could

put them into subfolders.


11

Running your app

To build and run your app, simply click the Run button as shown in the following screenshot, and choose

the appropriate target.


12

Your app should now be running in the mobile simulation environments you selected.


13

Basic Functions in Titanium Studio

Below Mentioned Function Calls Different .js Files Based on the osname or device the APP is running

function() { var osname = Ti.Platform.osname,

var isTablet = osname === 'ipad' || (osname === 'android' && (width > 899 || height > 899));

var Window; if (isTablet) { Window = require('ui/tablet/ApplicationWindow'); } else { if (osname === 'android') { Window = require('ui/handheld/android/ApplicationWindow'); } else { Window = require('ui/handheld/ApplicationWindow'); } } new Window().open(); })();)( Below Mentioned Code Creates a Button and Binds an Event Listener to the Button. var loginBtn = Titanium.UI.createButton({ title : 'Login', top : 260, width : '80%', height : 35, left : 30, borderRadius : 1, font : { fontFamily : 'Arial', fontWeight : 'bold', fontSize : 14 }, //backgroundImage:'/images/slightlylargerimage.png' });); loginBtn.addEventListener('click', function(e) { });


14

Below is the Code to Make a Network Call The Response from the Client Request can be success or error and the response can be data, xml, image etc. var xhr = Ti.Network.createHTTPClient({ onload : function(e) { }, onerror : function(e) { }); var str = (‘http://localhst:8080/’); xhr.open("POST", str); xhr.setRequestHeader("X-SUP-SC", "PurchaseBasic"); xhr.setRequestHeader("Authorization", "Basic ".concat(base)); xhr.setRequestHeader("content-type", "application/atom+xml"); xhr.send();

Before getting into to the application one has to configure the Back end as an application in SMP admin

portal. Details of configuring the Application is given in the below URL.

http://dcx-pubs.sybase.com/index.html#smp100/en/com.sybase.smp.doc/doc/html/title.html

Note: we have used the Back end services provided by inter EPM team. One has to have a back end

gateway URL to develop an APP.

http://dcx-pubs.sybase.com/index.html#smp100/en/com.sybase.smp.doc/doc/html/title.html


15

Application Screen Shots

a) Login Screen

Wrappers

Onboarding without Captcha:

Var myResponse = onBoardingWithoutCaptcha(username,password,BaseUrl); Inputs to the function are username, password and the baseurl which are passed from login

screen. APPCID will be returned when onboarding happens properly otherwise corresponding error code will be Returned.

var myResponse = onBoardingWithoutCaptcha(username,password,BaseUrl);

function onBoarding(username,password,BaseUrl) {

var xhr = Ti.Network.createHTTPClient({

onload : function(e)

{

// function called in readyState DONE (4)

Ti.API.info('onload called, HTTP status = ' + this.status);

if (this.status == '201')

{

Ti.API.info("cookies: " + xhr.getResponseHeader('Set-Cookie'));

var cookie = xhr.getResponseHeader('Set-Cookie');

var Appcid = getSessID(cookie);

function getSessID(cookie)

{


16

var split1 = cookie.split(',');

var split2 = split1[0].split('X-SUP-APPCID=');

return split2[1];

}

return Appcid;

}

},

onerror : function(e)

{


{

var str = ('Not Authorized pls Verify and re-enter the Credentials');

return str;

}

else

{

retrun this.status;

}

},

});

var str = BaseUrl.concat('/odata/applications/latest/Purchase/Connections');

Ti.API.info('error, HTTP status = ' + str);

xhr.open("POST", str);

var base = Ti.Utils.base64encode(username.concat(":").concat(password));

xhr.setRequestHeader("Authorization", "Basic ".concat(base));

xhr.setRequestHeader("content-type", "application/atom+xml");

var xmlbody = "<?xml version='1.0' encoding='utf-8'?>\n" + "<entry

xmlns='http://www.w3.org/2005/Atom'\n" +

"xmlns:d='http://schemas.microsoft.com/ado/2007/08/dataservices'\n" +

"xmlns:m='http://schemas.microsoft.com/ado/2007/08/dataservices/metadata'>\n" + "<title

type='text'/><updated>2012-06-15T02:23.29Z</updated>\n" + "<author><name/></author>\n" +

"<category term='applications.Connection'

scheme='http://schemas.microsoft.com/ado/2007/08/dataservices/scheme'/>\n" + "<content

type='application/xml'>\n" + "<m:properties>\n" + "<d:DeviceType>iPad</d:DeviceType>\n" +

"</m:properties>\n" + "</content>\n" + "</entry>";

xhr.send(xmlbody);

}


17

Onboarding with Captcha:

Var myResponse = onBoardingWithCaptcha(username,password,BaseUrl); Inputs to the function are username, password and the baseurl which are passed from login screen. APPCID will be returned when onboarding happens properly otherwise corresponding error code will be Returned i.e. A Captcha code will be returned as shown above when user clicks on login button in the login screen, if user enters correct captcha text then onboarding continues otherwise user will be displayed with another captcha text, this step Will repeated until correct captcha text is entered.

var myResponse = onBoardingWithCaptcha(username,password,BaseUrl);

function onBoardingWithCaptcha(username,password,BaseUrl) {



{




{





{



return split2[1];

}

return Appcid;

}

},


{

Ti.API.info('error1, HTTP status = ' + this.status);


18

Ti.API.info('error, HTTP status = ' + this.responseText);


{

var CorrectCaptcha = this.getResponseHeader('WWW-Authenticate');

Ti.API.info("header:" + this.getResponseHeader('WWW-Authenticate'));

if (CorrectCaptcha == 'CAPTCHA')

{





{



return split2[1];

}

startApplication(this.responseText, Appcid);

} else

{


return str;

}

}

},

});
















xhr.send(xmlbody);

}


19

startApplication(CaptchaText, Appcid)

{

var xhr1 = Ti.Network.createHTTPClient({


{




{

return Appcid;

}

},

/*DISPLAY CAPTCHA AGAIN ON ENTERING WRONG CAPTCHA TEXT*/

onerror : function(e) {


if (CorrectCaptcha == 'CAPTCHA')

{


onload : function(e) {



{

return Appcid;

}

},


Ti.API.info('error1,

HTTP status = ' + this.status);

if (this.status == '401') {


if (CorrectCaptcha == 'CAPTCHA') {




{



20


return split2[1];

}

startApplication(this.responseText, Appcid);

}

},

});



xhr.setRequestHeader("X-SUP-SC", "PurchaseBasic");



xhr.setRequestHeader("X-SUP-APPCID", Appcid);

xhr.setRequestHeader("X-SUP-CAPTCHA-TEXT", CaptchaText);











xhr.send(xmlbody);

} else {

alert('Not Authorized pls Verify and re-enter the Credentials');

}

},

});


xhr1.open("POST", str);

xhr1.setRequestHeader("X-SUP-SC", "PurchaseBasic");


xhr1.setRequestHeader("Authorization", "Basic ".concat(base));

xhr1.setRequestHeader("X-SUP-APPCID", Appcid);

xhr1.setRequestHeader("X-SUP-CAPTCHA-TEXT", CaptchaText);

xhr1.setRequestHeader("content-type", "application/atom+xml");


21




"xmlns:m='http://schemas.microsoft.com/ado/2007/08/dataservices/metadata'>\n"

+ "<title type='text'/><updated>2012-06-15T02:23.29Z</updated>\n" +

"<author><name/></author>\n" + "<category term='applications.Connection'

scheme='http://schemas.microsoft.com/ado/2007/08/dataservices/scheme'/>\n" +

"<content type='application/xml'>\n" + "<m:properties>\n" +

"<d:DeviceType>iPad</d:DeviceType>\n" + "</m:properties>\n" + "</content>\n" +

"</entry>";

xhr1.send(xmlbody);

}

Retrieving Response as text/data, XML and Image from a client call:

Below Functions show how to get the data, how to parse a XML response and how to read an image from response headers/data.

/********************************************************************************

Reading Response Data

********************************************************************************/



{




{





{



return split2[1];

}

//return Appcid;

}

},


{


{


22


//return str;

alert(str);

}

else

{

//retrun this.status;

}

},

});
















xhr.send(xmlbody);

/********************************************************************************

Reading Response Image

********************************************************************************/



{




{

img = Ti.UI.createImageView({


23

image : Ti.Utils.base64decode(responseText),

top : 150,

width : 300,

height : 150

});

}

},


{


{


return str;

}

else

{

retrun this.status;

}

},

});
















xhr.send(xmlbody);

/********************************************************************************

Parsing an XML from Response Data

********************************************************************************/


onload : function(e) {


Ti.API.info('Master View, HTTP status = ' + this.status);

var doc = this.responseXML.documentElement;


24

// begin looping through blog posts

var itemList = doc.getElementsByTagName("d:Category");

},


Ti.API.info('error1, HTTP status = ' + this.status);

if (this.status == '401') {


}

},

});

var str = BaseUrl.concat('/Purchase/ProductCollection');

xhr.open("GET", str);



xhr.setRequestHeader("X-SUP-APPCID", Appcid);

xhr.send();

Retrieving data from resource bundle:

Below Functions show how to get the order id through post request.

function ResourceBundle(username,password,BaseUrl) {



{




{

var doc = this.responseXML.documentElement;

var item = doc.getElementsByTagName("d:AppName");

var item1 = doc.getElementsByTagName("d:ImgUrl");

var item2 = doc.getElementsByTagName("d:AppChgInd");

var item3 = doc.getElementsByTagName("d:PrimeColor");

var item4 = doc.getElementsByTagName("d:SecColor");

}

},


{


{


return str;

}

},


25

});

var str = BaseUrl.concat('/ bundles/Purchase/Input:1.0);

xhrb.open("GET", str);


xhrb.setRequestHeader("Authorization", "Basic ".concat(base));

xhrb.setRequestHeader("X-SUP-APPCID", Appid);

xhrb.send();

}

Post Request:

function OrderID(username,password,Url) {

var xhrb = Ti.Network.createHTTPClient({


{




{

var myToken = response.getResponseHeader('x-csrf-token');



{



var myResponse = response.getResponseHeader('location');

var myOrderLoc = myResponse.indexOf("'");

var myOrderEnd = myResponse.lastIndexOf("'");

var OrderId = myResponse.substring(parseInt(myOrderLoc)+1,

myOrderEnd);

return OrderId;

},


{


{


return str;

}


26

},

});

Ti.API.info('error, HTTP status = ' + url);

xhr.open("POST", url);



xhr.setRequestHeader("X-SUP-APPCID", Appid);

xhr.setRequestHeader("X-CSRF-TOKEN", myToken);

var xmlbody = '<?xml version="1.0" encoding="utf-8"?>\n'+

'<atom:entry

xml:base="http://ldcigiq.wdf.sap.corp:50015/sap/opu/odata/sap/ZEPM_RETAIL_SCEN

_TMP_SRV_01/" xmlns:atom="http://www.w3.org/2005/Atom"

xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices"

xmlns:m=http://schemas.microsoft.com/ado/2007/08/dataservices/metadata

xmlns:sap="http://www.sap.com/Protocols/SAPData">\n'+

'<category term="ZEPM_RETAIL_SCEN_TMP_SRV_01.Salesorderheader"

scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme" />\n'+

'<atom:link href="SalesOrderHeaders/SalesOrder_Items"

rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/SalesOrder_

Items" type="application/atom+xml;type=feed"

title="ZEPM_RETAIL_SCEN_TMP_SRV_01.SalesOrderItems">\n'+

<m:inline>\n'+'<atom:feed>\n'+'<atom:entry>\n'+'<category

term="ZEPM_RETAIL_SCEN_TMP_SRV_01.Salesorderitem"


'<atom:content type="application/xml">\n'+'<m:properties>\n'+'<d:ProductId>HT-

1010</d:ProductId>\n'+'<d:Note>Sales Order item 1 created by EPM GW Service

via HTTP-Request</d:Note>\n'+

'<d:DeliveryDate>2023-07-01T00:00:00.0000000</d:DeliveryDate>\n'+

'<d:Quantity>1.000</d:Quantity>\n'+'<d:QuantityUnit>EA</d:QuantityUnit>\n'+

'</m:properties>\n'+'</atom:content>\n'+'</atom:entry>\n'+'<atom:entry>\n'+

'<category term="ZEPM_RETAIL_SCEN_TMP_SRV_01.Salesorderitem"


'<atom:content type="application/xml">\n'+'<m:properties>\n'+'<d:ProductId>HT-

1030</d:ProductId>\n'+'<d:Note>Sales Order item 2 created by EPM GW Service

via HTTP-Request</d:Note>\n'+'<d:DeliveryDate>2023-07-

01T00:00:00.0000000</d:DeliveryDate>\n'+'<d:Quantity>1.000</d:Quantity>\n'

'<d:QuantityUnit>EA</d:QuantityUnit>\n'+'</m:properties>\n'+'</atom:content>\n

'+'</atom:entry>\n'+'</atom:feed>\n'+'</m:inline>\n'+'</atom:link>\n'+'<atom:c

ontent type="application/xml">\n'+'<m:properties>\n'+'<d:Note>Sales Order

created by EPM GW Service via HTTP-

Request</d:Note>\n'+'<d:BuyerId>0100000000</d:BuyerId>\n'+'<d:CurrencyCode>EUR

</d:CurrencyCode></m:properties>\n'+'</atom:content>\n'+'</atom:entry>'”;

xhr.send(xmlbody);

}

},

http://schemas.microsoft.com/ado/2007/08/dataservices/metadata


27


{


{


return str;

}

},

});

xhrb.open("GET", Url);


xhrb.setRequestHeader("Authorization", "Basic ".concat(base));

xhrb.setRequestHeader("X-SUP-APPCID", Appid);

xhrb.setRequestHeader("X-CSRF-TOKEN", ‘Fetch’);

xhrb.send(xmlbody);

}

© 2013 SAP AG. All rights reserved.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP

BusinessObjects Explorer, StreamWork, SAP HANA, and other SAP

products and services mentioned herein as well as their respective

logos are trademarks or registered trademarks of SAP AG in Germany

and other countries.

Business Objects and the Business Objects logo, BusinessObjects,

Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and

other Business Objects products and services mentioned herein as

well as their respective logos are trademarks or registered trademarks

of Business Objects Software Ltd. Business Objects is an SAP

company.

Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL

Anywhere, and other Sybase products and services mentioned herein

as well as their respective logos are trademarks or registered

trademarks of Sybase Inc. Sybase is an SAP company.

Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services are

registered trademarks of Crossgate AG in Germany and other

countries. Crossgate is an SAP company.

All other product and service names mentioned are the trademarks of

their respective companies. Data contained in this document serves

informational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materials

are provided by SAP AG and its affiliated companies ("SAP Group")

for informational purposes only, without representation or warranty of

any kind, and SAP Group shall not be liable for errors or omissions

with respect to the materials. The only warranties for SAP Group

products and services are those that are set forth in the express

warranty statements accompanying such products and services, if

any. Nothing herein should be construed as constituting an additional

warranty.

www.sap.com

Documents

Setting Up Titanium Studio and Creating an App Using Appcelerator