Hello WaveyWeb

We will now begin working with the WaveyWeb sample project. WaveyWeb demonstrates a number of techniques from localizing and adding custom events to loading custom JavaScript libraries for use from page code. WaveyWeb is part of the example project workspace we set up earlier, but can be found on GitHub by visiting https://github.com/edwardcallahan/Easy-Web-Samples/tree/master/projects/WaveyWeb.

Often, the first step when undertaking a project is among the hardest. Fortunately, WaveMaker makes getting started rather simple. Choosing New Project from the welcome dialog brings up the New Project dialog. Other than project name, we only have to make two decisions to get started, and neither choice is undoable. Theme refers to the CSS theme, and WaveMaker includes eight built-in themes out of the box. My favorite in WaveMaker 6.5 is cool blue. As you will see later, you can create your own custom themes using the theme designer. Like most cross-project artifacts, themes are saved to the common folder, the sibling to projects within the WaveMaker home folder. Storing such creatures in the WaveMaker home location separates them from the Studio installation. If the contents of common were stored inside the Studio installation instead, they could easily be deleted or otherwise lost during uninstallation.

The other decision we need to make is regarding the template. In WaveMaker 6.5, templates are single page constructs only. It is not until WaveMaker 6.6 that templates gain features such as the ability to include services. With that said, the six templates provided with WaveMaker 6.5 are quite useful and provide a quick start to both desktop and mobile targeted applications. For the desktop, Tabs Template is my runaway favorite, and it is what we'll be using for our WaveyWeb project.

There are a few key regions of the studio we will need to be able to reference. The following screenshot highlights them:

The key regions of the Studio are:

The Palette, Model, and Service tabs contain three tabs and four tree views. The Palette tab is the palette of visual widgets available to us for drag-and-drop designing of our application. The other tabs are views of the current project, organized by type. All three tabs are searchable using the search editor at the top of the panel.

Let's view our newly minted project via the Model tree. In the Model view, we see the visual client-side components of the current page in a tree format. From here, we can see the tabs template's beauty lies in its simplicity. It has a single top level panel, panel3, within the layout box. Within which we have a header panel, panel1, a body panel, panel2, and a footer panel, panel6. You can and should rename components in any project that is not throw-away or might otherwise be used for any length of time. For small, simple projects, you can get away with naming only core components. For larger, more complex projects, naming nearly all components consistently can provide a good return on effort. This is particularly helpful when searching for a specific component in the project. For an explanation of a commonly used naming convention, the Apps Hungarian Notation, visit http://dev.wavemaker.com/wiki/bin/wmdoc_6.5/Component+Naming+Conventions.

Within the main body panel, panel2 in the template, we have a tab layer with three layers. This simple layout provides a functional and scalable layout that is suitable for building a variety of applications. For a large, multi-page application, the tab layers make great places to put page containers. We'll get back to that technique in the next chapter. For this trivial application, we'll put our widgets directly into the tab layers.

Add wm.GenericDialog to the project canvas by dragging and dropping the GenericDialog icon from the Palette tab to the Canvas region. Notice how it shows above the layout box, layoutBox1, in the model tree. This is because the dialog is not a child of the main layout. Dialogs, however, are constrained to the browser window at runtime.

Also in the top level menu we have the Edit menu. Edit contains what we'd expect it to contain: Cut, Copy, Paste, Delete, and Undo.