Laboratorio: Desarrollo de aplicaciones Web con GeneXus Evolution 3 y Salto

Lab:
“Web applications development”
GeneXus Salto

GeneXus Salto Lab: “Web applications” | 2
Copyright 1988 - 2015| Artech Consultores S. R. L.
All rights reserved. This document may not be reproduced on any media except upon express authorization
by Artech Consultores S.R.L. The information contained herein is for personal use only.
Registered Trade Marks
Artech and GeneXus are registered trademarks of Artech Consultores S.R.L. All other trademarks referred to
in this document are the property of their respective owners.

Contents
Objective .............................................................................................................................................. 4
Creation of KB, database, and load of initial data ......................................................................... 4
RWD – Observing a responsive application in action.................................................................... 8
RWD - Web Abstract Editor..............................................................................................................10
RWD – Various layouts for different screen sizes ........................................................................12
RWD – Hiding a column in a grid....................................................................................................15
RWD – Changing font color and size in accordance with screen size.......................................19
Smooth – Updating ONLY part of the page ..................................................................................21
Smooth – Updating ONLY lines on a grid......................................................................................23
Smooth - Transitions (Single-Page Applications - SPA) ...............................................................27
Live editing.........................................................................................................................................28
Thank you for participating!............................................................................................................31
Glossary..............................................................................................................................................32

Objective
Learn about the tools and functionalities available to design and generate web
applications.
The application to be built consists of a product catalog. Throughout this lab, we will see
how to handle screen design, colors, and functionalities such as Responsive Web Design
(RWD) and Smooth.
Creation of KB, database, and load of initial data
For this lab activity, we will be using the GeneXus Salto version and Chrome will be the
browser.
The icon associated with GeneXus is in the desktop. Execute it.
The first step is to create a new Knowledge Base with the setting:
 Name = “KBLabWeb<NroUsuario>” The User number is on the monitor.
 Directory = C:Models
 Prototyping Environment = C# Environment

Import the following xpz: C:LabWebGx25-LabWebInicial.xpz.
Do a ‘Rebuild all’
You will request the application’s database information. It will be the locally installed Sql
Server:

Click on the ‘Finish’ button, followed by the ‘Create’ button to execute the reorganization.
Once the tables have been create, you will have to load initial data. To do so, execute the
DataInit procedure.

