Working with Initialization Scripts in the AWS Cloud9 Integrated Development Environment (IDE)

An initialization script defines custom initialization code to run in your IDE after all plugins are loaded. This applies across each AWS Cloud9 development environment associated with your IAM user. As you make changes to your initialization script, AWS Cloud9 pushes those changes to the cloud and associates them with your IAM user. AWS Cloud9 also continually scans the cloud for changes to the initialization script associated with your IAM user, and applies those changes to your current environment.

You can share your initialization script with other users.

View or Change Your Initialization Script

To view your initialization script, on the menu bar, choose AWS Cloud9, Open Your Init Script.
To change your initialization script, on the init.js tab, use code to change your initialization script's behavior. For more information, see Working with Initialization Script Code.
To apply your changes to any other environment, simply open the environment you want to apply the changes to. If that environment is already open, refresh the web browser tab for that environment.

In both the source and target environment, on the menu bar of the AWS Cloud9 IDE, choose AWS Cloud9, Open Your Init Script.
In the source environment, copy the contents of the init.js tab that is displayed.
In the target environment, overwrite the contents of the init.js tab with the copied contents from the source environment.
In the target environment, save the init.js tab.

Working with Initialization Script Code

You can add code to your initialization script (init.js file) in the AWS Cloud9 IDE to do common things when your environment starts or reloads, such as the following:

Add custom commands and menus to the menu bar.
Show built-in alert, question, and file dialog boxes, and create custom dialog boxes.
Add and delete files in the file system.
Set and get custom user preference settings.
Add custom side panels.
Add custom builders and runners.
Add custom tabs.

To run your init.js file after you add code to it or change existing code in it, save your init.js file, then reload your environment. Do this by choosing your web browser's reload button. For Windows or Linux, you can also press Ctrl+F5 or Ctrl+Shift+R. For Mac, you can also press Cmd+Shift+R.

Declaring the Services Global Variable

In your initialization script, you access AWS Cloud9 IDE APIs from your code through the services global variable. At the beginning of your init.js file, you must add the /*global*/ directive to specify that the services global variable is available to this file.


/*global services*/

Discovering the Services APIs

To see what is available to you as part of the services global variable, you can log the global to your web browser's console. For example:


console.log(services);

To display your web browser's console:

For Google Chrome, choose Customize and control Google Chrome, More tools, Developer tools, Console.
For Safari, choose Develop, Show JavaScript Console. (If the Develop menu isn't visible, choose Safari, Preferences, Advanced, Show Develop menu in menu bar.)
For Mozilla Firefox, choose Open menu, Developer, Web console.
For Internet Explorer, choose Tools, F12 Developer Tools, Console.
For Microsoft Edge, choose More, F12 Developer Tools, Console.
For other web browsers, consult the specific web browser documentation.

Working with Menus

Code in your init.js file starts running immediately after your environment starts or reloads. For example, you can use custom menus to delay the running of preloaded commands until you choose to run them.

You can add custom menus anywhere throughout the AWS Cloud9 IDE. For example, you can add your own menu command to an existing built-in menu on the menu bar. You can also add your own menu to the menu bar.

Add a Custom Command to the Menu Bar

The following code example adds a menu command named Current Time to the end of the built-in Tools menu. When you choose Current Time, an alert displays the current time.


// Add a custom menu command to an existing menu on the menu bar.
var menus = services["menus"];    // Accesses the menu bar.
var MenuItem = services.MenuItem; // Use this to create a menu item.
var Divider = services.Divider;   // Use this to create a menu divider.

// Add a Current Time command to the built-in Tools menu.
menus.addItemByPath("Tools/Current Time", new MenuItem({
  onclick: chooseCurrentTime
}), 200001, plugin);

// Add a dividing line before the Current Time menu command on
// the Tools menu.
menus.addItemByPath("Tools/~", new Divider(), 200000, plugin);

// Run this when the user chooses the Current Time command.
function chooseCurrentTime() {

  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();

  // Add a zero in front of minutes or seconds, if less than 10.
  m = checkTime(m);
  s = checkTime(s);

  // Show a built-in alert dialog box displaying the current time.
  services["dialog.alert"].show("Time", "Current time",
    "The current time is " + h + ":" + m + ":" + s + ".");
}

// Add a zero in front of minutes or seconds, if less than 10.
function checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
}

