Laboratorio: Desarrollo para Smart Devices (continuación)

GeneXus Salto Lab
“Live Editing with Smart Devices applications”

Laboratorio GeneXus Salto. “Aplicaciones Smart Device” | 2
Copyright 1988 - 2015| Artech Consultores S. R. L.
All rights reserved. This document may not be reproduced in any form without the express permission of
Artech Consultores S.R.L. The information contained herein is only for personal use.
Registered Trademarks
Artech and GeneXus are registered trademarks of Artech Consultores S.R.L. All other trademarks mentioned in
this document are property of their respective owners.

Table of Contents
Aim........................................................................................................................................4
Preparation............................................................................................................................4
Creating the Knowledge Base ........................................................................................4
Paso 1 – Initial Data Upload ..................................................................................................6
Step 2 – Executing the application ........................................................................................8
Activate Live Editing ..........................................................................................................8
Paso 3 – Adding Design with Live Editing............................................................................11
Step 4 – Adding functionality with Live Editing.....................................................................16
Thank you for participating! .................................................................................................17
Glossary..............................................................................................................................17

Aim
In this Lab, you will be provided with a guide with the basic use of the new GeneXus Salto feature,
Live Editing. The aim of this laboratory is to allow you to test one of the most important components
of GeneXus next version, which will have a great impact on the development of applications through
GeneXus.
Preparation
For this laboratory we will use GeneXus Salto version. You will find the icon to run it in the desktop
with the name GeneXus Salto SD.
We will also use SQL Server to handle the database of the application, and Android SDK, which has
also been previously installed. We will make use of Genymotion application to emulate an Android
device, which should be already running.
Creating the Knowledge Base
We will start creating the Knowledge Base with the following configuration:
 Name = “LabLiveEditing<UserNumber>” UserNumber is written on the computer.
 Directory = C:Models
 Prototyping Environment = C# Environment
 Under Advanced, set Server = “Lab<UserNumber>”, then check “Use Windows NT
integrated Security”

We will now import objects from the web application which we will use as basis for our Smart
Devices application. Now open Knowledge Manager>Import, click on the Navigation button […] and
select GX25LabLiveEditing.xpz (Located under LabLiveEditing folder on the Desktop). We then click
on Import>>.
You will see an exemplary KB, reduced for the specific purposes of this laboratory. This KB will
contain a basic sample of the Event Day Smart Device application.

Step 1 – Initial Data Upload
In this lab, we will run our application on the cloud. In order to do so, we will set the following .Net
Generator Properties in Preferences (in the Knowledge Base Navigator):
 Deploy to cloud = yes
 Deploy Virtual Directory = LABLiveEditing<GXtechnicalUser>
 Deploy Server URL = http://apps5.genexus.com
Also, set the Data Store properties:
 Database name = LABLiveEditing<GXtechnicalUser>
 Server Name = apps5.genexus.com
After doing this, we select Run (Build > Run Developer Menu) for the application.

A home page like the one below will be displayed in the browser:
We click on the Home link, which will take us to the home page for Web:
We will then create a simple Smart Devices version of this Web model. Feel free to take a look at the
Web application for a moment, if you wish to do so.

Step 2 – Executing the application
We have 3 Transactions: Country, Speaker, and Session, which currently have the Work With Web
and Work With Smart Devices patterns applied to them.
Since the sample was already developed, we are now ready to run our application on Android. For
this, we only need to specify Dashboard GeneXusMeeting will be the starting point of the
application. This can be done through the Startup Object property in the .Net Environment.
Activate Live Editing
Before we run the application on the Emulator, we should first activate Live Editing mode in
GeneXus so the application keeps connected to the IDE.
For this we need to change the value of the Combo box located on the second row of the Toolbar, as
shown on the following image. Set the value “Live Editing” instead of the selected value, “Release”.
After doing this, we can run our application by clicking Run (F5). An instance of the application will
run on the Android Emulator. Loading of the emulator may take a few minutes, it is recommended
not to close it during the laboratory.
Verify that Live Editing is activated by clicking “Live Editing” option on the Knowledge Base
Navigator and checking that the green dot is On.

In the emulator, we load the Startup Object we had configured previously: the GeneXusMeeting
Dashboard.

Get to know the Emulator:
- See the list of Speakers and tap on any given person.
- You will see his or her information (for example, name, photo, ID, etc.).
- Select the "back" button to go back to the home page.
Note: Do not closet the Emulator. This way you’ll avoid the emulator reopening every
time you execute the application
We can observe in the application is the style is set to “Light” (White background) and the
Application Bar and Status Bar have a custom color. We can also see that the text on the Application
Bar is Black which does not go properly with the application style.
Let’s try and change that.

