IntroductionWelcome| 00:03 | Hi, I am Joe Marini, and I'd like to
welcome you to Up and Running with Aptana Studio.
| | 00:08 | In this course, we will look at using Aptana
Studio, one of the most fully featured,
| | 00:12 | open-source IDEs available today.
And best of all, it's available for free.
| | 00:17 | I'll start by showing you how to
install Aptana Studio for both Windows and Mac.
| | 00:21 | Than we'll see how to use Aptana Studio to
organize projects and take advantage of great
| | 00:26 | features like the Local History.
| | 00:29 | We'll see how to use Aptana's professional
grade code editing features, like Content
| | 00:33 | Assist, Code Snippets, and Bookmarks and Tasks.
| | 00:37 | And we'll finish up by previewing our work
locally, using Aptana's built-in web server
| | 00:42 | and deploying our project to an FTP site.
| | 00:45 | Aptana Studio is a great free tool for
building all kinds of coding projects.
| | 00:50 | It contains features usually
found in programs costing hundreds of dollars.
| | 00:54 | If you're looking to take your coding productivity
to the next level, then let's get started learning
| | 00:58 | how to get Up and Running with Aptana Studio.
| | 01:03 |
| | Collapse this transcript |
| What you should know| 00:00 | Before we get started looking in Aptana
Studio, there are few things that you should know
| | 00:04 | that I'm going to assume that
you are already familiar with.
| | 00:06 | Aptana Studio is an
intergraded development environment.
| | 00:10 | It's used for building all kinds of projects.
| | 00:12 | We're going to be looking at for
using it to build web-based projects.
| | 00:17 | That involves things like writing JavaScript
code and HTML code and working with various
| | 00:21 | parts of the user interface
that are common to many other IDEs.
| | 00:25 | If you are not already familiar with using
an application like an IDE to build coding
| | 00:30 | based projects, you might want to look at some
other resources available here on lynda.com first.
| | 00:35 | If you are not familiar with IDEs, I would start by
watching Creating a First Website with Dreamweaver CS6.
| | 00:41 | Now obviously, Dreamweaver and Aptana
Studio are not the same thing, they are different
| | 00:44 | applications, but Dreamweaver is an IDE sort
of like Aptana Studio is, at least where the
| | 00:49 | coding parts are concerned.
| | 00:51 | So watching the title like Creating a First
Website with Dreamweaver will at least show
| | 00:54 | you the concepts involved in using an
application that involves various different elements of
| | 00:59 | the UI, such as the coding surface and
project management and so on and so forth.
| | 01:03 | So I'll start here if you
don't know what in IDE is.
| | 01:07 | If you're not familiar with writing code
like JavaScript or HTML, I'd probably start off by
| | 01:12 | watching HTML Essential
Training with Bill Weinman.
| | 01:15 | This will get you used to the idea of
editing HTML code, which is what we'll be doing in
| | 01:19 | Aptana Studio as well as JavaScript.
| | 01:21 | You might want to watch
JavaScript Essential Training.
| | 01:25 | These are two really great resources for becoming
familiar with writing and editing code, especially
| | 01:31 | the kind of code that
we'll be seeing in this course.
| | 01:33 | So make sure your familiar with these concepts
before you proceed. and then when you are ready,
| | 01:37 | come on back, and we'll get
started with Aptana Studio.
| | 01:42 |
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're a Premium Member of the lynda.com
online training library, or if you are watching
| | 00:05 | this tutorial on the DVD-ROM, you have access
to the exercise files used throughout this title.
| | 00:10 | Now I've put all the exercise files into this
folder right here called Exercise Files, and
| | 00:14 | I've laid the folder out
just as a website would be.
| | 00:18 | Now this isn't particularly important for
this particular title because it's not like
| | 00:22 | we're going to be building a
website from start to finish.
| | 00:24 | The only reason these files are here is to
give us some things to edit while we're working
| | 00:28 | with Aptana Studio, and you can use these
files on your own while you go off and explore
| | 00:33 | Aptana Studio, after you've watched this course.
| | 00:35 | So this course contains a whole bunch of
different file types. You can see that there is HTML
| | 00:39 | files, and here there's ICO files, there's
some JavaScript files in here, there is also
| | 00:44 | some CSS in here as well.
| | 00:46 | So there are different file types for you
to experiment in Aptana Studio and get more
| | 00:50 | familiar with using the
IDE to build your projects.
| | 00:54 | Now if you're Monthly Member or an Annual
Member of lynda.com, you don't have access
| | 00:58 | to the exercise files, but you can follow
along from scratch with your own assets.
| | 01:03 | Okay, let's get started.
| | 01:08 |
| | Collapse this transcript |
|
|
1. The Aptana Studio User InterfaceInstalling Aptana Studio on Windows and Mac OS X| 00:00 | Let's begin by installing Aptana Studio
on our Windows and/or Mac machines.
| | 00:07 | So head on over to aptana.com and right
when you get to the homepage you will see that
| | 00:11 | there's a Download button
right here for Aptana Studio 3.
| | 00:14 | So we can download it right here from the
homepage, or we can click on the Products
| | 00:18 | link, and the Products link will also take
us to a download page. You can see we can
| | 00:21 | download right from here.
| | 00:23 | If for some reason you're looking for an
older version of Aptana Studio, you can click the
| | 00:28 | Downloads link here, and you will see over
in the Other Downloads area there's a link
| | 00:32 | for Studio 2, but that's an older version,
and in this course, we'll be using the most
| | 00:36 | current version, which is Aptana Studio 3.
| | 00:39 | So let's click on Aptana Studio 3
to go back to the Download link.
| | 00:43 | And before we download it, let's
take a quick look at this page.
| | 00:46 | You can see that there are some really cool
features that Aptana Studio provides for free
| | 00:51 | that normally you would find
only in much more expensive editors.
| | 00:55 | For example, there is HTML, CSS, and
JavaScript's Code Assist, there is Integration with Git.
| | 01:00 | If you use Git hub at all, there is a built-in
terminal, so you can use terminal commands
| | 01:04 | directly from within the editor without
having to fire up a separate terminal window.
| | 01:08 | You can customize the IDE to include a whole
bunch of custom languages like CSS and HTML,
| | 01:14 | Java, whatever language you are using.
There's probably a bundle available for it.
| | 01:19 | We'll take a look at some of these features
a little bit later when we get deeper into
| | 01:22 | the course, but for now just scroll back up.
| | 01:24 | So go ahead and click the Download link,
and when you click the Download link, you will
| | 01:28 | come to this page, you will see that there is a
Standalone Version or an Eclipse Plug-in Version.
| | 01:33 | So I'm not really
interested in either one of those.
| | 01:35 | I am just going to go ahead and
just download the Standalone Version.
| | 01:39 | So the download will start,
and this will take a few minutes.
| | 01:42 | So once this completes, go ahead and run
the Installer and install the application, and
| | 01:50 | then we'll get started.
| | 01:52 | So let's jump over to the Mac and see
what the experience is like on the Macintosh.
| | 01:57 | Now over here on the Macintosh,
let's go ahead and do the same thing.
| | 01:59 | I am going to click on Products, and I am
going to click on Download Aptana Studio 3,
| | 02:05 | and once again, I don't have any special
need for the Eclipse Plug-in Version, I am just
| | 02:10 | going to download the Standalone Version.
So let's go ahead and download that.
| | 02:15 | I'll keep this, and this will download
Aptana Studio to my Macintosh, and it looks like
| | 02:21 | it's done downloading, so we can go ahead
and show this in the Finder, and there it is.
| | 02:27 | Let's just double-click on it, and that's
going to open up the Installer and sure enough
| | 02:33 | this is exactly what we expect to see, so let's
go ahead and drag a copy of this into Applications.
| | 02:38 | That should be all there is to it.
| | 02:40 | Okay, so now that we have got Aptana installed, let's
go ahead and get started with the rest of the course.
| | Collapse this transcript |
| Exploring the user interface| 00:00 | Once you've installed Aptana Studio,
go ahead and start the application up.
| | 00:04 | I am going to double-click on this link that
I've added to the desktop, and you will see
| | 00:07 | a dialog that looks like this
called the Workspace Launcher.
| | 00:11 | Aptana has this notion of what are called Workspaces,
and this is a place where you store your projects.
| | 00:16 | So it's asking you, where do you want to create a
workspace to store projects you are going to work on?
| | 00:21 | For now, I'm just going to
leave this as the default.
| | 00:23 | So you can see that it's choosing a path
that's inside my Documents folder, and it's called
| | 00:27 | Aptana Studio 3 Workspace.
I am going to leave this as it is.
| | 00:31 | So I am just going to click this box here,
it says Use this as the default, and do not
| | 00:35 | ask again just for the sake of simplicity.
| | 00:36 | You can always go back and
change this later in the Preferences.
| | 00:39 | So I am going to click OK.
| | 00:42 | Now when Aptana Studio starts up, you will see
a user interface that sort of looks like this.
| | 00:46 | And Aptana might also prompt you to download
and install any updates that it finds online.
| | 00:51 | If that happens, go ahead and install the
updates, and when you are done, we'll just
| | 00:56 | pick it up from here.
| | 00:58 | So let's take a quick look at
the Aptana Studio Workspace.
| | 01:02 | First, you see that there's a Start Page.
| | 01:04 | The Start Page contains a couple of quick
links to things like the Aptana Discussions,
| | 01:09 | Aptana Documentation, and the Aptana Bug Database,
and if we scroll down a little bit more, you
| | 01:15 | will see that there is a Fast Reference
section, and the Fast Reference section contains some
| | 01:19 | links to some common operations
you might do with Aptana Studio.
| | 01:24 | And over here is a list of recently
fixed bugs and other issues in Aptana Studio.
| | 01:31 | All right. Let's scroll back up.
| | 01:35 | Over here in this pane, I am going to close the App
Explorer because we're not going to be needing it.
| | 01:40 | This pane here is the Project Explorer.
| | 01:43 | This is where you will work with various
projects, and projects are basically just collections
| | 01:47 | of files, you know, HTML pages, CSS
style sheets, JavaScript's code, whatever.
| | 01:54 | It shows you both currently open projects as
well as projects that are closed but you've
| | 01:59 | recently worked with.
Right down here is the Outline panel.
| | 02:04 | The Outline panel shows an outline
of whatever the current document is.
| | 02:10 | So, for example, in an HTML file, it will
show you an outline of the HTML DOM, but it
| | 02:16 | also works for CSS and
JavaScript and JSON and so on.
| | 02:22 | Over here, this is the Snippets panel.
| | 02:24 | The Snippets panel contains some pre-canned
pieces of code that you can use in your projects,
| | 02:29 | and we'll see that a little bit later.
| | 02:30 | There is also an integrated Terminal window,
and this is really cool because if you do
| | 02:35 | any work with the command line, say for
example, you are using the SaaS Library, or you want
| | 02:40 | to use Ruby or gem commands, you can do that here
without having to launch a separate command prompt in your OS.
| | 02:48 | You can just do all that right
from within Aptana Studio here.
| | 02:53 | Okay, so that's a quick tour of the Aptana
Studio UI, and this is the same on Mac and Windows.
| | 02:58 | So now let's go ahead and see how we can
set up Aptana Studio to work the way we want it to.
| | 03:03 |
| | Collapse this transcript |
| Setting up basic preferences| 00:00 | Aptana Studio is a very highly
customizable editing environment.
| | 00:05 | You can really just customize it to your
heart's content, there's a whole bunch of settings
| | 00:08 | that you can change and tweak to make it
work the way that you're used to working.
| | 00:12 | So when I first installed Aptana Studio, there
is a bunch of preferences that I usually like
| | 00:16 | to set up so that I can work
with Aptana the way that I like to.
| | 00:20 | So the way that we do that is in the Window
menu, I am going to choose Preferences, and
| | 00:25 | notice that this is different if you are
on the Mac, on the Mac the Preferences is in
| | 00:28 | the usual place, just hit Command+Comma, or under the
Application name in the menu bar just choose Preferences.
| | 00:36 | So I am going to open the Preferences up,
and this is all of the preferences that are
| | 00:41 | available in Aptana Studio.
| | 00:43 | You can browse through the list here, right
there is a whole bunch of preferences available
| | 00:48 | for all kinds of categories.
| | 00:50 | If you are looking for a specific
preference, you can also type in the text up here.
| | 00:53 | So, for example, if I wanted to say find
editor-related preferences, I can type in edit.
| | 00:58 | You can see that the list of preference
categories is being customized as I type.
| | 01:04 | So let's go back to the full list.
| | 01:08 | One of the first things I do is I go into
the General section under Editors, and I change
| | 01:14 | the size of the recently opened files list.
| | 01:17 | It defaults to four. I usually like to make
it 10 because, you know, I want to have a full
| | 01:22 | list of recent files available to me and 4
just doesn't really cut it, not sure why they
| | 01:27 | set it at four, but whatever,
that's fine, we can set it to 10.
| | 01:31 | All right. So having done that, let's go back to the
Editors section, expand it, and go into File Associations.
| | 01:39 | So File Associations are a way of
associating certain file type with Aptana Studio.
| | 01:45 | So, for example, if you work on files that have a
certain suffix, you can customize all of that here.
| | 01:52 | So you can see that Aptana Studio already has a
pretty long list of built-in File Associations, right?
| | 01:56 | There's all kinds of files here, HTM,
HTML, JS, JSON, so on and so forth, but if
| | 02:03 | you want to customize this list, you can.
| | 02:05 | I can click Add, and I can say, well, define a new
data type. You know, I can say, hey, you know what?
| | 02:10 | I work on .joe files all the time
and say okay, I have added a .joe file, and
| | 02:17 | now I can say, well, what is the
associated editors that can operate on .joe files?
| | 02:22 | Well, I am going to add, let's see .joe files,
well, there is no such thing as a .joe editor,
| | 02:27 | so you know what I am going to do? I am
going to make the text editor the default editor
| | 02:33 | for .joe files, and if I want, I can make
another editor--it turns out, for example,
| | 02:39 | that, oh, I don't know, the XML
Editor can also edit .joe files.
| | 02:46 | So these are the different kinds of editors
I can use on .joe files, and I can make any
| | 02:50 | one of these the default.
| | 02:52 | So if I want to make the XML Editor the
default, I can just click the Default button,
| | 02:55 | or I can go back to having the Text Editor
be the default, it's really up to you.
| | 02:59 | So if you work with custom file types,
this is a place where you can just define what
| | 03:03 | editors work with those file types.
So now let's go to the Keys section.
| | 03:09 | One of the things I'd like to do is set up
shortcut keys for commands that I use all the time.
| | 03:14 | Let's take a look at some examples.
So, for example, there's the Open File command.
| | 03:19 | For some reason, I don't know why this is,
but Open File is not by default associated
| | 03:24 | with the Ctrl+O or Command+O option.
| | 03:27 | So I am going to fix that. I am going to
choose Open File and then come down here, and I am
| | 03:32 | going to type Ctrl+O.
| | 03:33 | Okay, I am going to click Apply, and you can
see that now Ctrl+O is associated with opening
| | 03:40 | files in the menu bar.
You can do this for all kinds of keys.
| | 03:46 | I am just going to leave this one as Open
File, but you can scroll through this whole
| | 03:50 | list of available Aptana commands and
assign shortcut keys to your heart's content.
| | 03:59 | Now let's go to the Themes section.
Let me click OK just for one second here.
| | 04:04 | You'll notice that when you first install
Aptana Studio, it has this dark color theme,
| | 04:08 | and I don't really like this very much.
I want to have Aptana show me a much cleaner UI.
| | 04:13 | So let's go back to the Preferences, and under
Aptana Studio, I am going to scroll down to Themes.
| | 04:22 | A lot of people confuse this
with the General Appearance section.
| | 04:25 | Under Appearance, you will see things like
colors and fonts, and it looks like you can
| | 04:29 | control all the colors and fonts from
within this category. These colors and fonts are
| | 04:34 | used for different parts of the workspace,
but what you really want is the Themes area.
| | 04:40 | These are all predefined themes that have color
schemes that you may have seen in other applications.
| | 04:45 | So, for example, if you are a Dreamweaver
user, you can choose the Dreamweaver theme,
| | 04:49 | and you will see that this is much
cleaner, the colors really shine through.
| | 04:54 | I am just going to go ahead and choose
Aptana Studio 2.x because I really felt that the
| | 04:59 | color scheme that they shipped with the older
version of Aptana is the one that I like to use.
| | 05:04 | But you can choose from any one of these, you
know, you can choose any color scheme you want.
| | 05:07 | There is a whole bunch of them in here.
| | 05:10 | And you can also either
import or export these themes.
| | 05:15 | So if you have got your own custom theme,
you can choose whatever colors you want for
| | 05:19 | however things you want to appear.
| | 05:20 | So just to make things simple, I am
going to choose Aptana Studio 2.x.
| | 05:23 | It will make the code a lot easier for you to read
while you're watching this, and it's just cleaner overall.
| | 05:28 | So I am going to click OK.
| | 05:30 | So now I have got Aptana Studio
pretty much customized the way that I want.
| | 05:34 | Under the File menu, you can see that now
my Open File command is Ctrl+O, there is a
| | 05:38 | whole bunch of other things you can
customize, but we won't go deep into that now.
| | 05:41 | It's time to take a look at doing what we do
best which is creating and editing documents.
| | 05:46 |
| | Collapse this transcript |
|
|
2. Creating and Editing DocumentsCreating a new blank file| 00:00 | Let's start off with something
simple, which is creating a new file.
| | 00:05 | Before I do that, let me just clean up the
workspace a little bit because I am not going
| | 00:08 | to need this Terminal window, so let me just
minimize this by clicking the Minimize button.
| | 00:13 | So to create a new file, under the File menu,
you will notice there is a couple of options,
| | 00:18 | there's New, and there's New From Template.
| | 00:20 | Now we'll look at New From
Template in a little bit.
| | 00:23 | So let's just focus on
the New menu for the moment.
| | 00:25 | Under the New menu, I have this submenu that
pops out, and I have the option of creating
| | 00:30 | new projects or new files.
So I am going to choose to create a new file.
| | 00:37 | Now when I choose Create New File, I get
this user-interface dialog that pops up and says,
| | 00:41 | hey, go ahead and create your new file.
| | 00:43 | You'll notice, however, it says Enter or select
the parent folder, and this is an empty list.
| | 00:48 | Now Aptana is very project and/or folder-based.
| | 00:51 | They really want you to create resources such as
files that are going to live in a specific location.
| | 00:58 | So you will notice that even if I type file.txt,
the Finish button isn't lighting up.
| | 01:04 | I don't get the option to actually finish this,
and the reason is because you can see there is
| | 01:09 | an error right here. It says No
project exists in the workspace.
| | 01:12 | So that means that I can't create a
file without giving it a specific place.
| | 01:18 | So let me cancel out of this.
| | 01:21 | I should point out that if you already have
an existing file, you can use the Open File
| | 01:25 | command, and you can open it and edit it and
save it to your heart's content, that's fine,
| | 01:29 | but it has to already be existing.
| | 01:31 | Now I have one other option which is New >
Untitled Text File ,which skips the UI and lets me create
| | 01:38 | a new file straight away, and I can start
editing, and that's great, but once again,
| | 01:42 | when I go to Save, there's no folder. I haven't
specified where this lives, and I can't do
| | 01:47 | it here, and you can see the error says, hey,
there is no folder specified, all right?
| | 01:50 | So this is a bit of a pain.
| | 01:51 | Let's go back and see how to
create a new file a much more easy way.
| | 01:56 | So we'll cancel this, and I'll close this file.
| | 02:00 | So I am going to expand the file system here, and
I am going to right click on one of these options.
| | 02:06 | So we'll just right-click on the Desktop.
| | 02:08 | Now when I right click, I get a couple of
options, I get New from Template, and I get New.
| | 02:13 | So now I'm specifying a location
where a new file is going to live.
| | 02:17 | So let's go ahead and under the New menu, choose
New > File, and you will notice now that the
| | 02:21 | UI is much simpler.
| | 02:22 | I have a Finish, button which is all nice and
ready to go. I don't have to specify a location,
| | 02:27 | I can just say file.txt and click Finish.
| | 02:33 | And now I can edit my file, I can save it,
and if I expand the Desktop, you will see
| | 02:37 | that it's right there.
| | 02:39 | So I can type, and I can save,
and I can do all kinds of things.
| | 02:45 | So that's a quick overview of creating a new
file, but another way to create files is from
| | 02:51 | existing templates that come with Aptana
Studio, so let's take a look at that next.
| | 02:56 |
| | Collapse this transcript |
| Creating a new file from a template| 00:00 | Aptana Studio comes with a whole bunch of
pre-built document templates that you can
| | 00:05 | use in your projects.
| | 00:07 | So let's take a look at how to
create a new file from a template.
| | 00:11 | So recall from the previous movie when we
looked at creating new files, there were couple
| | 00:15 | of options under the File menu. There's
New, which is what we looked at, and then there
| | 00:19 | is New from Template, and you can see that
there's a whole bunch of templates that Aptana Studio
| | 00:25 | ships with, everything from CoffeeScript
in CSS to HTML and JavaScript and JSON and
| | 00:32 | PHP, there is a whole bunch of these templates.
| | 00:34 | So I can choose to create a new
file based on one of these templates.
| | 00:40 | So let's go into the HTML option, and we
are going to scroll down to HTML 5 Template.
| | 00:45 | I am going to choose that option, and it just
creates a new document for me based upon that template.
| | 00:52 | And you can see that this document is
pretty well filled out to start with, okay?
| | 00:57 | And I can choose to save this either in a
project or on my Local Filesystem.
| | 01:04 | So if I go to the File menu and choose Save As,
it's going to ask me do you want to save
| | 01:09 | this to a directory in the Local
Filesystem or in a project? And I can choose.
| | 01:14 | Now I don't have any projects yet, so I am just
going to go ahead and choose Local Filesystem,
| | 01:18 | and I will click Yes.
| | 01:20 | Now, I can choose where to save this, and
I'll just choose the Desktop, and I'll give
| | 01:24 | this a file name, so I'll say newhtml5.html, and I
am going to click Save, and now I have my new file.
| | 01:38 | Now I can do it another way too.
| | 01:39 | Over here in the Project Explorer, I can
expand the Desktop, and you can see that you know
| | 01:46 | here is my Desktop stuff.
| | 01:48 | If I want to right-click, I can also choose
New from Template here, and this means I've
| | 01:54 | already given it a location to store the file.
So once again, let's choose JavaScript this time.
| | 02:00 | I am going to choose to create a New >
JavaScript Template, and because I've given it a location
| | 02:05 | on the Filesystem, now it's going
to ask me just to give it a name.
| | 02:09 | So new_file.js is fine with me for the moment,
so I'll click Finish, and you can see that
| | 02:15 | the new file is created there on the Desktop and
some bare-bones information has been filled out.
| | 02:22 | So using Aptana Studio, you can use a lot
of these built-in templates to get yourself
| | 02:26 | started on a new project really pretty quickly.
| | 02:31 |
| | Collapse this transcript |
| Editing file templates| 00:00 | Now that you've seen how to create files from
templates, you might be asking yourself, hey,
| | 00:05 | that's great! You know, it's fantastic that
Aptana Studio comes with all these pre-built
| | 00:09 | templates, and they seem to have some pretty
great default content in them, but is there
| | 00:13 | a way for me to edit templates so that I can
customize them to contain content that I want to use?
| | 00:20 | And the answer to that question is yes,
and that's what I am going to show you how to
| | 00:22 | do in this movie now.
| | 00:25 | So what we're going to do is up here in the
Commands menu, these are all what are called
| | 00:28 | Ruby Bundles, and it's a way of extending
Aptana Studio to create new project types
| | 00:35 | and templates, and so on.
| | 00:36 | So don't worry if you're not familiar with it.
What we're going to do here is relatively easy.
| | 00:41 | So let's go down to the JavaScript template, because
this is a pretty easy one to illustrate the concept.
| | 00:47 | Let's edit the JavaScript
template to contain content that we want.
| | 00:52 | So under the JavaScript command--and by the
way, this is the same on the Mac--I am going
| | 00:56 | to choose Edit this bundle, and when I choose
edit this bundle, you notice that the JavaScript
| | 01:02 | master template for that bundle appears
over here in my Project Explorer, so I am going
| | 01:07 | to expand this out.
| | 01:08 | And you'll see a whole bunch of folders
under here that contains things like commands and
| | 01:12 | config and lib, and so on.
| | 01:14 | Now this is the contents of the Ruby bundle,
and if you're interested in learning more
| | 01:19 | about these, you can learn how to build
these Ruby bundles at the Appcelerator website.
| | 01:25 | What I am going to do is expand the templates folder,
and in here you'll see that there's a template.js file.
| | 01:32 | So I am going to open the template.js file,
and you'll notice that this is very similar
| | 01:36 | to the content of the default JavaScript
template that we used when we created the JavaScript
| | 01:43 | file in the last exercise.
| | 01:45 | And there is some information in here, like
this is obviously some kind of variable that
| | 01:48 | gets my username from the system somehow.
| | 01:51 | What I am going to do is just add a couple
of returns in here and just say this is an
| | 01:56 | edited templates with custom
content, and I am going to save it.
| | 02:03 | So once I've saved it, now
the template has been edited.
| | 02:07 | So I am going to select the Desktop, and I
am going to say New From Template and down
| | 02:11 | here in JavaScript I am going to choose
JavaScript Template, we'll give it a File name, and you
| | 02:18 | can see that now when I create a new file
based on that template, there is the content
| | 02:23 | that was inserted by the original template
contents, and here is my edited content in my new template.
| | 02:31 | So now that I am done, I can
just go ahead and close this up.
| | 02:34 | I can close this project, and I now have
an edited template, and you can do this with
| | 02:39 | the other templates that are in
all the other bundles as well.
| | 02:42 | So if you want to change the way the HTML
template looks or any of the other templates,
| | 02:46 | just follow that process, change the appropriate
template file, save it, and you'll have a custom template.
| | 02:54 |
| | Collapse this transcript |
|
|
3. Using ProjectsCreating a new project| 00:00 | Now that we've seen how to create files,
let's take a look at creating projects.
| | 00:05 | So I am going to start by
creating a new project from scratch.
| | 00:10 | And you might be tempted to look under the
Project menu, but that's not where you go to do this.
| | 00:14 | You'll see that most of these options are
currently grayed out, so let's go over to
| | 00:17 | the File menu, and once again, we
have New, and we have New From Template.
| | 00:23 | But we're not going to use New From Template
to make a project. We're just going to use New.
| | 00:26 | So you can see I have a couple of options.
I can create different kinds of projects,
| | 00:30 | there is PHP, Web, Ruby, Rails,
and just a generic Project chooser.
| | 00:36 | So for the moment, let's choose this one here,
the generic Project chooser, because I want
| | 00:40 | to show you some different options based
upon the project that you decide to create.
| | 00:44 | So I choose the New Project option, I get
presented with a New Project wizard, and I
| | 00:51 | can choose what kind of
project I want to create.
| | 00:55 | So up here I've got four of the more
common ones, PHP, Rails, Ruby, and Web, but there
| | 00:59 | are others as well, there is PyDev, and
there's some, you know, Ruby and Web options.
| | 01:05 | For the moment, however, let's just choose a couple
of these to see what happens for each one of these.
| | 01:09 | So, for example, when I choose PHP project,
and I click Next, I get a whole bunch of options--
| | 01:16 | well, not a whole bunch. I guess a few
options that let me customize the PHP project.
| | 01:21 | I can give it a name, I can choose which version of
PHP it's based on and so forth. And let's go back.
| | 01:28 | Now notice when I choose the Rails
project, I get different options.
| | 01:32 | This time I can choose how to Generate the
Application, what name to give it, so on.
| | 01:38 | For Ruby, right, I get a couple of different
selectors. I have a Ruble Template and a Default
| | 01:45 | Project, and then for Web I have
a couple of different options.
| | 01:50 | I can make a Default Project with no template,
I can make a project based on HTML5 Boilerplate,
| | 01:56 | or I can make a Basic Web Template.
| | 02:00 | So for the moment, let's just make a Basic Web
Template project, so I am going to click Next.
| | 02:06 | Now I need to give it a name, and I
am just going to call this htmlproj.
| | 02:13 | And if I wanted to Use the default location
which is underneath my Workspaces area, which
| | 02:18 | I set when I first started up Aptana Studio.
I can just leave this button checked.
| | 02:23 | If I want to move it someplace else, I can
uncheck this button and then Browse to the
| | 02:28 | folder I want to create the project in.
| | 02:30 | But for the moment, let's just leave it in
the default location. I am going to click
| | 02:34 | Finish, and that's really all there is to it.
| | 02:37 | You can see over here in the Project
Explorer along with my Local Filesystem I now have
| | 02:42 | my HTML project, and it's only got two items,
well, one file really, and Connection
| | 02:48 | options, which we'll take a look at later.
| | 02:50 | For now let's just open up the index.html
file, and you can see that when I created
| | 02:55 | the new project I have a basic HTML
template file that I can start working on.
| | 03:01 | So, creating a new project is pretty
straightforward to do from scratch.
| | 03:05 | But you may have already a bunch of files
and other content that you want to just simply
| | 03:09 | import as a project into Aptana Studio,
which we'll see how to do next.
| | 03:14 |
| | Collapse this transcript |
| Importing an existing project| 00:00 | Creating a new project from scratch in
Aptana Studio is pretty simple as we've just seen.
| | 00:05 | But you may have a collection of existing
files and assets and such in a folder that
| | 00:11 | you just want to import into
Aptana Studio as an existing project.
| | 00:16 | And that's pretty easy to do,
and we'll see how to do it now.
| | 00:19 | Now you might be tempted to run on up to
the Project menu and start looking in, ah-ha!
| | 00:24 | No, that's not where you do it.
| | 00:26 | To import an existing folder into Aptana as
a project, you go down here to the Project
| | 00:32 | Explorer, and you click on Local Filesystem,
and I happen to have an existing folder right
| | 00:39 | here on my desktop called the
Exercise Files for this course.
| | 00:43 | And you'll see if I expand this, there is a
whole bunch of stuff in here, all these HTML
| | 00:47 | files, a whole bunch of folders, and I
want to import this guy as a project.
| | 00:51 | So all I need to do is right-click, and
down here there is an option called Promote to
| | 00:57 | Project, I'll choose that.
| | 01:00 | And you see I have the option to Select the
folder, I can give it a name, it's going to
| | 01:04 | use the default name of the folder, and I
can choose what kind of Project Type it is.
| | 01:09 | And you can see that Web is already selected
because Aptana has figured out that this is a Web project.
| | 01:14 | So if I'm happy with these settings, and I
am, all I need to do is click Finish, and
| | 01:20 | you'll see that the Exercise Files folder has now
been promoted to a project here in Aptana Studio.
| | 01:27 | So I can collapse down the window back to
where it was and browse my folder which is
| | 01:35 | now a first-class citizen
project here in Aptana Studio.
| | 01:40 |
| | Collapse this transcript |
| Using the local history| 00:00 | Having to work with projects may seem like
a little bit of a pain at first, but one of
| | 00:05 | the nice things about working with projects
is that a lot of nice little features come
| | 00:09 | along for a ride when you use them.
| | 00:11 | And one of my personal
favorites is the Local History.
| | 00:15 | Each time you save an item in Aptana Studio,
a local history is kept of the file, and you
| | 00:22 | can compare the contents to local
edits and even restore deleted items.
| | 00:28 | Now only files have Local History, not projects.
| | 00:31 | So let's take a look at
what I am talking about here.
| | 00:34 | Let's open up the index.html file for the
project that we've created, and you can see
| | 00:38 | here that there is some content.
Let's go ahead and add some content.
| | 00:42 | I'll add a paragraph tag. This is a
paragraph, and now I am going to save it.
| | 00:51 | So I can now compare the current
version with the Local History.
| | 00:55 | And to do that, over in the Project I am
going to right-click on index.html, and down here
| | 01:01 | near the bottom I am going to choose
Compare With and say Local History.
| | 01:04 | And you can see that the History panel
comes up, and there's two versions here, there's
| | 01:09 | the current version, the one I just created, and there's
the one here which was created a little while ago.
| | 01:15 | So if I click on this one and then close the
History panel, you can see that the two files
| | 01:21 | are being compared side by side, and I can
see that in the current version of the file
| | 01:26 | there is my new paragraph tag, which the
previous version of the file does not have.
| | 01:31 | So let me close the History.
| | 01:33 | Now in addition to comparing, I can
also replace versions with the history.
| | 01:39 | So once again, I am going to right-click on
the index file, and instead of Compare With
| | 01:43 | company I am going to choose Replace With,
and I can either choose the Previous from
| | 01:48 | Local History, or I can choose the Local History
and get a list of all the changes that I've made.
| | 01:55 | Now I've only got one change, so I can just
choose Previous from Local History, and you
| | 02:00 | can see that the paragraph tag is now gone.
| | 02:03 | So that's pretty neat. I am getting basically
what looks like a rudimentary sort of change
| | 02:08 | management system just by the fact that I'm
saving files that I am using in a project.
| | 02:14 | But Local History doesn't stop there. I can
also restore things from the Local History.
| | 02:18 | So, for example, let's suppose that I am
going to close this file, and I make the mistake
| | 02:23 | of going and deleting this.
| | 02:25 | So I say, okay, delete index.html, oh no!
I mistakenly deleted it. I didn't mean to do that!
| | 02:29 | I can now restore that deleted file.
| | 02:34 | So on the folder, I am going to right-click,
and I say Restore from Local History, right
| | 02:39 | down here near the bottom, and I can
choose which one I want to restore.
| | 02:44 | I am going to click on index.html, and I can
choose which one I want to replace it with.
| | 02:50 | Right now the most current version is this
one right here, or I can choose to replace
| | 02:54 | it with this one, or I can choose
to replace it with the original one.
| | 02:57 | And you can see that each time I click on
one of the versions of the history, I get
| | 03:01 | a little preview of the file.
| | 03:03 | So this is the one that had the new paragraph,
and so I am going to go ahead and choose that one.
| | 03:05 | I'll click Restore, and just like magic my
file is back as if it had never been deleted.
| | 03:12 | So that's one of the really cool little
features of using projects is not only do you get all
| | 03:16 | the project management stuff, but you get
things like the Local History which help you
| | 03:20 | keep track of changes in your project and
can even undo mistakes like deleted files.
| | 03:25 |
| | Collapse this transcript |
|
|
4. Editing CodeSetting coding preferences| 00:00 | So we've seen how to create new files, we've
seen how to create and import projects, now
| | 00:05 | let's take a look at
Aptana's code editing features.
| | 00:08 | And I am going to start off by taking a look
at some of the code-related preferences that
| | 00:12 | I like to get set up
before I start writing my code.
| | 00:15 | So I am going to go here to the Window
menu and choose Preferences, and on the Mac you
| | 00:19 | just simply have to type Command+Comma, or
go to the App name menu and choose Preferences.
| | 00:27 | So one of the first preferences I am going
to look at is under the Appearance section
| | 00:30 | for Colors and Fonts.
| | 00:32 | So if I scroll down here, you'll see that
there's a Text Editor font, and the Text Font
| | 00:37 | basically chooses the font that's
used by text editors in Aptana Studio.
| | 00:43 | Now I've got it set to Calynda 16 so that's
easy to read on the screen, but you can set
| | 00:47 | this to whatever Text Font that you want to use.
| | 00:51 | So the next thing I am going to do is go
to the Text Editors and settings, so if I go
| | 00:56 | to Editors, under Text Editors.
| | 00:59 | First I am going to take a look at the Undo history
size. You can customize the size of the Undo history.
| | 01:05 | It's set to 200, that's probably
more than enough for most people.
| | 01:09 | I'm just going to leave at the way it is.
The Displayed tab width, it defaults to 4.
| | 01:13 | If you're somebody who likes to use 2 or 3
or whatever else, you can change that here.
| | 01:19 | You can also Insert spaces for tabs, and I'd
like to leave that checked because I prefer
| | 01:22 | to use spaces whenever I insert a tab.
| | 01:26 | There are some systems that have problems
with tabs, so I just use spaces instead.
| | 01:31 | You can choose whether or not you want the
editor to Highlight the current line.
| | 01:34 | I am going to leave that selected because I like it.
| | 01:36 | Here is where you can choose whether or not you want
the line numbers shown in the gutter of the document.
| | 01:41 | Again, I like to leave that set because it's a
nice little facility for when you're editing code.
| | 01:47 | Next place I am going to go to is the
Formatter, and the Formatter is located down here in
| | 01:54 | the Aptana Studio Settings.
I am going to choose Formatter.
| | 01:57 | Now, you can customize how
Aptana formats the code for you.
| | 02:03 | So when you choose the Format Source Code
from the Source menu, Aptana will automatically
| | 02:09 | format the Source Code for you, and in here
you can choose how that formatting works.
| | 02:14 | So, for example, I can choose the
JavaScript Formatter, and you can see here that there
| | 02:19 | are different formatting options,
so I am going to click the Edit.
| | 02:22 | Right now, you can see that if I scroll
down to the if and else, I don't like the fact
| | 02:29 | that there is a brace in front of my elses, so I
like to insert new lines before my ifs and else ifs.
| | 02:37 | I choose to have it look like this, so when
I check the Insert new line before the else
| | 02:42 | statement, you can see that the else
statement moved down from below the brace.
| | 02:47 | Also down here, so here in exceptions, I like to
have new lines before catches and finallys.
| | 02:54 | Anyway, you get the idea, you can change
the way that your Source Code is formatted
| | 03:00 | for you when Aptana goes to format your source.
| | 03:04 | Now this is a built-in profile, so I have
to change the name if I want to save this.
| | 03:09 | So I am just going to call this JoesProfile,
and now I can click the OK button, and it
| | 03:13 | will save the options for me.
| | 03:16 | You can go ahead and choose whatever
formatting options you want. There is formatting options
| | 03:20 | for HTML, JSON, CSS, you can see
there's a whole bunch of options in here.
| | 03:25 | So this is where you set up the
formatting options for your source code.
| | 03:28 | Now that we have the coding preferences set the way
we want them, let's take a look at the editing area.
| | 03:33 |
| | Collapse this transcript |
| Using the Editing area| 00:00 | Now I'll start bringing up some files and
start editing some code, so to do that, I'm
| | 00:04 | going to go over here to my Project
Explorer, and I'm going to open some files up.
| | 00:08 | So I'll open up this index file, and I'll
open up this file as well here, and I'll open
| | 00:14 | up some other file types. How about some JavaScript?
And I'll open up some CSS code as well, and
| | 00:21 | I'm also going to minimize down the console
area, because I'm not going to need it, so
| | 00:25 | I'm going to click on the little minimize
button for that view. And the other thing I'm
| | 00:30 | going to do is close the Start
Page, because I'm not going to need it.
| | 00:33 | So let's close, and let's go back to index.htm.
| | 00:37 | So each one of these tabs that you see over
here in this area is a separate text editor,
| | 00:43 | and I can take these tabs and
reorder them however I want to.
| | 00:47 | So, for example, I can take this index.htm
tab, and I can drag it to the end over here,
| | 00:51 | and I can reorder them however I want.
I can also pin them in different locations.
| | 00:56 | So, for example, I can take this file, and
you can see that as I've dragged it over here
| | 01:00 | to the right-hand side, the cursor changes
to an arrow, and the little gray outline shows
| | 01:04 | me that when I let go that file is
going to be pinned to the right side.
| | 01:08 | So now if I have different files I want to
compare side by side, I can easily do that.
| | 01:12 | I can also take this document and pin it to
top, for example, or I can pin it to the
| | 01:18 | bottom, or I can pin it to the left-hand side.
| | 01:22 | So there's all different kinds of ways you
can organize these things. I'm going to put
| | 01:25 | this back into the main
editing area for the moment.
| | 01:29 | If you are in a mode where you just want to
focus on your code editing, and you want the
| | 01:34 | rest of the editor's UI to get out of the way,
all you have to do is double-click on one
| | 01:38 | of these tabs, and you see that the Aptana
Studio editing surface is now expanded to
| | 01:42 | include just the editor, and the rest of
the UI has collapsed down into this area over
| | 01:46 | here on the left-hand side, and to get it
back, I just have to double-click on the tab
| | 01:50 | again, and then everything is as it was.
| | 01:53 | It's a nice little feature, because
sometimes I find myself wanting to just work on code,
| | 01:57 | I want to have an expanded view of my code,
I don't have to worry about looking at the
| | 02:01 | rest of the application.
So that's a pretty easy way to do that.
| | 02:05 | Let's point out some
other features of the editor.
| | 02:07 | You can see at various places in the code
I've got these little icons showing up, showing
| | 02:11 | me that there are some various
errors in my code or various warnings.
| | 02:15 | I've got these icons over here in the left-
hand gutter where the line numbers are.
| | 02:20 | There are also over here on the right-hand side,
these little color-coded little areas that are
| | 02:24 | showing me various problems or warnings or
other things I should be aware of in my code.
| | 02:29 | So let's take a look at what these do.
| | 02:32 | So this one here is telling me that
there's a problem. I've got a missing doctype, and
| | 02:35 | that's because this is in lowercase. I'm
just going to change this to uppercase,
| | 02:39 | and sure enough, when I save it, you
can see that problem has gone away.
| | 02:43 | So this is sort of a way of quickly
getting an overview of a file's issues in various
| | 02:48 | things you might want to pay attention to.
| | 02:50 | So, for example, if I click on this guy
right here, it says, should trim empty <a> tag,
| | 02:54 | and if click on it, you can see that it
highlights the problem, and it's warning me that I've
| | 02:59 | got a link tag here with no content in it, so
that's an issue I might want to pay attention to.
| | 03:05 | Or down here, if I click on this issue, it
doesn't understand what this particular entity is.
| | 03:08 | Some of these may be because that this
particular version of Aptana Studio doesn't
| | 03:13 | know certain more recent features in HTML
than others, but for the most part this is
| | 03:19 | a really great way of getting an overview of
your code and quickly finding problems in it.
| | 03:24 | Let's take a look over the Project Explorer.
There is a button here called the Link with
| | 03:29 | Editor, and if I click on this you'll notice
that the Project Explorer now stays in sync
| | 03:36 | selection-wise with whatever
the current file being edited is.
| | 03:39 | So in this case, I'm editing index.htm. Down
here, you can see that's the selected of file
| | 03:44 | in the project explorer.
| | 03:46 | So if I click on, say, main.css, you'll see
the selection change over here, and it also
| | 03:51 | works the other way, so if I click on the
file here in the Projects Explorer, then that
| | 03:55 | window becomes active in the editing area.
| | 03:59 | It's less little productivity, timesaver it
helps you keep you keep track of your source
| | 04:02 | code a little bit better.
| | 04:03 | I usually leave it clicked because I find
that it helps me keep track of what file I'm
| | 04:07 | editing, there are gong to be times when
you're editing a file, and you are thinking yourself
| | 04:11 | okay is this the right version?
Is this the file that I think it is?
| | 04:14 | This helps reinforce the
file that's being edited.
| | 04:17 | Let's take a look at some of other code editing
features, let's go back to the index.htm file.
| | 04:23 | First, I can see a preview of this file,
Aptana Studio has a built-in previewer, and when
| | 04:30 | I have the index.htm file current, if I click
on this little eye icon right here, the little
| | 04:35 | picture of the eye in it, you'll see the
little tooltip there, it says Show Preview Editor,
| | 04:40 | so I'm going to click on it and sure enough
I get a view of what that htm file looks like
| | 04:46 | as it would appear rendered in a browser,
and you can see Aptana Studio right here is
| | 04:50 | using it's built in web server to render this.
| | 04:54 | So if you have dynamic
files this will work as well.
| | 04:58 | Let's close that, let's take a
look at another neat little feature.
| | 05:01 | This is the Show Whitespace Characters feature,
if I click that button, you'll see that all
| | 05:06 | the characters that would normally
be whitespace have now become visible.
| | 05:09 | So spaces are these little dots, the paragraph
tag right here are those paragraph, if I scroll
| | 05:14 | down you'll see that my indentation is being
done with spaces, I'm not using tabs so that's
| | 05:18 | nice little visual reinforcement that my
personal preference is to not use tabs, use spaces
| | 05:23 | for my indenting, but that
might be different for you.
| | 05:25 | You can leave this mode on or off based upon
whether or not you want to see whitespace characters.
| | 05:30 | So I'm going to turn it off for now.
| | 05:33 | Next thing I want to show you
is the Block Selection tool.
| | 05:36 | So let's scroll down a little bit.
| | 05:38 | Normally when you select text, you can see that
it does linear section, we're all used to this.
| | 05:42 | But this button here enables what's called
Block Selection, and you can see that there's
| | 05:46 | a keyboard shortcut for it as well,
I'm just going to use the button.
| | 05:49 | So when I go into Block Selection mode, and
you know that Aptana Studio has a little issue
| | 05:53 | where it drops the size of the font down,
pay no attention to that glitch for the moment.
| | 05:57 | What I'm going to do is now, when I select text I
can select it in a rectangular block like this, right?
| | 06:03 | So let's imagine I want to duplicate this
list of lis right, so I can quickly block
| | 06:08 | select the entire base structure
like this and then I can copy it right?
| | 06:15 | So I can say, Copy, and now I'm going to turn
Block Selection mode off and then, I'm going
| | 06:20 | to come down here, and when I say, Paste,
you can see that I've pasted in just the block
| | 06:27 | of text that I selected.
| | 06:29 | So nice little selection helper that comes
in really handy when you're selecting columns
| | 06:33 | of numbers or various other in
structured content like you see here in HTML.
| | 06:39 | Another feature I want to show you is
what's called the Mark Occurrences feature.
| | 06:43 | This little picture of a highlighter right
here allows me to mark the various occurrences
| | 06:47 | of whatever is selected.
| | 06:49 | So let's suppose, for example, here in
this paragraph I've got this branding class.
| | 06:52 | Now if I click on Mark Occurrences, what
this will do is it will highlight all the places
| | 06:58 | in this file where that class is used and
apparently it's not used anywhere else, let
| | 07:02 | me try a different way, how about condense?
| | 07:04 | So I selected the condense class right
here on this tag, and you can see over here in
| | 07:10 | the scroll bar area there is a whole bunch
of little icons that showed up where those
| | 07:16 | words now occur, and you can see that
they're selected in the text as well.
| | 07:19 | So just by quickly scrolling through I can
see all the different places where that condense
| | 07:24 | class is used in my source code.
| | 07:27 | Again, a nice little handy editing feature,
there's times when you use various pieces
| | 07:32 | of your code in more than one place,
and that's a really quick way of getting a
| | 07:36 | quick overview of where things are used.
| | 07:38 | Last thing I want to show you in the code
editing area, before we move on is the forward
| | 07:43 | and backward or next and
previous editor functions.
| | 07:46 | You'll probably notice that there are a
couple of arrows up here, there is this back, and
| | 07:49 | there is this forward arrow.
| | 07:51 | Aptana Studio keeps track of a
history stack, kind of like a browser does.
| | 07:56 | So, for example, if I'm working in this file,
and I'm typing away right, and then I decide
| | 08:04 | to you come over work on say this file for a
little bit, right, and I go down on my code,
| | 08:09 | and I just do some stuff, and
I just then do some editing.
| | 08:13 | So Aptana Studio has now kept track of that
activity, so I hit the back button, it takes
| | 08:19 | me back to where I was in the previous editor,
and if I click forward, again just like a
| | 08:24 | browser, it takes me back just to where I was.
| | 08:27 | And this is a pretty neat little feature,
because, especially in web code where you're
| | 08:31 | working on files that are dependant upon each
other like HTML content and Script and Style
| | 08:35 | Sheets and so on, you find yourself working
in more than one place in the code, even though
| | 08:40 | it's all the same end result is a HTML file
that has a JavaScript file and some styles
| | 08:45 | but they're all related together.
| | 08:47 | And so this is a quick way to navigate
along all of the related assets for a given page
| | 08:52 | that you are working on at the same time,
that's a quick overview of Aptana Studio's editing area.
| | 08:58 | Let's move on now and take a look
at editing code with Content Assist.
| | 09:03 |
| | Collapse this transcript |
| Using Content Assist| 00:00 | So as you might expect, code editing in the
Aptana editors are pretty straightforward.
| | 00:06 | I can just click anywhere and
just start adding some text.
| | 00:10 | But Aptana Studio has a couple of nice code
editing features, one of those is a feature
| | 00:15 | called Content Assist, and you've probably
seen this before in other editors, sometimes
| | 00:21 | they call it Statement Completion,
sometimes they call it Auto Complete,
| | 00:24 | and Aptana Studio is no
different, they also have it.
| | 00:27 | So let me switch over to a simpler file.
| | 00:30 | And you'll notice, for example, that when
I type an opening bracket, I get this nice
| | 00:34 | little window that pops up. This is the
content assist function and Aptana has detected that
| | 00:40 | this is probably going to be an HTML tag, so I can
choose to put a tag in, so here I've put in a link tag.
| | 00:48 | And if I hit the spacebar inside the
opening tag, you'll see that once again I get the
| | 00:53 | content assist, only this time it's for
the attributes and events for that tag.
| | 01:00 | So the content assist is being pretty smart
about what it lets me insert at what point.
| | 01:05 | And you can also see that it's giving me a hint
about what attributes are available in what browser.
| | 01:10 | So I am going to go ahead and click on class,
and now to bring up content assist manually
| | 01:15 | here inside the class attribute, I can type Ctrl+Space,
and if you're on the Mac, Ctrl+A will work as well.
| | 01:22 | And you can see that now Aptana Studio is giving me
options for what style sheet I actually want to refer to.
| | 01:28 | So it knows that I have CSS styles in my
project, and I can choose to insert the academic or
| | 01:34 | the alumni or the branding or whatever kind
of stylesheet that I have to find in my CSS,
| | 01:40 | it's detected that, and I can
choose to enter that stylesheet.
| | 01:45 | Content Assist is a pretty cool feature.
There is also a set of preferences that go along
| | 01:48 | with it, so let's go take a look at those now.
| | 01:51 | So I am going to bring up the Preferences, and on
the Mac you can do this under the App Name menu.
| | 01:57 | One of the things I've been doing up until
now is just going to the right place in the
| | 02:00 | Preferences dialog. What I am going to do up
here in the filter text is just type content
| | 02:04 | assist, and you can see that we get
filtered down right to the preference we want, so I
| | 02:08 | am going to choose Content Assist.
| | 02:10 | Inside the Content Assist you can
set a couple of different settings.
| | 02:13 | First, you can choose what the nature of the
project is, and you can choose either PHP,
| | 02:17 | Rails, Ruby, Web, or whatever
the project you're working on is.
| | 02:21 | In this case, Aptana has detected that the
file that I am looking at is a PHP file.
| | 02:26 | And I can choose which browsers/user
agents are shown in content assist.
| | 02:31 | Right now, I've only got Chrome, Firefox ,and
IE selected, but I can choose to turn on Opera
| | 02:36 | and Safari as well.
| | 02:38 | And I have some other options here. I can
choose how long I want to wait before the
| | 02:43 | content assist is displayed, and I can also choose
whether or not I want to Show information on hover.
| | 02:49 | Now normally I turn this off because
personally it annoys me, but I'm just going to leave
| | 02:53 | it on for the purpose of this title.
So I am going to click OK.
| | 03:00 | So that's pretty much using Content Assist
and writing code in the Aptana Editor, nothing
| | 03:04 | really more complex than that.
| | 03:06 | Let's move on now and take a look at some
higher level editing features, starting with Snippets.
| | 03:11 |
| | Collapse this transcript |
| Using snippets| 00:00 | Snippets are pre-canned pieces of code that
you can insert into your documents to make
| | 00:05 | coding a little bit easier, and they are
accessed down here in the Snippets panel.
| | 00:10 | So let me just bring this up a little so
we can see a little bit more of the panel.
| | 00:14 | Snippets come in a variety of categories.
You can see here that there is ones for CSS,
| | 00:20 | you know, HTML, JavaScript, and so on.
| | 00:23 | So I am going to show you how to use the
Snippets panel just in a quick example.
| | 00:27 | First, let's go up to the Source menu here,
and Reformat the Source Code so it looks a
| | 00:30 | little bit more friendly. Okay, there we go.
| | 00:34 | So I am going to put my
insertion point right here.
| | 00:36 | Now let's suppose I wanted
to insert a new script tag.
| | 00:38 | I am going to go down to the Snippets
panel in the HTML section and open it up, and I
| | 00:43 | am going to scroll on down, and I can see
here that there's an option for inserting Script.
| | 00:48 | So there is a little information bubble
that shows what exactly it is, and then there is
| | 00:53 | a little icon right here that
means go ahead and insert the snippet.
| | 00:56 | So I am going to click the Snippet button,
and you can see that when I do that the snippet
| | 01:00 | got inserted into my document.
| | 01:03 | Now this snippet does not have any
parameters that is there no settings for me to change
| | 01:07 | when it gets inserted.
| | 01:08 | However, there is another snippet type that's
parameterized, so let's take a look at that.
| | 01:15 | Suppose I wanted to insert a link tag, let
me put the insertion point down here, and over
| | 01:20 | here here's my Link tag in the Snippets panel,
and you can see that when I click on the information
| | 01:24 | this is, you know, a way of inserting a link
to things such as stylesheets, or you know,
| | 01:30 | other things you want to link to.
| | 01:32 | So when I click the Insert icon right here,
you'll notice that the link gets inserted
| | 01:39 | and the selection has been set to the
first parameter which is stylesheet.
| | 01:44 | So if I want to change the rel attribute,
all I have to do is start typing.
| | 01:48 | If I'm happy with it I can just simply hit
the Tab button, and that will take to the
| | 01:52 | next item in my link tag, in this case the href.
| | 01:57 | And you can see that Aptana Studio is pretty
smart, and it realizes that I have you know
| | 02:01 | some CSS files to insert, so I can choose to
insert one of these or just type a different one.
| | 02:07 | And I can go on down to the CSS section and
choose, you know, a CSS file, and then if I hit
| | 02:13 | Tab again, I go to the next parameter.
| | 02:15 | In this case, it says media=screen, I can
choose Content Assist by hitting Ctrl+Space
| | 02:22 | and Content Assist says, well, you can put
Screen, you can put All, you put whatever you want.
| | 02:26 | So snippets are a nice little way of inserting
these pre-made pieces of code into your documents.
| | 02:33 | They're really helpful for when you're not
familiar with a certain type of tag or if
| | 02:37 | you're not sure what all the parameters are,
these snippets are a really great way to make
| | 02:41 | sure you're inserting
proper code into your documents.
| | 02:46 |
| | Collapse this transcript |
| Using Quick Diff| 00:00 | Another really nice editing feature
of Aptana Studio is called Quick Diff.
| | 00:05 | Quick Diff shows you visually what lines
have changed and how they've changed since the
| | 00:10 | last time you have saved the document.
| | 00:13 | So let me give you an
example of what I am talking about.
| | 00:15 | Suppose I make a couple of editing changes,
I come down here, and I just start typing
| | 00:19 | out, put in a new tag, right?
| | 00:21 | You can see that this little green color over
here in where the line numbers are that means
| | 00:26 | that lines were added.
| | 00:28 | If I select a whole bunch of lines and then
hit the Delete button, you can see that there
| | 00:33 | is a little red line that shows where
things were deleted, and if I hover over it, you
| | 00:37 | can see what was deleted, and then there
is this little green area right here because
| | 00:41 | I hit the carriage return
and so a new line was inserted.
| | 00:45 | So Quick Diff is a way of keeping track of
changes that have happened in between saves.
| | 00:51 | So you can turn Quick Diff on or off by right-clicking
over here in the margin and choosing Show Quick Diff.
| | 00:57 | You can also turn it on and off in the
Text Editor Preferences, and just like a lot of
| | 01:02 | other things in Aptana Studio, Quick
Diff has its own set of preferences.
| | 01:06 | So we can go see those either by bringing
up the Preferences normally, or this time what
| | 01:12 | I am going to do is just right-click in the
gutter here and choose Preferences, and that
| | 01:16 | will jump me right to the
Preferences for Text Editors.
| | 01:20 | So if I expand Text Editors, you will see
that there is a category here for Quick Diff,
| | 01:24 | and you can see I can either enable it or
disable it, and I can choose what colors I
| | 01:29 | want to show for differences.
| | 01:31 | So, for example, you can see that
changes and additions are both green right now.
| | 01:36 | I can change that here, and I can also
choose where I want the Quick Diff to be getting
| | 01:42 | its reference source from either the saved
version on disk, or it can use Git as well.
| | 01:47 | I am just going to leave it
on the Version on Disk now.
| | 01:50 | So let me go ahead and click OK, and now you
can see that the color here has changed because
| | 01:55 | that line was not necessarily new
and added, it was what's changed.
| | 02:00 | Here's the red line for the deleted lines
and here's the little green color right over
| | 02:04 | here for stuff that I've added.
| | 02:06 | So you can see that if all I do is change
an existing line, say for example, I just
| | 02:10 | you know, hit Space and put in a new attribute,
say I don't know, a line, right? You can see
| | 02:18 | that these lines right
here are changed versus new.
| | 02:23 | So if I save, you will notice
that the Quick Diff all goes away.
| | 02:28 | So it's only there between saves of a document.
| | 02:32 | But it's a really nice visual way of keeping
track of how much a file has changed in between saves.
| | 02:37 | So if you are seeing a lot of green over there,
and you haven't saved your content in a while,
| | 02:41 | it might be a good idea to hit the Save button.
| | 02:43 | Quick Diff is a really great little
feature that Aptana just gives you for free.
| | 02:48 |
| | Collapse this transcript |
| Using tasks| 00:00 | As you start working on projects that grow
in size and scope, you might start to find
| | 00:05 | it challenging to keep track of places where
you need to edit code or things that you need
| | 00:10 | to do, and Aptana provides a couple of features
that help you with this called tasks and bookmarks.
| | 00:17 | Tasks indicate work that needs to be done.
| | 00:19 | They can be either completed or
uncompleted and they can be given a priority.
| | 00:24 | And a bookmark is basically just a placeholder.
| | 00:27 | So let's take a look at how you can use these
features to help you keep track of your place
| | 00:32 | in large code bases.
So let's start with Bookmarks.
| | 00:36 | Let's suppose I am working on this really
large HTML file, and you know, for some reason
| | 00:41 | I am like down here, deep in the code, and
I keep coming back to this one place in the
| | 00:46 | document over and over again.
| | 00:48 | I can add a bookmark really easily by
right-clicking and just choosing Add Bookmark.
| | 00:53 | And I might call this
something like about whatever.
| | 00:56 | You can see that the Bookmark name defaults to the
selection, but I can just call it the About Placeholder.
| | 01:04 | And I'll click OK, and you can see that over here
in the margin, that little Bookmark icon got added.
| | 01:10 | So now I can go on about my business, I can
close this file and go do some work someplace
| | 01:15 | else, but if I need to jump there really quickly,
I just need to open up my Bookmarks View and
| | 01:21 | click on the Bookmark.
| | 01:23 | So to do that, I am going to go to the
Window menu, and I am going to choose Show View,
| | 01:27 | and I am going to choose Bookmarks.
| | 01:29 | Now this may or may not be here based
upon how often you use this feature.
| | 01:32 | If it's not here, down here in the Other
option, Bookmarks will be located in this list.
| | 01:39 | So if it's in this menu, then great. If
it's not, choose Other and then this will show
| | 01:43 | you all the views that
you have available to you.
| | 01:46 | So I'll choose Bookmarks and click OK, and you can
see that here's the About Placeholder I just added.
| | 01:51 | It tells me where it is what the
path to it is and what the location is.
| | 01:55 | So all I have to do is double-click this, and I just jump
right to my bookmark. So, pretty cool little feature.
| | 02:02 | Tasks are similar, only tasks are a little bit
different, they indicate whether a work has been done.
| | 02:08 | So let me go ahead and remove this bookmark.
| | 02:09 | I am just going to right-click and choose
Remove Bookmark, okay, now it's gone, and let's
| | 02:14 | suppose that I am down here in this
section, and there is something I have to do.
| | 02:18 | So I am just going to
highlight this and choose Add Task.
| | 02:22 | Now you can see that the UI for
talks are a little bit different.
| | 02:26 | Tasks have a priority whether or not
they have been completed, and so on.
| | 02:29 | So for the Description, I am going to enter
something like This needs to be fixed!
| | 02:37 | And I'll choose Priority of High, and I'll click OK.
| | 02:43 | And you can see that this little icon right
here that shows me that there is a task, and
| | 02:46 | when I hover over it, a little pop-up
appears that shows me what the task is.
| | 02:50 | I can add another task down here, and I
can add a task that says Reorder these, and I
| | 02:58 | can make that a Normal priority and
so on and so forth. So I'll click OK.
| | 03:03 | So now I have a couple of tasks, and you can
see these here in the left-hand gutter where
| | 03:08 | the line numbers are.
| | 03:09 | So to view these, all I need to do is up in
the Window menu once again, I can choose Show
| | 03:14 | View, and then I come down here to Tasks.
| | 03:17 | And again, if this option isn't in your
Show View menu, don't worry about it.
| | 03:21 | Just choose Other, and you'll find the Tasks in there.
| | 03:23 | So I'll choose Show Tasks, and here I have a
summary of all the tasks that I need to do.
| | 03:30 | Here is one that needs to be fixed.
| | 03:31 | And you can see that that's a High priority
task because of the little exclamation point.
| | 03:35 | This one is a Normal priority, and I can
choose to mark off the ones that I fixed.
| | 03:40 | So if I fixed that one, and I fixed that one,
then I can right click and choose either to
| | 03:48 | delete the completed tasks, or I
can choose to mark them as completed.
| | 03:51 | If I choose to delete the completed tasks,
it's going to ask me, are you sure you want
| | 03:55 | to delete these? I'll click OK, and you
can see that the two task icons have now gone
| | 03:59 | away in the source code.
| | 04:02 | So that's using Tasks, but Tasks are
actually a little bit easier to use than even that.
| | 04:07 | You can create tasks just by
editing some comments in your code.
| | 04:12 | So, for example, if I put a comment
in here that says TODO: Fix this now!.
| | 04:22 | You will see that the keyword
TODO has been picked up on by Aptana.
| | 04:27 | It creates a little task here in the gutter.
So I can do searches on the TODO keyword.
| | 04:33 | It also picks up on XXX, and it also picks up on
FIXME for a priority, so another way to create tasks.
| | 04:43 | And just like other things in Aptana Studio,
tasks have their own preferences.
| | 04:47 | So let's go take a look at those.
| | 04:49 | I am going to go ahead and type tasks
in here, and right there is what I want.
| | 04:55 | So you can choose to create new strings
that are used as task markers and comments.
| | 05:01 | So right now, you see I have got FIXME,
the XXX, and TODO, I can make a new one called,
| | 05:07 | say HACK, and I can give that a Priority,
I'll just leave it as Normal. I click OK.
| | 05:14 | So now, any time I enter a comment that has
the word HACK in it--and this works in HTML
| | 05:19 | comments as well as script comments--Aptana
will pick up on this and mark it as a task
| | 05:25 | for me to complete.
| | 05:27 | So using tasks and bookmarks can help you
organize your code when you are using large
| | 05:31 | projects and give you nice little
reminders of what needs to be done and help to keep
| | 05:36 | track of places that you
visit often in your code.
| | 05:41 |
| | Collapse this transcript |
| Using the Outline view| 00:00 | Another nice little feature of Aptana Studio
is the Outline view window or view, which is
| | 00:05 | down here below the Project Explorer.
| | 00:08 | The Outline view shows you an outline of
your document. Assume that your document has a
| | 00:13 | structure something like an HTML file or
an XML file or JavaScript or JSON or CSS,
| | 00:21 | if you have a document that has structure
opened in the editor, and it knows how to
| | 00:25 | tell the outline view what its structure
is then, the outline view will populate with
| | 00:29 | the structure of your document.
| | 00:31 | So you can also choose to
keep this linked with the editor.
| | 00:35 | So, for example, down here in the little View
menu, if I choose Link With Editor that the feature
| | 00:40 | is on now, then when I click inside the
outline view, you'll notice that I'm jumping right
| | 00:45 | to the place in the document that's
corresponding to that part of the outline view, and also,
| | 00:52 | if I make a selection inside the editor, you'll
see that it links with that place in the outline
| | 00:58 | view as well, nice little feature.
| | 01:01 | This is obviously HTML code, so this is
going to work, but just to show you that it works
| | 01:04 | with JavaScript code as well, I can choose
some JavaScript code, and if I scroll
| | 01:09 | down here, you can see the script code and
here, I'm seeing a different kind of structure.
| | 01:13 | So the icons are a little bit
different, but the idea is the same.
| | 01:17 | Here in JavaScript code, instead of
seeing tags and attributes and so on,
| | 01:22 | I'm seeing things like objects, and I'm seeing
things like functions and so on and so forth.
| | 01:28 | Here are some constants that are defined in
the JavaScript code. It works with CSS too.
| | 01:32 | So let's go up to the CSS and open a style sheet
file, and you can see here that I've got some
| | 01:39 | nice little icons are explained to me what
each one of these are. So, for example, I've
| | 01:42 | got some font faces here, I've got some style
rules, and I want to link this with the editor.
| | 01:49 | So you can see I've got, you know, couple of style
rules defined for various tags. If I scroll
| | 01:56 | down a little bit further, you can see
that's pretty large style sheet actually.
| | 02:00 | But each one of these shows me information,
not just about what the style sheet name is,
| | 02:06 | but what the properties are as well.
| | 02:07 | So you can see here that I've got a
property called background, but it's showing me the
| | 02:11 | value of it as well.
| | 02:12 | So if I don't feel like scrolling through
the entire CSS file to see what a value is,
| | 02:16 | I can just see it right here, and this also
works for HTML. Let's go back to the index file.
| | 02:22 | You can see here that I've got a link tag,
and over here in the outline view, it shows
| | 02:26 | me that there's a link tag, but it also shows me the
most important data that I'm probably interested in.
| | 02:30 | So, for example, like what
style sheet is it linking to?
| | 02:34 | So right here, it's showing me that it's
linking to the href of the main.css style sheet, and
| | 02:40 | this is true of most other
things in the file as well.
| | 02:43 | So you can see here that on this anchor tag
or this link tag it's showing me the value
| | 02:48 | of the href attribute.
| | 02:50 | So the Outline view is a really nice
little way to navigate through complex documents
| | 02:55 | complex script code, complex style sheets.
| | 02:58 | It's a nice little timesaver, because if
you need to see just a value, you are not
| | 03:02 | want to go change into your code.
| | 03:03 | The outline view can show
it to you pretty quickly.
| | 03:08 |
| | Collapse this transcript |
| Working with perspectives| 00:00 | One of the things that Aptana Studio
inherits from its Eclipse foundation--Aptana is built
| | 00:06 | on top of the Eclipse which is an open source
framework for building IDE's and other developer tools--
| | 00:13 | one of the concepts it
introduces is that of perspectives.
| | 00:16 | A perspective is simply a way of arranging
the various views and editors and other parts
| | 00:22 | of the UI to focus on a particular task,
and if you look up here in upper corner, you'll
| | 00:28 | see there's a little button here marked Web,
and what that means is I am currently looking
| | 00:33 | at the web perspective.
| | 00:36 | So the web perspective has the Project Explorer
in it, and it's got my snippets and my outline
| | 00:41 | and here's my editors.
But I can also open another perspective.
| | 00:46 | Simply by clicking on this little icon
right here, which you can see when I hover over
| | 00:50 | it, says Open Perspective.
| | 00:51 | So I'm going to click on that, and there's
a Debug perspective, but let me click on the
| | 00:56 | Other button for a second, and I'm
going to click on the Resource perspective.
| | 01:00 | And you can see here in the Open perspective
dialog, I have a couple of other ones available to me.
| | 01:05 | I've got Web, Team Synchronizing, PyDev, Debug.
| | 01:08 | This list may look different for you based
upon your configuration of Aptana Studio.
| | 01:14 | This is an extensible list. These are not
by any means the only perspectives available,
| | 01:18 | but these are the ones that happen to be
installed with my particular instance of Aptana.
| | 01:24 | So I'm going to click on the Resource
perspective and click OK, and you can see now that the
| | 01:29 | organization of the
windows has changed somewhat.
| | 01:33 | So I've still got my editor, I've got my
outline view, but the snippets have gone away and the
| | 01:39 | Project Explorer is still up, and now I
have got this new window down here, which we saw
| | 01:44 | before, this is the tasks view.
| | 01:46 | So this is the default for the Resource
perspective ,and the resource that I'm looking at happens
| | 01:52 | to be this index.htm file, and as I click
around you can see that the various views
| | 01:58 | change based upon what kind
of editor that I'm looking at.
| | 02:03 | Perspectives are a really nice way of
helping you focus on particular tasks.
| | 02:08 | So, for example, there is a debug perspective.
| | 02:11 | And I'm not going to go deep into it, but
I'll just open it up so you can see it, because
| | 02:15 | it's pretty different from the other one.
| | 02:16 | So once again, click on Open
Perspective, choose Debug, click OK.
| | 02:21 | So now this is the debug perspective.
| | 02:24 | You can see over here, now I've got the
variables, breakpoints, I've a Debug window over here,
| | 02:29 | the source code has now
dropped down here into the middle.
| | 02:32 | I've got a console here for various debug
output, and the outline view has now jumped
| | 02:37 | over here to the right-hand side, and if I
just take this little tab and expand it out
| | 02:42 | a little bit, you can see now that I've
got three various perspectives, all available
| | 02:46 | to me at any given moment.
| | 02:49 | So I can go back to the Resource
perspective, I can go back to the Web perspective.
| | 02:52 | So based upon what kind of job I'm doing at
any given moment, I can jump to that perspective
| | 02:58 | and the organization of the UI changes to
help me focus on that particular function.
| | 03:04 | So here in the Web perspective, I'm
working on my website and my various pages.
| | 03:09 | If I want to focus on a particular resource
in this case, say this file, I click on the
| | 03:14 | Resource perspective, and now if there were
any open tasks for this particular resource
| | 03:17 | that show up right here, I've got the
outline for this particular resource over here.
| | 03:22 | And these perspectives, by the
way, are all customizable.
| | 03:25 | You can change these
perspectives to suit whatever job you want.
| | 03:30 | You can change which views are open, you can
change where they are, and so on and so fourth.
| | 03:33 | Now this is Up and Running title, so I'm
not going to go deep into how to do that.
| | 03:37 | You can customize these perspectives all you want.
| | 03:40 | The way that you do that is up here in the
window menu you can see Customize Perspective,
| | 03:45 | just go ahead and explore that command, and
you can change the perspective all you want.
| | 03:49 | Once you get a perspective of looking the way
you want it, you can actually save a perspective
| | 03:53 | as something else, and if you want to go back
to the way that it was at the beginning, you
| | 03:57 | can choose Reset Perspective, and that will
reset the perspective back to the defaults,
| | 04:03 | and if I'm done with a certain perspective,
I can choose Close Perspective. So, let me
| | 04:07 | just do that, and you can see that the
Resource Perspective has now gone away, because it's
| | 04:11 | closed, and I'm back in my Web perspective,
it's a really nice little feature of this editor.
| | 04:17 | Eclipse as an underlying tool has
this notion of perspectives built in.
| | 04:20 | So Aptana Studio inherits this
functionality from it's underlying Eclipse roots, and I
| | 04:26 | encourage you to go read a little bit more
about Eclipse perspectives, because getting
| | 04:30 | into them in this title, it's just beyond
the scope of this title to go deep into them.
| | 04:34 | But in a nutshell, perspectives are just a
way of taking the editor's user interface,
| | 04:40 | its views, its editors and so on and just
organizing them in a way that helps you focus
| | 04:45 | on a particular Java hand. It's one
my favorite features of Aptana Studio.
| | 04:49 | I find myself using this more and more,
as I get deeper into using the application.
| | 04:57 |
| | Collapse this transcript |
|
|
5. Working with BundlesUsing bundles| 00:00 | In this chapter we're going to go look at
using Aptana bundles, and you might recall
| | 00:05 | from earlier in the course we took a quick
sneak look at bundles when we wanted to edit
| | 00:11 | one of the default templates
that came with Aptana Studio.
| | 00:16 | Bundles are basically packages of functionality
that are built using Ruby, and it's one of
| | 00:22 | the ways you can extend Aptana Studio.
| | 00:24 | They are available up here in the
Commands menu, and this is context-sensitive.
| | 00:31 | The commands menu realizes what kind of
document is currently visible in the current editor
| | 00:36 | and customizes this menu to show the most
relevant commands that are available to you
| | 00:42 | based on the kind of
document that you're working with.
| | 00:45 | So, for example, you can see that I have an
HTML file here. When I choose the commands
| | 00:49 | menu, there's a whole
bunch of things that show up.
| | 00:52 | If I have CSS active, the commands menu
looks a little bit different, and then over here,
| | 00:57 | if I've got JavaScript, again, the
menu looks a little bit different.
| | 01:01 | So it's a little bit
different based upon what it is doing.
| | 01:05 | So bundles contribute a whole bunch of
different functionality to Aptana Studio.
| | 01:11 | For example, let's take a
look at the HTML bundle.
| | 01:14 | So I have an HTML file that's current here
in the editor and suppose I put the insertion
| | 01:20 | point on the link tag right there, if I go
to the Commands menu, under HTML, I have a
| | 01:24 | whole bunch of options available to me.
| | 01:27 | I can do things like open the document in
the browser, do a whole bunch of things with
| | 01:32 | the source code, insert tags,
insert all kinds of content, right?
| | 01:38 | But for the moment, let's just choose the
Documentation for Tag option right here.
| | 01:44 | So when I do that, you'll see that because I
have the link elements selected in the document,
| | 01:48 | the internal browser pops up, and we're
now looking at the documentation for the link
| | 01:52 | elements on the W3C's website.
| | 01:55 | All right. Let's take a look at a different
bundle feature. Let's go to CSS file, over
| | 02:01 | here, and let's go ahead and take a
look at font-weight feature right there.
| | 02:08 | If I go to the Commands, under CSS, now I have
Documentation for Property, same thing happens
| | 02:17 | with Documentation for font-weight
comes up, but I can do other things too.
| | 02:20 | I can do things like select colors.
| | 02:23 | So let's suppose, for example, I want to
scroll down to here, and I want to insert a color,
| | 02:30 | but I wasn't sure what color I wanted to insert.
| | 02:33 | If I go to the Commands menu under CSS, I
can say, Insert Color, and now I can choose
| | 02:38 | a color that I want to insert into my document.
I'll choose that nice little purple, and you
| | 02:43 | can see that that works right there.
| | 02:44 | So commands are a way of working with various
types of content that are in various different
| | 02:51 | types of editors in Aptana Studio, and there
are bundles available for all kinds of things.
| | 02:56 | You can see I've shown you CSS and HTML,
there's also bundles for JavaScript, there's bundles
| | 03:02 | for SaaS, there's bundles for just working with
XML, there's bundles for just about everything.
| | 03:07 | So now you know what bundles are, and you
might be wondering where can I get bundles from?
| | 03:13 | Let's take a look at that in the next section.
| | 03:18 |
| | Collapse this transcript |
| Installing new bundles| 00:00 | Now we know what bundles are. Let's
see where we can get new ones from.
| | 00:03 | So in this exercise we're
going to install a new bundle.
| | 00:07 | So up in the Commands menu under Bundle
Development, I'm going to choose Install Bundle, and when
| | 00:13 | I do that, I get a whole bunch of bundles
that are available to me for installing.
| | 00:18 | I can go through this list and
see which ones pop out at me.
| | 00:22 | Look like there's one for jQuery.
| | 00:24 | So I'm going ahead and choose the jQuery bundle,
I'm going to click OK, and when I click OK,
| | 00:30 | the terminal window is going to pop over here,
and because I have a network connection, it's
| | 00:35 | going to go out to git, and it's going to
clone the jQuery bundle down into my collection
| | 00:40 | of bundles here locally, and you can see that,
that looks like it succeeded rather well.
| | 00:45 | So I can go ahead now and close this
and yes, I'm going to close my terminal.
| | 00:50 | And now when I go back up to my Commands menu,
there should be a jQuery bundle, and yep,
| | 00:55 | sure enough, there it is.
| | 00:56 | So now I have my jQuery bundle
installed in my Aptana Studio.
| | 01:01 | It's really that simple to just get new bundles.
| | 01:03 | Now that I have my jQuery bundle, you can
see that I have a whole bunch of new jQuery
| | 01:07 | related features that I can
use in my JavaScript code.
| | 01:11 | So if I feel like writing a whole bunch of
jQuery, or if I want to get help with the jQuery
| | 01:16 | feature that I'm not really familiar with, I
can come here into the bundle and have some
| | 01:21 | code inserted for me automatically that's
already formatted properly and is using features correctly.
| | 01:27 | So that's how you install a
new bundle into Aptana Studio.
| | 01:32 |
| | Collapse this transcript |
|
|
6. Testing and DeployingPreviewing a project in the browser| 00:00 | At some point in your using of Aptana Studio,
after you've created your documents and your
| | 00:05 | projects and you've written all your code,
at some point you are going to want to preview
| | 00:09 | your work to make sure that
everything is running properly.
| | 00:13 | Aptana Studio comes with a built-in web
server that you can use to run your code locally
| | 00:18 | to make sure that everything is running okay
before you deploy it up to your production server.
| | 00:23 | And there's a couple of
ways that you can do this.
| | 00:25 | So I'm going to show you how to
preview the project in the browser.
| | 00:28 | The first way to do it is to simply use this
little green button up here in the Toolbar.
| | 00:33 | This will preview whatever the currently
selected document in the editing area is.
| | 00:38 | So you can see I have index.htm open here
in the editor, and if I just simply click
| | 00:44 | this green button, then Aptana Studio will
launch that selected file in its local web
| | 00:50 | server, and you can see here that the local
web server is 127.0.0.1 on the port of 8020,
| | 00:57 | and it's running the index.htm file,
which I had opened in the browser.
| | 01:02 | It turns out that the default browser
for launching the preview was Firefox.
| | 01:06 | So if I didn't want to use that browser, I
can close this one, and this time instead
| | 01:10 | of clicking on the little green button, I'm
going to click on the little drop down button
| | 01:14 | right here and choose the browser
that I want to launch this file in.
| | 01:19 | Now this menu may look slightly different
for you based upon what you're installed browser
| | 01:23 | configurations are, and we'll see how to
manipulate that and choose our own browser in just a moment.
| | 01:29 | But when I have this dropdown menu, I can
choose which browser I want to preview in.
| | 01:33 | So instead of previewing in Firefox, I can
choose to preview in Chrome, and you can see
| | 01:38 | that that worked fine, or I can choose to preview
in Internet Explorer, and that worked fine as well.
| | 01:45 | All right, so that's how you
preview items in the browser.
| | 01:47 | Let's take a look now at how you can change
the configurations of the browsers that you have installed.
| | 01:55 |
| | Collapse this transcript |
| Configuring browser previews| 00:00 | Let's suppose we want to add a new browser
configuration to Aptana Studio to preview our work in.
| | 00:07 | Now there are a couple ways you can do this,
you can either right-click and come down to
| | 00:11 | Run As and choose Run Configurations,
or I want to do it the easy way.
| | 00:16 | Right up here in the toolbar under this dropdown
arrow for the Run command, I am going to choose
| | 00:21 | the Run Configuration's option right here, and
this allows me to define a new browser configuration.
| | 00:28 | So in the list here, I'm going to choose the
Web Browser area, and I'm going to click the
| | 00:31 | little plus button right here, which is
a New launch configuration, and I'm going
| | 00:35 | to call this one Opera-Internal Server,
and I'm going to browse to the browser I want
| | 00:44 | to use, which in this case is Opera, and
I've got Opera installed on this system, so I'm
| | 00:50 | going to browse down to the Opera program
folder, choose the Opera executable, click
| | 00:56 | Open, and you can see
that the path is now correct.
| | 01:00 | If I wanted to pass any arguments to the
executable when it's launched, I can put them here.
| | 01:04 | For the Start Action, I'm going to say use
the current page. This means use whatever
| | 01:08 | page is currently selected in the editor,
and for the Server I'm going to choose to use
| | 01:12 | the built-in web server.
| | 01:14 | Now I could choose to use some other
server or some other base URL, but that's beyond
| | 01:19 | the scope of an Up and Running course, so
I'm just going to go ahead and choose to use
| | 01:22 | the built-in server, and I want to click Run,
and you can see that in this case now I've
| | 01:28 | added a new Run Configuration for Opera, so
here we have the index.html file running in
| | 01:34 | our local server on Opera.
| | 01:36 | So if I close this and I go back to
Aptana Studio and I click on the dropdown menu,
| | 01:41 | you'll now see that Opera has been
added as one of the Run Configurations.
| | 01:46 | So, that's a quick way of adding a new Run
Configuration to Aptana Studio for a browser
| | 01:51 | that's on your local machine.
| | 01:56 |
| | Collapse this transcript |
| Deploying to an FTP site| 00:00 | Of course, all of this would be for not if
we didn't get a chance to actually deploy
| | 00:05 | all of this to the web.
| | 00:07 | So in this particular exercise, we are
going to take a set of files in our project and
| | 00:12 | deploy them up to the web using FTP.
This is pretty simple.
| | 00:17 | Over here in the Project folder, I'm going
to right-click on the project name, in this
| | 00:21 | case the exercise files, and
I am going to choose Publish.
| | 00:24 | I am going to choose Run
the Web Deployment Wizard.
| | 00:28 | Now, this will probably be different for you
based upon the settings for your FTP site.
| | 00:33 | So if you want to follow along with me
using your own settings, that's fine, or you can
| | 00:37 | just sit back and watch as I do this
and then use your own settings later.
| | 00:40 | So I am going to choose FTP, and
then I am going to click Next.
| | 00:44 | Then I want to create a New Site Connection,
and I am just going to call this RouxAcademyFTP.
| | 00:53 | I am going to make sure
that Protocol is set to FTP.
| | 00:55 | I am going to enter my Server, and I am
going to enter my Username, which is jmarini.
| | 01:03 | I am going to enter my Password, and I am
going to leave the Remote Path to be the slash
| | 01:11 | character, because that's the root path, click the
Test button, and sure enough, my authentication succeeded.
| | 01:17 | Okay, so I am going to
go ahead and click Finish.
| | 01:20 | So now I have my FTP site all set up, and all
I have to do now is click Publish, and I can
| | 01:27 | either click Synchronize or Transfer Files
or Upload or Download, depending on what it
| | 01:31 | is that I want to do.
| | 01:32 | I am going to go ahead and click Synchronize,
because this is the first time I am publishing,
| | 01:35 | and it's going to synchronize
all the files up to the web server.
| | 01:39 | So here is the Synchronize dialog, and you
can see here that these are my exercise files
| | 01:44 | on my local machine, this
is the FTP site over here.
| | 01:46 | I am going to click Synchronize, and it's
going to go through and synchronize all these
| | 01:51 | files on up to the server.
| | 01:54 | I have the option of clicking Run in
Background, and then this dialog will just go away and
| | 01:59 | run in the background, and you can see down
here in the window over here in this little
| | 02:02 | right-hand side, this little green progress
indicator, showing me how much progress there is.
| | 02:07 | So I could choose to run this in the
background if I wanted to and come back to it later,
| | 02:11 | but I am just going to go ahead and leave
the dialog up, so you can see the results.
| | 02:15 | And okay, it looks like we are done.
So all the files have now been uploaded.
| | 02:19 | You can see over here there are some stats,
there were 95 files uploaded, none of files
| | 02:23 | were skipped, none of the files were deleted,
so I can go ahead and click the close button.
| | 02:28 | Of course, if I wanted to, I can save the log,
and if I wanted to refer to it later, I am
| | 02:32 | not going to do that, though.
I'll just go ahead and click Close.
| | 02:35 | Let's go out to the browser
and see if our site is there.
| | 02:38 | So here we are on the browser, and you can
see, sure enough that when I bring up the
| | 02:44 | URL for betasite.rouxacademy.
org, my site comes up just fine.
| | 02:48 | All right. Let's go back to Aptana.
| | 02:52 | So now that I have setup that FTP
Deployment Wizard, anytime I want to deploy my site,
| | 02:56 | all I need to do is right click on the
Project here, go to Publish, and either choose Upload
| | 03:02 | or Synchronize or Download, depending
on what kind of state my project is in.
| | 03:06 | If multiple people are working on the project,
I might choose Synchronize because that will
| | 03:10 | download newer files to my local machine,
as well as upload the ones that I've changed.
| | 03:16 | If I am only interested in doing a one-way
push, I would choose Upload. If I am only
| | 03:20 | interested in getting the current version
of the site that's online, I would choose Download.
| | 03:24 | So that's how you publish a site using
the FTP Deployment Wizard in Aptana Studio 3.
| | 03:33 |
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Well, that brings us to the end of Up and
Running with Aptana Studio. I hope you've
| | 00:03 | enjoyed watching this title as much as
I've enjoyed teaching it and bringing it to you.
| | 00:08 | Aptana Studio is a really great code editing
tool, it's free, it's got a lot of great features
| | 00:13 | for both power users and novice coders alike.
| | 00:16 | It's one of the reasons why I like Aptana Studio
so much is because you can use as few
| | 00:21 | or as many features as you like.
| | 00:23 | Sometimes I'm in a mode where I'm just using it
to write straight code without taking advantage
| | 00:29 | of any other project editing features, other
times I'm working on complex projects where
| | 00:33 | I need a lot of the organizational
features that it brings to bear.
| | 00:36 | I hope you take what you've seen here and
get started using Aptana Studio, learn as
| | 00:41 | you go, try it out on some of
your own projects, and have fun coding.
| | 00:46 |
| | Collapse this transcript |
|
|
