blog

New Beta: Aptana Studio v.1.1.7

This beta is for two groups:
  • People who want to try Jaxer RC 1.0, and,
  • People using Eclipse 3.4 who want to test updated Studio compatibility

Existing Studio users:
Use policy file http://beta.aptana.com/php/studio/3.2/policy.xml, then perform a normal update.

Eclipse 3.4 users:
Follow the instructions at Plugging Aptana into an existing Eclipse configuration and use http://beta.aptana.com/php/studio/3.2/ as the update site.

Related: Changing the update type of your Aptana Studio and Specifying a Policy URL New in Studio
  • New version of Jaxer
  • Eclipse 3.4 compatibility
New in Jaxer

(For more complete list, see Migrating from Jaxer beta.)

  • Server-side image loading
  • JaxerManager/Logging through a single central process
  • App management through a new apps subsystem along with more convenient defaults
  • Support for native (operating system) process execution
  • Simplified state (session-like) containers

Jaxer and .NET: Image Rotation Example using C# and JS

One of our users asked about extending Jaxer to do some image processing. He wanted to extend Jaxer using a language he had been already using for some of his back-end work, in this case, Microsoft's C# language which is part of .NET.

I quickly launched my VMWare Fusion into Vista, gulp, and proceeded to run Microsoft's Visual Studio 2008. This posting won't be a tutorial on how to write C#, but i'll just go over some of the basics of setting up a simple C#-based COM object that can be used from within Jaxer.

The first thing to note is that to register COM objects in Vista, you need to be Administrator, so just launch Visual Studio as Administrator using the right-click menu 'Run as Administrator'. Once you have Visual Studio running, start by creating a new 'Class Library' project.

Once you've created the project, right-click on the project and go to the Properties menu, we'll want to make this object a COM-visible one.

In the 'Build' section of the properties, scroll to the bottom and check the 'Register for COM Interop' checkbox. This will make your object visible to other languages as a COM object.

The next thing you'll need to do is open your 'AssemblyInfo.cs' file, which is usually in your Properties folder of your project. Be sure to change the 'false' value to 'true' for the 'ComVisible' setting:

Now that you've done that, you can just create a COM object the 'usual' way. The complete project is attached, so you can take a look there. The image processing code was borrowed from the following online tutorial: http://blog.paranoidferret.com/index.php/2007/06/13/csharp-tutorial-image-editing-rotate/

Once you've got your object compiled, using it from within Jaxer is super-easy! You can just use the COMObject function to create a wrapped instance of the native object and then just use functions and properties on it just as if it were native JavaScript.

So here is the very short HTML file and JavaScript code running server-side via Jaxer that creates the COM object, loads our image, rotates it via the input field in the HTML form, and then saves it back as a new image. The communications from JS to .NET happens very quickly and as you can see, was super-simple to set up.

Here's a screenshot of the image being rotated:

What's really cool is that you can write anything you like in C#/VB.NET and easily access it via JavaScript in Jaxer. Note how in my sample, the onclick event for the button calls the server-side JavaScript function directly, which in turn calls the .NET COM object. That is, you can bind browser-side buttons directly to back-end .NET COM objects, all in JavaScript through Jaxer!

Hybrid Ajax / Flex Apps. Are You Getting Better Fuel Efficiency?

There are some interesting threads going on in the Aptana Forums about using Aptana Studio with Adobe Flex and Flex Builder. The idea of using Ajax and Flex or Flash together is not new. Google Finance did a great job a few years ago blending the two to provide a very nice user experience with Flash-based interactive charts within an otherwise Ajax UI.

It seems that the Aptana community is uncovering increasing efficiencies in using Aptana Studio and Adobe's Flex Builder together. We've also known that many Adobe AIR users are building their Ajax apps for AIR using Aptana Studio, and have heard from others that using Aptana Jaxer to create JSON data services (written natively in JavaScript) consumable by Flash and Flex apps makes a lot of sense as well. Flash and Flex each have an "Ajax bridge" to expose JavaScript APIs for the embedded objects.

Anyways... It seems Adobe is now actively taking a deeper look at this trend in the hybridization of Ajax and Flash and Flex. I saw that they are offering $75 bucks for an hour phone call to discuss your experience with and thoughts on using these together.

Here's the link if you're interested: http://www.adobe.com/go/RIAintegration_study/. $75 bucks... That's almost the cost of a tank of gas in San Francisco.

Aptana surpasses 2 million Studio downloads...and we're just getting started!

This week Aptana shipped the 2 millionth copy of Aptana Studio! This is a huge milestone for Aptana for which we owe a big thank you to the community -- not just for downloading Studio, but more importantly for helping make Aptana Studio the leading open source IDE in its category through your feedback, ideas, and suggestions (and for reporting bugs when they happen).

