Back Home

Tutorial

The screenshot above is a view of the Learning Tool. There is a button bar along the top and five main text areas.

The button bar includes:

• A Compile Button that compiles ELVIS code into Java
• A Suppress Modifiers checkbox that suppresses the Java modifiers generated by the Compile Button
• An Executable checkbox that makes the compiled Java code executable
• A Language Chooser dropdown box that allows the user to pick the language they want ELVIS to be compiled into
• A Run button that compiles and runs the generated Java code as a mockup, if possible

The five main text areas are:

• A tree of the ELVIS Widget API Documentation that contains the Widget Hierarchy for the ELVIS widgets to be used to generate Java code
• A documentation pane that displays the widget information when a node in the widget hierarchy is selected
• An editable ELVIS Text Area where the user can write their own ELVIS code or can load a saved ELVIS document
• A Java Text Pane where Java code appears after the user compiles their ELVIS code by clicking the Compile button
• An error pane where errors appear if there is a problem with the user's ELVIS code

Example: A Button on a Window

The following example walks through creating a button on a window.

Step 1: Write the ELVIS Code

In the ELVIS Text Pane, enter the following code:

mockup: true;
Window myWindow {
    title: "Window Title"; 
    Button myButton { 
        label: "Button Text"; 
    }
} 

Step 2: Click "Compile"

Click the "Compile" button, save the file with a '.gui' extension, and watch what happens. Try checking the "Suppress Modifiers" and "Executable" checkboxes and observe their effect on the generated code.

Step 3: Check out the Java Code

The Learning Tool should now look like:

The Java Text Pane is now filled with the generated Java code. Take a look; you can now see how the Window called "myWindow" and the Button called "myButton" is written in Java. This file is saved in the directory at the top of the Text Pane; the user is free to take this code and change it outside of the Learning Tool.

Step 4: Click "Run" for a Mock-Up

By clicking the "Run" button, the user is actually compiling and running the code in the Java Text Pane. This will only generate a "Mock-Up," a Graphical User Interface that doesn't do anything. Notice that when you click "Run" for this example, nothing happens after clicking the button that appears. This is because the user hasn't written the back-end for the button. This is addressed in other parts of the web site.

Step 5: Understanding the Error Pane

Change the line

title: "Window Title";

to

WindowName: "Window Title";

and click "Compile." Now, the Learning Tool looks like:

An error has appeared in the bottom text pane; it directs the user to Line 2, where the compiler encountered an unfamiliar attribute. Fix this and click the "Compile" button again; the error has disappeared.

Step 6: Understanding the Widget Hierarchy

Say that the user did not know that title is the correct attribute for the title of a Window. They can use the Widget API in the right-hand pane to help them. The tree contains all the widgets that can be used to generate Java files. By clicking on a node, information about that specific widget type is displayed in the documentation pane below. A Window widget is a Container, so by expanding the Container node, we can look up how to define the title for a Window: