WaveMaker 6.3 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.

What's New

Installation of third party components

To ensure compliance with the licensing of all components, some third party components used by Studio must be downloaded post installation. Studio cannot be used until these components are installed. To make the installation and configuration of these components as easy as possible, a configuration tool is now shipped with Studio. On Windows, the configuration tool is started automatically by studio installation. On all platforms, the launcher will start the configuration tool if required components are missing.

In order to install components in the program installation folder, most systems require running WaveMaker as administrator or root. This is only required for use of the configuration tool. Studio itself does not require running WaveMaker as root. If required components are missing and WaveMaker is not running as root, an "Additional setup is required prior to running Studio" message will notify you that you need to re-run as root.

Proxy servers and other network restrictions may prevent the configuration tool from being able to download the files directly. If the WaveMaker server is unable to download the files, the configuration tool will prompt you to download the files via a browser link on the manual installation page. After you've download the repo.zip file, use the upload button to apply the bundle to the installation. You will need to specify the repo.zip file downloaded from the download link.

Upon successful completion of the installation, Studio will re-launch. Studio must be restarted for the download libraries to be applied. Reload your browser window if you get a 404 after successful installation.

Users running on headless systems will need to launch wavemaker.sh as root and open the /ConfigurationTool application in a browser manually.

Finally, some database and web service operations require additional libraries to be installed. Importing an Oracle database for example requires downloading the Oracle JDBC driver from Oracle.com. As with other component installation, internet access and write permission to the studio installation folder are required. For additional information see third party jars and the installation guide

New Widgets

wm.PopupMenu

Want to be able to click on something or better yet, right click on something and have a menu pop up? Well, you can't quite do that with DojoMenu, but this subclass of DojoMenu will let you popup a menu any time you want.

wm.PopupMenuButton

A button with its own built-in wm.PopupMenu. This is a special kind of button and menu though; whatever you select from the menu, that text and icon become the text and icon for your button; when you click on the button (rather than on the down arrow part of the button) it executes the specified command (i.e. fires an onClick event, where you can then test what the caption of your button is).

wm.DateTime

A single widget that combines date content and time content, which manages Unix time (i.e. milliseconds since Jan 1, 1970) effectively. The widget displays a calendar and a clock, allowing the user to set both date and time within a single widget. The *dateMode" property allows you to control whether both date and time are displayed or just date or just time.

wm.DojoGauge

A simple widget that shows a gauge for graphically showing the value of something. This widget does not support user interaction, it is present to convey information to the user only. This gauge can show between 1 and 3 different values. Standard uses: represent the amount of traffic on a server, speed or altitude of a vehicle, or represent other state information that will be updated continuously while the application is running.

wm.ObjectTree

While we have wm.PropertyTree in the palette for building trees from variables, sometimes you just want to create a javascript object and have that be the tree. If I put a word in my object it becomes a node. For example:

{"Day 1": {"Eat": "Food",
               "Sleep": "In a bed",
               "Shower": "In a closet"},
 "Day 2": {"Work": "In a bed",
               "Play": "With my food",
               "Hide": "In the neighbor's closet"},
 "Day 3": {"Work": {"Create a list": undefined,
                            "Demonstrate the list": undefined,
                            "Eat said list with gusto": undefined
                            }
              }
}

ObjectTree.png

The tree generated will have 3 high level nodes: "Day 1", "Day 2" and "Day 3". The first two days will have subnodes containing simple name value pairs, while "Day 3" will have a subnode of its own.

The rules here are:

  1. If its a hash, we generate a subtree; if its a string or number, we show "Name: value" (example above will show "Eat: Food" and "Slee: in a bed")
  2. If you want to just show a node without ":", use a value of undefined (do not put undefined in quotes!). In "Day 3", the nodes will simply show "Create a list", "Demonstrate the list" and "Eat said list with gusto".
Now all thats left is to setup onselect event handlers. If the user selects a leaf node, your handler gets the node as a parameter and the node's text as a parameter. If the user selects a node that is not a leaf, then the parameters are the node and the javascript object defining its children. if I select "Day 2", I get
{"Work": "In a bed",
               "Play": "With my food",
               "Hide": "In the neighbor's closet"}

wm.DraggableTree

