The most commonly used editor is the Script tab. Script is the page JavaScript source editor. This is the contents of the page JS file. For the main page, this is pages/Main/Main.js, as noted in the upper-right corner, just above the Completions panel.

The most common way to add page code is by using the JavaScript option in component events. Choosing JavaScript for an event automatically creates a function and places us in the source code script editor. For example, choosing JavaScript for the onShow event for layer1 creates a stub layer1 show event:

  layer1Show: function(inSender) {
  //Your on click event code here
    },

Alternatively, you can define the page function first and specify it for the on click event. In practice, it is usually easier to let Studio create the stub function.

Within Script is one of the most populous button bars of the source tabs. Starting from the left, we have save, which saves the entire project, and search, which searches within the source code currently being edited. Next we have import JS library, which imports the contents of a JavaScript source file from the resources folder by adding a combination of eval and wm.load to the bottom of the page source, just outside of the page declaration. This enables the contents of that imported library to be available to us in page code.

Next we have the blue circular arrows for the refresh button. If you choose to use an external editor to edit the page code while the page is open in Studio, use this button to refresh the code editor before saving the project to avoid losing your external changes. As we will see when we discuss Java Services, the Java equivalent of this button is invaluable when using a Java ID such as Eclipse.

The next two buttons deal with how our code looks. The reformat code button applies a code styling formatter to our code whereas the toggle line wrapping button toggles, well, line wrapping.

The lightning bolt auto complete is no longer needed now that the Completions panel is available. For many, one of the more intimidating aspects of the source code editor is facing a blank screen and trying to figure out what to type. To aid in that situation, Studio provides a completion engine that suggests possible completions. For example, enter this. in the page start function we added to our button and a few things happen:

    start: function() {
        this.
    },

First, a red X icon appears in the left margin as shown in the following screenshot:

This is the built-in syntax checker powered by Google's closure compiler, which can be found at https://code.google.com/p/closure-compiler/. The red X indicates that you probably have an error in your code. In this case, it says missing identifier, as this. is an incomplete statement. At the same time, the Completions panel updates with possible completions. In the context of page code, this. refers to the current page, and it is an easy way to access components on a page without hardcoding the page name into source. If we add a b for button, for example, this.b, our completion reduces to components starting with b. In this case, we now see only the button1 we added to our layers earlier. Doubling-clicking on button1 from the completions list completes our statement out to this.button1 and refreshes the Completions panel to list a button's methods and members. We could then select setCaption(), the method for setting the caption of a component. The description panel below the Completions panel now describes the setCaption() function, complete with examples. Meanwhile, the setCaption() call is completed to match the signature with a placeholder value, Click Me, for the inCaption parameter of setCaption().

this.button1.setCaption(“Click Me”);

Replace inCaption with whatever string the new caption should be. Don't forget to end your statement with a semicolon. It is not required, but is generally recommended, and it makes Doug Crockford happy too (http://javascript.crockford.com/code).

The next icon looks like a capital letter "A" and brings up the language dictionary editor. The script language dictionary is like the language dropdown in the canvas, but for localizing terms used in code. Continuing our button caption example, we could add a term to the dictionary for the button caption. The getDictionaryItem call, automatically inserted by the Add to Script button, replaces the term name with the localized term if a term was defined for the visitors' browsers locale. In the following example, the term has been called Main_continue_button_caption_term to indicate it is the caption of the continue button on the main page:

this.button1.setCaption(this.getDictionaryItem(“SCRIPT_Main_continue_button_caption_term”));

The rightmost button is yet another help button. This one is help for the editor. The editor embedded in WaveMaker 6.5 is Ace, http://ace.ajax.org. The editor help describes nine functions supported, such as Ctrl + L for go to line.

As we move to the right the next panel under Source is CSS. Here we can edit any CSS classes we have defined in the project. There's one tab for application-wide CSS and another for page-specific CSS. Again, the exact files being edited are noted in the upper-right corner.

As with page script, it is more common for users to populate this page using Studio. Creating a CSS class from the styles section of the Properties panel adds classes to the project CSS. We'll discuss CSS in detail in Chapter 6, Styling the Application. There's also a good styling section to the product documentation. The styling wiki link the rightmost side of the CSS button bar gets you there: http://dev.wavemaker.com/wiki/bin/wmdoc_6.5/StylingWidgets.

The use of markup to add HTML to a project is deprecated. The Markup tab remains from when HTML was added to a project using the wm.Content widget and div IDs. Now, HTML can be added to the resources folder and presented using the wm.Html widget.

The Widgets tab is read-only. It shows you the current state of the page's widgets file, in which the JSON representation of our model tree is written. The widgets file is rewritten by Studio every time a project is saved. Expert users may use the widgets file to help diagnose a problem or even edit a project's content. Most users never need worry about this tab.

App Script and App Widgets are the application defined versions of Script and Widgets tabs. Components defined in the application scope are accessible to all pages in a project. Components defined with page ownership are only accessible to that page.

The Themes tab is where you'll find the theme designer. Here you can create themes that can be used to define the look and feel for multiple projects. Editing the Studio-provided themes is not recommended. If you want to start from an existing theme, make a copy first instead. Documentation for the theme designer can be found at http://dev.wavemaker.com/wiki/bin/wmdoc_6.5/ThemeDesigner.

The Documentation tab is the aggregation of any notes placed on components. The last layer of the properties of a component is Docs/Diagnostics. In which, developers can add notes to a component. This Documentation tab displays and prints those notes. Such a reference can be helpful to others in understanding your project. This can reduce the transition time for larger projects with many components, as even a good naming convention can take time to learn.

Continuing from the left we have Server Logs. This tab displays the embedded Tomcat's output. The catalina.out file of the WaveMaker Tomcat can also be tailed as the file wm.log in the logs folder under WaveMaker home. The server's wm.log file is a great place to check for errors when things don't work server-side. Studio provides a view of the wm.log file for you. This can be very useful if you don't have access to the file system of the host running Studio's server.

This brings us to the Resources tab, also known as the resource manager (http://dev.wavemaker.com/wiki/bin/wmdoc_6.5/ResourceManager). The resource manager is Studio's built-in file manager.

The most common use case is to add image files to the project resource folder. The project's resource folder is under webapproot, so the files are available for loading at runtime. The resources folder in particular has been mapped into the project. You can use the binding dialog for resources. This absolves you of having to work out the correct path to the image when you want to set a picture widget's source property. We've already seen how JavaScript files can be imported into the page source just as easily.

The Resources tab can be used on mostly every part of the file system you might want to get at. You can upload JAR files to the project's classpath, for example. Adding JAR files to the project classpath allows you to use the classes of the JAR file from custom Java code. This access can be extremely useful. When running in the cloud such as the Cloud Foundry version of Studio, on the other hand, it may be the only direct file system access available.