For Open Source Developers by Open Source Developers

We really see the success of Aptana products stemming from the philosophy that it's "for developers by developers" and our open source model help us fulfill that through rapid release cycles, nightly builds, and overall a more fluid process that's constantly taking in feedback from the community. And what better kind of solution is there than the one the community told us to build.

We're continuing that philosophy now with our Aptana Cloud offering (currently in beta) as well as our support for Ruby on Rails, PHP and LAMP development, and of course app development with Ajax libraries on the client side and for those that want server-side Ajax, Aptana Jaxer, a first-of its kind open source Ajax server built around the Mozilla browser engine.

Help us help you. Join the Aptana Early Access Programs

Cloud, PHP and Jaxer are all in active beta stages right now and you can get your hands on them through the Aptana Cloud Early Access Program, so it's a great time to request early access and give early feedback. RadRails, for streamlined Ruby on Rails development is already 1.0 so feedback in the forums and the bug/enhancement system right now is best for that. This early feedback has direct and immediate impact on what we'll ship this year. So now is the time. Got something you want to see in Aptana's offerings? Let us know. Get involved. Help us help you.

Fun with Ext JS and Aptana Jaxer

Rich Waters of Ext JS has put up a great example of using Ext JS server-side with Aptana Jaxer. Check out the example and from there get the full source code to give it a go yourself.

"We can see that Jaxer lets developers leverage the hard work which has already been spent building client-side libraries on the server-side. These simple examples show off some of the true potential of utilizing the Ext JS framework on the server-side" says Rich.

The easy to follow example shows off a very simple wrapper around an Ext.data.Store and the corresponding Jaxer server code that returns JSON to a Ext JS datagrid.

Aptana Ruby on Rails book by Javier Ramirez released

A new Aptana RadRails book has been released. Aptana community member Javier Ramirez's "Aptana RadRails: An IDE For Rails Development" (Packt Publishing, May 2008) is now available. Find it at Amazon, or direct from Packt (where its a tad cheaper it seems), or at other fine book establishments around the world!

Here's the summary:

A comprehensive guide to using RadRails to develop your Ruby on Rails projects in a professional and productive manner

  • Comprehensive guide to using RadRails during the whole development cycle
  • Code Assistance, Graphical Debugger, Testing, Integrated Console
  • Manage your gems, plug-ins, servers, generators, and Rake tasks
  • Rails 2.0-ready
  • Includes a chapter about Subversion and Database integration
  • Smart Code Assistants for HTML, JavaScript, and CSS

Aptana RadRails is an Integrated Development Environment for Ruby on Rails projects. Built on top of the well-known Eclipse platform, RadRails provides all the tools you need to create a whole Rails application from a single interface, allowing you to focus on the creative part of the development as your IDE takes care of the mechanics.

What you will learn from this book

This book will show you how to use the tools RadRails provides to improve your productivity:

  • Tools for writing code: Specialized Editors for Ruby, HTML, CSS, and JavaScript; >> Code Assistance; Code Completion; Refactoring; Quick Code Navigation; Outline Views
  • Tools for testing and debugging: Unit Testing; Graphical Debugger; Monitoring of Log Files
  • Tools for project management: Specialized views for launching your Tasks and Generators; Management of your Gems and Plug-ins; Rails Servers Control
  • You will also learn how to use other Eclipse plug-ins for synchronizing your projects with Subversion and for managing your databases.

Who this book is written for

This book is for Ruby on Rails developers who want to make the most of the framework by using an Integrated Development Environment.

Even though the book explains everything you need to follow the contents, the focus is on how to use the tool and not on the Rails framework itself, so previous working knowledge of Rails is highly advisable. Previous knowledge of Eclipse is not necessary.

--------------------------------------------------------------------------------

Author: Javier Ramírez

Javier Ramírez has been developing Web Applications since before the term Web Application was coined. Born in Zaragoza, Spain, in 1974, he started programming as a hobby around the age of 11 assisted by his older sister. A few years later, he got his first modem and became a regular of BBSes and Newsgroups. His interest in developing server applications that can be accessed remotely comes from those times.

He has learned —and forgotten— many programming languages, including Basic, dBase III, Cobol, Pascal, SQL, C, C++, ASP, TCL, JavaScript, PHP, and Java, the language on which he has focused for most of his career so far. He has held the positions of programmer, analyst, consultant, team leader, post-sales engineer, project manager, and software architect, totaling over 12 years in the IT business.