This class is NOT instrumented for easy use from studio. But if you want a tree that lets you drag nodes within the parent node, and into other parent nodes, this class lets you do that. This class was used to provide drag and drop functionality to studio's model; to the menu designer, and is derived from the code in the ResourceManager. It has two modes: dropBetweenNodes and normal; dropBetweenNodes means when you drop a node you specify which nodes it goes between. Normal mode just means you drop it into a parent and don't try to control the order in that parent. A file system would be done via normal mode. A menu editor would need precise control over order. Best bet if you want to use this class is to crack open the code and see whats in there.

New Functions

connectOnce

Same as connect() but fires only once. Automatically disconnects itself after first usage. Used for the first time something happens, such as showing a dialog.

DojoGrid: setSortIndex and setSortField

Previously, there was a poorly documented way of sorting: this.dojoGrid1.dojoObj.setSortIndex. Now there are two public methods:

  • setSortIndex(indexOfColumn, isAscending) -> sorts the column specified by column index (3rd column) in ascending/descending order
  • setSortField(fieldName, isAscending) -> sorts the column specified by field name ("customername") in ascending/descending order
this.grid1.setSortIndex(3, true);

New Events and Properties

Dialog width/height can be % sized

You can now set your dialog's width or height to be px or %. For now, properties panel will assume "px", but from code you can do this.mydialog1.setWidth("90%") and your dialog will automatically resize as your window resizes.

Dialogs are User Sizable

If you dialog is set to non-modal AND it has a border, users can click and drag the border to resize your dialog. If you don't want your dialog to be resizable, you can set it to be modal. We will likely have the noMaxify property also disable resizing (http://jira.wavemaker.com/browse/WM-2767). If your dialog is resizable, its contents should use % sizing rather than px sizing so that it can resize gracefully.

onRightClick

Use this to create right click actions such as contextual menus or popup dialogs.

onMouseOver

Use this to create mouse over popups that show small dialogs when the mouse goes over a widget.

onMouseOut

Use this to dismiss whatever you did with your onMouseOver event

onSort

wm.DojoGrid now has an onSort event handler which notifies you when the user changes how columns are sorted

onEnterKeyPress

All containers now get an onEnterKeyPress event. You would use this, for example, if you have a number of editors, all in a panel, and you want to set up what will happen when the user is in any of these editors and hits the ENTER key. You could for example set your LiveForm's onEnterKeyPress event to submit the form (but you don't have to, see the saveOnEnterKey below).

Some notes on using this event handler:

  • If the editor that the user hits ENTER in has its own onEnterKeyPress event handler, the event will still be seen and handled by your container level onEnterKeyPress event. You need to be careful in how use use these. For example, you don't want to set onEnterKeyPress for the editor to do a delete while your container level handler does a save. Rather, if you want to use both handlers, you could use the editor's handler to change the state (this.nameEditor.setDataValue("Hey there");) and leave communication with the server to the container. Best practice though is to use editor onEnterKeyPress events or Container onEnterKeyPress events, not both.
  • As with the mouse events, these events do not get fired unless you have setup an onEnterKeyPress event handler. So if you use studio's event menu to setup the event handler, everything works fine. If you want to do this from code with a this.container1.connect("onEnterKeyPress", function() {alert("HI");}); this won't work unless you first call this.container1.connectOnEnterKey();

LiveForm's defaultButton vs saveOnEnterKey

There was a property of LiveForm called defaultButton that allowed you to set the default button to click when the user hits enter. This was not a fully thought out solution, and has been deprecated. The problem with this property is that it has no concept of using a different default button for insert vs save. Users of this property will be supported for 6.3, but it may be removed at any time after that.

Replacing defaultButton is the saveOnEnterKey property. This true/false property if true will cause the form to call myliveform.saveIfValid() if the user hits ENTER in any editor. If you uncheck it, then either nothing happens when the user hits ENTER, or you can use the onEnterKeyPress event handler that LiveForm inherits from Container (see above) to setup what happens when the user hits ENTER.

wm.Text.resetButton

Use this property to turn your text editor into a search bar; adds a red clear button to the right of your search bar, and for browsers that support this, makes your editor border much rounder.

ResetButton.PNG

wm.Text.placeHolder

The text you enter for this property will be shown to the user as faint text prompting the user with what to enter. When the user selects the text field, the placeHolder text is removed. Example of this can be seen in the searchbar over studio's palette.

PlaceHolder.PNG

wm.Layer.onShow

