明壁幕府忍法帳 > Aptana Index > Home > Axway Appcelerator Studio > Axway Appcelerator Studio Guide > Web Development > JavaScript Development > Using JavaScript Libraries

2020.01.16 Ver.10 (2021.1.9)

Using JavaScript Libraries

This walkthrough will instruct you on how to create a new web project and get started with your coding using a pre-documented JavaScript library. For this example, we will use jQuery.

Icon

The library you are using must have either a JSCA 1.0 Specification file, be documented using the ScriptDoc spec, be documented using VSDoc for JavaScript, or have an Aptana Studio 2.X code assist XML file. If using the Studio 2.X XML code assist file, you need to change the file extension to .sdocml.

Accessing your projects

  1. Click the Project Explorer tab to view your Studio projects.
  2. Create a new Web project.
    1. From the Studio File menu, select New > Project...
      The New Project wizard opens.
    2. On the New Project wizard, select Web Project.
    3. Click the Next button.
    4. In the Project name: field, type a name for your new project.
    5. Click the Next button.
    6. From the Project Template list, select a default template for the project if you like.
    7. Click the Finish button. Studio creates a new web project, with several files, depending on the project template you selected.

This will create a new web project, but unlike Studio 2, most templates do not drop in a default set of JavaScript files for library support, as they quickly become outdated. Instead, download the library you are interested in using and drag and drop the files into your project as appropriate.

Adding a documented library for code assist

  1. Find a library you are interested in. Some examples are listed here: JavaScript Library Support
  2. Save it to your disk, and then drag it into your project. It does not matter where in the project it sits, so you can create a new folder for files like this if you like.
Icon

The project must be some web project: Web, PHP, Python, Ruby, Rails. You can confirm that here by checking the project nature: Importing an Existing Project

Viewing code assist (using jQuery as an example)

  1. Add the file from https://raw.github.com/aptana/javascript-jquery.ruble/master/support/jquery.1.4.2.sdocml. Make sure to save it with the .sdocml extension.
  2. If you do not have a JavaScript file in your project, create a new one by selecting the File menu, select New > File... and typing 'sample.js' or a different name if you prefer. Select Finish.

  3. In your sample.js file, add the following snippet:

    $(document).ready(function(){});
  4. Inside that, add the following line: $("p")
    1. While entering that selector you should have seen documentation come up for how to use the $ function.
  5. Now insert your cursor just after "$("p")" and type .ad and press ctrl+space.
    Code Assist displays a list of jQuery functions that begin with the letters "ad" (for example, add, addClass, and so forth). Use Code Assist to help you code.
  6. Start coding.
    1. As you type, notice that Code Assist is now active for the jQuery objects and functions that you use.
    2. Press ctrl+space at any time to activate Code Assist.