Build Web applications with Aptana Studio

A Web developer’s choice of tools is often driven by the needs of the client and the project, but a developer’s IDE is often a personal matter; after all, they spend the bulk of their time using this tool to build their applications. While .NET developers have limited choices, Web developers have a variety of options. This article focuses on one such offering: Aptana Studio.

Versions

Aptana Studio is developed and supported by the California-based company Aptana. The current version 1.0.0 is available as an Eclipse plug-in, as well as two standalone versions:

• Community Edition: This is a freely available version of the IDE. It provides the core features of the product for building Web applications. It supports editing and debugging of Web applications using HTML, CSS, JavaScript and AJAX. Plug-ins are available for developing PHP and Ruby on Rails code.
• Professional Edition: This is the commercial version of the IDE with a current price of $99. It includes the features in the Community Edition as well as additional features. Some of the extras include a JSON editor, viewing statistics via a reporting engine, secure FTP, a debugger extension for Internet Explorer, and full support from Aptana.

The edition you choose depends on your project needs and whether you want full product support. I find that the Community Edition meets most of the needs of my Web development projects.

How to get it

The Aptana Web site makes it easy to purchase a license for the Professional Edition of Aptana or download the freely available Community Edition of Aptana. The download is available as an executable or via a compressed file. The current version requires version 1.5 or later of the Java Runtime Environment. Downloads are available for Windows, OS X, and Linux.

Installation of the Aptana Studio IDE is as simple as running the executable or running the setup in the compression file. Once it is installed, you can get a closer look at the IDE and its many features.

Features

The Aptana Studio IDE is based on the Eclipse code base, but it focuses on Web development via JavaScript (vs. Eclipse’s focus on Java). Like the Eclipse IDE, Aptana Studio organizes development work around a project. Once a new project is created, you may add one or more files. The default installation of Aptana Studio supports JavaScript, HTML, CSS, ScriptDoc, XML and plain text as well as others. Plug-ins are available for working with other file types including PHP, Ruby on Rails, Adobe AIR, and iPhone/iPod.

The Aptana Studio IDE includes standard features that most developers expect in their development tool. It provides a powerful interface for building Web applications. The following list provides a peek at some of these features:

• Code assist: One of the best features of an IDE is the ability to help you with your coding. The code assist feature provides context-sensitive coding help to make sure your code is correct.
• FTP: The ability to upload and download project files to and from a Web server makes it easy to work with code on a development or production server.
• AJAX: AJAX development is a core feature of Aptana Studio. The installation includes many JavaScript libraries, such as Adobe Spry, Yahoo! YUI, JQuery, scriptaculous, and Dojo among others. With these libraries installed by default, you can begin coding AJAX applications in no time.
• Debugging: A key piece of any IDE is a debugger. The freely available Community Edition of Aptana Studio provides a Firefox plug-in for JavaScript development, and the Professional Edition provides the same tool for Internet Explorer. With the debugger, you can easily set breakpoints and watch variables to get a better idea of what the code is actually doing.

Licensing

Aptana Studio 1.0.0 is available via a dual licensing agreement. The two licenses are open source GNU General Public License (GPL) and the Aptana Public License (APL). The GPL license offers the Aptana IDE free of charge, as long as usage adheres to the terms of the GPL license. The APL license is available for organizations that want to use the product for free and modify, integrate, and distribute it for personal or internal use only, without any redistribution requirements.

An impressive development option

Over the years, the market for Web development tools has exploded. Some of these tools are for particular development platforms like Visual Studio .NET for .NET development, but others like Aptana Studio 1.0.0 target more general Web development using standard technologies as well as others like PHP. I would recommend the IDE to fellow Web developers.

The Aptana Studio IDE allows a developer to easily organize the many disparate files in a Web application. The many features of the IDE allow you to easily build and debug your JavaScript code to ensure proper functionality. It provides all features that I’d expect from an IDE.

courtesy @TechRepublic

Build powerful Web applications via the Yahoo Developer Network

