My Account

My Account

The My Account function is the simplest client/server part of petstore. The window is launched from the dashboard by calling gui/myAccount.inq:showMyAccount(). It follows the common pattern for creating a GUI that is a context node and exchanging with the server during initialisation:

  1. create and configure the components
  2. choose a suitable component on which to apply the gContext event
  3. complete any required initialisation in the event handler, running in the new context.

My Account is built on the following Inq features:

  1. The GUI creates no data of its own - each component has its renderinfo property set, binding it to a node
  2. The service initAccount() in the server places the Account instance at the path $this.vars.Account. This automatically propagates the instance to the client at the same path via Inq's event propagation from server to client
  3. Corresponding events in client cause the GUI to render the data via automatic MVC.

Layout Features

Here is the My Account window:

MyAccount

We'll use it as an example to introduce features supported by Inq's GUI layout() function. Here is the invocation it uses:

  // layout the components
  layout(., myAccount, "Scroll Margin d:3
                        Caption {i18n}.ps.title.ACCOUNT_DETAILS;
                        Table  Columns labels1=GRID_PREF, 5, comps1=GRID_FILL, 10, labels2=GRID_PREF, 5, comps2=GRID_FILL
                          Gap 3 Rows
                               GRID_PREF,
                               GRID_PREF,
                               GRID_PREF,
                               GRID_PREF,
                               GRID_PREF,
                               GRID_PREF,
                               GRID_FILL,
                               buttons=GRID_PREF;
                        {
                          Column labels1
                          {
                            Label tfAccount
                            Label tfFirstName
                            Label tfLastName
                            Label tfAddr1
                            Label tfAddr2
                            Label tfEmail
                          }
                          
                          Column comps1
                          {
                            tfAccount
                            tfFirstName
                            tfLastName
                            tfAddr1
                            tfAddr2
                            HSpan comps2 tfEmail
                          }
                          
                          Column labels2
                          {
                            Label tfPhone
                            Label tfCity
                            Label tfState
                            Label tfZIP
                            Label tfCountry
                          }
                          
                          Column comps2
                          {
                            tfPhone
                            tfCity
                            tfState
                            tfZIP
                            tfCountry
                          }
                          
                        } // end Table
                        
                        Geometry xy:vf
                        Margin d:3
                        Table  Columns 0.25, GRID_FILL, 0.25, 5, 0.25
                          Rows GRID_PREF;
                        {
                          Cell 0 0 bSave
                          Cell 2 0 bDiscard
                          Cell 4 0 bCancel
                        }
                        ");

This discussion assumes you are familiar with the table layout Mini Guide. There is also further information about layout() in the GUI Basics section.

General

The layout() function parses a layout string that contains layout qualifiers, specifies graphical containers with their constraints and references components to create the GUI containment hierarchy. Components do not have to pre-exist: those that are significant to the application will have been created and possibly configured with property settings prior to layout, however layout() can also create components as it goes along, usually to achieve a desired appearance.

The general form of a layout clause is

<layout-clause> = [ <qualifier> ] ( <container> "{" <layout-clause> "}"
                                  | <component>
                                  | <directive>
                                  ) 

Keywords in the layout syntax begin with an upper-case letter. Layout begins with a simple column container, that is comonents (or containers) at the top level are laid out vertically in the order they appear in the string.

We go through the My Account example, explaining the details.

Layout Qualifiers

There are three qualifiers here, Scroll, Margin d:3 and Caption {i18n}.ps.title.ACCOUNT_DETAILS;

Scroll makes what follows scrollable. More of a demonstration in this case, see what happens when reducing the size of the window.

Margin d:3 places a three pixel margin around what follows.

Caption {i18n}.ps.title.ACCOUNT_DETAILS; resolves the expression and uses its result to place the look and feel's default title border around what follows.

The Table Definition

The layout string then specifies a Table container - again Mini Guide refers. The preferred formatting of the string is to express the columns on a single line and the rows one per line, making the table easier to visualise.

The Label Directive

Clauses like Label tfAccount (used when filling the table cells) are examples of the Label directive. This clause creates a label during the layout based on the the associated component's renderInfo property. The label text will be the default, inherited from the renderinfo's specified typedef and field or any that was provided with the label = argument. It can be seen how useful it is to centralise labels in typedefs and have them accessible when building the GUI.

The Geometry Qualifier

A second table (in the top-level vertical box) contains the buttons. This is qualified with Geometry xy:vf, which means allow the following to stretch and shrink in the x direction while remaining fixed along the y axis.

nextpage