Demo: Starting to Develop the Web Application

Video recorded with GeneXustm15

Pag

e1

Demo: Starting to Develop the Web Application

OK. This time we will start to develop an application from scratch using GeneXus. This

application will look similar to the EventDay application we have been talking about.

We're using GeneXus 15 and don't have any KBs opened. We will start by creating a new

knowledge base called EventDays. We will create it by prototyping in C#, in this folder here.

We click on Create...

Now, when the knowledge base creation is complete, we will see all the folders and modules

that will be automatically imported into this KB. We will also see the domains that will be

automatically created and so on.

It has finished. Note that a Root module has been created. It contains a GeneXus folder with

two other folders: Common, with an external object called GlobalEvents that will be

mentioned later on, and a Web folder that will implement the MasterPage, in addition to other

objects for the web part of the application we develop.

On the other hand, let's look at this References node that is displayed in the little tree and

contains a GeneXus module, with a group of submodules: Client, Common. Let's look closely at

this one, SD, which contains a group of external objects and SDTs that will be used by our

application for Smart Devices when interacting with the various features of the device.


Pag

e2

About this node, it should be noted that everything inside here will be read-only; that is to say,

it cannot be changed. Here we can see that it says read-only:

In fact, it will be implemented when we generate our application. When we generate it in the

various stages of the prototyping process, these objects will not be generated again because

they will already exist. That is to say, the binary files will already be incorporated. This is one of

the greatest advantages provided, because the generation time will be optimized.

We will begin by looking at the default domains which are integrated into the KB when it is

created. We see that there are several domains; in particular, there is an Address domain, an

Email domain and a Phone domain, for example... All these domains will be known as semantic

domains, because they will contain semantics that will allow making certain actions when the

domains are found.

We will see this in a moment when we prototype the application.

On the other hand, we will want to prototype our application in the cloud, not locally, because

in this way we avoid the need to have the entire software, database, database manager and so

on in our file system, in our network.

We select Generators… and click on the web generator of our Environment… there we will find,

at the bottom, the Deploy to cloud property which is set to No by default; we set it to Yes. The


Pag

e3

Deploy Server URL is displayed, along with the virtual folder. From now on we will not worry

about the software and the database any more, because they will be managed in the cloud.

We have, for now, only one generator in our Environment: the default generator, which is C#,

because we selected it.

Let's start by creating two transactions. The first transaction will be used to store or record the

countries where the speakers come from. We will add a CountryId attribute as identifier, set it

as an Id domain, numeric of 8. We will set this CountryId as autonumbered, so we open the

Autonumber property of the attribute and set it to True. The domain will not be

autonumbered.

Actually, we can open the domains tab and see that the new domain we've added is now

displayed in bold (the default ones are in gray).


Pag

e4

We will create CountryName, as well as a domain called Name, of VarChar type of 20. Lastly,

CountryFlag, will be of Image type. We save.

Next, we will create another transaction: the Speaker transaction, to record the speakers of

our event. SpeakerId identifier… next, we enter SpeakerName, for the speakers' name of

Name domain… SpeakerSurname, of VarChar domain, this time of 40. We will create a formula

attribute, SpeakerFullName, of VarChar type of 60: we define SpeakerSurname (and apply the

trim method to remove the blank spaces), leave a blank space, and concatenate with

SpeakerName (trim again to remove the blank spaces). Next, we define the SpeakerImage

attribute to save the speaker's photo... SpeakerCVMini, Curriculum Vitae mini, which we set as

VarChar of 1024.

In addition, we will enter the speaker's country, CountryId, and its name. Also, we will enter a

phone for the speaker, and see that when I press tab, “Phone, GeneXus” is displayed. It is the

Phone domain, which is a semantic domain, as we will see, inside the GeneXus module that we

had already talked about. Good. We also add SpeakerAddress and SpeakerEmail, and see that

the same happens. We save.


Pag

e5

In addition to this structure, we will want to add some rules to prevent, for example, the

SpeakerName from being empty. We don't want the SpeakerName to be empty, so we trigger

this error if SpeakerName is empty (IsEmpty).

In addition, we will want to do the same about the speaker's last name: we don't want it to be

empty. So, we throw an error if SpeakerSurname is empty.

Lastly, we will display a Message rule. It will not be an error displayed when the résumé is empty; instead, it will be a message and we will not prevent a record -a speaker- from being saved if the résumé is left empty. We will just inform the user that it shouldn't be empty.

We save. There are two transactions.

If we start developing the web backend of our EventDay application, the first thing we would

like to do is apply the Work With for Web pattern to these two transactions. How did we go

about applying the pattern?

Let's review it. We opened the Country transaction and selected the Patterns tab. There we found the Work With for Web tab… and simply selected this checkbox…


Pag

e6

…after saving, the instance file would be generated. This file determines the information that will be displayed in the Work With object; that is to say, it is customized. In addition, the objects that implement each part of the Work With object would also be generated: List and View. So, if we double-click here we see that we have the instance file, which isn't an object, and

below we have the objects implementing this pattern; GeneXus object: Web Panel, Web

Component objects, etc.

In addition, the same goes for Speaker; we could do the same, or directly by right-clicking...

Apply Pattern… Work With for Web…


Pag

e7

…so, the Work With pattern will be automatically applied to this web transaction.

Here we see the instance file and open it... the instance file can be opened independently,

both within the transaction from the Patterns tab and independently.

OK. We have the Work With object applied. Now, we will set Autonumber to True for

SpeakerId.

We will want to run the web application, this sort of backend web that we're starting to build.

Something that happened automatically when we applied the pattern was that new objects

were created inside the Web folder, including the Home object, which will call these two Work

With objects by default. There, it will implement the invocation automatically; the programs to

be called will be loaded in this ListPrograms. They will be both Work With objects and they will

be displayed there.

Also, I will want to initialize these transactions with data. I don't want to do it manually,

because I don't want to waste time entering its values. As from GeneXus 15, what I would do

to initialize these transactions with data would be to open the transaction itself, and set the

Data Provider property to True… leave the Used to property to Populate data, because that's

what we want to do, populate with data. After saving, a Data Provider associated with the

transaction would be created. There, in that Data Provider, we will state how it is loaded and

what records will be loaded in that transaction. This would only be invoked when we pressed


Pag

e8

F5 for the first time; thus, when the database is reorganized, this Data Provider will be invoked

to automatically load the table with data.

I will not do it because there isn't enough time, and I had data already loaded in the traditional

way.

I will import two procedures that do the same. In XPZ I will look for an .xpz file…

…that will load these two procedures to initialize these two transactions, the tables, with data,

and will load the images of the country flags and the speakers. I import...

Actually, we're doing it in this way because I had already done it. The idea would be to use the

Data Provider associated with the transaction.


Pag

e9

The import was successfully made, so now I will just invoke them from Home, in the Start

event: InitializeCountries and InitializeSpeakers.

I save.

So, now we want to try the web backend and then start developing our Smart Device

application. I will press F5, and read this Output window.

It requires us to reorganize the database. Where is this database reorganized? In the cloud.

It is starting to generate the C# programs... here it is starting to reorganize... the Speaker table,

and the Country table have already been created…


Pag

e10

The specification begins... here we see the navigation list... which shows the navigations made.

The application starts to be uploaded to the cloud, and we're informed of the bytes remaining.

It starts to run... it is now complete and we see that the Developer Menu has been opened,

with the Home and the two Work With elements we had.


Pag

e11

If we select Home, the Start event will be run to invoke these two procedures to initialize the

objects with data.

Here, the countries are loaded...

Here we have the speakers.

So: we said that we had done the following:


Pag

e12

We had applied the Work With for Web object to both transactions…

And now we will do the same, apply the Work With object but this time for Smart Devices, and see what happens.

Documents

Demo: Starting to Develop the Web Application