The community aspect of the Internet has changed the way we work. Developers can quickly get answers to their questions by way of a Google search, or learn new techniques and technologies via countless Web sites, blogs, and so forth. One site I recently discovered is the Yahoo! Developer Network. While it offers lots of API's for utilizing Yahoo! features, it also includes plenty of generic Web development resources.

What is it?

An initial perusal of the site can be a bit overwhelming, but it offers a variety of cool stuff for Web developers. Yahoo! describes the purpose of the site as helping software developers integrate Web sites and applications with Yahoo! using standard technologies such as XML and RSS.

YUI Library

The Yahoo! Developer Network offers tools and sample code for working with Yahoo! applications like Yahoo! Finance, Maps, and Messenger, as well as Flickr and HotJobs. The tools include RSS feeds and API's for utilizing application services, but I want to concentrate on the Yahoo! User Interface (YUI) Library.

Yahoo! describes the YUI Library as a set of utilities and controls, written in JavaScript, for building richly interactive Web applications using techniques such as DOM scripting, DHTML, and AJAX. It provides a set of components for adding specific functionality to a Web application. The components are available as open source via a BSD license.

The components are available in one download, which is comprised of one compressed file. You can extract it to install the library; it includes documentation, sample code, and the source code for each component. Let's take a closer look at one of the components to get a feel for what is available.

Calendar

Providing a calendar is a common requirement for Web applications. The calendar component provides a powerful solution to such requirements. It is very flexible, allowing it to be configured to meet just about any scenario. The following resources of the YUI Library are necessary to use the calendar:

• The Yahoo global object is available in the yahoo.js file in the build/yahoo directory of your YUI Library installation. It provides a single global namespace within which all YUI Library code resides. It must be included on every page that utilizes the YUI Library, and it must appear before any of the other YUI components.
• The Event utility (event.js file) includes code to handle events. It is located in the build/event directory of your YUI Library installation.
• The DOM Collection (dom.js file) provides code for working with the HTML DOM. It is located in the build/dom directory. It comprises a family of convenient methods that simplify common DOM-scripting tasks, including element positioning and CSS-style management, while normalizing for cross-browser inconsistencies.
• The actual calendar code is found in the calendar.js file in the build/calendar directory.
• The calendar.css style sheet provides visual formatting of the calendar control. It can be found in the build/calendar/assets directory.

All of these files should be included in your Web page to use the calendar control. With them included, an HTML element is created to contain the calendar. For example, the following div element is used:

Next, the calendar control is created. It accepts a minimum of two parameters. The first parameter is the id of the new element that will be created by the calendar control to hold its DOM. The second parameter is the id of the element that will contain the calendar control (our div element). The next example takes advantage of the optional third parameter that specifies a start month/year for the rendered calendar. A fourth optional parameter can be used to specify a selected date on the calendar control.

Finally, the render method of the calendar object is called to render it on the page. Listing A creates a calendar beginning with January 2007.

This is a basic example, but there are plenty of options for working with the calendar contents as well as formatting its display. Listing B extends the previous code to customize the display characteristics of the calendar including the weekdays, months, and so forth.

Using the Calendar control is better if you can work with the values within it. You can use the following line to display the date selected by the user (mouse click) via the Calendar control's getSelectedDates() method in the previous examples.

what's selected?

These examples provide a preview of the basic functionality of the Calendar control. You should refer to the documentation to dig deeper into what it offers.

Design patterns

Another interesting area of the Yahoo! Developer Network is design patterns. While design patterns have been utilized by application developers for years, they are not as common with Web developers. Design patterns provide solutions to common problems and keep developers from reinventing the wheel every time they are faced with common scenarios. The library site includes numerous Web development patterns with sample code that often utilizes YUI Library components.

New tools at your disposal

The Web is overloaded with sample code and related resources to help with your Web development projects, but some resources are better than others. I found a great resource when I stumbled upon the Yahoo! Developer Network. It provides plenty of helpful information for taking advantage of Yahoo!-related resources in Web applications, as well as a great set of Web components, sample code, and much more.

courtesy @TechRepublic