titanium studio [updated - 18/12/2011]

33
TITANIUM Studio

Upload: sentinel-solutions-ltd

Post on 09-May-2015

7.442 views

Category:

Education


5 download

DESCRIPTION

How to install & use ......

TRANSCRIPT

Page 1: Titanium Studio [Updated - 18/12/2011]

TITANIUMStudio

Page 2: Titanium Studio [Updated - 18/12/2011]

Install itDevelopment Platform :

- Titanium Studio. - Eclipse IDE plug-in

Step First - Install the recent JDK - Configure the variable PATH now

Open the System properties and click on the Advanced option.

Target – to setup the environment variable.

Open Environment Variables

SetUP – New system variable, like Variable Name : JAVA_HOME Variable Values : show jdk path[C:\Program Files\Java\jdk1.6.0_22\bin].

Also edit System Variable which variable name is ‘path’. Add jdk path on the variable value field. [C:\Program Files\Java\jdk1.6.0_22\bin]. Check out JAVA version from command prompt with : javac

*** If problem then use –[C:\Java\jdk1.6.0_22\bin].

Page 3: Titanium Studio [Updated - 18/12/2011]

Step Second : - Install Android SDK - Configure the variable PATH now

SetUP option :New system variable, like Variable Name : android_sdk Variable Values : show Android SDK path

[C:\Program Files\Java\jdk1.6.0_22\bin].Edit System Variable which variable name is ‘path’.Add both ‘Android SDK tools’ and ‘platform tools’ path on the variable value field.

Like as – C:/ Program Files (x86)/Android/android-sdk/tools– C:/ Program Files (x86)/Androd/android-sdk/platform/../tools

Verify – the Android SDK installation works – On the command prompt ‘aapt v’ & ‘android list’

Problem – update Titanium Mobile SDK & Desktop SDK- Go C:\Users\Tomal\AppData\Roaming\Titanium\mobilesdk\win32\1.8.0.v20111114103905\

android

- Open android.py file with notepad, on the bottom of import just add DEFAULT_API_LEVEL = 7

- Check the folder must have ‘android 7’ C:\Program Files (x86)\Android\android-sdk\platforms

Page 4: Titanium Studio [Updated - 18/12/2011]

Now to Install & Start - Titanium studio

Before the Titanium Studio setup, you must need to restart your PC.

Open the Android AVD manager fromC:\Program Files (x86)\Android\android-sdk

Then create a new avd withNamed - titanium_5_WVGA800

