Smart IDE

WorkWithPlus has a unique IDE for working with WorkWithPlus for Web and Native Mobile. In this IDE you will visualize each object generated by some transaction in different Tab so that you can navigate through these objects in an easier way.

Also, you have to option to have a real-time Preview. So, each time you make a change within the instance the Preview will be updated.
This IDE is available in GeneXus X Evolution 2 or higher.

Example of IDE in a transaction's instance

The Person transaction's Patterns tab shows the Work With Plus pattern applied, with the Transaction (Person) node tree expanded and a Large preview of the generated web form showing Basic Information, More Information, and Auditing tabs with fields such as Id, First Name, Last Name, Hobby, Nickname, Birth Date, Gender, and Company Id.

If you make click over an item in the Preview (attribute, textblock, etc.), you will be able to modify its properties. This is the same as clicking in the item´s node, but in many cases, it's faster and simpler for developers:

The Properties panel for the PersonId attribute node is shown with a red 'Click' callout pointing from the Id field on the form preview to the attribute in the pattern tree, illustrating how selecting a field opens its properties (Description, Link, Form, Control Info, Custom Properties).

This IDE has actions that are at the top right actions (detailed below) and also has actions that can be made directly there using a toolbar and making hover to the controls. Some of these actions are:

  • Insert new controls from the toolbar

Transaction (Company) pattern editor, Template: Transaction, with the CompanyLogo attribute node selected in the tree, showing the GENERAL INFORMATION preview form with Company, Name, Description, and Logo fields plus Confirm, Cancel, and Delete buttons.

  • When positioning the cursor on an element, the selected element will be highlighted. You can choose whether to highlight it permanently, for some seconds or not highlight it at all

Transaction (Company) pattern editor, Template: Transaction, with an Automatic preview showing a GENERAL INFORMATION form with Company, Name, Description, and Logo fields, plus Confirm, Cancel, and Delete buttons.

  • Change the title, caption, description of attributes, variables, textblocks, panels, buttons, etc. As you can visualize, each control in the form has a set of options, which is shown when making a hover over the control.

Transaction (Company) pattern editor, Template: Transaction, with the CompanyId node selected in the tree, showing the GENERAL INFORMATION preview form with Company, Name, Description, and Logo fields plus Confirm, Cancel, and Delete buttons.

  • Drag & Drop elements within the form, and also in a grid in order to reorder them. As for attributes and variables within a grid, you can easily change the alignment of the column, the look & feel of that column, or its title, among other features.

Selection (Customer) pattern tree with a grid preview showing Insert, Excel, PDF, and Select columns action buttons above a table of Id, Last Name, Full Name, Birth Date, Photo, Address, Hobby, and Date Time columns, plus a search box and Prev/Next pagination.

If you make double click in any Tab (Selection, Prompt, View, etc.), the associated object will be opened:

On the Work With Plus Patterns tab, a red arrow highlights the 'Selection' toolbar button next to Transaction, indicating where to click to add or open the Selection node for the Person pattern instance.

The Web Form designer for PersonWw shows the LayoutMainTable with a 'Person' title and an ErrorViewer, followed by a Grid section with columns Id, First Name, Hobby, and Last Name, each bound to editable attribute controls like &PersonFirstName_Editable.

There are two icon buttons. These actions are always located at the right top corner:

The Selection (Person) node is expanded in the pattern tree, showing TableMain, TableHeader, TableActions, and Standard Actions (Insert, Help, EditColumns, ExportReport); a red arrow points to the gear (settings) icon above the preview, which shows a search bar and result grid.

The configuration button is contextual, so, depending on which node is selected will be the options available on them.

With the Selection (Person) node selected, the gear icon menu is open showing options Update Instance, Mark Instance as Updated, Preview, Open WorkWithPlus Settings, Apply Pattern Instance, and Build With These Only, highlighted in red at the top right of the Patterns tab.

With the Selection (Person) node selected, the 'add' (+) icon menu is open listing extra node types that can be added: ExtraSelection, ExtraView, Prompt, PromptMultiple, Association, and AssociationSelection.

Example of IDE in a web panel's instance

The WebPanel8 object's Patterns tab shows the Work With Plus pattern applied and based on template CreateData, with a node tree for TableMain, Data, Error viewer, and a General Information panel listing Company attributes (CompanyId, CompanyName, CompanyDescription, CompanyUrl, CompanyLogo, CompanyLocation, etc.), alongside a matching Large preview of the generated Data form.

The Web Panel instances also contain the configuration button, which contains the following options:

In WebPanel8's Patterns tab, the gear (settings) icon at the top right is highlighted in red, with its dropdown menu open showing options Change Selected Template, Update Instance, Mark Instance as Updated, Preview, Open WorkWithPlus Settings, Apply Pattern Instance, and Build With This Only.

WorkWithPlus Settings IDE

The WorkWithPlus Settings, which contains global properties, the transaction templates, and the Web Panel templates, has also an IDE:

The WorkWithPlus pattern settings window shows the General Properties tab with the WWP Configuration tree expanded: Template, Objects, Theme, Labels, Grid, MasterPages, Context (WWPContext), and GXtest Cases Generation.

The options available are the same as the ones shown in the settings tree.

General Properties Tab groups the following nodes:

The WorkWithPlus Pattern Settings General Properties tab lists the WWP Configuration items Template, Objects, Theme, Labels, Grid, MasterPages, Context, and GXtest Cases Generation, all enclosed in a red highlight box.

There are two contextual actions. So, depending on which tab is selected will be the options available on them. These actions are always located at the right top corner:

The WorkWithPlus Pattern Settings window, Web Panel templates tab, shows the CreateData template tree with TableMain, Data, Error viewer, a General Information panel with an Attributes & Variables node, Action Group (Enter, Cancel), Events & Subs, and Variables; a red arrow points to the add icon at top right, above a preview of a Data form with Dummy att 1-3 fields and Confirm/Cancel buttons.

For example, when you are visualizing a Web Panel template, the options available for the action 'settings' are the following:

In the WorkWithPlus Pattern Settings, Web Panel templates tab, the WorkWithWithoutBaseTable template's gear icon menu is open showing List Objects based on this template, Update Instances, Mark all Instances as Updated, Delete Template, Preview, and WorkWithPlus Help; the preview shows a 'Work With Title' form with Dummy att 1-3 fields and a grid below.

Dock - Undock Preview at Real-Time

Using the unique WorkWithPlus IDE for GeneXus X Ev2 the option to dock or undock the real-time preview has been added.
 
If you click in the option to undock into separate window you will have real time preview undocked:

With the Selection (Person) properties panel open, the gear icon menu shows the Preview submenu expanded with 'Undock into separate window' highlighted in red, next to Update Instance and Mark Instance as Updated options above a preview of the Person selection grid.

An undocked Preview window shows the Person Selection screen with Insert, Help, Select columns, and PDF buttons, a Search in 'Full Name' filter, and a results grid with columns Id, First Name, Hobby, Last Name, Full Name, Nickname, Birth Date, Gender, Id, and Company, paginated with Records 1-11 of 11.

Then, you can also return to have the preview docked by clicking in the 'settings' icon, Preview -> Dock to main window.

The difference between the Preview of previous versions of WorkWithPlus and the new Preview is that with any change made in the instance the preview will be updated automatically and at real-time. So, if you have two monitors for example you could have in one window the IDE of GeneXus and in another one the Preview.