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
Credits
About the Author
Acknowledgement
About the Reviewers
www.PacktPub.com
Preface
6
Styling the Application
7
Working with Databases
8
Utilizing Web Services
Index

Setting up your workspace


In order to build and deploy applications of your own, you'll need WaveMaker Studio. Even if you are not ready to build your own application and just want to examine the sample applications from a developers point of view, you'll want to view the project from within the Studio. So, we shall begin with setting up WaveMaker Studio.

Getting the right version

This book is about WaveMaker Version 6.5. WaveMaker is an active open source project with on-going development. The first 6.5 Version of WaveMaker, 6.5.0, was released in October 2012. Patch releases, such as 6.5.1, have followed. In time, newer versions such as 6.6.0 will also be released. For best compatibility with this book and its sample projects, you will want to use the latest release version of 6.5 available, currently 6.5.3. Newer versions of the Studio will generally open and run the sample projects, but the constant evolution of the project will result in changes that may render some things discussed in this book obsolete or incorrect. Instructions provided in this book are for Version 6.5 and may not exactly match how things are done with newer versions.

Now that we know what version we will be using, we will review our browser and installation options. There are two common ways to run the Studio: installing a release package or, for advanced users, building from source. First, let's ensure we're using a good browser.

Being browser smart

The reality is that not all browsers are created equal. Things such as rendering speed, developer support, and support of HTML5 features can vary widely among browsers. While there are many browsers out there, more than many people even realize, we shall concern ourselves only with the most common ones. Of those, we can generally categorize them into three families based on their underlying layout engines. Here, the "big three" for both desktops and mobile are—Gecko: used by the Mozilla Foundation for Firefox, WebKit or Webkit forks: used by Apple's Safari and Google's Chrome and Trident: used by Microsoft's Internet Explorer.

WaveMaker applications make heavy use of JavaScript in the browser. Therefore, the faster a browser can parse and run JavaScript, the faster a WaveMaker application will generally run in that browser. Deployed WaveMaker applications will run in the most common browsers. For older versions of Internet Explorer that lack HTML5 support and have rather slow JavaScript engines, we can use plugins such as Google Chrome Frame. Chrome Frame enables our JavaScript application to run in the Chrome V8 engine even when the application is loaded from an older version of Internet Explorer. You can learn more about Chrome Frame at https://developers.google.com/chrome/chrome-frame.

Tip

In June 2013, Google announced the retirement of Chrome Frame.

We may not get to dictate what browser our users use to run our application, but we do get to choose what browser we primarily develop in. Here too, some browsers are better than others. As such, Chrome and Safari are the preferred development browsers by most WaveMaker developers today. In this book, we'll be using Google Chrome, as it is fast, has excellent developer support, and is available on all major platforms. You are welcome to use other browsers; however, we will only using Chrome in this book.

WaveMaker applications work in the most popular modern browsers. However, those browsers may interpret your Cascading Style Sheets (CSS), JavaScript, or resultant HTML differently, and you'll want to test your application in the browsers your users will be using before you declare victory. This testing may require using another system or a virtual machine (VM). Someone developing on OS X, for example, might use a VM running Windows in order to test with Internet Explorer. WaveMaker handles most of all the cross-browser issues for you, and your application may "just work" in other browsers. However, you'll still want to test it.

Tip

If something isn't working right, clear the browser cache to ensure the correct file loading. We'll discuss why in Chapter 15, Debugging.

As a general rule, the more customization you do, the more cross-browser testing you'll want to do. I suggest you first get your application working in a developer-friendly browser to flush out the general issues. Then, cross-test in other supported browsers to get the browse-specific issues before declaring the application as done.

Installing locally using a release package

Installing a release package is the easy way to install the Studio. WaveMaker 6.5 is distributed as an installation EXE for Windows, a DMG disk image for Mac OS X, and as RPM and DEB packages for Linux. You will need administrator or root access to install WaveMaker. You will also need the Java command available to run the embedded Tomcat. WaveMaker 6.5.3 ships its own compiler, the same one used by eclipse for JDK 6 compilation, but you still need a JRE to run the embedded Tomcat.

You can install the Studio on your local machine or on a remote host on the network. If you install on a remote host, you only need to point your browser at the remote host instead of the local host.

The installation packages for the latest stable release can be downloaded from the WaveMaker site, http://www.wavemaker.com/downloads/. For installation packages of older releases, such as downloading Version 6.5.x when it is no longer the latest version, visit http://dev.wavemaker.com/wiki/bin/wmdoc/Releases.

The release packages are available for Windows, OS X, and Linux. For more information about installing WaveMaker on your platform of choice including overcoming installation issues, see the install guide in the documentation located at http://dev.wavemaker.com/wiki/bin/wmdoc_6.5/WMInstallGuide.