Keep up to date – Titanium MobileSDK & DesktopSDK [http://builds.appcelerator.com.s3.amazonaws.com/index.html] – Titanium Studio too.

GoTo the Windows > Preferences from Menu Bar, click on the ‘Titanium Studio’ from tree. > Then Titanium, show the Android SDK path and choose the target Android platform.

Need to fetch the ‘jre’ file from JAVA tree - JAVA tree select ‘Build Path’ as jre Library use JRE_LIB variables(depricated). - Next, select ‘Installed JREs’ click on the ADD. - Here show the JDK path and load JRE then OK. - Back on and see the loaded JDK , check it.

OK…Done.

Page 5: Titanium Studio [Updated - 18/12/2011]

Try to UpDate From the menu bar, Help and Install new software. Clicking on the ‘Available Software Sites’ open a Preference

Window. ADD –https://dl-ssl.google.com/android/eclipse/named as Google ADT plug-in

http://www.blackberry.com/go/eclipseUpdate/3.6/javanamed as BlackBerry

http://download.appcelerator.com/appcelerator/studio/standalone/update/stable/

named as Titanium Studio Stable Updates

Reload them and install necessary packages – - From the Heilos Milestone Repository, programming

language, check Java Development Tools. - Install ADT plug-in [Android, BlackBerry, iOS]

finish

Page 6: Titanium Studio [Updated - 18/12/2011]

How does Titanium work? Titanium works by

translating JavaScript code into a native application code and then invokes the platform underlying tools to build the final package.

Titanium is conceptual build with three distinctive building blocks Pre-compiler

The Titanium pre-compilers role is to take your application's JavaScript code and optimize it (reduce whitespace, reduce the size of symbols, etc) and then create a dependency hierarchy of all the Titanium APIs used by your application.

Front-end compilerThe role of the front-end compiler is to generate the appropriate platform-specific native code, native project (if necessary) and build any specific code that is necessary to compile Titanium for a given platform compiler.

Platform compiler & packagerEach native platform has a set of associated tools (for example, Xcode for iOS) that are used to compile the final native application. After compilation, your application is packaged for running either on the native simulator, native device for testing or for final packaging for distribution.

Page 7: Titanium Studio [Updated - 18/12/2011]
Page 8: Titanium Studio [Updated - 18/12/2011]

Titanium Design Concepts Titanium uses a typical MVC (model view

controller) design concept for building application. The Titanium UI (user interface) is native.

In Titanium, one will use a standard set of APIs that are pre-built in to Titanium and that will provide one with the capabilities to build your application.

These APIs are split into various namespaces such as 

Titanium.UI (for User Interface)or Titanium.Network (for networking).

Page 9: Titanium Studio [Updated - 18/12/2011]

The following are the major design components in Titanium: Windows - windows host one or most Views Views - views draw content on the screen Widgets - widgets are special types of views that

perform specific actions like buttons

WindowsWindows have a lifecycle and host one or more Views inside them.A Window itself is a View.Self-contained Windows

For example, to create a simple Window, you could do the following:

var win = Ti.UI.createWindow();var view = Ti.UI.createView({backgroundColor:"red"});win.add(view);win.open();

Page 10: Titanium Studio [Updated - 18/12/2011]

URL-based Windows

Sometimes it's easier to structure your application where the logic for a given Window comes from a separate JavaScript file.

The URL for a URL-based Window must be local - meaning that it must be included in your project Resources directory and compiled in to the application.

We could restructure the above code to use a URL-based design. First, in your app.js, you would add:

var win = Ti.UI.createWindow({url:"view.js"});win.open();

Then, create a file named view.js and add the following code:var win = Ti.UI.currentWindow;var view = Ti.UI.createView({backgroundColor:"red"});win.add(view);

Notice that the win variable points to Ti.UI.currentWindow. Titanium defines a set of special variables in your JavaScript context automatically for you which allow you. Ti.UI.currentWindow defines the Window reference that owns (opened) the current Window so you can still reference it.

Page 11: Titanium Studio [Updated - 18/12/2011]

Import a Titanium ProjectTitanium Mobile Kitchen Sink Demo -

https://github.com/appcele rator/KitchenSink.git

Titanium SDK from URL and paste in the following URLs:OSX: http://builds.appcelerator .com.s3.amazonaws.com/RC/m obilesdk-1.7.0.RC1-osx.zip

Win32: http://builds.appcelerator .com.s3.amazonaws.com/RC/m obilesdk-1.7.0.RC1-win32.z ipLinux: http://builds.appcelerator .com.s3.amazonaws.com/RC/m obilesdk-1.7.0.RC1-linux.z ip

Further Information about Java compiler error - find herehttp://www.nightspirit.tw/ 2010/04/how-to-setup-titan ium-on-your-pc.html

Page 12: Titanium Studio [Updated - 18/12/2011]

Test & Deploy Android/iPhone on KitchenSink is a sample project workshop :

https://github.com/appcelerator/KitchenSink.git Also can it download from Git. for an iPhone Development issuing –

- Work with the iPhone developer Portal http://developer.appale.com/iPhone

- SignIn with AplleID

- Certificate connectionGenerate with onScreen instruction.Upload it, Browse-Locate the generated CSR.Submit it..

- Install the certificationDouble Click .CSR and device certificate

- Registration for a development deviceDevice Name , Device Serial Number

- AppID for an iPhone ApplicationAppID & Titanium developer ID(Roayl Card) must be the same. Provisioning profile is for Device elected testing & also

deployment issue

Page 13: Titanium Studio [Updated - 18/12/2011]

Capability Works at a shallow level, and the kinds of

capabilities with an expect to find.

Page 14: Titanium Studio [Updated - 18/12/2011]

Titanium Desktop SDK on Detail

The Titanium Desktop SDK provides a runtime environment for creating native desktop applications in HTML, CSS, and JavaScript. Titanium Desktop packages up your application source code (HTML/CSS/JavaScript) with a heavily augmented build of the popular Webkit open source web browser engine.

Titanium Desktop application is basically a web page (or pages) and a web browser packaged into a single executable program. But your desktop app is more than just a local web page - Titanium Desktop apps have access to enhanced native functionality,

Like file system access, media, the ability to run external processes, native UI chrome, and more.

Also available package Ruby, Python, or PHP code with your

application, further extending the capabilities of your always-on desktop application.

Page 15: Titanium Studio [Updated - 18/12/2011]

Titanium Mobile SDK on Detail

The Titanium Mobile SDK allows you to create, run, and package real native mobile applications for iOS, Android, and BlackBerry (beta) devices

Using the cross-platform JavaScript APIs. But unlike Titanium Desktop, where applications run inside a web browser engine, Titanium Mobile applications are run against a standalone JavaScript engine which invokes native APIs.

In fact writing a native application - it's just that you're using cross-platform JavaScript rather than non-portable Java or Objective-C.

Titanium Mobile apps use native UI and platform APIs, and run at close to full native speed.

The Titanium Mobile SDK works with the native SDK tool chains to combine your JavaScript

source code, a JavaScript interpreter, and your static assets into an application binary

that will be installed to an emulator or mobile device. It's worth mentioning that you

could write your application UI in HTML and CSS, but typically you will use native UI

components through a Titanium JavaScript API.

Page 16: Titanium Studio [Updated - 18/12/2011]

Titanium Studio on Detail

Titanium Studio is an IDE (Integrated Development Environment) that will enhance the user's experience while developing on the Titanium Platform. 

Titanium Studio will help you create, run, and package Titanium Mobile or Titanium Desktop application projects.  All of the latest Mobile and Desktop SDKs will be maintained and kept up to date by Titanium Studio. 

In addition to the nice features of an IDE ( i.e. syntax highlighting, content assist, code validation etc.) Titanium Studio also provides tight integration with the scripts used to create and run Titanium Projects.

Page 17: Titanium Studio [Updated - 18/12/2011]

AVD Interact with Titanium

Titanium Developer expects the adb executable to be in the same location, ie $ANDROID_SDK/tools,

as the Android SDK and AVD Manager (android executable), but Google has recently moved it to  $ANDROID_SDK/platform-tools.

Thus, it is necessary to create a symbolic link in $ANDROID_SDK/tools that references the new location.

For Windows, you must create a symbolic link for adb.exe and its associated AdbWinApi.dll:

cd %ANDROID_SDK%\tools mklink adb.exe ..\platform-tools\adb.exe mklink AdbWinApi.dll ..\platform-tools\AdbWinApi.dll

Interesting Feature : experimental issueIf you discover that the Android emulator is too large to comfortably fit your screen, you can

telnet to the virtual device and use the window scale command to reduce it, as demonstrated: appcel@myubuntu:~$ adb devices

List of devices attached emulator-5560   device appcel@myubuntu:~$ telnet localhost 5560 Connected to localhost. Escape character is '^]'. Android Console: type 'help' for a list of commands, OK window scale 0.75, OK

Page 18: Titanium Studio [Updated - 18/12/2011]

Experiment with HELLO WORLD

With a new on ‘Titanium’ project# give it Project Type, Name, AppID *** ,Company /Personal ID, Titanuim SDK.

Page 19: Titanium Studio [Updated - 18/12/2011]

Introduction The Fastdev server enables Titanium developers writing

Android apps to rapidly test and see the changes they make in code.

The app requests whatever it needs under Resources from the Fastdev server.

Fastdev is running and app requestsapp.js (or just about anything under Resources)

Fastdev is only supported for the Android Emulator.

Pre-requisites MobileSDK 1.7.0 or above Follow the instructions in the 

Titanium Command-line tool guide so can call the titanium script directly.

Fastdev Reference for Android

Page 20: Titanium Studio [Updated - 18/12/2011]

Starting the Fastdev serverTo put your app in Fastdev mode, you'll first need to run the Fastdev server, and re-

deploy your app:

Start the Fastdev server for your app:$ cd ~/myApp$ titanium fastdev start[INFO] [2011-05-06 09:43:02,755] Serving up files for org.appcelerator.myApp at 0.0.0.0:62835 from /Users/marshall/myApp

Run your app on the currently running emulator. This may require a full rebuild, since we build ALL modules into a Fastdev app to avoid missing functionality:$ titanium run --platform=android --android=/path/to/android-sdkFor convenience, you can avoid using the --android argument by setting the ANDROID_SDK environment variable.

In Titanium Studio, you can use the project's Run menuA restart here simply means restarting the app itself, not a full rebuild (like in previous versions of the MobileSDK). This may require a full rebuild, since we build ALL modules into a Fastdev app to avoid missing functionality:$ titanium run --platform=android --android=/path/to/android-sdkFor convenience, you can avoid using the --android argument by setting th\e ANDROID_SDK environment variable

Page 21: Titanium Studio [Updated - 18/12/2011]

Restarting a Fastdev app : Any one of these methods will cause the app to restart:

"Fast" restart$ titanium fastdev restart-app Re-run the application: You can just the same command as

above:$ titanium run --platform=android --android=/path/to/android-sdk

Manually restart by pressing the emulator's Back button, and clicking on it's icon in the App chooser.

However, keep in mind that you don't always need to restart your app for changes to take effect.

For example, if you're using Ti.UI.createWindow with the urlattribute set, then any time that window is opened it will reload the JavaScript code in url using Fastdev.

Similarly, any time Ti.include is called, Titanium will make a request using Fastdev.

Generally, only changes in app.js, and any scripts it might include with Ti.include will require an application restart.

Page 22: Titanium Studio [Updated - 18/12/2011]

Generally, this means these kinds of changes will require a full rebuild / redeploy:

Changes to tiapp.xml Changes to JSS stylesheets Adding, Removing, or Updating a Titanium Module Adding, Removing, or Updating native Android Resources

under platform/android

Fastdev also supports the platform-specific Resources/android directory, which maps directly to Resources, however any special android native images that are changed in Resources/android/images/$CONFIG will require a full rebuild (where  $CONFIG is one of low, medium, high, or an Android resource identifier such as res-long-mdpi).

Changing the Fastdev server's Idle Timeout The Fastdev server shuts down automatically after being idle (i.e. no new

requests by the app) for 30 minutes. You can increase this by passing a custom timeout when starting the Fastdev server:

