Lets take a look around the Appcelerator (Appc) Studio IDE. Appcelerator Studio is an Eclipse-based IDE that provides a single, extensible environment to rapidly build, test, package, and publish mobile apps across multiple devices and OSs.
Assumptions
- Downloaded and install the Appc Studio already
- Have node.js installed
- Installed the Command Line Interface (CLI)
- Have Xcode installed
- Installed both the iOS and Android SDK’s
- Have a cloud account and be logged into your organization
The Why?
Why should you use this over just doing it with Xcode or Android Studio? Good question, and the reason there are a few reasons why you might choose this.
- Integration: With Appc you not only get the ability to create native mobile apps for the two big platforms (iOS and Android), you also get a complete backend server for creating and managing API’s (Arrow)
- Speed: Titanium compiles native objects into native code, which is Android Java if it’s an Android app, and Objective C if it’s an iOS app
- Single Codebase: If you have ever tried to maintain parity across multiple platforms you will appreciate this one. Since you only have a base codebase that needs to be maintained, cross platform parity is much easier to accomplish.
- Single language In the same way a single codebase is great a single language also stands out. The main development language that you needed to know is JavaScript.
The Project
Getting started with Appc is easy especially if you have worked with Eclipse or Eclipse based IDE’s. The first thing we will look at is how you create a new project. To create a new mobile project you simply select File > New > Mobile App Project from the drop down menu.
Then choose the project template. In this case we want the default Alloy Project.
Lastly we want to give our project a location and name. At the bottom you will see the Enable Appcelerator Platform Service checkbox. Uncheck that for now, for this example we won’t need any of those.
Click Finish and this will stub out a basic folder structure for the base “hello world” app that can be run on both iOS and Android. This will also create a placeholder app for you in the Appc cloud dashboard (more on that later). But for now lets focus on what is going on with the IDE.
Our project is broken up in the standard MVC configuration. We have controllers, a model folder and a view folder. We also see a styles folder. Lets talk about that first.
Styles
Just like in a web project we want to separate our presentation layer from our view content layer. So we have Titanium style sheets. It’s not REALLY a CSS style sheet, but the idea is similar. In this way we can position all our screen elements where ever we want while keeping our structural XML code clean and free from clutter.
Controller
Each controller is associated with a UI hierarchy, defined in an XML file in the views folder. In the controller folder we have the JS file that will control the action of our views. The controller contains the application logic used to control the UI and communicate with the model.
View
The view component represents the UI of the application, comprised of XML markup and Titanium style sheets.
Other important files and folders
The alloy.js is the initializer file used to preconfigure components or override Alloy methods before the main controller is executed.
The assets folder contains image assets and other files that need to be copied into the Resources directory.
The app.tss file is used for global styles that all UI elements might adopt in your application.
Lastly the tiapp.xml file is an XML configuration files that the Titanium SDK uses to generate native resources and code. Many of the configuration that lives in tiapp.xml is cross-platform, but some is platform-specific as well. You would use this app much like you would use the AndroidManifest.xml file or iOS info.plist.
Some new buttons
In the IDE you might see a few buttons at the top of the application that are not part of the eclipse IDE.
The first one is a phone with an eye on it. This is the “Live View” button. This button is one of the really nice things about the IDE. When ever you make any changes to the code the application will automatically refresh the app reflecting your changes with out having to restart the simulator. This makes for rapid development and layout changes.
Then next button, a red triangle, is the dashboard button. This is a great place to find example apps, learning information videos and documentation, and a few project prerequisites that you might want to look at.
The terminal window button is a good place to run command line items such as Arrow projects with out having to switch between applications.
Working with perspectives
There are three main perspectives i like to work with. The default, debug, and designer.
The default perspective is a good utility view where you can easily jump around the code and see basic information.
The debug view is great for diving into your code and trying to find bugs. You can set break points and step over code, and inspect variables.
Then there is the designer. This is where it gets interesting. Now there is a way to drag and drop UI elements to your screen. App Designer brings to the Appcelerator Platform the very latest in RMAD technology. It lets you visually design and develop apps for iOS, Android, and Windows—all from a single canvas in Appcelerator Studio.
This was just a quick overview of the Appcelerator Studio. I will go into more depth in other post about some of the other aspects of this product. Hope this was helpful to anyone who is a first time user of the platform.