Quick Demo of Creating an App with Alpha Anywhere

This is the script that was used for creating the "Demo of Creating an App with Alpha Anywhere" video. The video was edited to show the creation at high speed.

The purpose of the video is to show what it is like to create an app in Alpha Anywhere; it is not meant as a tutorial. However, some people do want to recreate the app, so this script is provided. The script assumes that you are somewhat familiar with creating apps in Alpha Anywhere. For example, that you have already followed the complete "Alpha Anywhere Photo App Tutorial". The instructions here are less detailed than in that tutorial, but should make it easier for you to recreate the conference app yourself than repeatedly starting and stopping and rewinding the video.

Table of Contents ↑
PART 1:
Introduction

The following video is not a tutorial. It is a sped up screencast of the full creation of a mobile app that is meant to give you the feeling of what it is like to develop in Alpha Anywhere.

A copy of the script used to create this video is available on the Alpha Software New User Support web page.

This is a demonstration of creating a simple mobile application using Alpha Anywhere.

Step: 1-1

[A video of the completed app in use is shown.]

The app that we'll build is for use by attendees at a conference. It lets them see the overall schedule as well as the details, and also have access to general information.

Table of Contents ↑
PART 2:
Create two panel cards

This is the Design view of the UX Builder.

Step: 2-1

In the UX builder for a new UX control, set the Properties Style Name to "iOS" if necessary. [Not shown in video.]

Step: 2-2

Switch to the Controls section and check the Mobile checkmark.

The first thing we'll do is create a Panel Navigator, and have it control two panel cards to hold the content, each with a header.

Step: 2-3

Use the Quick Panels genie: Create Navigator, then tab in for 2 panels with headers, click OK.

Step: 2-4

We'll set the name of the first panel card to be "Conference Schedule" and the second one to be "Details".

Step: 2-5

We'll preview what we have built so far in a simulated smartphone running on our desktop browser.

This is the default Carousel type of panel navigator.