Shutdown after being idle for 2 hours (in seconds) $ titanium fastdev start -t 7200

Purpose of need - FastdevServer

Page 23: Titanium Studio [Updated - 18/12/2011]

Fastdev Commands In all cases, the project is taken from the current

working directory. CommandDescriptionstart Starts the Fastdev server for

a project. If the server is already running for this project, this has no

effect.status Prints the status of the Fastdev server. Warns if the server is not running.stop Stops the Fastdev

server for a project. If the server is not running, a warning will be

issued.restart-app Restarts the app currently connected to the Fastdev server.

If no app is currently connected, this has no effect.kill-app Kills the app currently connected to the Fastdev server.

If no app is currently connected, this has no effect.

Page 24: Titanium Studio [Updated - 18/12/2011]

Full Usage $ titanium fastdev --help Usage: fastdev.py [command] [options] [app-dir] 

Supported Commands:     start       start the fastdev server     status      get the status of the fastdev server     stop        stop the fastdev server     restart-app restart the app connected to this fastdev server     kill-app    kill the app connected to this fastdev server 

Options:   -h, --help     show this help message and exit   -p PORT, --port=PORT  port to bind the server to [default: first available                         port]   -t TIMEOUT, --timeout=TIMEOUT                         Timeout in seconds before the Fastdev server shuts                         itself down when it hasn't received a request                         [default: 1800]   -l LOCK_FILE, --lock-file=LOCK_FILE                         Path to the server lock file [default: app-                         dir/.fastdev.loc]

