WaveMaker 6.4 Release Notes

Release Overview

Important Studio Upgrade Note
When upgrading to a newer version of studio, you must clear your browser cache.
Clear your browser cache to avoid issues from cached libraries from previous versions.

WARNINGS

All users of the Select editor should check their restrictValues property after upgrade

The Select editor property "restrictValues" determines whether entering a value that does NOT appear in the menu is invalid. If restrictValues is true, then only values from the list are valid. If its false, then the menu is just a list of suggested values, but the user can type in anything. This incorrectly defaulted to false. We've changed the default to true. Please check your projects and verify that the restrictValue settings are correct for your editors.

IE 6 and IE 7 are no longer supported except via Chrome Frame

A new application-level property has been added called "promptChromeFrame" which has three possible values:

• chromeframe.html: IE 6/7 users will be shown the contents of chromeframe.html which will be in your project/webapproot folder, and which initially contains links to various ways of upgrading to a supported browser. You can edit this file to show anything you want.
• http://google.com/chromeframe: This immediately shows google's chromeframe download page
• Allow IE 6 and 7 users: This option will allow users to run the application without requiring a chromeframe plugin or a modern browser. Use this at your own risk.

Infrastructure

OSX requires JDK6

OSX installations of Studio now require JDK6. To ensure you are using Java6, use the Java Preferences application to specify the default JDK prior to starting Studio.

New Deployment Dialog

The deployment dialog has been rewritten. Besides being easier to use, it now provides the following new features

1. Deploy to CloudFoundry's cloud (you must first create an account at cloudfoundry.com)
2. You can now change your database settings before deploying. When you generate your WAR/EAR file and deploy it to your target server, you can change from using your development database to your production, QA, demo, or other database connection settings.
3. Save your deployment settings so that once you've deployed with a specific set of settings, redeploying to the same target server and same target databases is a one click operation.

CloudFoundry Notes

Restrictions in support for other domains
The current version of CloudFoundry deployment lets you choose what cloudfoundry environment to deploy to, cloudfoundry.com, or a privately hosted version. Studio does not support switching back and forth between different cloudfoundry environments at this time. Users wishing to change the deployment domain musts clear browser cookies, or user a separate browser for each domain.

The list of currently deployed CloudFoundry apps only lists apps on cloudfoundry.com, and does not at this time show apps deployed elsewhere.

Experimental new print methods

A print() method has been added to 6.4 for all controls. You can call this.layoutBox1.print() or this.dojoGrid1.print() or print on any panel. This is a very experimental feature but is the easiest way to get basic printing working. For more information, review http://dev.wavemaker.com/wiki/bin/wmdoc_6.4/Printing#HExperimentalnewprintmethods

Branding

You can now take an existing application and change properties, styles and images for different customers using the branding feature. The branding feature does help you to provide different features to different users, it simply lets you make your application look and feel like it belongs to a specific customer.

To use this, within your webapproot folder, add the following folders/files:

• Folder named "branding"
  • Folder named "company1" (or the name of the company your providing this to)
    • branding.js (json file which changes widget properties such as caption, picture.source, etc...)
    • branding.css
    • Folder named "images" for reference by branding.css
  • Folder named "company2" (or whatever the name of the company your providing this second branded version to)
  • More brands...

wm.branding = "companyA";

The branding.js file will identify page name, widget name, property name and language name:

{
    Main: {
	label3: {
	    caption: {
		fr: "Company A's démo d'application",
		es: "Company A's demostración de aplicaciones",
		"default": "Company A's demonstration application"
	    },
	    width: {
		"default": "100%"
	    }
	},
	label2 : {
	    caption: {
		"default": "Copyright Company A"
	    }
	}
    },
    ContentPage: {
	button1: {
	    caption: {
		"es": "Ejecutar la lógica de la Compañía A",
		"fr": "Exécuter Société Logique A",
		"default": "Execute Company A's Logic"
	    }
	}
    }
}

To see this in action, try the following demo; run it first with config.js having a wm.branding="companyA", and then try again running with "companyB".

DemoBranding.zip

Javascript access to all your pages

If you have a page showing somewhere, perhaps in a PageContainer, or a PageContainer in a PageContainer, or a PageDialog, AND if that page is loaded (if deferLoaded is true, it may not yet have loaded), you can now easily access it via javascript.

