WaveMaker 6.2 Release Notes

To access the pre-release versions, see the dev build pages. Community registration is required.

Studio Upgrade Note
When upgrading to a newer version of studio, your browser cache is likely to need clearing.
Clear your browser cache to avoid issues from cached libraries from previous versions.

Release Overview

What's New

Themes

Themes allows you to select a theme for your project, and cause the entire project to be restyled. An issue with the wavemaker framework is that it does not allow certain things to be styled via CSS (border-width, border-color, margin and padding), so our themes incorporate a mix of style sheets and changes to the default behavior of components themselves.

Note that as of this dev build, any themes that provide for rounding of widgets does not yet support rounding within IE.

How to set your theme

The best way to set the theme for your project is to select your project from the model, and change the theme property in the properties panel.

How to edit your theme

There are many ways to change how your theme works.

The easiest is to simply go to your source editor, select the CSS tab, and add some custom CSS.

Below are some other ways of editing your theme.

Theme based property: themeStyleType

Each container will have a themeStyleType property that you can set to one of "HeaderPanel", "ContentPanel", "(default)".

• Default means it doesn't do anything.
• ContentPanel means that this is a major content panel, which some themes will assign special styling to. Note that border/borderColor will NOT be set by this, but you can set those by hand.
• HeaderPanel means that this is a major header, and will use the Header styles set in the theme (also used in Buttons, accordions and other widgets). Again, this won't change border/borderColor, you may have to set these yourself.

Theme Designer

Within the source code editors in studio is now a theme designer tab. Use this to change the basic theme colors, borders, rounding, background images, hover effects, etc...

The theme designer does not allow you to edit any of the built in themes, but DOES allow you to copy them and to edit your copy. When you copy a theme, it is copied into your common folder and is available for editing and for use within ALL of your projects.

Note that each background image provides a pulldown menu of images to pick from. To add new items to this list, simply copy images into your common folder: common/themes/custom_mytheme/images/

Additional customizations of your theme

The theme designer simplifies the task of building a theme by linking a number of widget styles together. For example "Header-Background-Color" is used to control the background color of a broad range of widgets. If however, you want your theme to break free from this mold, you can hand edit your theme.css in common/themes/custom_mytheme/theme.css. WARNING: any changes to theme.css that appear above "/* Custom CSS goes below this line */" will be lost when next you save your theme. Changes made below that line will be a permanent part of your theme.

Changes to Login Page

As a result of changes to themes, the login page that is generate by default has also changed. Some notes:

1. Your current Login.widgets.js will not be changed, but if you delete your page, you will get the new Login page (which isn't so different from the old that we strongly encourage this, but it does do a nice job of taking advantage of the themes)
2. A title has been added to the login page; this title is a blank wm.Label when you open it in designer; to delete the title, look in your model for wmTitle.
3. webapproot/login.html now gets regenerated every time you save (unless you don't have/need a login.html file); any attempt to edit this file will fail.

Changes to Dialog

Non-Modal Dialogs

Dialogs can now be non-modal. A nonmodal dialog allows you to interact with the rest of your application instead of pausing your application until the user responds to the dialog.

Dialogs now have title bars

Dialogs now have a "title" property which if set, will add a title bar to your dialog.

The title bar in a nonmodal dialog will allow the user to move the dialog anywhere on the screen. It will also allow the user to minify the dialog.

The title bar will have a maxify button in the title bar regardless of modal/nonmodal; this will allow users to focus on the content of a dialog. Example: The bind dialog is often too small for users; they can now maxify it and have it fill the entire screen.

The title bar will have a close button IF the noEscape property is false.

NoEscape property

Each dialog now has a NoEscape property which allows you to determine if users can hit the escape key to dismiss a dialog (or use the title bar close button) or you can require users to explicitly address the content of your dialog and use your buttons.

Create your own dialogs

Previously, the main way of creating dialogs was to use the app.pageDialog, and pass it a page. Next time you need a dialog, you use the same dialog and give it a new page.

The new approach (old approach still supported) is to drag a dialog from the palette onto your canvas, give it a page name, styles, size, save it, and its now part of your project. Reusable as many times as you want without having to reload the page repeatedly. You can have many dialogs in your project.

Use app.pageDialog for dialogs that are only loaded once or twice. Use your own dialog for dialogs that may be openned repeatedly.

Openning dialogs

Previously, the main way of openning a dialog was to use a navigation variable to access app.pageDialog.

The new approach (old approach still supported) is to list dialogs in your events pulldown. Example: I have a button, I go to its onClick event menu, and see a list of my service variables, live variables, navigation variables.... and now I also see a list of Dialogs that might be openned by this event.

Dialog property "corner"

Previously, dialogs always open in the center of the page. This remains the default. But especially for non-modal dialogs, it can be useful to specify some other position. So, we've added the property "corner" which allows you to set a number of standard positions around the page. In studio, we use the "top right" corner for help dialogs, and "bottom right" corner for toast dialogs.

GenericDialog

GenericDialog is a simple dialog that lets you set its buttons, text, specify if you want a text field to show, and lets you configure it to act as a replacement for javascript's alert, prompt and confirm. Why use this? Because javascript's alert, prompt and confirm take the user out of your app and out of your application style. This creates a more consistent user experience.

RichTextDialog

A popup dialog presenting the user with a rich text editor for formatted content. Being able to maxify this dialog may be a good example of where this feature is handy.

Toast Dialog

A toast dialog is a popup that is nonmodal (does not disrupt user activity), and which provides a brief message in the top edge of the screen, and after a short delay, goes away again. This is useful for messages such as "your data has been saved" or "For best results try entering....". This type of dialog can be triggered by NavigationService, the same way app.pageDialog is accessed.

A shortcut method also provided:

app.toastWarning(msg)

Will provide a shortcut for your application to popup warning messages to your user when something has gone wrong and a full blocking alert isn't needed.

Easy access to replacements for javascript's alert, confirm and prompt dialogs

First, let me explain that the reason for using a wavemaker provided version of these is so that your dialogs look consistent with the rest of your application… something that javascript alert/confirm/prompt methods do not do.

At any time in your page code, you can now write the following:

app.alert("hello")

app.confirm("Is this good?", false, dojo.hitch(this, function() { app.alert("I'm glad you like it"); }), dojo.hitch(this, function() { app.alert("My feelings are hurt..."); }));

app.prompt("How good is it?", "Very very good!", dojo.hitch(this, function() { app.alert("I'm glad you like it"); }), dojo.hitch(this, function() { app.alert("My feelings are hurt..."); }));

paramters are as follows; app.alert:

• Message to user

• Message to user
• nonmodal: typically this should be false unless you want the user able to perform other interactions before responding to this
• onOKCallback: A function that gets run if the user hits OK or hits Enter
• onCancelCallback: A function that gets run if the user hits Cancel or ESC

• Message to user
• initialValue: value to show in the text box for the prompt dialog
• onOKCallback: A function that gets run if the user hits OK or hits Enter; has one parameter: the value the user entered. NOTE: if user enters no text and hits OK, onCancelCallback is called, NOT onOKCallback.
• onCancelCallback: A function that gets run if the user hits Cancel or ESC

New Widgets

wm.GenericDialog and wm.RichTextDialog

See section on dialogs for details

wm.ToggleButton

A button with two captions (clicked and standard) and two classes. And you can bind to its "clicked" value. Example: bind showing to its clicked property, and use the button to control whether something is showing.

Notes: You can have many different widgets, some binding to its clicked value, some bound to its unclicked value (!${myButton.clicked}), and create complex interactions without any javascript.

wm.WizardLayer

This is a variant of wm.TabLayers that replaces the tab buttons with breadcrumb styled buttons, and has a next/back button at the bottom of the layers. Next button will only advance to the next layer if all form elements validate and all required elements are filled in.

This can also be used for card-like designs; each click of "Next" advances to the next card.

wm.TypeDefinition

Sometimes users need to create a new type. Typically this is done so that you can create a wm.Variable, give it some custom data and get a Grid or other widget to display that data. Previously, you had to add a type using the data model editor (which works until your next database reimport) or by creating a java service to specify the type.

Now all you need to do is drag a type object onto your canvas, and click addField to add fields to your type. We recommend that this be used as an app-level component instead of a page-level component.

wm.WidgetList

This is a new class for dealing with arrays of data; much like the Grid widget, you bind its dataset to a variable that has an array of results. The result looks a lot like a list as shown on most mobile phone applications: a non-grid list of images, links, text, and other content. Imagine an application for showing a list of movies in your area; you might have an image representing the movie, and then to the right, a title, and below the title, a list of actors, and below that, links to buy tickets at the local theater.

To use this widget, set the dataSet to a variable/servicevariable/livevariable with a list of results. Set the pageName property to point to a page that indicates how you want each row laid out.

To create a page that can act as a row, insert a wm.Variable into your page, name it wm.Variable, set the type to match the type for your wm.WidgetList, and then you can drag widgets onto your canvas and bind their captions, images and values to the fields of your wm.Variable.

New Properties

documentation property

All of your components now have a documentation property. Clicking on this property opens up a richtext editor in which you may document the expected behaviors and usages of that component. This is a good way to document your design, and to pass the reasoning behind your design down to future developers.

There is also a "generateDocumentation" operation for each component that will append to your compoennt's documentation some automatically generated information (listing all bindings to/from the component, and describes all events and their actions). After this information is generated, you may then want to annotate the results to clarify missing or obscure information.

You can also use the documentation property on the wm.Page object itself (selected in the model) to document and provide an overview of how the page itself is expected to behave.

Project Properties

You can now select a project in the model and edit its properties

mainPageName

At this point, this is a redundant place where you can set the application's main page. Has exactly the same result as setting the main page using the project's tab.

projectVersion

A number you can edit to identify the version number of your project

projectSubVersion

Each time your project is saved, this value gets incremented automatically. This lets you track what version of a project is being run/edited/etc… If you make this a string rather than a number, a number will be appended to the end of your string, and it will be incremented each time the project is saved.

promptChromeFrame

Not yet supported; ideally would allow you to enable/disable the chrome frame installer prompt for IE users.

theme

Lets you change the styling/theme of your project (discussed in more detail below)

Page Properties

You can now select a page in the model and edit its events. Mostly these are keyboard events.

Keyboard events are only intercepted when the page is the main project page, and will NOT be effective if this page is in a page container or dialog. Also, if a dialog is open and this is the main page, the main page will no longer process keyboard events.

Keyboard events will fire even when a textbox/editor has focus and the user is typing into the editor. If your trying to intercept keystrokes ONLY when the user is not editting, you will need to test to see if an editor has focus. (passing in an extra parameter "hasFocus" might be considered for GA)

events.onShow

At this time, onShow will only fire the first time the page is shown. onShow fires after onStart

events.onStart

At this time, you probably just want to use the start method.

events.onEnterKey

When the user hits enter, you can map this to some action. Typically, this might be a liveform save, or other type of form submission.

events.onShiftKey

When the user holds shift and hits a key, this event will fire; potentially useful for keyboard shortcuts

events.onCtrlKey

When the user holds control and hits a key, this event will fire; potentially useful for keyboard shortcuts

events.onEscapeKey

When the user hits escape, choose an action.

events.onLetterKey

When the user hits a letter, choose an action

events.onMiscKey

When the user hits any other kind of button (arrow key, other key that doesn't map to a standard character) then this event will fire.

wm.Layer/wm.Layer subclasses:

Transition

Some of the layers now let you pick a transition animation; current options are "none", "fade" and "slide".

clientBorder/clientBorderColor/layerBorder

Instead of giving your tablayers or accordion a border, you can give its contents a border; this way the border goes under rather than over the tabs at the top.

captionHeight (wm.AccordionLayers)

Change the heights of your accordion's labels

Button

clicked

Button now has a clicked property that can be bound to. If you need a button that can unclick, use wm.ToggleButton.

DojoGrid

The DojoGrid now has an editUsingLiveVar property. When this is enabled, any change made to any cell results in an update message being sent to the database. This feature is new and may need polish in the following area:

• Handling the user changing fields faster than the server responds
• Performing insert operations (currently handled by calling addRow with a description of the new entry)
• Perform delete operations (not yet implemented)

A Delete button for custom columns.

Multi-Select - grid's selection mode to 'multiple' and dojoGrid.selectedItem.getData() will return multiple selected items.

Formatting - Users can now select a format function for each column. This is useful for customization of column data. And they can return html, img, etc.. which will be shown on the grid. Format function should be defined in the page source tab.

Users can now call dojoGrid.showCSVData(), which will show grid data in CSV format in a dialog box. User can then copy and paste it to a file and save it as .csv extension.

Dojo's ItemFileReadStore now work properly if data was reloaded/refreshed.

Calendar

specialDates

You can now bind a variable to a specialDates property of wm.dijit.Calendar. This allows you to associate specific dom classes with each date in your Calendar. By editting your stylesheets, you can make these special dates display any way you like.

Example data: variable1 is an instance of wm.Variable of type 'default'; it gets a json value of :

[{date: new Date("5/10/2010"),
   dateClass: "holiday"},
  {date: new Date("5/15/2010"),
   startDate: new Date("5/15/2010 08:00:00"),
   endDate: new Date("5/15/2010 16:00:00"),
    dateClass: "conference"}]

//Using wm_graphite theme. Change if other
.wm_graphite .dijitCalendarContainer td.holiday {
  background-color: red !important;
}
.wm_graphite .dijitCalendarContainer td.conference {
  background-color: blue !important;
}

useDialog

If specialDates is in use, and useDialog is in use, then a popup dialog will appear when a specialDate is clicked showing the startDate,endDate and description.

wm.Container properties

themeContentType

See section in theming for discussion of the themeContentType.

Changes and Improvements

Bind Dialog

The following enhancements have been made to the Bind Dialog

• A searchbar has been added. Type in here, and the bind dialog will display a list of matches as you type, searching for component names, class names, and bindable property names that match your search.
• The dialog is now nonmodal, which means that you can click on components in your canvas and model while its open. Clicking on any component in the canvas or model will cause the bind dialog to focus on that component. Example: I want to bind my live form to a datagrid. To get to the datagrid, I can now just click on the datagrid in the canvas.
• When binding filter, sourceData and other subproperties, the bind dialog now shows a list of properties that can be bound, and an apply button, allowing users to quickly work through every property of the selected widget and bind each one.

getServiceBean()

RuntimeAccess.getServiceBean() replaces the deprecated getService() function for accessing other beans from java service code. For more information on java services see: java services

Previous usage:

(SoAndSoService) service = (SoAndSoService)RuntimeAccess.getInstance().getService("SoAndSo");

New usage:

(SoAndSoService) service = (SoAndSoService)RuntimeAccess.getInstance().getServiceBean("SoAndSo");

JDK 6

WaveMaker is now built with and redistributes JDK 6 on Windows and Linux.
WaveMaker on OSX remains built with Java 5, same as WM606, and studio installed on OSX uses the Java specified in Java Preferences, under Applications, Utilities.
We expect to move OSX build to Java 6 as availability of Java 6 has less impact on our mac users.

Tomcat 6

WaveMaker now embeds Tomcat 6.0.29. Previous version was 5.5.26

Ant 1.8

WaveMaker is now built with and using Ant 1.8.1. Previous version was 1.7

Deployment

wm.PageNavigation

A NavigationVariable of type "gotoPage", if owned by a page within a wm.PageContainer, changes the page of the page container, and NOT the main page. For a page in a page container to change the main page, it must use either an application level navigation variable, or javascript.

Application-Level Event Handlers

App level variables and dialogs can now have event handlers.

You can navigate to the Source tab, and select the "Application" tab and add custom code to your project.js file.

Upgrading

Themes

Its possible that some of your css customizations may not work if you use the themes; this can be fixed by increasing the specificity of your css selectors. Example:

Changing

#button1 {
    background-color: blue;
}

to

body #button1 {
   background-color: blue;
}

increases the specificity of your css selector; and it can be made more specific by adding in parent classes/ids.

Compatibility

Fixed Bug Lists

Jira Resolved Issue Reports for:

Known Issues