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 APPs on Andriod, Apple, BlackBerry, Windows Devices Using
the APIs 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.

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.
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.

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) {

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);
var base = Ti.Utils.base64encode(username.concat(":").concat(password));

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*/


if (CorrectCaptcha == 'CAPTCHA')
{


{
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
********************************************************************************/
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);

}

},
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

Setting Up Titanium Studio and Creating An App Using Appcelerator

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Setting Up Titanium Studio and Creating An App Using Appcelerator

Uploaded by

Copyright:

Available Formats

Tutorial: Setting Up Titanium Studio and Creating

an App Using Appcelerator

You might also like