You will get an output like the one shown below in GeneXus:
========== DataInit Compilation for Default (C# Web) started ==========
gxexec "C:modelsKBLabWebCSharpModelwebbldadatainit.cs" -r:GxBaseBuilder.dll -
arg:csc="C:WINDOWSMicrosoft.NETFrameworkv3.5csc.exe"
DataInit Compilation for Default (C# Web) Success
========== Web config update started ==========
Updating web config ...
Web config update Success
========== Execution started ==========
" C:modelsKBLabWebCSharpModelwebbinadatainit.exe"
Execution Success
Run DataInit Success

RWD – Observing a responsive application in action
Responsive means that the pages generated are automatically adjusted according to the
size of the screen on which they are shown, either a large monitor, a medium monitor,
tablets (small) or mobile phones (extra Small).
Note this behavior in runtime. Press F5 or click the Run Developer Menu button.
The Developer Menu will be executed on the browser.
Enter the ‘Home’ web panel:

Note the responsive behavior by entering the “Work With Products”.
Try changing the size of the browser window

Note how columns are automatically
‘deleted’ as the window is reduced in size
–instead of getting scrollbars- and they
appear again as the window is enlarged.
Note how the location of the Insert
button is modified, as the screen size
changes.
Note how a new button is generated to
access filters
RWD - Web Abstract Editor
To generate responsive applications we must use the new editor known as Abstract
Layout.

This editor uses Responsive Tables to generate these pages. As opposed to an HTML
table, a Responsive Table allows the configuration of various sizes for different screens.
Let’s see an example. Open the WWProduct web panel (it is under Root – Transactions –
Product – WorkWithProduct)
Note the controls and properties. The responsive tables are the ‘pink’ controls. Let us now
see their properties: select the Main table and go to its property “Responsive Sizes”.
You will get to the following dialog, where you may design several things for the various
screen sizes by just setting up properties.
Note how by changes the values of the Size combo we can make designs vary from Extra
Small size (cell phones) to other sizes

RWD – Various layouts for different screen sizes
We should now see something in practice.
We want to change the “View Product” so that in the Medium and Large screens the
product’s photo is to the left of the product data. And making the space for that photo
equal to 33%, leaving 67% for the data space (instead of 50% and 50%).
That means that, instead of viewing it like this

We want it to look like this:

Solution
Open web component ProductGeneral (it is under Root – Transactions – Product –
WorkWithProduct), select the “Main” table, and in properties go to Responsive Sizes and
select Size = Medium
Select cell “2.1” anc click on the “>” button. Note how the location changes and it moves to
the right as we wanted it. When we modify the Medium size, it automatically these changes
occurs also for the “large” size. However this is not the case for smaller sizes. Verify that.
Then change the “width” of 2.1 and 2.2. Set 33% for 2.2 instead of 50%, and change 2.1
from 50% to 67%.

Press OK, and execute F5.
In runtime, browse to the view of any product and try the changes through several sizes to
verify the result of what we wanted to do.
RWD – Hiding a column in a grid
In responsive applications, only relevant data is shown on mobile devices. We can see this,
for instance, in the WWProduct, where an “Extra Small” screen shows only some columns,
while the larger screens show all columns.
This may be done by using the Column Class property in the grid columns and values
WWColumn and WWOptionalColumn in the Flat theme. Those classes have rules
conditioned by size, as shown in the following capture:

Let’s see this in practice.
Suppose that, for the Extra Small size, in addition to the name, we also want the
product’s photo to be viewed as well.
Solution
Therefore, open the WWProduct web panel and select the ProductPhoto column. Note
that it has the property Column Class = WWColumn WWOptionalColumn. Change it to
just WWColumn.

F5, enter to WWProduct, reduce the screen, and verify that now, the product’s photo also
appears in addition to the name

RWD – Changing font color and size in accordance with screen
size
We now want to change the color of buttons and the font sizes, in accordance with the size
of the screen. For devices (Extra Small size), set the buttons with blue color and set the
font size on the grid lines to 18pt.
The interface we want for mobile devices is the following:

Solution
Open the Flat them (it is under Customization – Themes) and let’s now change two
properties only for the “ExtraSmall” column of classes DescriptionAttributte and
BtnEnter.
 In the BtnEnter class change to Background Color = SteelBlue.
 In the WWColumn class change to FontSize=18 (under the Lines Font group)

Press F5 and verify the changes made.
Note: It si possible that you have to press CTRL+F5 in order to see the changes made,
instead of using cached values.
Smooth – Updating ONLY one part of the page
A web panel is required to allow the selection of products from a grid on the left, while the
data on the products is loaded on the right and ONLY the component on the right is
refreshed as different products are clicked on.

Solution
Open the LikeProducts web panel (it is under Root Module)

Note that we have a grid and a component, where the Green on the left is the grid with the
list of products, and the component on the right is where the data of the productName will
be loaded upon clicking on it.
Go to Events and add the following Event
Event ProductName.Click
ProductDetailWC.Object=Create(ProductDetail, ProductId)
Endevent
Press F5 (Run), and, from the Developer Menu, call the LikeProducts web panel.
Note that when we click on ProductName, this generates the load of the
web component ONLY, showing all data on the product, and WITHOUT
refreshing the rest of the page.
To have this type of applications in GeneXus, all we need to do is select the
Smooth value in the “Web user Experience” property. This property may
be found both at the version level and at the object level.
Smooth – Updating ONLY the lines on a grid
We now want to record and view the number of “Likes” of each product in the
LikeProducts web panel. So, clicking on the “Like” image will add one more “like” to the
ProductLikesQty attribute (which records the cumulated number of “likes”).

Solution
Open the LikeProducts web panel (located in the Root), and add two columns to the grid.
To do this from the Toolbox, drag the “Attribute/Variable” control and select the &like
variable and the attribute by selecting the ProductLikesQty attribute prior to pressing OK.

And we will get this layout:
Now add the following Event:
Event &like.Click
OneLike.Call(ProductId, ProductLikesQty)
Endevent
This will enable – with a click on the “Like” image – the trigger of the OneLike procedure
(already in the KB) that receives the product identifier and updates the number of “likes”.
Press F5 to execute the application and try the newly implemented functionality, adding
‘Likes’ to products.
Note that by clicking on the “Like” image only the corresponding line is
refreshed. The rest of the page is not reloaded.

Smooth – Transitions (Single Page Applications - SPA)
Now, we want to change the effect of the transition between pages in the application. We
decide that when page B is called from page A, the effect of page B will be to push up from
below, and the effect of page A will be to push down.
Solution
Open the Flat theme and edit the properties of the Form class.
Select the effect desired in the Enter/Exit Effect properties.

Execute the application again – F5 – and enter the Home link and then Work With
Products. Then return to Home. Note how pages appear and disappear when you browse
through them.
Note: we must do a CTRL+F5 on the browser to avoid using the theme´s prior version,
because it might be cached in the browser.
Live editing
We previously saw how to change class properties in the Flat them to later generate,
execute, and even do CTRL+F5 to view the changes.
What if we could change the theme and view the changes directly on the browser
WITHOUT generating?
“Live editing” has been implemented -and is already included in the Beta version- to make
this possible and make screen design significantly more agile.
Let´s now see how this is activated and how it works.
In the IDE, select Live Editing from the combo in the GeneXus bar.
Note that when se select it, we are enabling the “Live Editing” option in the Knowledge
Base Navigator. Click on it.

Then do Run (F5), and access the “Home” link, where we will be working.
Note: This F5 sólo is only needed once, following the actioning of the Live editing.
Verify the green light indicating that the “Live Editing” is on.
Open the Flat theme, change some classes and verify, on the browser, that the changes
are automatically reflected.
For example, change the following properties. (We suggest using the theme editor´s “Filter”
to locate the class that is to be changed.)
Change them one by one, and note the changes made in home.aspx on the browser.

Class Property To value
TextBlockHeader Forecolor LightSteelBlue
FontStyle Italic
FontWeight Bold
FontSize 40px
RecentLinkItem BorderStyle double

Thank you for participating!

Glossary
In the links shown below, you will find documents with in-depth details of what has been
presented during this lab, as well as additional related documents that might be of interest
to you.
 Responsive Web Design (RWD)
http://wiki.genexus.com/commwiki/servlet/hwikibypageid?25186
 Web Abstract Editor
 Smooth
 Single Page Applications (SPA)
http://wiki.gxtechnical.com/commwiki/servlet/hwikibypageid?22455
 Transitions
 Live Editing in Web Applications

Laboratorio: Desarrollo de aplicaciones Web con GeneXus Evolution 3 y Salto

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Laboratorio: Desarrollo de aplicaciones Web con GeneXus Evolution 3 y Salto

Ähnlich wie Laboratorio: Desarrollo de aplicaciones Web con GeneXus Evolution 3 y Salto (20)

Mehr von GeneXus

Mehr von GeneXus (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Laboratorio: Desarrollo de aplicaciones Web con GeneXus Evolution 3 y Salto