To specify the menu to add the Current Time command to, in the addItemByPath method, provide the menu name (in this example, Tools), followed by a forward slash (/), followed by the name of the menu command (in this example, Current Time).

To separate the Current Time command from the menu's other commands, add a divider before the command. The divider appears as a horizontal rule. To specify the menu to add the divider to, in the addItemByPath method, provide the menu name (in this example, Tools), followed by a forward slash (/), followed by a tilde (~).

To add this command toward the end of the menu, you specify a sufficiently large index number (200000 for the divider and 200001 for the Current Time command). Menus and menu commands with larger index numbers are placed toward the ends of menus. To see the index number of each menu and menu command, add ?menus=1 to the end of your environment URL, then reload your environment. To hide these index numbers, remove ?menus=1 from the end of your environment URL, then reload your environment.

The show method of the dialog.alert service shows an alert dialog. For more information, see Show a Built-In Alert Dialog.

The following code example adds a top-level menu named Weekends to the end of the menu bar. When you choose one of the menu's commands, an alert dialog box is displayed with various information.

Adding a custom menu to the menu bar is similar to adding a custom command to a built-in menu. Use the setRootMenu method to set where to put the menu at the top level on the menu bar.

Because this code uses the plugin global variable, you must add the /*global services, plugin*/ directive at the beginning of your init.js file to specify that the services and plugin globals are available to this file.


// Add a custom top-level menu to the menu bar.
// Add commands and dividers to this menu.
var menuCaption = "Weekends";     // Menu caption.
var menus = services["menus"];    // Access the menu bar.
var MenuItem = services.MenuItem; // Use this to create a menu item.
var Divider = services.Divider;   // Use this to create a menu divider.

// Set the top-level menu caption.
menus.setRootMenu(menuCaption, 900, plugin);

// Add a Saturday menu command to the menu.
// When the user chooses this command, run the chooseWeekendDay function,
// passing in the string Saturday.
menus.addItemByPath(menuCaption + "/Saturday", new MenuItem({
  onclick: chooseWeekendDay.bind(null, "Saturday")
}), 100, plugin);

// Add a Sunday menu command to the menu.
// When the user chooses this command, run the chooseWeekendDay function,
// passing in the string Sunday.
menus.addItemByPath(menuCaption + "/Sunday", new MenuItem({
  onclick: chooseWeekendDay.bind(null, "Sunday")
}), 200, plugin);

// Add an About menu command to the menu.
// When the user chooses this command, run the chooseAbout function.
menus.addItemByPath(menuCaption + "/About", new MenuItem({
  onclick: chooseAbout
}), 400, plugin);

// Add a dividing line before the About menu command.
menus.addItemByPath(menuCaption + "/~", new Divider(), 300, plugin);

// Show a built-in alert with the chosen day name.
function chooseWeekendDay(day) {
  services["dialog.alert"].show("Results", "Which day?",
    "You chose " + day + ".");
}

// Show a built-in alert with the menu caption.
function chooseAbout() {
  services["dialog.alert"].show("About", menuCaption + " menu",
    "This is the " + menuCaption + " menu. Enjoy your weekend.");
}

Working with Dialogs

You use dialogs to display information to users, and to get information from users. This section describes how to work with four types of dialog:

A built-in alert dialog, which displays information but doesn't enable you to get information from users.
A built-in question dialog, which enables you to capture "yes" or "no" responses from users.
A built-in file dialog, which enables you to capture information from users about folders and files in the file system of the environment.
A custom dialog, which enables you to display information and special controls to capture various information from users.

Show a Built-In Alert Dialog

An alert dialog contains a title, optional heading, optional text, and an OK button.