wm.Page.getPage("MyPage")

For more advanced cases, you may have "MyPage" showing in multiple page containers at the same time. You can specify them by index using

wm.Page.getPage("MyPage", 0);
wm.Page.getPage("MyPage", 1);

wm.Page.byName["MyPage"]

Project Import/Export

Project exports now append version/subversion numbers to the zip file; every time you save your project, the subversion number is updated insuring that every project export is unique (assuming you save between exports).

Project imports can now handle arbitrary zipfile names, and look instead for the real project name inside of index.html.

Deploying to JDK 5 Servers

Studio no longer produces JDK 5 compatible WAR files by default. Users wishing to deploy to JDK 5 servers can do so by:

• Adding the JDK 1.5 target flags to the javaw command used to start Studio

-Dant.build.javac.source="1.5" -Dant.build.javac.target="1.5"

"C:\Program Files (x86)\WaveMaker\6.4\jdk-1.6.0_24\bin\javaw.exe" -Dant.build.javac.source="1.5" -Dant.build.javac.target="1.5"  -Xms256m -Xmx512m -XX:MaxPermSize=256m  -jar "C:\Program Files (x86)\WaveMaker\6.4\launcher\launcher.jar"

• Removing the CloudFoundry post processor from the project WEB-INFproject-springapp.xml file prior to WAR generation.

<bean id="cloudFoundryPostProcessor" class="com.wavemaker.runtime.data.cloudfoundry.CloudFoundryDataServiceBeanFactoryPostProcessor"/>

Both are required to target JDK 5 servers.

Improvements to Studio's Design Tools

Enhancements to HQL Query Editor

Generating Parameter List

When editing queries in the HQL Query Editor, the parameter list is now automatically generated for you as you type your query. You will still need to set the type for each parameter, but the list of parameters is kept in sync with all parameters in your query.

Support for LIMIT and OFFSET

WM 6.4 introduces improved support for limit and offset with HQL. HQL does not accept these in line like SQL, they must be set via Java. Service variables on HQL queries will now set these parameters via Java if set.

All new database imports will automatically be enabled for limit and offset support. Service variables will have the limit and offset options.

Database models created prior to 6.4.4 must be regenerated to add support to HQL service variables. To regenerate an existing database service, simply open the data model, make any change, save, undo the change and save again. If you made any customizations to the generated service.java (where service is the service name), you must re-apply those customizations. If you invoke HQL queries from Java services, you will have to update your java code to use the updated signature.

Users can now bind defaultInsert for date editors to "new Date()"

new Date()

A new dialog for editting the wm.Variable JSON property

You can now chose between a validating/pretty-printing JSON code editor, or a Tree editor that insures your entries are valid.

Multiple event support

If you want multiple things to happen onClick or onSuccess, you no longer need to use a javascript event handler to do that. When viewing a component's events, each event has a "+" button next to it. Clicking on this will add additional event editors for that event.

Example: You have an onclick event. After clicking "+", you will have 2 onclick events.

DemoMultipleEvents.zip

Update to LogViewer

If you go to Studio's Source tab, and select Server Logs you will now see the last 500 lines of your server logs, and no longer just see the output from your java services.

Localization

The following support has been added for localization:

1. A language pulldown menu in the designer lets you pick which language you are setting properties for. If the language is set to "default", you are changing the properties of your widgets.js file. If your language is anything else, your property changes are written to a dictionary that will be used at runtime. You can not use this to change the ordering of your widgets, only the property values. Bound properties also can't be changed with this.
2. When editing your page script, there is now a dictionary button which opens a dictionary dialog for adding terms, adding the localized version of that term for each language, and adding the term to your page.
3. The project level property currencyLocale now lets you specify what currency format will be used

Securing Services by roles

The security editor introduces the ability to configure access to services by roles in the 'setup services' tab under Security. This can be used to make a service or a set of services openly available to anonymous (not logged in users) or to make some services available only to specific roles, such as admins. Use of the services setup is not required.

All databases are considered a single service and can only be assigned as a group using the services setup tab.

Use of the services configuration adds page content protection to existing projects if 'show login' is enabled. This prevents anonymous users from accessing page contents. Previously only service calls were protected. New projects or projects first enabling security with 6.4 have page content protection if 'show login' is enabled.

