Chapter 4. Using WebIDE

Table of Contents

Understanding WebIDE
Changing the Landing Page
Using CoffeeScript Files
Cleaning Up the Deployment Folder
Creating a Custom Action in WebIDE
Locking WebIDE

Understanding WebIDE

WebIDE allows you to create custom front ends for Elixir Ambience web interface from within the Ambience environment.

This option is available only if you are an administrator or a member of the WebIDE group.

Click the WebIDE link from the Ambience web interface, as shown in Figure 4.1, “WebIDE Link”.

Figure 4.1. WebIDE Link

WebIDE Link

The WebIDE looks as shown in Figure 4.2, “WebIDE”:

Figure 4.2. WebIDE


Changing the Landing Page

To change the Ambience landing page:

  1. Right-click the web directory and select Add File.
  2. Name it sample.html for example. Click OK.
  3. Type in your code. An example is shown in Figure 4.3, “Landing Page Code Sample”. The editor highlights code, and also syntax errors if any.

    Figure 4.3. Landing Page Code Sample

    Landing Page Code Sample
  4. Click Save to save the changes. Notice that the Save button turns pink when there are unsaved changes, as shown in Figure 4.4, “WebIDE Unsaved Changes”

    Figure 4.4. WebIDE Unsaved Changes

    WebIDE Unsaved Changes
  5. To preview your sample, right click the file and select Preview as shown in Figure 4.5, “WebIDE Preview Option”

    Figure 4.5. WebIDE Preview Option

    WebIDE Preview Option
  6. The preview is displayed as shown in Figure 4.6, “WebIDE Preview Result”

    Figure 4.6. WebIDE Preview Result

    WebIDE Preview Result
  7. Change the landing page link to the one we created with WebIDE. Click Admin > Web and change the landing page as shown in Figure 4.7, “WebIDE Change Landing Page”

    Figure 4.7. WebIDE Change Landing Page

    WebIDE Change Landing Page
  8. Logout and then login back to Ambience. Your landing page will be the one that you created with WebIDE.

Using CoffeeScript Files

You can use other files such as JavaScript and CoffeeScript files as your source. CoffeeScript files are automatically converted to Javascript output using Ant.

The following sample demonstrates using a CofeeScript file:

  1. Create a new folder for your script - say sample.
  2. Right click the sample folder and select Upload File.
  3. Click Choose File and select the build.xml file inside the /misc/webide/ folder. Click OK.
  4. The build file is displayed as shown in Figure 4.8, “build.xml Source”

    Figure 4.8. build.xml Source

    build.xml Source
  5. Add a new file called
  6. Enter the coffee script code as shown in Figure 4.9, “CoffeeScript Source”.

    Figure 4.9. CoffeeScript Source

    CoffeeScript Source
  7. Notice that when you save the CoffeeScript code, Ant automatically compiles it into JavaScript. You can see the compilation messages in the log window at the bottom.

Cleaning Up the Deployment Folder

When you rename a file or a folder (asset) from WebIDE, the original output is not automatically overwritten, but still exists in the deployment folder.

Click Clean to clean the deployment folder and re-build all the assets.

Creating a Custom Action in WebIDE

To create a custom action in WebIDE:

  1. Create a build.xml file in the top level WebIDE folder, as shown in Figure 4.10, “Top Level build.xml Source”.

    Figure 4.10. Top Level build.xml Source

    Top Level build.xml Source
  2. Modify build.xml to include a custom target. Note that the target name should begin with action-. This is shown in Figure 4.11, “Top Level Action”.

    Figure 4.11. Top Level Action

    Top Level Action
  3. Save the code and refresh WebIDE. You will now see the custom action as a button, as shown in Figure 4.12, “Custom Action Button”. In our example, it is "Do This Now!".

    Figure 4.12. Custom Action Button

    Custom Action Button

Locking WebIDE

Once you are done building your custom front end, you can lock WebIDE to prevent any further changes.

Click Admin > Web. Select the Lock WebIDE option as shown in Figure 4.13, “Locking WebIDE”.

Figure 4.13. Locking WebIDE

Locking WebIDE

The webIDE is locked by default, if you are using Ambience 3.x data. If you are starting from Ambience 4.0 afresh, you can choose to lock and unlock it, as required.