Step 3 – Adding Design with Live Editing
We want to change the Text Color on the Application Bar to improve it stylishly. Open
SimpleAndroid Theme located on the Folder View, under Customization > Themes. You can also do
this by pressing Ctrl+O and searching through the search bar.
We open ApplicationBars properties and change Forecolor property. Without saving or running the
application again, check the emulator and you will see the Text Color on the Application Bar
changed.

We will set the Forecolor property with the color White. Our application should look like this:
We will now enter Work With Devices Speaker in the emulator. We will see a list of all the Speakers
registered.
If we Tap (click) on one of the speakers, an alternative Layout will show which includes the speaker’s
Curriculum Vitae. Although, we can see that the text is not displaying properly and some parts are
being cut off. To fix this we can enable Auto Grow property.
In GeneXus, open Speaker transaction and go to Work With Smart Devices Pattern in the Patterns
section. Select the List node and change the Grid’s Layout, through the arrow icon on the top-right
corner of the Grid, and select Layout “Select”. Open SpeakerCVMini properties and change Auto
Grow value to True.

If we go back to the emulator and Tap on one of the speakers, we will see the text is now displaying
as expected. We now tap on the grey arrow shown when the speaker details are displayed to enter
the Speaker’s profile. The attributes are all stacked up without any kind of design.
Let’s modify this Layout to make it more attractive.

Go to GeneXus and open Section (General) in the Work With for Smart Devices for the Speaker
Transaction. Feel free to check the emulator after any change.
Let’s start by adding a Canvas control to the top of the table. Drag SpeakerImage attribute and drop
it inside the Canvas (and move it near the center).
Now let’s configure the following properties for SpeakerImage attribute:
 Label Position = None (to remove the label)
 Horizontal Alignment = Center
 Vertical Alignment = Middle
 Left = 50%
 Width = 100dip
 Top = 5dip
 Height = 100dip
We will also set Class = SpeakerImage. And we’ll do the same for the Canvas, setting Class =
SpeakerCanvas.

Now, drag SpeakerFullName attribute inside the Canvas and set the following properties:
 Label Position = None (to remove the label)
 Class = CanvasName
 Horizontal Alignment = Center
 Vertical Alignment = Middle
 Left = 0%
 Width = 100%
 Top = 100dip
 Height = 35dip
 ZOrder = 1 (to show it on top of the Image)
Now, let’s clean the Layout a bit by removing redundant or useless information for the context. We’ll
remove from the Layout SpeakerId, SpeakerName, SpeakerSurname and CountryId attributes.
Reorder the rest of the attributes to which order you find the best and remove the rows left empty
which are still taking some space on the Layout. Also set Label Position = none for CountryName,
and do the same for SpeakerCVMini and Auto Grow = True.
Before we finish with this Layout, we open SimpleAndroid Theme and modify the Class
SpeakerImage (under Image node), setting BorderRadius = 100dip. As we see the image wasn’t
correctly scaled, so we also change the property Scale Type = Fill Keeping Aspect Ratio.
The Layout should now look similar to this:

Step 4 – Adding functionality with Live Editing
Before we end this Lab we will use Live Editing to add a new functionality we want to include in the
Event Day application.
We go to the emulator, and get back to the Dashboard to go into Work With Devices Session and
select a session. We want to add a button to the Application Bar which allow us to “Like” the
session.
Let’s get back to GeneXus, open WorkWithDevicesSession and select Section (General). There we
add a button to the Application Bar and associate the Event ‘Like’. Then we define the Event with
the following code:
Event 'Like'
composite
SessionLikesQty+=1
&Session.Load(SessionId)
&Session.SessionLikesQty = SessionLikesQty
&Session.Save()
SDActions.Refresh()
endcomposite
Endevent

Thank you for participating!
Glossary
My First Android Application
http://wiki.genexus.com/commwiki/servlet/hwikibypageid?14555
Applying Work With Pattern for Smart Devices
Multiple Layouts per Row
Using SD Image Gallery Control
Live Editing

Laboratorio: Desarrollo para Smart Devices (continuación)

Recommended

Recommended

More Related Content

Similar to Laboratorio: Desarrollo para Smart Devices (continuación)

Similar to Laboratorio: Desarrollo para Smart Devices (continuación) (20)

More from GeneXus

More from GeneXus (20)

Recently uploaded

Recently uploaded (20)

Laboratorio: Desarrollo para Smart Devices (continuación)