Note: Services setup does not preserve customizations to project-security.xml. Users wishing to further customize their project security, such as page access setup, should use the studio tooling prior to hand editing the security file if they are to use the studio tooling.

Cut/Copy/Paste/Undo Improved

You can now undo cut, copy and paste. You can now cut/copy/paste nonvisual components.

You can now undo property changes.

DisplayExpression Editor

Now when editting some display expressions, you can use the bind dialog and use the expression editor. Currently only available for SelectMenu.

Bind to Any Page

In 6.2 it became possible to navigate through your page containers to bind to a component. No longer needed (except in special cases). The limitation there was that you could only bind down the page container heirarchy, you could not bind to your parent page nor to sibling pages. When your in advanced binding and expression editor, you get a menu listing all pages. Change your page menu and you'll be able to bind to all components of that page.

This screenshot shows the menu where you change what page you bind to.

Here's an example project showing two page containers side by side and binding to one another; something that wasn't previously possible:

DemoInterPageBinding.png

Added a section to the insert menu for Prebuilt Variables

We now have some premade wm.Variables that we thought might be of use:

• Months
• Days
• US States
• Countries

Added a new theme: wm_wireframe

This is a good theme to use for prototyping and demoing where you want reviewers to focus their efforts on commenting on functionality rather than on colors and styles.

Widget Enhancements

wm.gadget.YouTube now takes a videoId

You can now point the YouTube widget to specific videos.

You can now bind your YouTube widget's video to services or selectedItems so that it changes each time the user selection changes.

wm.Picture can now have its image set using a wm.ImageList component.

You can use either the source property or a wm.ImageList to setup images in wm.Picture. There are performance benefits to using wm.ImageList for all images.

DemoPictureImageList.zip

Improvements to Editors

New Class: Filtering Select Widget

This is a new widget which is in beta; its a candidate for replacing wm.Lookup for many tasks. Where wm.Lookup fires a LiveVariable to get the list of all possible matches, and shows these matches in a list when you click on the editor, the FilteringLookup fires its LiveVariable when the user starts typing, and finds matches as the user types. The user can NOT click to see a full list.

Why is this important? If you have 10 related items, a wm.Lookup is still better. If you have 500, 5000 or 5 million related items pick from, wm.Lookup was both ineffective and also caused performance problems.

When this widget comes out of beta (hopefully in 6.5) its functionality will most likely be merged with wm.Lookup so that there is a single Lookup editor with two modes.

If you have a page with many Lookup editors, this will be more efficient for you as well, as the LiveVariable doesn't fire until the user starts typing, whereas all wm.Lookups fire their LiveVariables as soon as they are created, causing a lot of extra and simultaneous network traffic.

In the demo project, click new, and then start typing into the Customer Lookup.

DemoFilteringSelect.zip

wm.Lookup and wm.FilteringLookup no longer require RelatedEditor

Before 6.3, if you had a LiveForm with a Related item you wanted the user to select, you had to have a RelatedEditor with a wm.Lookup editor inside of it. This was a pain. So you can now just use a wm.Lookup (or the new wm.FilteringLookup) without needing the RelatedEditor. Just drag it from the palette into your form.

Editors now have minEditorSize property

This allows you to have a caption position of left/right and a captionSize that uses %, and still specify the exact number of pixels you want to reserve for your editor. This is handy for setting the editor caption to be 100% while insuring your editor still gets a certain amount of space; most commonly used for radio and checkbox editors.

Editor come with a default of 16 px, which means that for your checkbox, you can set your captionPosition to right, captionAlign to left, and captionSize to 100%, and get the following result:

Checkbox.png

RichText Editor

1. Added the autoUrlLink plugin; this automatically hyperlinks anything that looks like a URL; this is built-in rather than added as an option.
2. Find/Replace toolbar option

Editors now have an isDirty property

You can now bind to editor's isDirty property. This will tell you if the user has changed the value to something different than the last value passed in via setDataValue (from binding, initial value or from script calling setDataValue).

You can now bind to isDirty, or access the dirty property with: this.myeditor.isDirty

isDirty is also propagated up to container panels, so that you can now ask any panel/container if it contains any editors that have been changed (useful, for example, for binding your save button's disabled state; don't allow saving if nothing has changed).

There is also an application level property disableDirtyEditorTracking which lets you disable propagating isDirty up to parent containers so that slower browsers don't take a performance hit.