The following code example uses the show method of the dialog.alert service to display various information based on the current time of day.


// Create an alert dialog.
var d = new Date();   // Get the current time.
var n = d.getHours(); // Get the current hour.
var greeting;
var meal;

if ( n >= 0 && n <=11 ) {
  greeting = "Good morning";
  meal = "breakfast";
} else if ( n >=12 && n <=16 ) {
  greeting = "Good afternoon";
  meal = "lunch";
} else if ( n >= 17 && n <= 23) {
  greeting = "Good evening";
  meal = "dinner";
} else {
  greeting = "Hello";
  meal = "something";
}

// Show a built-in alert dialog with a message based on the current hour.
services["dialog.alert"].show(greeting, "Reminder", "Have you eaten " +
  meal + " yet?");

Show a Built-In Question Dialog

A question dialog contains a title, optional heading, optional text, and Yes and No buttons.

The following code example displays various information based on the current time of day. To do something that depends on whether you choose Yes or No, declare related functions within the show method.

The following code example uses the show method of the dialog.question service to display various information based on whether the user chooses Yes or No. In your own code, you can do something different if the user chooses Yes or No.


// Create a question dialog.
var language = "Node.js";  // Programming language type displayed in dialog.

// Show a built-in question dialog with a message based on whether the
// user chooses Yes or No.
services["dialog.question"].show(
  "Survey",
  "Do you like " + language + "?",
  "Choose Yes or No.",
  function() {
    // User chose the Yes button.
    services["dialog.alert"].show("Results", "Language preference",
      "You seem to like " + language + ".");
  },
  function() {
    // User chose the No button.
    services["dialog.alert"].show("Results", "Language preference",
      "It seems that you don't like " + language + ".");
  }
);

Show a Built-In File Dialog

A file dialog contains Save and Cancel buttons. It also contains file name, path, and folder boxes, a Create folder button, and a Show files in tree check box.

Use the file dialog's filename and directory properties to get the specified file name and directory name.

The following code example uses the show method of the dialog.file service to enable the user to select a file name and directory path. After the user chooses Save, information about the selected file name and directory path is displayed. In your own code, you can do something different if the user chooses Save or Cancel.


// Create a file dialog.
var fileDialog = services["dialog.file"];

// Show a built-in file dialog.
// After the user chooses Save, show a built-in alert with
// information about the user's specified file name and directory path.
fileDialog.show(
  "Specify the file name and choose a path",
  "my-filename",
  function() {
    // User chose the Save button.
    services["dialog.alert"].show("Results", "File info",
      "Filename = " + fileDialog.filename +
      "\nDirectory = " + fileDialog.directory);
   fileDialog.hide();
  },
  function() {
    // User chose the Cancel button.
    services["dialog.alert"].show("Results", "File info", "You chose Cancel.");
    fileDialog.hide();
  }
);

Create a Custom Dialog

A custom dialog provides a row across its bottom edge that you can put special controls into, as shown here.

A custom dialog can include button, checkbox, divider, dropdown, filler, image, label, and textbox items

This row, named the button bar, can contain the following items:

button: Represents a button the user can choose. A button can have a name, caption, and function to run when the user chooses it.
checkbox: Represents a box with checked and unchecked states. A checkbox can have a name, default value (checked or unchecked), and custom values you can associate with the checked and unchecked states.
divider: Represents a dividing line.
dropdown: Represents a list of choices for the user. A dropdown can have a name, list of items the user can choose from, default choice, and message to return if the user doesn't select any choice and no default choice is specified.
filler: Represents an empty space to separate items.
image: Represents a viewable picture. An image can have a name, source location, margin, and height.
label: Represents a string of text. A label can have a name and a caption.
textbox: Represents a box the user can type text into. A textbox can have a name, default value, and message if the user doesn't type anything into the box. It can be set to continuously determine a value as the user types or determine a value only after the user exits the box.