Previously, onShow fires only when the wm.Layers switches the current layer and fires its onShow event. Now if you have a wm.Layers (tablayers1) inside of a wm.Layers (tablayers2), then if tablayers2 makes tablayers1 visible, then tablayers1's current layer will call onShow().

useLocalTime (Management of Date and Time Across Time Zones)

A common issue users had in the past was that one user edits a live form, and sets the date to today. To a user in another timezone, today shows up as yesterday. Making matters worse, this second user may then edit the same entry, and without changing the date value, it will still be saved based on this new user's local time and the first user sees their date of today changed to something else.

We have addressed this by giving all widgets able to show dates or times a new property: useLocalTime. If you decide to use this property, then each widget you set this property for will use local time. If you do NOT use this property, then each widget will display localtime but will assume that both its input (what it gets from a Live Variable for example) and its output (what gets written back to the server) are in server time, and will perform all necessary conversions.

When should you use local time? If you want to grab the user's local date, add 8 hours to it and setup a calendar appointment for them at 8am monday morning, you will want to use localtime. If your doing date calculations in javascript, you will often prefer to use localtime. Using server time is always best if your loading dates from the server and then writing them back to the server.

You will find this property in

  • wm.Date
  • wm.Calendar
  • wm.DateTime
  • wm.Label's formatter
  • wm.DojoGrid (instead of seeing this property you will have choice in formatters between Date and Date Localtime)

Tabs for Services

All services editors (java, web services, data models, HQL Queries, etc...) appear in tabs now so that once you open them, you can easily get back to them. You are no longer limited to having only a single service open at a time.

StudioTabs.PNG

The image above shows tabs for both database and web services. Within database there are sub-tabs for each of the databases in the application.

Change Indicators for Tabs

All tabs now show a dot indicating if they contain something that is unsaved.

In the image above the Canvas tab has a dot indicating unsaved changes.

Save All

When you hit a save button on any page, it will save everything in your project that is unsaved. A progress indicator shows the status while the save operation is in progress.

Properties and Palette in Dialogs

If you need more canvas to work from, you can more or minify the properties panel and the palette panel. Click a button at the top of either panel to move those panels into dialogs. Press the minify button to hide the dialog at the bottom of the screen. Closing the dialog will restore them to their usual positions.

Palette panel and Property Panel as dialogs

PalettePropsDialogs.PNG

Drag and Drop Model

You can now drag and drop widgets within the model. Previously you could only drag and drop widgets in the canvas. The model provides an alternate mechanism for rearranging widgets. Note: you cannot drag widgets from the model to the canvas or from the canvas to the model.

wm.ImageList enhancements

We will provide a few pre-built imageLists so that you can quickly get sets of images into your project with small performance costs.

ImageLists will also generate a set of CSS classes so that you can reference an image in your image list using classes instead of having to write CSS for each widget that wants to use the imageList.

wm.DojoMenu now has a menu builder

Drag and drop design of menus with support for adding in iconClasses that reference icons in your ImageLists.

EditMenu.PNG

Enhanced Code Editors and Editor Toolbars

The code editors now come with new features for formating, validating, autoCompletion, and other convenience methods and buttons. The code editor is now provided using the ACE editor (ace.ajax.org). Use CTRL-PERIOD or the auto completion button to open the autocompletion dialog when editting javascript. See the editor help for other ACE editor features.

Improved Properties Panel

The panel should work a bit more smoothly now; with improved support for tabbing among the fields and less need to double click when going from one field to another.

Also you can now type in values into the input, filter and sourceData bindable properties. Use this when you want to type in a literal or expression and don't want to simply bind something to another component (though you will still find the expression editor easier to use for complex expressions)

Contextual Menus in Studio

All widgets in the canvas now respond to right click, giving you shortcuts to various kinds of information.

All components in the model also respond to right click, with similar shortcuts.

All items in the palette can be right clicked on. Gives shortcuts to documentation and lets you copy a widget (useful if you are having a hard time drag/dropping the widget to your destination; you can copy it from the palette, and paste it into your container).

New Options When Dragging Data Object from Palette

When you drag a data object from the palette, you now get to choose from options on how you want your LivePanel to work. Options include "Grid over LiveForm" and "Grid and LiveForm Dialog".

Mobile Support