[step Change text to "Conference Schedule" and "Details"

Step: 2-6

Preview.

Back to the UX Builder, we add a panel card after the Navigator, and put the text "Information" in it.

Step: 2-7

Add Panel with Static Text "Information".

We then wrap everything in a second Panel Navigator, and set its Carousel type to Top to Bottom, and then preview.

Step: 2-8

Add Panel Navigator around all, set to TTB.

Step: 2-9

Preview.

We add a footer to the new panel navigator, and put a button group container into it. We add two buttons, and label the first one "Schedule" and the second one "Info".

Step: 2-10

Right-click on Panel Navigator in Tree View, add Footer, Center, add container.

Step: 2-11

Add buttons with names "Schedule" and "Info" and width 100px. [The clicking of "Advanced" is no longer required -- it was in an early version of Alpha Anywhere.]

We change the Panel Navigator type to TabButtons. We then hook up the two buttons to switch between the Schedule panel cards and the Information panel card.

Step: 2-12

Change Navigator to TabButtons and set tab buttons.

Step: 2-13

Preview.

And preview. Carousel... and... TabButton...

We add a header to the Information panel card, and move the title into it.

Step: 2-14

Add Header to info panel, center, and move up static text.

We add a new static text control to the panel card body, and paste in some HTML.

Step: 2-15

Add new static text and paste in HTML:

<p>The conference will be on the second floor of the hotel
conference center.
Here is a map of the conference area:
</p><p>
<img style="WIDTH: 100%" src="conference-layout.png" >
</p><p>
Wi-Fi will be available.
The SSID is "conf456" and the password is "learn789".
The hash tag for Twitter will be #conf2013".
</p><p>
For those needing to leave early, please see Patricia.
There will be a table outside of the ballroom where you can
check your luggage during the conference.
</p>

Here's what it looks like now

Step: 2-16

Preview.

We add a list control to the Conference Schedule panel card, and set it to fill its container.

Step: 2-17

Insert list.

Step: 2-18

Set Fill Container, click on List Properties

We go into the List Properties, and fill in some static data for the list.

We'll paste that in.

Step: 2-19

Paste in Static Data:

Session|Title|Room|Description
1|Welcome & Overview|Ballroom|Welcome everybody to this event and explain what's going to happen
2|Keynote 1|Ballroom|Keynote from special speaker for all
3|Topic 1|202|Lots of details about topic one
3|Topic 2|203|Lots of details about topic two
3|Topic 3|204|Lots of details about topic three
4|Lunch|Foyer|Provided
5|Workshop 1|202|Workshop about topic one
5|Workshop 2|203|Workshop about topic two
5|Workshop 3|204|Workshop about topic three

The first row has the field names, Session, Title, Room, and Description, and the other rows have the data, such as session 2, a keynote in the ballroom.

We then set the list layout to show Session, Title, and Room, and then preview.

Step: 2-20

For List Layout choose Session, Title, and Room.

Step: 2-21

Preview.

To make the listing more polished, we switch the List Layout Type from Column to Freeform, and specify the template in HTML, using placeholders for the field values.

Step: 2-22

Change List Layout Type to Freeform and Layout to:

<b>{Title}</b><br />Room: {Room}

Step: 2-23

Preview.

Let's make tapping on a row show the Details.

We edit the JavaScript for the onClick event. We find the "panelNavigate" method, looking at the description and example.

We insert the method prototype and set it so that it navigates to the next panel card.

Step: 2-24

Bring up OnClick. Insert Method, "Panel..", Navigate, "PANELNAVIGATOR_1", "next".

Step: 2-25

Preview.

Next, we put in a Done button to return to the list, and center the title in the header.

Step: 2-26

Add Button, rename "Done", add TabStop, and then another, turn off breaks.

Step: 2-27

Set panel "Previous" button.

Step: 2-28

Center other panel header.

Step: 2-29

Set Navigator to Programmatic.

Step: 2-30

Preview.

We put in a static text control, and change its ID to "detailtext".

Step: 2-31

Add Static Text to Details panel. Change ID to "detailtext".

We add to the onClick JavaScript to update detailtext with HTML computed from the selected row's field values.

Step: 2-32

Paste in JavaScript to List OnClick action:

var title = {dialog.Object}.getValue("list::LIST1::Title");
var room = {dialog.Object}.getValue("list::LIST1::Room");
var desc = {dialog.Object}.getValue("list::LIST1::Description");

var str = "<b>"+title+"</b><br>";
str += "<span style='font-size:80%;font-style:italic'>Room: "+room+"</span>";
str += "<br><br>"+desc;

{dialog.Object}.setValue('detailtext', str);

{dialog.object}.panelNavigate('PANELNAVIGATOR_1','next');

Step: 2-33

Preview.

Table of Contents ↑
PART 3:
Grid Component

Instead of using static schedule information, let's build a Grid component to run on a desktop browser. We'll hook it up to a simple SQL database that has data for the list.

This component will let us create and update the list of sessions. It has both a list and an editable form in a detail view.

Step: 3-1

New Component: Grid with updateable Detail View (SQL).

Step: 3-2

Set Query Source.

Step: 3-3

Connect to an appropriate database.

Step: 3-4

Choose table "Sessions".

Step: 3-5

Order by ID

Step: 3-6

Set Fields to all 4.

Step: 3-7

Select Detail View fields to all 4, editable.

Step: 3-8

Description to TextArea, 3 high, 30 wide.

Step: 3-9

Detail View Properties: Click on a Grid Row, Position: Splitview Right.

Step: 3-10

Preview.

We'll add a couple of words to the keynote description and save.

Step: 3-11

Edit one.

Step: 3-12

Go back to mobile component.

Table of Contents ↑
PART 4:
Finishing the mobile component

We go back to the mobile UX component, and change the list's data source from static data to the SQL database.

Step: 4-1

Change List to SQL, choose connection string, table, field list, and order (session, title).

Step: 4-2

Preview.

We can set the list to have group breaks, in this case, on the session number.

Step: 4-3

Set List to have Group Breaks, field is Session, Set Case-Sensitive

We can set the template for the group header.

Step: 4-4

Set template to:

Session {<BreakValue>}

Step: 4-5

Preview.

Finally, we add a Group Header Lookup Dictionary to make the header more user friendly.

Step: 4-6

Set template to:

{<BreakValue>} Session

Step: 4-7

Paste in Group Header Lookup Dictionary:

1=9:30am
2=10:00am
3=11:00am
4=12noon
5=1:00pm
6=2:00pm

Here's the completed app.

Step: 4-8

Preview.

And here it is on an Apple iPod touch... and a Google Nexus 7...

That completes this demo of creating an app with Alpha Anywhere.