Page 25: Titanium Studio [Updated - 18/12/2011]

The Titanium JavaScript Environment

In a Titanium Mobile applicationsource code is packaged into a binary file and then interpreted at runtime by a JavaScript

engine bundled in by the Titanium build process.

The JavaScript EngineTitanium runs application's JavaScript using one of two JavaScript interpreters

- JavaScriptCore on iOS (the interpreter used by Webkit) , Mozilla Rhino on Android, - the Browser Field object on BlackBerry.

Titanium has supplemented the global namespace with some global functions JavaScript developers would be accustomed to. Titanium-specific APIs are found in the Titanium namespace. Titanium is also aliased to Ti to save you some keystrokes

About Built-In Functions setTimeout  - schedule a function to be called once after a certain number of

milliseconds setInterval  - schedule a function to be called on a regular interval, specified in

milliseconds clearInterval - remove a function executing on interval alert  - display a simple native alert dialog with text (for quick and dirty visual

debugging, in lieu of logging) JSON  - Titanium provides a standard JSON serialization/deserialization

mechanism via the JSON namespace (JSON.parse and JSON.stringify)

Page 26: Titanium Studio [Updated - 18/12/2011]

 Include files in the current execution context, much like using a <script> tag in an HTML page. > Ti.include('myscript.js');