We now have partial touch scrolling support. A touchScrolling property is available for containers. Your wm.Layout defaults to having touchScrolling = true. You should have as few panels as possible using touch scrolling, as there are usability and performance implications to using this. TouchScrolling is only activated when your app is accessed by a mobile WebKit browser, as determined by its User Agent string saying "AppleWebKit" and "Mobile". There may be some supported browser that this test misses, but we will update this as we get more information.

Note that with the release of dojo 1.6's mobile library, this feature may be deprecated almost immediately.

Memory Leak Plugged

A memory leak involved in the use of ServiceVariables that fire repeatedly has been plugged, allowing applications to run much longer without slowing down.

Debugger

We now provide a firebug replacement that runs on all browsers. What it offers:

  • Logging that is focused on the wavemaker event model and which leaves a trace of how/why/what each action taken is
  • XHR requests and responses and indicators to show when they are still being processed
  • A console where all commands are executed within the page context (thus you'd type "this" instead of "main" and all code you type can be done just as you would write your page methods)
  • An object inspector that fixes the problems of IE and webkit inspectors: it shows each object using the object's toString method instead of just Object?
When running a project in ?debug mode, you can open the debugger using Ctrl-shift-d OR Alt-shift-d OR by clicking on the json status indicator widget that you can add to your page. The debugger is only intended to be run when you are running your project in debug mode and does not appear unless in ?debug mode.

Json Status Indicator

There is a new widget modeled on studio's activity indicator that can be included in any page, showing when the framework is requesting something, and if desired, show what is being requested. When running in debug mode, clicking this widget opens the debugger.

Style properties moved

Border, margin and padding properties are now set within the style properties, and are no longer high level properties of widgets. The definition and usage of the properties have not changed, only the location within the property tree.

Localization

6.3 contains an alpha release of our localization framework. Documentation on using it will be posted, but for the first pass, you'll have to edit dictionary files outside of studio.

We've also included a shortcut to allow for quick tests across different languages:

If your url contains dojo.locale=fr then we will automatically switch you over to the french language. dojo.locale=ja switches you to japan. If you don't use this parameter in the url, dojo will use whatever is in config.js or your operating system's language settings. This will make it easier to do quick tests in multiple languages without having to edit product or operating system settings.

You can no longer set djConfig.locale in config.js

Locale can no longer be set in config.js. Locale is set based on the brower's language settings. The browser's language settings are based on

  • Changes the user makes to their browser language in the browser's settings
  • The OS language settings
It now works by looking at the HTTP_ACCEPT headers sent by the browser to determine the best language to use, since window.navigator.language that dojo uses does not get updated when the user changes their browser language; its only updated when the OS language is changed.

To override the language set by the browser, you can add dojo.locale=xx to your URL.

Finally, localization of currency is planned for 6.4.

MSIE Compatibility

Projects created in WM Studio 6.3 and the 6.3 version of Studio use the X-UA-Compatible meta tag IE=8. This provides for applications that run in IE8 mode by default. The chome=1 tag used for chrome frame is commented out by default. Users wishing to use Chrome Frame should remove the IE=8 tag and replace with chrome=1;

Upgrading

Compatibility

Select Menus and with unrestricted values

Applications with select's can let the users enter their own values by disabling the restrict values property. By default, restrictValues is checked and enabled.

If the user's entry does not match a valid choice the editor is invalid. With restrict values disabled getDataValue() now returns undefined. Previously, the data value contained the user entry.

Applications dependent upon data values in all cases should re-enable restrict values or access the displayValue if the data value is undefined and the editor invalid.

EditPanels using wm.RoundedButton will revert to wm.Button

This upgrade issue will affect users using wm.EditPanel (the button panel inside of a LiveForm) and are using wm.RoundedButton buttons inside of it. In particular this affects users of the wm_notheme theme where the only way to get a good rounded button is using the wm.RoundedButton class. If this describes you, you will need to open each page with an EditPanel and change the EditPanel's editPanelStyle BACK to wm.RoundedButton.

LiveForm's validateBeforeSave property removed; saveDataIfValid method added

LiveForm used to have a validateBeforeSave property which refused to save a live form to the server unless the form was valid. This wasn't much used because the save button itself should be disabled if the form is invalid. This property has been removed. If you want a conditional save operation, we now have a saveDataIfValid method

Studio Browser Cache

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.

Fixed Bug Lists

Known Issues


      Share/Bookmark
© 2004-  WaveMaker, Inc