Laboratorio: Desarrollo para Smart Devices

GeneXus Salto Lab
“Developing Smart Devices applications”

Laboratorio GeneXus Salto Beta. “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
Step 1 - Web Application and Initial Data Upload.................................................................................. 7
Step 2 – Applying Patterns and Creating Dashboard ........................................................................... 10
Application of the Work With Pattern for Smart Devices................................................................ 10
Creating the Dashboard ................................................................................................................... 11
Running the application on Android ................................................................................................ 13
Step 3 – Adding Design......................................................................................................................... 15
Annex 1 – Running on the Device (Android) (Optional)....................................................................... 19
Annex 2 – Multiple Layouts per Row (Optional) .................................................................................. 20
Annex 3 – SD Image Gallery (Optional)................................................................................................ 22
Thank you for participating!................................................................................................................. 25
Glossary................................................................................................................................................ 25

Aim
In this Lab, you will be provided with a step-by-step guide for the construction of a simple
application for Smart Devices, using GeneXus Salto version. The aim of this laboratory, however, is
not training but familiarization with the simplicity of the development of applications for smart
devices with 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 also use Genymotion to emulate an Android device, which
should already be running.
Creating the Knowledge Base
We will start creating the Knowledge Base with the following configuration:
 Name = “LabSD<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