Having developed projects mainly for banks and other big corporations in Spain, Italy and the US, he co-founded some years ago a small software development shop, which provided him with valuable experience about the difficulties and the joys of entrepreneurship. After two years, he left the company in pursuit of new professional challenges.

For the last two years, he has been proudly working for ASPgems, where he discovered Ruby on Rails, which soon became his framework of choice for developing Web Applications. He is one of the organizers of the Spanish Rails Conference, also participating as a Speaker in the two events held so far.

He has also been an instructor on Robotics, Java, FatWire Content Server, and Ruby on Rails, and a University Lecturer in the subjects of 'Software Engineering' and 'The Java Programming Language', which he currently teaches at Universidad Francisco de Vitoria, in Madrid.

Javier Ramírez holds a B.Sc. in Business Information Systems with First Class Honors and a degree in Ingeniería en Sistemas de Computación.

------------------------------------------------------------------------------------------------

Javier's other postings in the Aptana forums

Aptana-At-Large in June 2008

In June, Aptana and ColdFusion enthusiast, Mark Drew will be at CFUnited presenting:

Fresh AIR: Getting to grips with Aptana and AIR apps
This session will give a nice and fresh introduction to developing AIR applications using Aptana. By using a ColdFusion developer's existing knowledge of HTML and JavaScript (and some quick introductions to JavaScript libraries such as EXT and JQuery), the whole process of developing rich desktop apps will be demystified.
Mark, who has been central to the CFEclipse project, is sure to deliver a great session, so be sure to check it out.

Aptana to Launch Cloud Platform (eWeek)

Aptana will build off of its IDE and AJAX success with its new technology. Read the full story.
Learn more about Aptana Cloud, an "Elastic Application Cloud" that's ideal for Web developers who use scripting languages.
Join the early access program.

'DOM Scraping' with Aptana Jaxer

One of the things I was working on recently is 'screen scraping' some data from several sites and presenting them in a single page. Of course Jaxer seems like the perfect tool for this as I can go fetch the data server-side, pull it all together, then present the final page to the browser. It was so exciting to see this work that I thought I'd make this post to share my experience with you!

We’re working now on adding support in Jaxer for being able to programmatically create 'window' objects, filling them with content from a remote URL, having that content actually execute, then being able to go into that window object and pull DOM elements out.

Unfortunately for me, that work isn't ready yet, so I wanted to see if there was some workaround I could use until it was ready. Well, after some research and trial and error, a workaround was found. The only catch with this code is that if there is any JavaScript on the page(s) you are fetching, that code will not execute, that’s coming soon.

Note that all of the code below can be contained within a single script tag:

So, the first thing I wanted to do is make it really easy to fetch a remote document and grab out some content. I didn't want to use string matching or regular expressions of any kind, I wanted to use my trusted 'getElementById' to fetch named elements directly. (Of course I ran into sites that don't name their elements, but fortunately many use named classes, so I had to fetch them that way, but I get ahead of myself.)

Let's get started. The following two lines is all that is required to fetch a remote URL synchronously on the server and then pull out a named element:

Now that we have 'item' as the element we were trying to fetch, we just have to add that element to our current blank page. I created a simple function called 'addElementToPage(title, element)' that takes care of this for me. Here's the next line:

That's it. Now I do that 2 more times to fetch content from 2 other sites.

You'll notice that I didn't use getElementById() as those elements were not named, but fortunately they had class names associated with them. I found a convenient function called getElementsByClass() that I used in this case. Since it returns an array of elements, I use the [0] index to retrieve the first item in the list, which in my case, is probably the only item.

Believe it or not, that's basically it. At this point, your three 'DOM fragments' have been fetched and inserted into your new document. Here's the result:

Following are the convenience functions that help make the magic happen. The first function is addElementToPage(). It very simply just creates an H2 tag and sets the title and a DIV tag which contains the contents of the fetched element:

This next function, getDocumentFromURL(), is the one that does most of the work. (I found some good info on the subject of HTML to DOM here: http://jszen.blogspot.com/2007/02/how-to-parse-html-strings-into-dom.html) It first goes and retrieves the remote page. Then it creates a 'document fragment' from the contents of the fetched site. That fragment is then added to a dynamically created IFRAME. Finally, the Document object from the IFRAME is fetched and returned. In short, we can pass in a URL, get the string value, place it into an IFRAME, then pull out the resulting Document object so that we can work on it.

This final function was found at http://www.dustindiaz.com/getelementsbyclass/ and walks a node looking for an element with a specific class name. It was used in the case where elements don't have ID's, so a class name is used instead.

What's exciting about this sample is that it is relatively simple, uses the full power of server-side JavaScript and more importantly, Jaxer's cool server-side DOM capability to enable real 'DOM scraping'. Once window object creation is finished in Jaxer (real soon now), then you'll be able to fetch remote pages, execute their integrated code, then proceed to fetch out items from the resulting DOM.

Server-side jQuery and more cool tricks with Aptana Jaxer

In this example, (the first in a series) we're going to build a simple voting tool, using a single page of DHTML. The implementation is quite basic but covers a good few examples of how to use Aptana Jaxer in real world situations, such as :

  • Using Ajax libraries on the server (jQuery in this example)
  • Server-side DOM manipulation (using jQuery)
  • Storing and retrieving Session data
  • Creating and accessing a database
  • E4X as a templating mechanism (E4X provides native XML support in JavaScript)
  • Handling form data

Let's Vote...

This example was written as a single page webapp. You could remove the Javascript to another file and make it all unobtrusive if that is what gets you excited, but I'm just using an inline script tag, as the code is only about 30 or so lines long. Also in Jaxer we could have easily implemented this using Jaxer's seamless ajax callback mechanism but for the purpose of this example we'll stick with a traditional form post.

Let's get started. Most folks reading this should be familiar with the standard blog/portal poll, where you are presented with a set of choices.

and once you have voted you get to see the current results of the voting.

In our example we allow multiple votes per user but you can easily change that by just commenting out a single line of code.

One of the interesting features of this application is that, by using server-side DOM manipulation in Jaxer, you can remove any unwanted content before it is sent to the client browser. We use this to hide the vote results until the user has voted

This is a useful technique for permission based forms where, for example, you may want remove the credit card details unless the user has established the correct permissions and been validated by the server.

A very basic web page

So let's jump in and have a look at the code used to make this work. The code in this article has been updated to use the API of Jaxer 0.9.8 or later, for The full source listing below contains comments to indicate where the code was changed to work with the later API.

Above is the contents of the HEAD element. Just the usual suspects, setting the title and some simple CSS stuff. The only interesting part is at line #3, where we load the jQuery library on the server, because we intend to do some serverside DOM manipulation before the page is sent to the client.

The runat='server' attribute tells Jaxer to load this javascript library on the server.

The autoload attribute is a recent addition to Jaxer, and it instructs Jaxer to load that page and keep it cached as preparsed bytecode (for faster library loadtime) for any future calls to this page, including callbacks.

In the body of the document we have a simple form which we will dynamically populate on the server. The form will post the vote to itself on the server.

We are marking up the DOM content with the classnames 'voter' and 'nonvoter' to identify content that is specific to a user's status, and make it easily accessible using jQuery on the server.

Server Side Javascript

Now we get to the Javascript. The app has a single script tag in the body which is designated to run on the server.

The first dozen or so lines are simply creating a DB and preparing a schema for use.

So we've connected to the database (which was automatically created if needed, how convenient!) and set up the schema and initial content we expect. We also setup an Array (questions) containing the questions for the voting poll

Next we need to check the session value we are storing (status) to determine whether this user has already voted, and then check to see if the form data for the vote is being posted. Then, if we are actually voting, we write the vote to the database and set the user status to 'voter'.

When we write the vote to the database, we grab the sessionID and the remote IP address and write those out with the vote data, this will let us enforce single voting later if we need it.

Finally query the database to get the current vote counts, remembering to subtract 1 from the total to account for the dummy rows we inserted to seed database and prevent any nulls from appearing in the results totals.

Now we build the DOM, to do this we issue a query to the DB to get the current vote tally.

Using E4X - ECMAScript For XML as a simple templating tool we create the DOM with the nodes populated according to our dataset.

One of the nice features of server-side javascript with Jaxer is that you have access to all neat things built into Mozilla without the worry of client side browser support, which enables reliable use of the advanced features of the Javascript language.

If you look closely at the code below you'll notice we use a simple syntax for variable substitution using curly braces containing javascript code inside the E4X assigments. This allows us to use this for templating as long as we are creating valid XML nodes.

So the document now has a DOM that has been populated with the content for BOTH voters and non-voters. We use a little jQuery magic to remove the elements we don't want presented to the user.

In this way the user will EITHER see the form with the question and the submit button

OR the current voting results data.

Now we set the session variable status to be the current status of the user as they have either voted or not.

Finally as the page that is served has no further dependency on Jaxer once it leaves the server, we tell Jaxer to not bother injecting the client framework. Normally the client framework would be automatically inserted as a script tag in the outgoing HTML, but our simple example doesn't need to communicate back to the Jaxer server, as it contains no server callbacks.

So there you have it, a simple poll on a single page, using many of Jaxer's cool features.

Supporting Files

The full code and supporting files for this article are available here

Full Source Listing

Syndicate content