The following code demonstrates all of the available button bar items in a custom dialog. By default, the button bar displays items horizontally with no labels. When the user chooses the button, another dialog is displayed with the values of the checkbox, dropdown, and textbox.


var Dialog = services.Dialog;
var myDialog = new Dialog("AWS Cloud9", [], {
  allowClose: true,
  title: "My Dialog",
  elements: [
    {
      name: "myButton",
      type: "button",
      caption: "My Button",
      onclick: myButtonOnClick
    },
    {
      name: "myCheckbox",
      type: "checkbox",
      defaultValue: "checked",
      values: [ "checked", "unchecked" ]
    },
    {
      name: "myDivider",
      type: "divider"
    },
    {
      name: "myDropdown",
      type: "dropdown",
      items: [
        { value: "item1", caption: "Item 1" },
        { value: "item2", caption: "Item 2" },
        { value: "item3", caption: "Item 3" }
      ],
      defaultValue: "item1",
      emptyMessage: "No item selected"
    },
    { type: "filler" },
    {
      name: "myImage",
      type: "image",
      src: "",
      margin: "5 5 5 5",
      height: 20
    },
    {
      name: "myLabel",
      type: "label",
      caption: "My Label"
    },
    {
      name: "myTextbox",
      type: "textbox",
      message: "myTextbox is blank",
      defaultValue: "Type something here",
      realtime: true
    }
  ]
});

myDialog.show();

function myButtonOnClick() {
  services["dialog.alert"].show("My Dialog",
    "My Dialog values:",
    "myCheckbox = " + myDialog.getElement("myCheckbox").value + "\n" +
    "myDropdown = " + myDialog.getElement("myDropdown").value + "\n" +
    "myTextbox = " + myDialog.getElement("myTextbox").value
  );
}

Custom dialogs can also contain a Form object, as shown here.

This Form object can contain the following items:

button: Represents a button the user can choose. A button can have a title, name, caption, and function to run when the user chooses it.
checkbox: Represents a sliding on (checked) and off (unchecked) switch. A check box can have a title, name, default value (checked or unchecked), and custom values you can associate with the checked and unchecked states.
checked-spinner: Represents a box with checked and unchecked states, with a spinner next to it. A checked-spinner can have a title, name, default check box value (checked or unchecked), default spinner value, and minimum and maximum values. It can be set to continuously determine values as the user changes them, or determine them only after the user exits the checked-spinner.
colorbox: Represents a chosen color. A colorbox can have a title, name, and default value. It can be set to continuously determine the value as the user picks different color values, or determine the value only after the user exits the colorbox.
divider: Represents a dividing line.
dropdown: Represents a list of choices for the user. A dropdown can have a title, name, list of items the user can choose from, default choice, and message that can be returned if the user doesn't select an item and no default choice is specified.
image: Represents a viewable picture. An image can have a name, source location, margin, and height.
label: Represents a text string. A label can have a name and a caption.
password: Represents a box a user can type a password into. A password can have a title, name, default value, and message that can be returned if the user doesn't type a password. It can be set to continuously determine a value as the user changes the value, or determine the value only after the user exits the password.
spinner: Represents a value that can be increased or decreased. A spinner can have a title, name, default value, and minimum and maximum values. It can be set to continuously determine a value as the user changes the value, or determine the value only after the user exits the spinner.
textarea: Represents a box the user can type text into. A textarea can have a title, name, default value, and height. It can be set to continuously determine a value as the user types, or determine the value only after the user exits the box.
textbox: Represents a box the user can type text into. A textbox can have a title, name, default value, and message if the user doesn't type anything into the box. It can be set to continuously determine the value as the user types, or determine the value only after the user exits the box.
submit: Represents a button the user can choose. A submit button can have a name, caption, and function to run when the user chooses it. You can also specify whether the button is chosen if the user presses Enter.

The following code demonstrates all of the available items in a custom dialog. The dialog displays titles on the left and the items on the right, except for the image and submit button. When the user chooses the button, another dialog is displayed. When the user chooses submit, the item names and values in the dialog are displayed in JSON format.