Note that the isDirty property will only update as the user types if you have changeOnKey enabled; else isDirty is updated after the editor loses focus.

DemoIsDirtyProperty.zip

Editors now have a better reset method

If you want to clear your editor, use the clear() method. If you want to reset the user's changes, reset() will revert the editor to the last value set by code (if editting a liveform, then reset should revert to the value before the user started editting). main.searchText.reset(); or main.searchText.clear();

Editors now have a helpText property

Using this property will add a question mark icon next to the editor (icon can be changed via css). Mouseover the help icon pops up text with further information about the field.

Editors now have formatters for their readonly state

There is now a formatter property that lets you have formatters just like with labels, with one extra feature: you can have the option to use a method on your page as your formatting function.

DemoReadonlyFormatters.zip

Currency Formattting

A currency formats can be setup using the project property currencyLocale; select your project in the services tab, and edit the currentyLocale property. This property is applied to all widgets that don't have their own currency format set.

New Class: DijitDesigner

If there is a dojo dijit that you've found in either the dijit or dojox packages that you want to use in Studio, drag a DijitDesigner onto your canvas and enter the dijit's class name into the dijitClass property. For example, you could enter dijit.form.Button to use a dojo button instead of a WaveMaker button; you could enter dijit.Calendar and use the dojo calendar with just enough wavemaker code around it to allow it to exist within a widget.

If you find a dijit that you expect to use repeatedly, after filling out the properties for your sample dijit (entering dijitClass and other properties specific to that class), you can click the "dijitPublish" operation in the properties panel and a new class will be generated, added to your palette (under the Dijits group), and a class added to your common/packages/wmdijit folder. You can now do two things:

1. Reuse this dijit throughout all of your projects
2. Edit the resulting class file to better support the kinds of behaviors you need.

NOTE: Not all dijit properties behave in a predictable manner. For example, when working with dojox.form.BusyButton, setting isBusy to true at design time will cause the button to show its busy indicator at runtime, but simply setting the property by callsing setIsBusy or dijit.set("isBusy", true) does not update the button state. A call to dijit.makeBusy is needed. The DijitDesigner can not determine that makeBusy needs to be called, which means that if you want to be able to use the publishDijit operation, you'll need to edit the class to refine some behaviors:

setIsBusy: function(inValue) {
		try {
			this.dijit.set('isBusy',inValue);
			if (this._isDesignLoaded)
				this.isBusy = this.makeWritableValue(this.getIsBusy(), inValue);
		    /* Custom Code I added to make this behave better; the rest of this method was generated by the "deployDijit" button */
            if (inValue) {
			    this.dijit.makeBusy();
		    } else {
			    this.dijit.cancel();
		    }
		} catch(e) {}
	}

Page level property: validateVisibleOnly

Sometimes you only want to validate visible widgets, and editors in hidden layers should not be considered when deciding if a set of panels is valid. This can be set using your Page properties: Select your page under the services tab.

Charts

• If multiple x axis fields, the legend now shows checkboxes for enabling/disabling a datatype in the chart
• Chart title property
• Y-axis title property
• hideLegend property
• verticalLegend property
• legendWidth property (only visible for verticalLegend)
• xAxisLabelLength (0 for no limits; a value of 8 means truncate all labels to a maximum of 8 characters)

Improvements to Layers

New wm.Layer event handler: onDeactivate

This is called any time the layer stops being the current layer. It does not fire when the layers parent becomes hidden; only when it stops being the active layer within its parent's layers.

Layers in Tabs now have a showDirtyFlag property

Using this property, a "*" is added to your tab any time any editors in the layer have an isDirty property of true.

Layers in Tabs now have closable and destroyable properties

• closable: the tab gets a close button; if the user clicks on it, the layer is hidden
• destroyable: the tab gets a close button; if the user clicks on it, the layer and its widgets are destroyed

• wm.Layer.onCloseOrDestroy: This is fired whenever a tab is closed or destroyed; it is called before any widgets are destroyed or hidden, and gives you a chance to cleanup or record state before things are destroyed.
• wm.Layer.customCloseOrDestroy: you can use the Custom Methods to setup your own custom handler for closing the dialog. Here's an example:

