Introduction to Aptana

Contents

I. Introduction…………………………………….……….....................p.1

II. User Interface…………………………………….…………………..p.2

III. Obtaining Software…………………………………………………..p.3-4

IV. Installation…………………………………………….……………...p.4-9

V. Opening Aptana Studio 3…………………………………….………p.10-11

VI. Creating a new file in Aptana Studio 3………………………………p.12-15

VII. Running a program in Aptana Studio 3……………………………....p.16-17

VIII. Saving a file or project in Aptana Studio 3…………………………..p.18

Page 1 of 18

Revision # 0.0

Introduction to

Aptana Studio 3 BSIT - 2A

TVET - 211

Date developed:

July 23, 2012

Issued by: Mr. Joel Laurencio II

I. Introduction

Aptana Studio is an open source INTEGRATED DEVELOPMENT ENVIRONMENT(IDE) for

building Ajax web applications. It supports JavaScript, HTML, DOM and CSS with code-completion,

outlining, JavaScript debugging, error and warning notifications and integrated documentation. Additional

plugins allow Aptana Studio to support Ruby on Rails, PHP, Python, Perl, Adobe AIR, Apple iPhone and

Nokia WRT (Web Runtime). Aptana Studio is based on Eclipse and is available as a standalone on

Windows, Mac OS X and Linux, or as a plugin for Eclipse. Aptana Studio provides support for Python in the

form of the PyDev plugin. This provides color syntax highlighting, code assist, code outlining, debugging

and integrated support for Python, Jython and IronPython interpreters. Aptana announced that their

previously commercial Pydev Extensions are now open sourced. Aptana is currently led by Paul Colton,

Founder and CEO, Uri Sarid, CTO/VP, Engineering and Kevin Hakman, Director of Evangelism. The staff

headcount surpassed 25 after September 1, 2008. Aptana is an active participant in the OpenAjax Alliance,

with Hakman serving as director of the IDE Working Group.

Aptana was acquired by Appcelerator, Inc. on January 7, 2011. Employees of Aptana were absorbed to the

Mountain View campus of Appcelerator and work is scheduled to continue on the release of Aptana 3.0.

Appcelerator in their webcast made users aware of their intention to integrate their mobile application

framework with Aptana Studio, with a planned beta within Q1 2011. Emphasis on visual workflow was

indicated for both of the products and continued support will continue for existing Aptana products.

Appcelerator put Jaxer on github.

Page 2 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


II. User Interface

1

2

3

4

5

6

1 Code editor- the work

area.

2 Problem view: Shows the

errors and warnings in a

users code

3 Project explorer

view- Navigate and

manage projects

and files

4 Debug and web

perspective view

5 App explorer, Outline,

and sample tabs

6 File/project tabs at

top of code editor to

switch between open

files

7 8

7 Themes icon – where a

user can change the

color of fonts and

background of the work

area

8 Run Icon – to run the

program in a web

browser

Page 3 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


III. Obtaining software

1. Go to this website/link: http://www.aptana.com/

2. And then click to download it. Don’t worry its virus-free and no registration is

needed ‘it’s free.’

3. And it will link to this page at then to finally download it click the download button bellow.

http://www.aptana.com/

Page 4 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


4. And the downloading process will start automatically

IV. Installation

1. Once the download I complete go to the download folder destination.

Ex.

Page 5 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


2. And then click to start the installation and click YES.

3. And the Aptana studio 3 can now be install, click next.

Page 6 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


4. Choose a folder in which to install Aptana studio and click next.

5. Select the folder in which to create start menu shortcuts Aptana Studio and click next.

Page 7 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


6. Select which file extension you wish associated with this application and click next.

7. Set up has finished gathering information and is ready to install aptana studio. Set up is ready to

install Aptana studio 3 on your computer. Click install to start installation.

Page 8 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


8. Just wait wail the Aptana Studio 3 is being installed this will just take few minutes.

9. All of the components of Aptana Studio 3 were successfully is copied to your computer. Click next.

Page 9 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


10. Installation complete. Click close to exit set up.

Page 10 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


V. Opening Aptana Studio 3

1. Open/click Aptana studio 3 on your desktop or start menu.

2. It will open and ask for a workspace (Aptana studio 3 a stores your project in folder called

Workspace). Choose a workspace folder to use in current session.

Page 11 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


3. And this is the Aptana when opened.

Page 12 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


VI. Creating a new file in Aptana Studio 3

1. Click File on the menu tab.

2. Select new and then

3. Select File

Page 13 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


4. Type the Filename (ex. Hello.html)

5. If a user will click

next this will appear.

Select a folder to save

file.

This is where to type

the file name

A user can select

either of these

available templates

This is the code of

a selected

template.

Page 14 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


6. But if a user will click finish button he/she can start coding on his/her own.

Another way of creating new file from template

1. Click File->New From Template->HTML and XHTML – 1.0 Transitional Template (*.html)

Page 15 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


2. And this is the code.

There is no difference in expected output of a page in using Aptana studio or a notepad. The thing is,

using Aptana Studio will help the user to create or type the codes easily, because when a user type a tag or

element there are suggestions that will appear and it will automatically create a closing tag. A user can also

detect the errors easily and conveniently.

Page 16 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


VII. Running a program in Aptana Studio 3

There are 4 methods a user can run the program:

1. By going to the folder or location where a user saved his/her file.

2. By using a shortcut key “ctrl+F11” And the file will automatically open in a web browser.

3. By Clicking the “Run icon” above the Aptana Studio.

Just click any of a

saved file to view in a

web browser.

Page 17 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


4. Or by selecting the file to be run in the left portion of Aptana Studio.

o Right click the file

o Select “Open with”

o And select “Web browser”

Web browser (firefox)

Using Aptana Studio Web Browser

Page 18 of 18

Revision # 0.0

Introduction to


TVET - 211

Date developed:

July 23, 2012


VIII. Saving a file or project in Aptana Studio 3

o Upon creating a file a user also save his/her files or project in a selected folder. After coding, before

running a program a user must save the changes in his/her file he/she created.

o Using shortcut key “ctrl+s”

o Or go to ‘File’ and select ‘save’

Education

Introduction to Aptana