Book Image

Easy Web Development with WaveMaker

By : Edward Callahan
Book Image

Easy Web Development with WaveMaker

By: Edward Callahan

Overview of this book

Developers of all levels can now easily develop custom, responsive, and rich web application clients with secure, scalable servers utilizing relational databases and RESTful services using WaveMaker Studio. Whether you need a departmental business application or a form application for your weekend club, this book will show you how to design, develop, and deploy professional grade web applications with WaveMaker. Easy Web Development with WaveMaker will help you use WaveMaker to design, develop, and deploy rich, responsive web applications, even if you are not a programmer. If you need to build a data-driven web application, but you only know ‘enough to be dangerous,' you need this book. This book examines every angle of using WaveMaker to build applications, from dissecting examples to customizing, deploying, and debugging your own applications. This book enables the non-professional programmer to become comfortable not only with using WaveMaker Studio itself, but also with the artefacts produced by the studio as well as the runtime and services provided by the WaveMaker framework. You will learn everything, from how customize the user experience with JavaScript and CSS to integrating with custom Java services and the Spring Framework server-side. Easy Web Development with WaveMaker 6.5 is packed with examples, code samples, screenshots, and links to equip you to be successful with WaveMaker Studio.
Table of Contents (23 chapters)
Easy Web Development with WaveMaker
About the Author
About the Reviewers
Styling the Application
Working with Databases
Utilizing Web Services

Introducing CRM Simple

Simple CRM is precisely what its name implies; a simple customer relationship management (CRM) example application. We have exactly what you'd expect in a basic sample of a CRM application; customers, orders, and ordered items. It is a database-driven application, where the schema consists of five tables and includes one-to-many and many-to-many relationships.

Open the project named CRM_Simple in the Studio and run the app. The Run button in the top menu bar deploys the application and opens a new browser window.

If there are no problems and the database connection is good, the new application is loaded in the new window with the customer list populated. The WaveMaker launcher process sends the Studio URL to the default browser on the system. You can specify a specific browser in the preferences accessed by the Advanced Options button when the Studio has been stopped.

Or, if you prefer, simply copy the URL of the application from the launched windows into the desired browser; in this case, we'll be using Google Chrome.

The first thing we are likely to notice is the size of the layout. The layout of this particular application targets a tablet. If you are using the application from a touch input device, the lists are scrolled with a flick of the finger, as we would expect. If, on the other hand, you load the application in a desktop browser, scroll bars appear where needed, and you can use your mouse to scroll through the list.

At the top of the customer area is a search box. There's some placeholder text informing us that we can search using any part of a company name. Typing city, for example, immediately returns us both "City Light Books" and "Fog City books." It does this even though only City Light Books begins with the word city, and both entries capitalize "city." The X icon at the right end of the search editor clears out our search and resets our results with a single action.

As we select different customers from the list of companies, the details near the top of the screen, including the companies' contact picture, refreshes to the selected customer. The companies Twitter ID is presented as a link, should we wish to send the customer a quick message via Twitter. At the same time, the list of orders to the right is updated. As we make our selections, the lists highlight the currently selected items, lest we forget which customer or order we have chosen. Likewise, when we select an order presented by order date, we are presented with the line items of the chosen order.

Now let's begin to enter a new customer by clicking on the New Customer button. We are presented with a straightforward form. The company name, address, city, state, and zip code fields are required, as suggested by the red asterisk next to the labels. As we would expect from a modern application, validation helps the user complete the form successfully by ensuring the user has entered acceptable data, such as ensuring a phone number has the correct number of digits. When you enter values for all the required fields, the Save button becomes enabled. Click on or otherwise point at an element and that element is given the focus of the application. It becomes the active element that receives input. Moving focus away from that element triggers the blur event for the node. If we trigger the blur event for any required editor in the form without entering a value, validation displays both a warning icon and a friendly pop-up message.

Clicking on the Inventory button navigates us to the list of items in our fictitious book supplier inventory. Again, highlighting provides feedback on the selection we have made. Here we have another form which we can update an existing item, create a new item, or delete an existing entry. When taking a new order, the date editor opens a calendar date picker, just as we'd expect. The Companies button quickly navigates us back to our customer view, ready to look up another.

Not a bad little application, eh? We've seen styled widgets, such as the search editor, combined with rich editor validation and in-form assistance assembled to present intuitive database forms and navigations. Would you call it "pixel perfect" or so compelling that you expect it to race to the top of app store downloads? No, probably not. Is it usable and functional? It certainly is. Does it solve a problem or deliver a business solution, however fictitious the business may be? Yes, yes it does.

Now consider that almost no code was used to create this application. Oh sure, there's plenty of Java and JavaScript being executed, but the vast majority of the effort in building a simple application such as this is done visually. The developer need only select values, tick on and off desired behaviors, and connect events with responses. Many WaveMaker users use some JavaScript code to get the exact behaviors they want in the browser. Java can also be used for custom server-side services. This application does use a data expression analogous to a formula in a spreadsheet cell to sum order totals. However, such expressions are no more complicated than macros in a Microsoft Office document.

In this one example, we get a hint of the professional grade aspects of our application. Because the data access layer is built using popular open source frameworks, the level of customization shown does not require us to code those features ourselves.

Exploring the sample application

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 chapters. 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 labelTitle. 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 Chapter 3, 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 Chapter 15, 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 Chapter 6, 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. In Chapter 10, Customizing the User Interface with JavaScript and Chapter 11, Mastering Client Customization, we'll focus on using JavaScript to customize our application.

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. We'll discuss how this service came to be in Chapter 7, Working with Databases.

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 . If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

The example code for this book is also available on GitHub at The example code has been published under Apache 2.0 license.