var Form = services.Form;
var myForm = new Form({
  title: "My Title",
  name: "myForm",
  form: [
    {
      title: "Button",
      name: "myButton",
      type: "button",
      caption: "My Button",
      onclick: myButtonOnClick
    },
    {
      title: "Checkbox",
      name: "myCheckbox",
      type: "checkbox",
      defaultValue: "checked",
      values: [ "checked", "unchecked" ]
    },
    {
      title: "Checked Spinner",
      name: "myCheckedspinner",
      type: "checked-spinner",
      defaultCheckboxValue: "checked",
      defaultValue: 0,
      min: 0,
      max: 10,
      realtime: false
    },
    {
      title: "Color Box",
      name: "myColorbox",
      type: "colorbox",
      defaultValue: "green",
      realtime: false
    },
    {
      name: "myDivider",
      type: "divider"
    },
    {
      title: "Dropdown",
      name: "myDropdown",
      type: "dropdown",
      items: [
        { value: "item1", caption: "Item 1" },
        { value: "item2", caption: "Item 2" },
        { value: "item3", caption: "Item 3" }
      ],
      defaultValue: "item1",
      emptyMessage: "No item selected"
    },
    {
      name: "myImage",
      type: "image",
      src: "",
      margin: "5 5 5 5",
      height: 20
    },
    {
      name: "myLabel",
      type: "label",
      caption: "My Label"
    },
    {
      title: "Password",
      name: "myPassword",
      type: "password",
      defaultValue: "No password typed",
      realtime: false
    },
    {
      title: "Spinner",
      name: "mySpinner",
      type: "spinner",
      defaultValue: 0,
      min: 0,
      max: 10,
      realtime: false
    },
    {
      title: "Text Area",
      name: "myTextarea",
      type: "textarea",
      height: 20,
      defaultValue: "Type something here",
      realtime: true
    },
    {
      title: "Textbox",
      name: "myTextbox",
      type: "textbox",
      message: "myTextbox is blank",
      defaultValue: "Type something here",
      realtime: true
    },
    {
      name: "mySubmit",
      type: "submit",
      caption: "Submit",
      onclick: mySubmitOnClick,
      default: false
    }
  ]
});

var Dialog = services.Dialog;
var myDialog = new Dialog("AWS Cloud9", [], {
  allowClose: true,
  title: "My Dialog"
});

myDialog.on("draw", function(e) {
  myForm.attachTo(e.html);
});

myDialog.show();

function myButtonOnClick() {
  services["dialog.alert"].show("My Button",
    "My Button was clicked.");
}

function mySubmitOnClick() {
  services["dialog.alert"].show("My Form", "My Form values", JSON.stringify(myForm.toJson()));
  myDialog.hide();
}

Working with the File System

You can use the fs service to work with the file system in an environment. You can use the file system to:

Add, read, and delete files.
Add, read, rename, and delete directories.
Search through files and directories.
Change file modes.

Add a File

To add a file, use the writeFile method. The following example adds a file named my-file.txt to the root directory of the environment.


var fs = services["fs"];
var writeFilePath = "~/environment/my-file.txt";

fs.writeFile(writeFilePath, "Hello, World!",
  function(err, success) {
    if (err) {
      services["dialog.alert"].show(
        "Error",
        "File Write Operation",
        "Could not write file '" + writeFilePath + "'.");
    } else {
      services["dialog.alert"].show(
        "Success",
        "File Write Operation",
        "Wrote file '" + writeFilePath + "'.");
    }
  }
);

Delete a File

To delete a file, use the rmfile method. The following example removes a file named my-file.txt from the root directory of the environment.


var fs = services["fs"];
var fileDeletePath = "~/environment/my-file.txt";

fs.rmfile(fileDeletePath,
  function(err, success) {
    if (err) {
      services["dialog.alert"].show(
        "Error",
        "File Delete Operation",
        "Could not delete file '" + fileDeletePath + "'.");
    } else {
      services["dialog.alert"].show(
        "Success",
        "File Delete Operation",
        "Deleted file '" + fileDeletePath + "'.");
    }
  }
);

