Exploring the sample application for WaveMaker Web-Building tools || Part-9

Let's continue exploring the application in the Studio. Don't worry if you don't yet understand everything you are about to see. We will explain all of this in detail in future posts. For now, we just want to explore the application and have a bit of fun.

Studio provides us with a visually-oriented way to view the application's construction. Selecting the Canvas tab brings us to the visual layout of the application. In the canvas area and the model tree, we can see all the visual components or widgets that are on this page of the application. Selecting a component, such as an editor or service variable, either by clicking on it in the canvas area or from the model tree, shows its properties in the property editors on the right. For example, select the title label at the top named label Title. It's the label that says CRM Simple with a blue background. Once selected, on the right you'll see a caption property with the value CRM Simple. If you change the value of the caption property, the title shown in the label will also change as soon as you blur the
property editor. We'll discuss using the Studio in detail in the next other post, Using Studio.

Let's interact with the application at a different level. Open the developer tools built into Chrome. The developer tools can be accessed by clicking on the Chrome menu in the upper-right corner, choose tools, then developer tools. Alternatively, you can use the keyboard shortcut to open the developer tools. On Windows and Linux, use Ctrl + Shift + J. On OS X, press command + option + J. We can do many interesting things here in the developer tools. We'll be using the developer tools as
our JavaScript debugger in the other next post, Debugging.

Ensure you have the console open. You should see an arrow > symbol, next to which you can enter commands. If you know the JavaScript console, you know how we can execute JavaScript here. We could enter the classic alert("Hello Wavy World") for example to raise an alert dialog. This means from here we can also access the components and the HTML elements, or DOM nodes, of the application. In the case of a WaveMaker application, entering app at the console prompt will return the application object. Entering app.theme will return the string name of the theme used by this application, wm_coolblue in the case of CRM Simple. We'll discuss theming in the other next post, Styling the Application, as part of CSS and styling.

In Studio, we saw how easy it was to change the caption of the title label. We can also change the title from the console. Enter main.labelTitle.setCaption ("Hello Web"); the title of the app is now Hello Web. We'll be working with applications in this context on and off while working with WaveMaker.

Finally, let's take a look at our application from the file system. Open the CRM_Simple project folder in a file system tool such as Finder or Explorer. If you are using the Studio on a remote server, use Source, Resources, and select Project from Folder Shortcuts to view the remote file system. Within the services folder, we see our custpurchaseDB service, in which we will find all the generated source code for our project including the Hibernate mapping for our database schema.

Under webapproot, we see the top level of our deployed application, including index.html. Under the pages folder, we see a folder for each page in our project. Being a Java application, we have a WEB-INF folder, which contains our web.xml as well as our classes and lib folders. Don't worry if this doesn't make sense yet, we'll learn about this soon enough.

There is a lot we can learn by looking at the project on the file system. Touring the file system is always on the day one agenda when training teams on WaveMaker. We'll continue our tour of the project from the file system as we dig into the application architecture in the next chapter.

Downloading the example code:
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com . If you purchased this book elsewhere, you can visit  http://www.packtpub.com/support and register to have the files e-mailed directly to you. The example code for this book is also available on GitHub at https://github.com/edwardcallahan/Easy-Web-Samples. The example code has been published under Apache 2.0 license.