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)

Software