Scripts included into the current context via include are executed globally for the context, and are not affected by functional scope. Let's say somescript.js contains a single variable declaration:

var something = true;

The following code in app.js:Ti.include('somescript.js');if (something) { Ti.API.info('something is true');}

And this code are equivalent - notice that includes are always global, regardless of the scope they are called in:

(function() { Ti.include('somescript.js');})(); if (something) { Ti.API.info('something is true');}

application can have multiple execution contexts. New execution contexts are typically created by opening a new window that points to an external URL in its url property:

Ti.UI.createWindow({  url:'window.js'}).open();

Esecute Contexts

Page 27: Titanium Studio [Updated - 18/12/2011]

Passing data between contexts

Communicate across execution contexts using - application-level events. - Using Titanium's custom event API, arbitrary JavaScript data

structures can be sent and received in different execution contexts.

Note - that the 'payload' of your event must be JSON serializable, so business objects will not preserve any instance methods associated with them. The APIs used to fire and receive events are in the Ti.App namespace:

//to fire... Ti.App.fireEvent('customEvent', {  myData:true, someStuff:[ 'foo‘,  'bar’ ]});//to receive...

Ti.App.addEventListener('customEvent', function(eventData) {alert(eventData.someStuff[0]); //will alert 'foo'});

Page 28: Titanium Studio [Updated - 18/12/2011]

– Decision make – use single context or multiple contexts ?

The case in software development, the answer is "that depends".

Most of the time, it is probably advisable to use a single execution context, for a couple of reasons:- Can pass complex objects in custom events- Include your libraries/dependencies only once, since there's only one context

Advice - Don't pollute the global scope!Declaring a lot of global variables and functions in an execution context leaves your code at risk

of colliding with its self or other included libraries. To avoid this, use closures and self-calling functions to encapsulate your code. A rational include file would look something like this:

var myAPI = {};// This is a variable I intend to be global, since I want. people who inculde my file to have visibility to it(function(){  // put my implementation inside a self-calling function, so I can go crazy with local functions and variables  function helper(){    //do stuff  }

   var state_variable = true;  //then, create a controlled public API..myAPI.doSomething = function() {    //do something  };})();

Page 29: Titanium Studio [Updated - 18/12/2011]

– JavaScript Best Practice – Don't pollute the global scope! Use === and !== instead of == and != Lots of variables? Use a comma Efficient loops Wrap self-calling functions in parenthesis Avoid deep nesting

More - http://wiki.appcelerator.org/display/guides/JavaScript+Best+Practices

Page 30: Titanium Studio [Updated - 18/12/2011]

Third Party Tools :Database

sqlite.org Management Tool ListSQLite Expert (Free and Commercial versions)Sequel Pro for OSXERMaster Eclipse Plugin Entity Relationship Tool (free)SQLiteStudio (free)Clay Mark II Eclipse Plugin Entity Relationship Tool (free and commercial)Navicat (Commercial database management, backup and migration tool)MesaSQL for OSX (free/beta)

Debugging

Colored Logcat for Android. Use the script logcat-ti.sh to filter out everything except Ti.API messages. Logcat filters are explained in detail on the Android Developers websiteJSLint, online JavaScript validator and code tidierJSONLint, online JSON validator and code tidierJSON Formatter and Validator, online JSON script and remote webservice validator, and code tidier

Page 32: Titanium Studio [Updated - 18/12/2011]

Framework

The Titanium platform has given rise to a number of frameworks built on top of Titanium that add features, increase productivity or organize application code. For example:

Utility Libraries

Helium - a Titanium utility library and framework for building component-oriented, event-driven Titanium Mobile applications. Provides visual and non-visual unit testing support, utility functions, and a JavaScript-based framework for building and styling UI componentsTitanium Redux - utility library for Titanium, aimed at reducing the amount of code needed for common tasks in TitaniumTitanium Tools - a sweet collection of tools for Titanium MobileFoundation - MVC microframework  for Titanium 1.5.XTiQuery - framework for Titanium based on jQuery

Persistence

TiStore - ActiveRecord for TitaniumJoli - small ORM for Titanium

Special Purpose

Twitter oAuth Adapter - utility for making authenticated Twitter API calls