GX25LabSD.xpz (Located under LabSD 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 Web application, which we will take as a starting point to create our Smart Devices version of it.

Step 1 - Web Application and Initial Data Upload
This will be the home page we will find when opening the KB named "GeneXusMeetingLabSD"+ User
Number in GeneXus. Let's go over its different parts before going any further.
1. Toolbar: It provides access to all the GeneXus Knowledge Base options.
2. Knowledge Base Navigator: It is a set of contextual menus to browse on objects, whether in its view
by folders (Folder View), categories (Category View), or also to view the list of latest changes (Latest
Changes View) and Model Properties (Preferences).
3. Main: This is where the Start Page and one tab for each of the Objects opened unfold.
4. Properties and toolbox: for controls, objects and selected variables.
5. Output: for different operations (specification, generation, compiling, etc.).
As we can see on the Folder View of the Knowledge Base Navigator, we have a pre-loaded application
which, as we have already mentioned, is only implemented as a Web application, and our job will be
to create its version for Smart Devices. Now we will execute the Web version to see what it is all about.

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 = LABSD<GXtechnicalUser>
 Deploy Server URL = http://apps5.genexus.com
Also, set the Data Store properties:
 Database name = LABSD<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 – Applying Patterns and Creating Dashboard
We have 3 Transactions: Country, Speaker, and Session, which currently have the Work With Web
pattern applied to them.
Application of the Work With Pattern for Smart Devices
We proceed to apply the pattern for Smart Devices.
We double click on the Country transaction (within the Root Module > Transactions folder). A tab will
open to work with that transaction. On the lower part of the screen we will see the following task bar:
We then select the Patterns option. The following will then be displayed:
First, we will select the tab that corresponds to the Work With for Smart Devices pattern, and then
we will click on the option Apply this pattern on save.
Finally, we will save our changes with the Save button and repeat the process for the other
two transactions. Note that in the Folder View under the node of each Transaction the objects created
by the pattern that corresponds to each of them will appear.

Creating the Dashboard
We will now create a Dashboard object, which will be the starting point for our Smart Devices
application. To do so, we will select (on the ToolBar) File > New > Object (or using the shortcut Ctrl +
N).
We will select the Dashboard object from the object list and we will name it. For this example, we will
use GeneXusMeeting. We will then press the Create button.
We already have the starting point for our application, now we only need to add the corresponding
entries to the Dashboard in order to execute the WorkWithSmartDevices we have previously created
on our transactions.
To do so, we right click on the Items node in the Dashboard we have created and add a new Action
(Add>Action), as shown in the following image:

An object selection dialogue will appear, in which we will need to look for the WorkWithDevices for
the three transactions we have created, and add them one by one. Then we save the changes with
the Save button.
After adding the three WorkWithDevices, our Dashboard should look like this:

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.
Running the application on Android
Having done 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.

In the emulator, we load the Startup Object we had configured previously: the GeneXusMeeting
Dashboard.
We will then see the three input options for our application (Country, Speaker and Session) which are
the ones we added as Actions on the 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.
Tip: Do not close the Emulator. This way you’ll avoid the emulator reopening every time
you execute the application
Step 3 – Adding Design
We will now add some design, so that our application looks better.
In order to do this, we will go back to the Dashboard and select the action corresponding to Country
and, on its properties, we will change the way in which it shows its description and image, as follows:
We do the same for the other two Actions in the Dashboard: Session and Speaker.
Keep in mind that for the property Image we will use images that have been pre-loaded to the KB,
named: CountriesSD, SpeakersSD and SessionsSD, and we add them as follows:

Now let’s open WorkWithDevicesSpeakers object. We will now change the information shown on the
List for WorkWithDevicesSpeakers. We replace SpeakerName for SpeakerFullName and we add
CountryName right under the previous to show the Speaker’s country. When adding an attribute the
Label is added displaying the name of the attribute. To remove them we will set Label Position
property to None.
To improve the looks will make the Speaker’s photo to fill both rows. We Access the Image properties
and set Row Span to 2.
Now, to further improve the looks of our application, we will insert a Launch Image to be shown
when the application starts. We will also add a new icon and title.
In order to change the title, we will click on the Dashboard node, and on the Title property we will
modify and set Lab SD as shown in the image:

Then, to add a new icon and launch image, we will click on the Dashboard object in the Folder View
and we will modify the properties: Android Application Icon and Android Portrait Launch Image, as
shown on the following image:

Finally, we select Rebuild All and run the application to see the changes we have generated:
(F5).

Annex 1 – Running on the Device (Android) (Optional)
If you have an Android device, you can also install the application on it. The steps to follow are these:
Go back to the IDE on GeneXus, and go to the ToolBar: View > Show QR Codes. This will display the
browser with the following content:
All we have to do now is simply read the QR code that has been generated for Android with
our device and the .apk file generated by GeneXus will automatically start downloading in
order to install the application.
Note: You must allow the installation of applications from unknown sources. This can be
usually enabled on the security section of the Settings menu.

Annex 2 – Multiple Layouts per Row (Optional)
The aim is that when a user taps on a Speaker on the List, instead of directly showing the detailed
information of the Speaker, this particular line expands, showing the CV there.
Solution:
We access List section for WorkWithDevicesSpeaker. Click on the upper right corner of the Grid and
select Add New Item Layout which we will define with the name "Select".
On this new layout, insert the SpeakerCVMini attribute right under SpeakerImage, and set Label
Position = None and Col Span = 3 so it will fill 3 columns.
For the Grid we will also modify properties Default Selected Item Layout as Select and Default Action
= <none>.
Now for the table located inside de Grid set Columns Style = 64dip; 85%; 15%
To view more details, the user must tap on the image of an arrow pointing to the right (arrow_right).
What do we have to do to achieve this behavior?
Solution:
Step 1
We open the Select layout and drag an Image control to the right of SpeakerFullName. Search and
select arrow_right image. On the Image properties set Row Span = 2.

Step 2
Right click on the SpeakerImage attribute and select Go to Event > Tap, on the associated event, to
insert the following code line (this will take us to the Speaker details):
WorkWithDevicesSpeaker.Speaker.Detail(SpeakerId)
To finalize, we execute the application to see the changes added: (F5).

Annex 3 – SD Image Gallery (Optional)
We will create a new Panel for Smart Devices type object. We will then go to: File > New > Object and
create that object with the name: ImageGalleryCountry.
Once created, on the ToolBox toolbar we will create a Grid in the layout. To do so, Drag & Drop the
Grid option on our panel layout, and a dialogue will appear to specify which attribute/variable we will
insert in the Grid.
Select CountryFlag and then press the OK button.
We will then see the Grid we created, with the attribute inside of it. We can now indicate that we
want to show that grid as an image gallery. In order to do this, click on the Grid and go to its properties.
We will change the properties:
 Control Type = SD Image Gallery
 Data Attribute = CountryFlag
 Grid Behavior = Show Full Image
 Enable Share Action = True

Step 1
We will associate this event within the WorkWithDevicesCountry so that we can invoke it. To do so,
we will open the List and drag from the Toolbox a Button and drop it into the Application Bar. We
will name it “CountryFlags”.

Step 2
Double click on the button, or right click> Go To Event, it will send us to the event that is associated
to that button. Here we will call the panel we have just created with the following code:
Event 'CountryFlags'
ImageGalleryCountry.Call()
Endevent
Finally, we run a Rebuild All and then execute the application to see the added changes: (F5).
In order to visualize the panel we have previously created, click on the menu button of the emulator,
which will show the button that will invoke that panel.

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

Laboratorio: Desarrollo para Smart Devices

More Related Content

Viewers also liked

Similar to Laboratorio: Desarrollo para Smart Devices

More from GeneXus

Recently uploaded

Laboratorio: Desarrollo para Smart Devices