Working with Preference Settings

Use preferences to customize the behavior of the AWS Cloud9 IDE for users. Common preferences include settings for code editors, code formatting, and terminal sessions. For more information about preference settings, see Working with Project Settings and Working with User Settings.

You can create your own custom preference settings. You can also set and get the values of existing custom and built-in preference settings.

Create Custom Preference Settings

Use the add method of the preferences service to add custom preferences that users can set. For each collection of custom preference settings, specify information such as the collection's display name and location in the Preferences pane, and the collection's individual settings and display controls.

The following code example displays a collection of settings within a section named My Custom Preferences. It's displayed on the User Settings page in the Preferences pane.


services["preferences"].add({
  "My Custom Preferences" : { // The title of the section to which
                              // the following subsections will be added.
                              // If this section doesn't already exist,
                              // it will be added to the User Settings page.
    position: 500, // The index number of the section within the parent page.
    "Python Preferences": { // The title of this subsection.
      position: 100, // The index number of this subsection within the section.
      "I like Python" : { // The title of this setting, which
                          // will be added to the subsection.
        type: "checkbox",  // The type of control for this setting.
        position: 101,  // The index number of this setting within the subsection.
        values: [ "yes", "no" ], // Values for checked and unchecked states.
        setting: "myCustomPrefs/myPythonPrefs/@likesPython" // Where the setting
                                                            // will be stored.
      },
      "Times per week (up to 10) I use Python" : {
        type: "spinner",
        position: 102,
        defaultValue: 0, // Default spinner value.
        min: 0, // Lowest valid spinner value.
        max: 10, // Highest valid spinner value.
        setting: "myCustomPrefs/myPythonPrefs/@weeklyPythonTimesUsed"
      }
    },
    "Favorite Food and Drink": {
      position: 200,
      "My favorite type of food" : {
        type: "dropdown",
        position: 201,
        items: [  // Dropdown choices.
          { value: "Grains", caption: "Bread" },
          { value: "Grains", caption: "Cereal" },
          { value: "Dairy", caption: "Cheese" },
          { value: "Fruits", caption: "Fruits" },
          { value: "Meat", caption: "Meat" },
          { value: "Dairy", caption: "Milk" },
          { value: "Grains", caption: "Pasta" },
          { value: "Grains", caption: "Rice" },
          { value: "Vegetables", caption: "Vegetables" },
          { value: "Dairy", caption: "Yogurt" },
          { value: "Other", caption: "Other" },
          { value: "None of the above", caption: "None of the above" }
        ],
        setting: "myCustomPrefs/myFoodPrefs/@myFavoriteFood"
      },
      "My favorite drink" : {
        type: "textbox",
        position: 202,
        setting: "myCustomPrefs/myFoodPrefs/@myFavoriteDrink"
      }
    }
  }
}, plugin);

To display this section near the end of the User Settings page in the Preferences pane, you specify a relatively larger index number (500). Sections with larger index numbers are placed toward the ends of pages. Similarly, subsections with larger index numbers are placed toward the ends of sections, and settings with larger index numbers are placed toward the ends of subsections. To see the index numbers of sections, subsections, and settings in the Preferences pane, add ?menus=1 to the end of your environment URL and then reload your environment. To hide these index numbers, remove ?menus=1 from the end of your environment URL, and then reload your environment.

Set Existing Preference Settings

To set the value of an existing preference setting, use the set method of the settings service, and specify the path to the setting and the value to set.

To view your existing project settings, choose AWS Cloud9, Open Your Project Settings. To view your existing user settings, choose AWS Cloud9, Open Your User Settings on the menu bar.

The following code example displays the Open Files section in the Environment window.


services["settings"].set("user/openfiles/@show", "true");

This is equivalent to manually choosing Show Open Files in the Environment window's settings context menu. To see this value, choose AWS Cloud9, Open Your User Settings on the menu bar. Then look in the settings JSON for the following value. For brevity, ellipses (...) represent omitted JSON.