confirmClose: function(inSender) {
      app.confirm("Are you sure you want to close this tab?", false, function() {
          inSender.destroy();
      });
  }

Your custom method can have any name you want; and if you use it, it is up to you to call inSender.hide() or inSender.destroy() after you've done whatever confirmation/validation you need to do.

DemoClosableTab.zip

Application.onSessionExpiration event handler

There is now a simpler way to be notified if a service request fails due to session expiration; you can select your project in the services tab, and go to the properties panel where there is now an event handler for handling onSessionExpiration events. NOTE: This gets called only when a request is sent to the server and fails due to the session expiring. If the session expires, this event is not called until the next time there is a server request.

DemoOnSessionExpiration.zip

Improvements to Dialogs

wm.Dialog now has a positionNear property

Using the optional positionNear property, you can specify a widget that the dialog should appear near. Use the corner property to determine where the dialog should appear with respect to the specified widget (over it, under it, right or left of it or centered on top of it).

DemoPositionNear.zip

New Class: wm.LoadingDialog

This dialog is an alternative to wm.BusyButton and wm.JsonStatus for showing that something is happening. This dialog is a good way to block access to part of your page while at the same time indicating that data is loading from the server. One suggested use case:

• Your Grid data is changing
• Your grid has old data you don't want the user to interact with

• widgetToCover: give it the name of your Grid so it will only cover your grid, and not the rest of your page (or you could point it at a panel that contains the grid)
• serviceVariableToTrack: give it the name of the service variable/live variable populating your grid

DemoLoadingDialog.zip

Containers now have clearData, resetData and clearDirty methods

You can clear data in all editors within a container by calling clearData.

You can reset all user changes to all editors within a container by calling resetData.

You can clear all dirty indicators for all editors within a container by calling clearDirty.

DemoContainerDataMethods.zip

New Classes: FacebookLikeButton and FacebookActivityIndicator

For explanations of the properties for these widgets, please see http://developers.facebook.com/docs/reference/plugins/like/

The LikeButton adds a "Like" button to your page; using the layout property you can select whether its just a button, or shows how many people have liked your site, and related information. You do not need a facebook site to put this on your application; just enter in a url for your application (localhost is not accepted), and facebook will start tracking who likes that url.

Acitivity Indicator: enter in a url (I tested with "http://wavemaker.com") and it will show recent posts for that URL. I've not investigated yet how this works (i.e. how did facebook map from WaveMaker's facebook account to this url) but I suspect this only works for company's that have a facebook account/facebook site.

New Class: GoogleMaps

Comes with the following capabilities:

• Bind a dataset to place markers on the map
• Associate descriptions with each markers to be shown when the user clicks
• onClick event handlers and selectedItem allow you to use the map to drive actions for the rest of the app
• selectMarkerByIndex method and bindings allow the rest of your app to drive the map

Future Work

• Geocoding; right now it expects a lat/lon, should be able to take an address, geocode it and add a marker for it (small databases only)
• Icons: Markers can be a variety of icons. http://groups.google.com/group/Google-Maps-API/browse_thread/thread/da4dd3e61c08e429/063649623e8d491b?lnk=gst&q=icons&rnum=2&pli=1 lists some of the icons google provides

Demo

This sample project shows a basic map with a few addresses marked on it, and some code for triggering events when the user selects a map marker, and code for selecting a map marker based on a grid selection.

DemoGoogleMaps.zip

wm.Variable now has a saveInCookie property

This property is NOT available to service variables and live variables. By checking this property, any data set in this variable will be remembered and restored when the user next returns to this app. Maximum cookie size across all cookies in your app appears to be 4k, so do NOT use this as a data cache for data loaded from the server. Use this to save user selections, information about a user's actions, and other data that can be stored in a concise manner.

DemoVariableCookie.zip

Upgrading from earlier WaveMaker versions

Whenever you change versions of WaveMaker Studio you must clear your browser's cache.

Automated Upgrade Tasks

WaveMaker 6.4 includes upgrade scripts that will (1) create a copy of the original project then (2) upgrade the project for WaveMaker 6.4.

Upgrade tasks performed for 6.4 automatically:

• IE 9 support

• Catalog removed from MySQL HBM files

• WaveMakerServiceBean

Manual Upgrade Tasks

Upgrade tasks requiring manual upgrade, if applicable:

• Multitenancy enabled projects