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

Software