{
  "ace": {
    ...
  },
  "breakpoints": {
    ...
  },
  ...
  "openfiles": {
    ...
    "@show": true
  },
  ...
}

Get Preference Settings

Use the get method of the settings service to get the value of a preference setting, specifying the path to the setting.

The following code example displays various custom preference settings in a dialog box.


var settings = services["settings"];

services["dialog.alert"].show(
  "Custom Preferences",
  "My Custom Preferences",
  "Likes Python: " +
  settings.get("myCustomPrefs/myPythonPrefs/@likesPython") + "\n" +
  "Number of times using Python per week: " +
  settings.get("myCustomPrefs/myPythonPrefs/@weeklyPythonTimesUsed") + "\n" +
  "Favorite food category: " +
  settings.get("myCustomPrefs/myFoodPrefs/@myFavoriteFood") + "\n" +
  "Favorite drink: " +
  settings.get("myCustomPrefs/myFoodPrefs/@myFavoriteDrink")
);

Working with Side Panels

Built-in side panels include windows such as Environment, Outline, and Debugger. You can also create your own custom side panels.

Show and Hide Side Panels

To access side panels, use the panels service.

To get the list of all available side panels, use the panels property.

To get the list of side panels that are currently showing, use the activePanels property.

To show or hide a side panel, use the activate or deactivate method.

Side panels have corresponding buttons. To show or hide these buttons, use the enablePanel or disablePanel method.

The following example demonstrates all of these properties and methods.


var panels = services["panels"];

// Lists all side panels that are currently shown.
console.log(panels.activePanels);

// Lists all available side panels.
console.log(panels.panels);

// Shows the Debugger side panel, if it isn't already shown.
panels.activate("debugger");

// Hides the Environment side panel, if it isn't already hidden.
panels.deactivate("tree");

// Removes the Outline side panel button, if it isn't already removed.
panels.disablePanel("outline");

Create a Custom Side Panel

Use the Panel object to create a side panel, and specify settings such as the side panel's caption and side location.

To format the side panel, use the on method.

To load and then display the side panel, use the load and show methods.

The following example creates, loads, and displays a custom side panel.


var Panel = services.Panel;
var zooPanel = new Panel(
  "AWS Cloud9",
  [],
  {
    index: 100,
    caption: "Zoo",
    where: "right",
    autohide: true
  }
);

zooPanel.on("draw", function(e) {
  e.html.style.padding = "10px";
  e.html.innerHTML = "<h1>Welcome</h1>" +
    "<p>Welcome to our zoo.</p>" +
    "<p>We have the following animals to visit:</p>" +
    "<ul>" +
    "<li>Bear</li>" +
    "<li>Lion</li>" +
    "<li>Monkey</li>" +
    "<li>Octopus</li>" +
    "</ul>" +
    "<h2>We want to hear from you!</h2>" +
    "<p>Please send us your feedback.</p>" +
    "<a href=\"mailto:the-zoo@example.com\">the-zoo@example.com</a>";
});

zooPanel.load();
zooPanel.show();

Working with Builders

You use builders to build code. If AWS Cloud9 doesn't provide a built-in builder for your programming language, you can create one manually or programmatically. To create a builder manually, see Create a Builder or Runner.

List All Available Builders

Use the build service to work with builders. The following code example uses the listBuilders method to list all builders that are available to your environment.


var build = services["build"];

build.listBuilders(function (err, builders) {
  if (err) {
    services["dialog.alert"].show(
      "Error",
      "Builders Listing Error",
      "Cannot display the list of builders: " + err
    );
  } else {
    services["dialog.alert"].show(
      "Success",
      "Builders Listing",
      "The list of builders is:\n\n" + JSON.stringify(builders)
    );
  }
});

List Information about an Individual Builder

Use the build service to work with builders. The following code example uses the getBuilder method to list information about the built-in CoffeeScript builder.


