Creating Your First Jaxer Application

B. Creating your first Jaxer application

Standalone Jaxer Server

To create a Jaxer application if you are using the standalone Jaxer server:

  1. Create a new folder for your project under the public folder in your installation folder.
  2. Use your favorite web editor to create the HTML, CSS, and JavaScript files for your project inside the new folder.
  3. Preview your project in a web browser at http://localhost:8081/[my_project].

For help with building your first project, read through the code sample walkthroughs described on the Aptana samples page.

Jaxer Server inside Aptana Studio

To quickly get up and running with Jaxer inside of Aptana Studio:

  1. Click the Jaxer button on the toolbar to start the internal Jaxer Server.This displays an informational dialog explaining more about Jaxer and provides a link to a complete Jaxer overview. The arrow just to the right of the Jaxer button contains a menu for Jaxer-related views and documentation.
  2. Create a new general Web project in Studio:
    1. From the File menu, select New > Project…
    2. Select Default Web Project under Aptana Projects (shown below), and click the Next button.
    3. Type a name for your project, and click Next.
    4. Check the box(es) next to any JavaScript libraries that you want to include in your project and click Next.
    5. To automatically add Jaxer to support to your project (optional), click the Select All button on the Jaxer Support wizard page to configure this project for Jaxer development, and click Next.
    6. Click the Finish button.The wizard will now create your new project.
  • Create your web page:
    1. In the Project View, right-click your new project and select New > HTML File to add an HTML file to your project.
    2. Copy and paste the snippet of sample HTML code below into your editor:
      01.<html>
      02.   <head>
      03.          <title>Quick Jaxer Sample</title>
      04.   </head>
      05.   <body>
      06.          <h3>Quick Jaxer Sample</h3>
      07.          <p>This demonstrates server-side DOM and JavaScript                   and also callbacks.</p>
      08.          <script runat="server-proxy">
      09.                   document.write("This is Jaxer version " +                             Jaxer.buildNumber);
      10.                   function getLatestVersion() {
      11.                         var url =                                                 "/web/20111028035959/http://update.aptana.com/update/jaxer/win32/version.txt";                                                     
      12.                         try {
      13.                         var versionString = Jaxer.Web.get(url);
      14.                         }
      15.                         catch (e) {
      16.                         throw "Could not retrieve version                                   number from " + url;
      17.                         }
      18.                         var matches = versionString.match(/\"                               ([\S]+)\"/);
      19.                         return (matches && matches.length > 1)                             ? matches[1] : "(unknown)";
      20.                      }
      21.           </script>
      22.           <input type="button" value="Check Latest"                                                                  onclick="alert('Latest version: ' +                                 getLatestVersion())">
      23.   </body>
      24.</html>
    3. Save your HTML file.
    4. Click the Firefox tab at the bottom of the HTML editor to preview your web page in the internal Firefox browser in Studio.