First Steps with GeneXus Web - Using Patterns (for Web and for Native Mobile)

Patterns allow you to empower your applications even more, automatically.

Applying a Pattern is really easy, and as soon as you do it, GeneXus creates objects, codes and settings to provide interesting behaviors without the need for us to program them.

Look at the Patterns section of a Transaction. For example, in the ProductType Transaction click on the Patterns tab which is next to the Web Form tab.

Note that three tabs are available on the top, each one offering a different pattern to be applied to the same Transaction.

First of all, choose the Work With for Web tab, to see how simple applying a pattern is, and how quickly you obtain interesting results.

You only have to click on the checkbox Apply on save and save.

After saving, if you look for the ProductType Transaction in the KB Explorer, you can see that several objects are located below the Transaction:

They were created by GeneXus when the Work With for Web pattern was applied.

Now press F5 to view in runtime the results:

Look at the last link offered. You're offered to “work with product types” and from there the ProductType Transaction will be called. Click on that link.

You can see that a page is opened showing all the stored product types. This page let the users to work with the product types with a wide range of features.

For example, click UPDATE for the first line:

You can see that the ProductType Transaction is opened offering to edit the details of the product type in that line. Let’s edit the type name and confirm:

After the edition and confirmation, the application returns to the Work With Product Types page:

The DELETE link offers the users to delete the product type in the line.

Meanwhile, the INSERT button located outside the grid, allows the users to add new product types. By clicking on it, the ProductType Transaction is opened, ready for adding a new product type. Press it in order to enter a new product type (remember in this case it’s only necessary to enter the product type name because you have set the key attribute’s Autonumber property = True):

Once again, after the insertion, the application returns to the Work With Product Types page:

Now note that each product type name has a link. Click on the product type: Medicines.

As you can see below, all the details of the selected product type are displayed in a first tab, and another tab shows the list of products that belong to that product type.

The Product tab was automatically generated because each product type has several related products. If each product type had also several related data of other kind, more tabs would have been generated in order to show each list of data related to the product type.

Now, go back to the Work With Product Types page, by clicking on the corresponding link in the Recents section provided at the top left of the page.

Note that it’s possible to search by name. This means that if, for example, the user types “C”, only the product types that begin with this letter will be displayed:

Go back to GeneXus Web. So far, you have only selected Apply on save in the Work With for Web tab of the ProductType Transaction, and after saving you have seen all the features that are automatically generated. 

Take a look at this configurable tree:

It has configurable nodes, sub-nodes and elements, so that you can customize the behaviors to be generated (i.e. change the search criteria). 

What you may not have noticed is that:
1)    The Source of the ProductType Transaction now contains rules defined automatically by the Work With for Web pattern as well as code inside the Events section:

Don’t worry about understanding the automatically generated code.

The idea is to take advantage of everything that is generated automatically and quickly.  Anyway, if you continue learning GeneXus, at some point you will understand it.

2)    As already explained, after applying the Work With for Web pattern to the ProductType Transaction, the “Work With Products Types” object automatically generated, calls the ProductType Transaction (to allow inserting product types, etc.). The ProductType Transaction is called with parameters (data that the caller object sends to the Transaction to be known there), so, that Transaction isn’t offered any more in the “Developer Menu” page. From that moment on, you can execute the “Work With Products Types” object to perform any kind of operation related to the product types (and from there, the Transaction is called when it is necessary).

Now let’s apply the Work With for Web pattern to the Product Transaction, too. As explained before, you only have to open the Product Transaction and select its Patterns section. Then, you have to select the Work With for Web tab, check the option Apply on save and save:

Press F5. GeneXus proceeds generating the necessary programs and executing the application with the changes.

Click on the link that offers you to “work with products”:

You can see the same query features that you already saw for the “Work With Product Types” page:

Let’s insert a new product: 

After the confirmation, the application returns to the Work With Product page:

Since it’s irrelevant to display the product type code in the grid, let’s remove it from the configurable tree which is taken into account to generate this Work With for Web:

Press F5 and GeneXus proceeds saving, generating only the necessary programs and executing the application with the changes:

Now insert some products in the same consecutive manner as showed before (by pressing the INSERT button that invokes the Product Transaction).

Below is the Work With Products dialog that lists all the products that have been added:

Now let's pay attention to the Work With for Smart Devices tab offered for each Transaction. 
Let’s apply it to the ProductType Transaction:

Note that under the main node (ProductType), there is the List node. If you click on it, you can see at the right window, a grid that has the ProductTypeName attribute inserted in it. 

In contrast to the Work With for Web pattern, in this case, the Layout is already shown instead of seeing a list of attributes to be included in the grid under the node.

Now, look at the Detail node. You can associate the term Detail with seeing the details of a particular line in the list. 

The Detail node is composed of two sections: General and Product.

Like the functionality implemented by the Work With for Web pattern, the General section displays the data associated with the selected product type:

Otherwise, the Product section displays inside a grid all the products that belong to the product type:

After applying this pattern and saving, if you look at the ProductType Transaction in the KB Explorer, you can see now a new object called WorkWithDevicesProductType under the ProductType Transaction:

If you look at both objects generated under the ProductType Transaction, you can notice that the WorkWithDevicesProductType hasn’t got other objects under it (because it includes different sections to define the entire implementation inside it).

On the other hand, the WorkWithProductType, as you have already seen, is a configurable instance; so, you can set and save that instance object and GeneXus generates other objects under it to provide the useful behaviors you have seen.

Soon, you will see the WorkWithDevicesProductType in action.

The proposal now is to create a Panel object, in order to be the first object of the mobile application to be executed; and it will show an image, so that when the user taps it, the object WorkWithDevicesProductType is executed.

As explained before, to create an object you only have to select File > New > New Object in the Toolbar. The following window is then opened and you must choose the category User Interface, so that the objects that GeneXus offers which belong in this category are shown: 

Once you have created the Panel (which in this example has been named PharmacyMenu), you must configure its property Main program property = True, so that this object becomes an executable object independent of the Developer Menu (that is to say, it is compilable and executable on its own).

Now, let’s insert an image control inside the Layout section of the PharmacyMenu Panel. To do this:

1) Create a new object of the Image type and give it a name (in this example it has been named: ViewProductTypesImage)

Press the “New Image” button and select the image you have stored in a file:

After selecting the image, you will see the ViewProductTypesImage object as follows:

Now, you only have to save.

Note that for the same object of the Image type, you can add several images of different quality. 

2) Once created the Image object in the Knowledge Base, go back to the PharmacyMenu Panel. Then, open the Toolbox by clicking the icon that show "tools", and drag and drop an Image control from the Toolbox to the Layout section of the PharmacyMenu Panel:

Immediately, the following window is opened so that you can select an image object:

Select the ViewProductTypesImage that you had created and the image control will keep associated with the image object inserted in the Web Form of the PharmacyMenu Panel.

Now, select the Source tab in the PharmacyMenu Panel:

Inside the Events section you must define what you want to happen when users tap on the image named Image1. In that case, you want to call the WorkWithDevicesProductType object; but said object is composed of many parts (remember or look again at its nodes). In this particular case the List node of the object must be called, as your objective is to show the list with all the product types the pharmacy offers. 

Start defining that event:

The event’s name has been written and inside it the object’s name to be called has been written, too. Now let’s complete which component of the object must be executed. 

To understand what you have to complete in the code line, let’s review the node tree contained inside the WorkWithDevicesProductType object:

The object has a main node, ProductType, and under it you can find the nodes List and Detail respectively, so to call the List node, the complete syntax is:

Now everything is defined and ready to run the Mobile application.

You only have to set the PharmacyMenu Panel as Startup Object and, press F5:

The aim of the Startup Object is to allow you to specify which object will start running when F5 is pressed (instead of the Developer Menu). 

The object specified as the Startup Object will be the one that starts the runtime session until another object is set as Startup Object.

Then, the browser will be opened displaying a page like the one below:

Suppose you want to install the PharmacyMenu app in your Android mobile. To achieve this, you have to read the PharmacyMenu QR code which is offered under the "Install Android Apps" section, using the QR code reader you may have installed on your mobile. If you haven't got a QR code reader installed yet, you can install the Barcode Scanner.

After reading the PharmacyMenu QR code, you may see an option that offers "Browse website".  If that is your case, select it; you will be offered to install the PharmacyMenu.apk and after that you only have to open the app. Otherwise, it is possible that without seeing the "Browse website" option, you are offered directly to install the PharmacyMenu.apk and open it.

When you open the app, you will see it as follows:

If you tap the image, the list of product types the pharmacy offers is shown:

Note that the insert button on the top-right corner can be easily removed, as this application is for end-users, and you will not want them to be able to insert new products; they should only be able to view the different product types, not edit them. 

When you tap each product type (for example on “Cosmetics for teens”), the Detail is shown, along with its two sections GENERAL and PRODUCT:

Obviously, this is just a very simple demonstration and you can achieve much more sophisticated applications.