var build = services["build"];
var builderName = "CoffeeScript";

build.getBuilder(builderName, false, function(err, builder) {
  if (err) {
    services["dialog.alert"].show(
      "Error",
      "Builder Listing Error",
      "Cannot display information for '" + builderName + "': " + err
    );
  } else {
    services["dialog.alert"].show(
      "Success",
      "Builder Listing",
      "The builder definition for '" +
        builderName + "' is '" + builder.cmd + "'.");
  }
});

Create a Custom Builder

Use the addBuilder method of the build service to create a builder. The following code example creates a builder that uses G++ to build C++ code. To learn how to specify what a builder does when it builds, see Define a Builder or Runner.


var build = services["build"];

build.addBuilder("G++", {
  "cmd": [ "g++", "-o", "$file_base_name", "$file_name" ],
  "info": "Compiling $file_name and linking to $file_base_name...",
  "selector": "source.cpp"
}, plugin);

Working with Runners

You use runners to run code. If AWS Cloud9 doesn't provide a built-in runner for your programming language, you can create one manually or programmatically. To create a runner manually, see Create a Builder or Runner.

List All Available Runners

Use the run service to work with runners. The following code example uses the listRunners method to list all runners that are available to your environment.


var run = services["run"];

run.listRunners(function (err, runners) {
  if (err) {
    services["dialog.alert"].show(
      "Error",
      "Runners Listing Error",
      "Cannot display the list of runners: " + err
    );
  } else {
    services["dialog.alert"].show(
      "Success",
      "Runners Listing",
      "The list of runners is:\n\n" + JSON.stringify(runners)
    );
  }
});

List Information about an Individual Runner

Use the build service to work with runners. The following code example uses the getRunner method to list information about the built-in Ruby runner.


var run = services["run"];
var runnerName = "Ruby";

run.getRunner(runnerName, false, function(err, runner) {
  if (err) {
    services["dialog.alert"].show(
      "Error",
      "Runner Listing Error",
      "Cannot display information for '" + runnerName + "': " + err
    );
  } else {
    services["dialog.alert"].show(
      "Success",
      "Runner Listing",
      "The runner definition for '" +
      runnerName + "' is '" + runner.cmd + "'.");
  }
});

Create a Custom Runner

Use the addRunner method of the run service to create a runner. The following code example creates a runner that runs Python code. To learn how to specify what a runner does when it runs, see Define a Builder or Runner.


var run = services["run"];

run.addRunner("Python", {
  "cmd": [ "python", "$file_name", "$args" ],
  "info": "Running $file_name...",
  "selector": "source.py"
}, plugin);

Working with Tabs

The AWS Cloud9 IDE uses tabs to display files and some types of windows, for example, code files, terminal sessions, Immediate tabs, and run configurations. Tabs are contained within panes. Tabs can contain editors or documents, for example, the JavaScript code editor or the contents of a read-only file.

List All Available Tabs

Use the tabManager service to work with tabs. The following code example displays the titles of all the tabs that are currently displayed and the names of the panes that host these tabs.


var tabManager = services["tabManager"];
var tabs = tabManager.getTabs();
var tabsList = "";

for (var i = 0; i < tabs.length; i++)
{
  tabsList += tabs[i].title + " (in " + tabs[i].pane.name + ")\n";
}

services["dialog.alert"].show(
  "Tab Manager",
  "Tabs",
  tabsList);

Create a Custom Tab

Use the open method of the tabManager service to create a custom tab. The following code example creates a text file and also creates a tab that displays the file's contents inside of a text editor.


var tabManager = services["tabManager"];

tabManager.open({
  path: "~/hello.txt",
  pane: tabManager.findPane("pane0"),
  editorType: "ace",
  active: true,
  focus: true,
  value: "Hello, World!"
});

Warning Javascript is disabled or is unavailable in your browser.

To use the AWS Documentation, Javascript must be enabled. Please refer to your browser's Help pages for instructions.

Document Conventions

« Previous Next »