The first thing you need to do after installing a release package is install the dependency bundle. These are files that are required to run the Studio, but cannot be distributed with WaveMaker Studio. WaveMaker is distributed under the Apache 2.0 license. A few libraries used by the Studio, such as the Ace editor, are licensed under the General Public License (GPL). The Apache license is not compatible with most GPLs. Therefore, you must download the GPL libraries separately. To make this as simple as possible, the Studio configuration tool will help you download a pre-packaged bundle of libraries with the correct versions needed. A few other libraries used by WaveMaker, such as the JAR file wsdl4j used for web services, have incompatible licenses. You will be prompted to download and install these libraries if you perform an action that requires an additional library.

Tip

If you experience difficulties running the Studio, the debugging process is described in Chapter 15, Debugging. Studio is a WaveMaker application, and the processes are quite similar as a result.

Building a Studio from GitHub

Building your own Studio from sources takes the most effort to set up, but provides the most flexibility and control over the development environment. It is also the first step should you wish to get involved in open source software and contribute to the development of WaveMaker. This configuration is recommended for advanced users. If you are not comfortable building source code using Maven, use the installed version described previously instead.

To build your own Studio, you will need the following:

  • A Java 6 JDK

The following are optional, but highly recommended:

  • Tomcat 6, for running your Studio

  • A git client, to keep your version up to date

To clone the repository, use the following git clone command:

git clone https://github.com/SpringSource/wavemaker.git

You will want to use the 6.5.X branch:

https://github.com/SpringSource/wavemaker/tree/6.5.X.

Use the git checkout command:

git checkout 6.5.X

The preceding git checkout command is used to switch your local copy to the 6.5.X branch. The 6.5.X branch is stable and contains any updates made to 6.5 since the 6.5.3 release. Tags for specific releases, such as 6.5.2, also exist should you want the source for a specific release version.

The master branch, on the other hand, is a work in progress for the next version, and may not be completely stable at any given moment. You generally will not want to use the master branch unless you know what you are doing and are comfortable dealing with the possible consequences. With that said, the master branch is an easy way to see the newest features and fixes in the WaveMaker project.

If you don't have or don't want to use a git client, you can download the source code as a .zip or .tar.gz file directly from GitHub. Using the git client has the advantage of being able to pull updates without having to download the whole source tree, and easily you can switch branches. Downloading as a bundle is an easy way to access the source code. If you just want to browse the source code without downloading it all, you can do so via the GitHub site, https://github.com/SpringSource/wavemaker.

The project README explains how to clone, build, and deploy WaveMaker. It is available at https://github.com/SpringSource/wavemaker/blob/master/README.md.

Tip

The inplace deployment to your own Tomcat lets you use your Tomcat installation. Using the inplace target option with a git clone workspace is the easiest way to update Studio without building an installation package. To use this feature, you will need the manager app enabled with accounts that match those in /wavemaker-tools/src/main/resources/com/wavemaker/tools/project/app-deploy.xml.

Setting up the examples

Now that you've got a Studio in your browser, let's get the examples set up so you can view them in the Studio. The examples are stored on the code sharing site GitHub. If you aren't familiar with GitHub or otherwise don't have a git client, don't worry. GitHub lets you download and unpack the repository as a .zip file from their site by visiting the following URL:

https://github.com/edwardcallahan/Easy-Web-Samples/archive/master.zip.

If you do have a git client installed, the easiest way to get the examples is to clone the example repository using git clone, as shown in the following command:

git clone https://github.com/edwardcallahan/Easy-Web-Samples.git

However, when you get the example projects, they will need to be copied to a folder on the host running the WaveMaker Studio Tomcat server. Either copy the projects into your Studio's project folder or update the project folder. To do that, go to the WaveMaker File menu and select the Preferences… menu item to set your WaveMaker Folder to the Easy-Web-Samples directory.

You should now see the sample projects listed in the open project dialog. Each project in the bundle also contains a project export in its export folder. Use the Studio file menu to import each project export individually.

Some of the sample projects use a MySQL database and others use an embedded HSQLDB database. HSQLDB examples require no configuration. If a project uses a MySQL database, a database export is included with the project in the src directory. The free community edition is fine as no enterprise version features are used. You'll need to be able to access a MySQL server to import these exports. Setting up MySQL is not required to run those examples, but the examples are more fun with data.

Importing the database

If you want to use the database, you'll need to import the database export file named custpurchase.sql in the project src folder. One way to import the database export is to connect to your MySQL server using the mysql command line client. As the export creates the database for us, we only need to source the file. The easiest way to do this is to start the mysql client from the directory containing the export file. Then, from within the mysql client, use mysql> source custpuchase.sql to load the database schema and data from the file.

We'll cover working with databases in Chapter 7, Working with Databases, but examples are better with data, so let's configure our Java Database Connectivity (JDBC) connection to the database using the following steps:

  1. Open the Services tab with the project open in the Studio.

  2. Select the custpurchaseDB service from the service tree.

  3. Open the database connections dialog by clicking on the wrench button.

In the database connection settings dialog, update the Username, Password, and Host fields to use the same connection you used to create the database in MySQL. Should your MySQL server not be running on port 3306, enter the correct port number as well. No other fields require review for this. The connection URL will be updated based on your other entries. Click on the Test Connection button to verify your settings. Once the connection tests successfully, save the properties by clicking on the Save button.