Photo App Tutorial Script

This script is a companion to the Alpha Anywhere Photo App Tutorial video. The video was created by following this script. You can use either the video or this script to guide you step-by-step to recreate the application. There are links in the script that will take you directly to the start of each of the parts of the video. Each little step that you need to perform to build the app is broken out separately to make things as clear as possible.

If you run into any problems when building this app, please don't hesitate to check the New User Support page or contact Alpha Software for assistance.

Table of Contents ↑
PART 1:
Introduction

The purpose of this tutorial is to guide someone who is a newcomer to the Alpha Anywhere development environment through the creation of their first application. It starts by creating a database with a single, simple table. It then shows you how to quickly build a browser-based component that can input, view, and update the data in that table using a desktop computer browser. The tutorial then moves to walking you through the creation of a mobile app that can view and modify that same data table, and capture new data, storing the result back in the original database for viewing on the desktop or on other mobile devices. The tutorial then shows you how to add the ability to use the mobile device's camera to add photos to the data.

You should be able to run Alpha Anywhere in one window and at the same time run this video in either another window or on a mobile device. Hopefully, the pace is slow enough, and the audio instructions specific enough, that you will be able to listen to this tutorial and follow along, building the app yourself without needing to stop or rewind the video.

If you'd rather do the tutorial by following a written set of steps, you can. The script that I am reading while I create this tutorial is available on the Alpha Software web site. The script has links that let you start the video directly at various places within the video. Check the New User Support page. Also, if you run into any problems while building this app, please check that same New User Support page.

The level of database and programming knowledge assumed by the tutorial is relatively low to serve as wide a range of people as possible. However, even experienced Alpha Five users, new to the mobile features of Alpha Anywhere, have found this tutorial helpful.

Here's what part of the completed app will look like when we're done, running on an Apple iPod touch.

First we tap on a row to see existing data.

Next we add a new item.

The description is "Outside" and the type is "Place".

We take a picture.

And we save the new item.

Table of Contents ↑
PART 2:
Create a new database table
Step: 2-1

To create this application, we begin by running Alpha Anywhere.

We are now viewing the Web Projects Control Panel.

To start, we will need a table in a database to hold our data. Rather than use a pre-built database, we will create the database and the first data table in it ourselves. Defining a new database and its tables can be done with a program like Microsoft Access or various database administration tools. However, you may want to create variations of the app we create here yourself, but may not have an appropriate database system already installed on your computer. To make sure that everybody can follow the same instructions, in this tutorial to create our sample we will use a simple table-builder that is included as part of Alpha Anywhere for this purpose.

We will use a database that may be manipulated using SQL. SQL stands for "Structured Query Language" and is a special-purpose programming language designed for managing data in databases. It is supported by a wide range of systems. Note that SQL may be pronounced either "Sequel" or "S-Q-L" depending upon your background. Both pronunciations are arguably correct.

For this tutorial, we will use an Access-format database. Access-format databases are stored as single files with the extension "mdb".

Access database files can contain multiple tables. Each table can have a different set of rows and columns. The columns define the data fields and the rows are the records of data with those fields.

Access-format databases are useful for simple applications and can easily be used by Alpha Anywhere directly on the same machine as the server with no additional software needed. In addition, they can be controlled with normal SQL commands. This means that when you start out with an Access-format database, it is quite easy to upgrade at a later point to more scalable and robust databases, such as SQL Server, Oracle, and MySQL, without much change at all to the application built with Alpha Anywhere.

Step: 2-2

First, invoke the simple table builder with the menu item:

Tools / Create SQL Table...

There are tabs across the top showing each of the steps needed to create the data table. You will start on the first step to define the connection to the database that will hold the new file.

Since we are starting from scratch, we will have no preexisting database in which to add the table and therefore need to create one.

Step: 2-3

Click "Create a new Access Database".

Step: 2-4

Type a file name for the new Access Database MDB file and create it in an appropriate directory, such as the Alpha workspace. We'll use "itemsdatabase1 " as the name.

Click "Save" to create.

Step: 2-5

When prompted whether or not you would like to create a named Connection String, click "Yes".

A Connection String contains the instructions that are used to connect your application to a database. The database may be in a file on the same server that runs your application, as we are using, or it may be a service running on a different server connected through a network as you might typically use MySQL or SQL Server. A named connection string lets you reconnect to that database when needed or change the location of the database without changing the application.

Step: 2-6

Specify the name for the connection string that will be used to refer to this database. Type "itemsdatabase" into the text field.

Step: 2-7

Click the OK button to confirm.

Step: 2-8

Click on the tab for "Step 2, Define table structure".

This is where we specify the data fields for the new table.

Step: 2-9

Below the big, empty table structure box, click the "Add Field" button. A new field will appear above.

Step: 2-10

On the right side of the screen, in the first row of the Field Settings, we need to change this first field's name from "Field_1" to "itemnumber". You can do that easily by double-clicking on the properties row and then typing the text "itemnumber".

Step: 2-11

In the next properties row, change the field's Type using the dropdown from "Character" to Numeric.

Step: 2-12

Click the Primary Key box. This indicates that the itemnumber field will be an organizing field.

Step: 2-13

The Auto-increment setting will then appear. Check the box by clicking on it to tell the system to automatically assign different values to each new record.

Step: 2-14

Click the Add Field button again.

Step: 2-15

Name this second field "description" by double-clicking on the properties row and typing in the word "description".

Step: 2-16

Leave its type as "character".

Step: 2-17

Double-click on the Width property to select the value.

Step: 2-18

Type 100 to change the field's width to 100 characters wide instead of the default of 10.

Step: 2-19

Click the Add Field button again to add another character field.

Step: 2-20

Name this field "itemtype".

Step: 2-21

Leave its width at the default 10 characters wide.

Step: 2-22

Add a fourth field by clicking the "Add Field" button.

Step: 2-23

Name this field "photo".

Step: 2-24

Use the Type dropdown to change the photo field from being of type character to type Binary. Binary is a format that can be used for images within a database.

Step: 2-25

Next, add a fifth field.

Step: 2-26

Name this fifth field "thumbnail".

Step: 2-27

Like the photo field, set the thumbnail field type to Binary with the Type dropdown.

Step: 2-28

Switch to "Step 3" by clicking on the tab for naming the table.

Step: 2-29

Type "itemswithphotos" into the Table name text field.

Step: 2-30

Finally, we go to the last tab to actually create the table by clicking on the "Step 4" tab.

Step: 2-31

Click the "Create Table" button.

Step: 2-32

Click the OK button to dismiss the confirmation dialog.

Step: 2-33

When done, we exit the dialog for creating a SQL table by clicking the X button in the upper-right.

Table of Contents ↑
PART 3:
Create a Grid Component

While we have a table defined in a new database, there is no data in it. Let's see how easy it is to create a full web page for entering, querying, and updating data in this form.

Step: 3-1

At the top of the Web Projects Control Panel, we click the "New" button and select "Web Component" as the general type of file we want to create.

Step: 3-2

We click the "Next" button below and select "Grid" as the specific type and then click "Next" again.

Here you see a list of pre-configured templates for common forms of using the Grid component.

Step: 3-3

Select the row with the words "Grid with updateable Detail View (SQL)" by clicking and then click the "OK" button in the bottom-right.

Step: 3-4

If a Help popup appears, click Close to dismiss it.

This is the Design view for a Grid component in the Grid Builder. It gives us access to the many settings available to customize what is provided to the user. The Grid Builder "builds", meaning "creates", the code for displaying a grid component, both code on the server and HTML, CSS, and JavaScript to run in the browser.

On the left we see the major groupings of settings: The first group is for the grid of rows and columns, and the second group is for a detailed view of a selected row.

The initial group of settings that we see in the main part of the screen is for the Query that populates the grid with data from a table in the database. It starts out disconnected from any database.

Step: 3-5

Click the Connection Name's "Select" button.

Step: 3-6

Choose a named connection string, in this case "itemsdatabase", by clicking on it.

Step: 3-7

In the dialog box lower-right, click the "OK" button.

Step: 3-8

We then click the "Connect" button to connect to that database and retrieve the information for choosing the particular table in it that we want.

Once Alpha Anywhere has automatically examined the structure of the database that you connected to, it shows you settings for specifying which data in that database will be handled by this grid component.

You first need to specify which table within that database will be used.

Step: 3-9

To the right of the "Table/View name" row, Click "Select" to bring up the Select Table dialog.

Step: 3-10

In the top of the large box of Available Tables and Views, choose the lone row for "itemswithphotos" by clicking on that row.

Step: 3-11

Click "OK".

Step: 3-12

Next, on the left, we click on the next sub-item for Grid titled "Fields". This brings up on the right a list of the fields in the table.

Step: 3-13

Click on the first available field, "itemnumber", and then CONTROL-click on the rows for the fields "description", "itemtype" and "thumbnail", selecting a total of four fields. (Do not select the photo field.)

Step: 3-14

Click the single ">" button to the right, the one with the "tool tip" or "bubble help" when you hover the mouse cursor over it that says "Select fields(s)", and you will see the four fields listed as Selected.

Step: 3-15

On the left, for the Detail View, the next section, click on the sub-item titled "Fields".

Step: 3-16

Select the first four of the available fields (itemnumber, description, itemtype, and, this time, photo) and add them to the Selected column with the "Select field(s)" button.

Step: 3-17

On the left, Click on the next Detail View sub-item, the one titled "Properties".

Step: 3-18

In the main section, in the "Detail View Display" section, the first one, use the first dropdown on the right to change the "Method to display Detail View" from "Click on a hyperlink field" to "Click on a Grid row".

Step: 3-19

Next, in the Display Options section several rows below, use the dropdown for "Detail View window position" to change from "OnPage" to "SplitView_Right".

Step: 3-20

On the toolbar at the top of Alpha Anywhere, just below the menu items, click the "Save" button to bring up a dialog to save what we've created as a ".a5wcmp" web component.

Step: 3-21

Give the component the file name "itemphotosgrid" and then click the dialog's Save button.

Table of Contents ↑
PART 4:
Use the Grid Component to enter data into the new table

Now that we have specified the Grid Component, we can use it to enter some initial data into our new table. We need to run it in a browser and then type in some values. We will create two records with data that could correspond to two photos that we can easily take later -- one of our computer keyboard and one of our screen. The type we will assign to both images will be "thing".

Step: 4-1

Click the Working Preview tab at the top of the Grid Builder. It's the last tab on the right.

The Working Preview lets you see the control you are working on in action.

In this case, you'll see four column headers with the names of the fields you have selected but no records to display below yet.

Step: 4-2

Click the "New Record" link below the empty list. This will bring up an empty Detail View.

Step: 4-3

Click in the Description field and type the words "Computer keyboard".

Step: 4-4

Next, click in the Itemtype field and type in the word "Thing".

There is no need to type in the Itemnumber field. That value will be automatically generated by the database code.

Once you have typed within any field, the two icons on the right at the bottom of the Detail View will be enabled. The first icon saves the data you have entered and then leaves that record open for reading and modification. The second icon saves the data and then opens a new, blank record for editing.

Step: 4-5

Click the right-most icon at the bottom of the Detail View.

The list on the left will now include a row of data, showing the auto-generated item number, the description, and the item type.

Step: 4-6

Fill in the Detail View again, this time with a description of "Computer screen" and again with an item type of "Thing".

Step: 4-7

Click the next-to-last button below (the "Save Record" button).

You will now see two rows in the grid on the left. When you click on a row in the grid, the detail view on the right switches to show the values for that row.

We now have a database table with some data and a very simple application that can be run in a browser to access it.

Step: 4-8

Click the "Close" button at the end of the toolbar below the menu items at the top to close the itemphotosgrid component.

Table of Contents ↑
PART 5:
Create a UX Web Component with two panel cards

We are finished for now with the Grid Component. It is time to create a User Experience (that is, "UX") Web component to specify the user interface for the mobile device.

The Grid component, even though it has many, many powerful options, is a very structured, narrowly focused type of component. The UX component, on the other hand, can be used to create an extremely wide range of user interface configurations. Specifying those configurations is done by adding some of the many different controls to the UX component.

As we build the UX component step-by-step, we will stop every once in a while to see what we have built so far in action.

The first thing we will do is create a simple UX component with two panel cards that you can switch between by dragging left and right on the screen.

You should now be viewing the Web Projects Control Panel again. (If not, there is a tab for it at the bottom of the Alpha Anywhere window.)

Step: 5-1

In the upper-left of the Web Projects Control Panel, click the "New" button.

Step: 5-2

Select "Web Component" and then click "Next" at the bottom of the New File window.

Step: 5-3

Click the "UX" file type to indicate that you wish to create a mobile-style user interface component, then click the "Next" button below.

Step: 5-4

On the next screen, the UX Component Template screen, ensure that the "Start with a blank UX Component" radio button is selected at the top.

Step: 5-5

Click the "OK" button at the bottom.

The UX Builder will now be displayed, editing an untitled component.

Step: 5-6

On the left of the UX Design window, in the Overview of UX, click the row titled "Properties". This will display many properties on the right. These properties are grouped into UX Properties, Callbacks, Customization, and other sections.

Step: 5-7

Ensure that the "Style name" UX Property (a few down from the top) is set to "iOS".

If it is not, do the following: On the right end of that row, click the "..." button. (This is also known as a "Smart Field" button.) Select "iOS" from the list of styles and confirm by clicking the "OK" button.

Step: 5-8

On the left, in the UX section, click on the first row titled "Controls".

This will display the controls for this component in the middle in the Tree View. Initially there are no controls since this is a new, blank component.

Step: 5-9

Click the "Mobile" box above the blank controls area Tree View.

The checked box indicates that this UX component should be treated as a mobile app — for example, displaying certain previews in a simulated smartphone outline.

In Alpha Anywhere, some basic building blocks for organizing, presenting, and animating what you see in a mobile app are called Panel Cards.

The first things that we will put in the mobile app are two Panel Cards, one to display the list of items and one to display the details of a selected item, and we'll also put in a Panel Navigator control to specify their behavior.

Step: 5-10

To do all this, on the left, several rows down, we click on the Panels tree item to open it up and show its sub-items.

Step: 5-11

We then click once on the Quick Panels item to bring up the Panel Card Genie.

The Panel Card Genie helps us quickly assemble a combination of different panel controls.

What we want are two panel cards, each with a header, and both controlled by the same Panel Navigator.

This genie uses an indented outline as the means for specifying the controls that will be inserted into the component's main tree view.

Step: 5-12

Start, on the left of the Panel Card Genie dialog, by double-clicking on the "{PanelNavigator}" row. This will bring up the Header/Footer Options for the Panel Navigator.

Step: 5-13

Click the "No Header or Footer" option.

Step: 5-14

Next, click once on the "Insert a tab" link under the typing area.

This will indicate that the inserted panel is contained within (and controlled by) the Panel Navigator.

Step: 5-15

Next double-click on the "{PanelCard}" row on the left, and then click the "Header" option button for the panel. This inserts the first panel.

Step: 5-16

Insert the second panel by clicking the "Insert a tab" link, then double-clicking on {PanelCard}, and then clicking on the Header button.

Step: 5-17

Make sure that both panels are indented and then click the dialog box's "OK" button.

This adds several controls to the Tree View of the UX builder.

Step: 5-18

Click on the first row of the Tree View to select just the Panel Navigator.

You will see the list of controls you have inserted in the Tree View in the middle of the screen. The properties for the selected control will be on the right. Several rows down, in the first set of properties, you will see that the "Navigator type" is, by default, "Carousel" and the Flow direction is "LTR" — left to right.

In the Tree View in the middle, below the Panel Navigator you will see that the two panel cards are sub-items to the Panel Navigator. Each panel card has a Panel Header as a sub-item and a Static Text Control has been inserted in each header with some unique initial text to display.

Step: 5-19

To see what we have created so far in action, at the top of the UX window, click the "Working Preview" tab.

You will see a simulated iPhone screen with a blank panel card with a header with the words "PanelCard_2" in it.

Step: 5-20

Click in the middle of the simulated screen and drag to the left. You will be able to switch between the two panels, showing the "PanelCard_4" text on the second header. You can drag in the second card from left to right to switch back.

Step: 5-21

Click on the Design tab to return to viewing the Tree View of the controls in the component.

Step: 5-22

Click the "Save" button in the toolbar below the menus. When it prompts for a name, name this dialog component "itemphotosmobile" and then click "Save".

Table of Contents ↑
PART 6:
Add a List control

The next thing that we will do is put together the first panel card. We'll change the name at the top to "Items" and add a List control to the main panel area and set it to display the current items in the database table.

Step: 6-1

In the first PanelHeader, click on the Static Text control, the one that says "[Static Text: PanelCard_2]", to select it.

Step: 6-2

On the right you will see that the property for Static text is the text "PanelCard_2". Click on that text and change it to the word "Items".

Step: 6-3

Press Enter on the keyboard.

Step: 6-4

In the Tree View, click on the first PanelHeader End row to select it. That is the one that says "[PanelHeader End: CONTAINER_1]".

Step: 6-5

On the left, click on the Data Controls row to open the list of Data Controls that you can insert.

Step: 6-6

Scroll that list down by dragging the scroll elevator handle until you see the "[List]" control.

Step: 6-7

Click once on that row, the one titled "[List]".

Step: 6-8

You now see the New Control dialog box. Ensure that the "Create a single new control" radio button is selected at the top.

Step: 6-9

The Name of the list that will be inserted should be the default "list1".

Step: 6-10

If the "Label position" dropdown (one of the last things in this dialog) is not "None", set it to "None". (It may start out as "Above" by default, but will usually display with the last value that you used).

Alpha Anywhere can automatically add labels adjacent to data controls, which is a common requirement. In our case, we don't need the automatic labels, which is why we want the label position to be None.

Step: 6-11

Click the OK button at the bottom-right of this New Control dialog box.

The "list1" list control will be inserted and selected. You'll see the control's properties on the right.

Step: 6-12

On the right, a few rows down in the properties, click the "Fill container" checkbox to indicate that you want the list to fill the panel.

Step: 6-13

The "List properties" row is now just after the Fill container property. Click the "..." smart field button to the right of the "List properties" row to bring up the List Builder.

The List Builder lets you set the many properties that define what is shown in the list and how it behaves.

The builder has four tabs: Data Source, Fields, List Properties, and List Layout.

We start with the Data Source tab. It initially has a Data Source Type of "Static" which lets you enter static data. Static data is useful when testing or when you know all of the data in advance. In our case, we want to retrieve the data from a SQL database.

Step: 6-14

Click the "SQL" data source type in the upper-left of the List Builder.

The properties below will switch to be those needed for using that data source.

Step: 6-15

In the first row of the SQL Data Source section, click on the button on the right for the Connection string.

Step: 6-16

From the dropdown, choose the named connection string we just created, "itemsdatabase".

Step: 6-17

Click the OK button in the Connection String dialog.

Step: 6-18

Next, click the button on the right for the Table name (or just double-click on the row title "Table name"). This brings up the Select Table dialog.

Step: 6-19

Select the "itemswithphotos" table by clicking on it and then click "OK" at the bottom of the Select Table dialog.

Step: 6-20

Double-click on the "Field list" row title which brings up the "Select fields" dialog.

Step: 6-21

Select them all except the "photo" one by clicking on each checkbox.

We only selected four fields because there is no need to download the photo for display in the list. The photo data may be quite large and slow down the loading of the list. The thumbnail value in each record provides a smaller, less data-intensive, replacement for use when displaying the list.

Step: 6-22

Click the OK button on the Select Fields dialog.

You'll see that a SQL statement has been automatically generated to retrieve the appropriate fields.

Step: 6-23

Double-click on the "Primary key" row title and ensure that the "itemnumber" field has been selected as the primary key for this table.

Step: 6-24

Click "OK".

Step: 6-25

Scroll down a bit to bring the "Return Value" section into view.

Step: 6-26

Set the dropdown for "Return value type" to "PrimaryKey". This is used in determining which list item is shown as being selected.

Step: 6-27

Click on the "List Properties" tab of the List Builder. It's the third one on the top. You'll see that the Layout Property titled "Layout type" defaults to "Column". Leave it that way for now.

Step: 6-28

Click on the "List Layout" tab at the top of the List Builder.

Step: 6-29

On the left, click on the Available Field for "description" and then click the ">" button to add it as a column in the List.

Step: 6-30

Do the same for "itemtype" to add it to the list. That is, click on it and then click the ">" button.

You should have two fields in the Columns in List display, "description" and "itemtype".

Step: 6-31

Click the "OK" button in the bottom right of the List Builder to save all of these list properties.

Step: 6-32

Click the "Save" button below the menu items at the top to save the component as we've built it so far.

Step: 6-33

Click the Working Preview tab of the UX window to see the current state of the component.

You'll see a list header with the names of the fields we selected for display and rows with the two records we entered previously using the Grid Component.

Table of Contents ↑
PART 7:
A better looking list

While the columnar listing is a common requirement for many applications, in this case a different layout would be more appropriate. The List control lets you customize the row display, which is what we will do next.

Step: 7-1

Going back to the Design tab by clicking on it, we continue refining our app.

Step: 7-2

Make sure that the "list1" list control is still selected and click the List properties button on the right (or double-click the row title) to bring up the List Builder again.

Step: 7-3

Click the "List Properties" tab.

Step: 7-4

Change the "Layout Property" for "Layout type" from "Column" to "Freeform" by using the dropdown.

Step: 7-5

Switch to the List Layout tab at the top of the List Builder by clicking it.

For a freeform list layout you need to specify a template that is used for each row. The template is HTML that will be emitted to display the row. The HTML in the template has placeholders that will be replaced with the values of the fields for the data record shown in the list's row.

You can either write your own HTML, or use one of the many pre-defined templates that provide common designs. We'll use a pre-defined template and then customize it.

Step: 7-6

Below the Template type-in area, click the "Pre-defined Templates" link to bring up the List Template Picker.

Step: 7-7

Select the sixth sample, the one with a bold Level1 above a smaller Level2 and a disclosure icon on the right, by clicking on it once.

Step: 7-8

On the Properties settings on the right of the List Template Picker, click the checkbox for "Image on left". This image will be where the thumbnail will be displayed.

Step: 7-9

Change the dropdown for "Disclosure icon to use" from "Bold" to "Subtle".

Step: 7-10

Click the OK button at the bottom-right to close the List Template Picker and go to the next step.

The "Map Template Placeholders" dialog will now appear. This lets you replace the template's generic placeholders with specific fields available from the list control.

Step: 7-11

Using the dropdown on the right, set the "[[Level1]]" placeholder to "{description}".

Step: 7-12

Next, set the "[[Level2]]" placeholder to "{itemtype}".

Step: 7-13

Click the OK button.

The template HTML will now be inserted into the Template text area were you may edit it if you wish.

We need to customize it further, so we will.

Step: 7-14

Click and drag or click and shift-click to select all of the text on the third line of the Template, from the "<img" through the closing "/>".

Step: 7-15

Double-click on the Placeholder on the left for "{thumbnail}" to replace that entire HTML tag with the placeholder for the thumbnail image.

Step: 7-16

On the line above, the second line of HTML, change the part that says "width: 60px;" to "width: 100px;". This will make room for the larger thumbnail images that we will be using.

You now have the HTML for displaying the row in the form you have chosen from the templates and hooked it up to receive data.

Next we need to set the thumbnail to display a "placeholder" if the data in the field is empty, as it is for the two current records.

Step: 7-17

Click the "Fields" tab at the top of the List Builder.

Step: 7-18

Click on the row for "thumbnail" on the left.

Step: 7-19

In the Image Property at the bottom titled "No image found image", click on the button on the right. This brings up the "Specify Image" dialog.

Step: 7-20

At the top, click the radio button for "Built-in Alpha Five Image".

Step: 7-21

Click the Select button to the right of the Image name input field. This brings up the Insert Image dialog.

There are a lot of images from which to choose. Alpha Anywhere gives you various filters to help you find what you need.

Step: 7-22

Click the radio button for "Addin Images".

Step: 7-23

Next, in the "Filter On" text field, type the word "missing".

You will see a variety of images that include the word "missing" in their name.

Step: 7-24

Click on the smallest silhouette and you'll see the Image Name "MissingImageSmall2" listed as the Image Name.

Step: 7-25

Click the "Insert" button at the bottom-left of the Insert Image dialog.

Step: 7-26

Click the "OK" button at the bottom of the Specify Image dialog.

Step: 7-27

Click "OK" at the bottom of the List Builder.

Step: 7-28

Click the Working Preview tab to see the formatted listing in action.

Step: 7-29

Go back to the Design tab by clicking on it.

Step: 7-30

Click the "Save" button below the menu to save the latest version.

Table of Contents ↑
PART 8:
Make a tap on a list row switch to the Details panel card

The next thing that we will do is make it so that when you tap on a row in the list the second panel card will slide in to show details about that row and allow you to make changes.

Step: 8-1

Make sure that the "list1" list control is still selected and click the List properties button on the right (or double-click the row title) to bring up the List Builder yet again.

Step: 8-2

Click on the List Properties tab.

Step: 8-3

Scroll the list of properties down until you see the "Javascript - Run Time" section.

Step: 8-4

Click on the button on the right of the "OnClick" row.

This will bring up the List Control System Events dialog box in which you can specify actions that will be taken when the user taps on a row — that is, when the list's OnClick event occurs.

Alpha Anywhere has a facility that is known as "Action JavaScript". This a way of using simple dialogs with dropdowns and other settings to automatically construct JavaScript code without needing to actually write the code in plain JavaScript yourself. The dropdowns simplify things by letting you make choices, such as specifying the name of a particular control, without needing to type the values in yourself or even know the proper format for constructing the JavaScript for that action. The code that is produced may be viewed and edited if you wish.

An Alpha Anywhere "JavaScript Action" is a collection of one or more tasks that are specified using Action JavaScript or hand-coded JavaScript. The two terms are similar for historic reasons, but they have different meanings: "Action JavaScript" is used to define one task and is used in-place instead of writing hand-coded JavaScript, while "JavaScript Actions" are collections that define one or more tasks and may be referred to by name in many places where JavaScript code is needed. The dialogs you use in Alpha Anywhere should guide you to the right set of choices so that you will always use these two aspects correctly. In both cases, both aspects of Alpha Anywhere help you minimize the amount of hand-written JavaScript that you will need to write and maintain.

If you are more comfortable with plain JavaScript, you may use it instead. However, in this tutorial, and in most others, we will be using these Alpha Anywhere features when possible.

What we will do now is define a JavaScript Action collection that may be executed for this event that will switch the display to the next panel card.

Step: 8-5

Below the big empty "Javascript code" text area there are a few links. Click the "Create/edit Javascript Actions" link. This will bring up the "Define Javascript Actions" dialog.

Step: 8-6

Click the "Add New Action" button below the empty list area.

Step: 8-7

A popup will ask you for a name for this new action. Enter the name "showDetails" in the text field and then click the "OK" button.

Step: 8-8

A Notice may then be displayed that reminds you to define what this JavaScript Action will do. Dismiss the notice by clicking "OK".

You will now see "showDetails" in the list of Javascript Actions with a red dot next to it, indicating that you still need to define it.

Step: 8-9

Click the "Edit Action" button below the list. This will bring up an editing area for the action.

Step: 8-10

Click the "Add New Action" button above the editing area.

You will now see a list of the dozens of actions that you may perform with Action JavaScript. You may use the Categories list on the left and the "Filter list" text field at the top to narrow down the number of choices.

Step: 8-11

Type "panel" into the Filter list text field.

You will see the list narrowed down to just "Panel Actions", which is what we want.

Step: 8-12

Make sure that "Panel Actions" is selected and then click the OK button.

This will bring up a dialog for specifying exactly which panel action you want performed.

The first (and initially only) dropdown is for the specific panel action.

Step: 8-13

Select "Set Active Panel" from the dropdown.

Step: 8-14

You will then be able to specify the panel you wish to switch to — in this case, "PANELCARD_2" — using the "Target Panel name" dropdown.

Step: 8-15

Leave the "Animate" checkbox checked.

Step: 8-16

Click the "OK" button.

You will now be given the opportunity to attach a comment to this action.

Step: 8-17

Enter "Switch to detail panel" and then click the "OK" button.

We now have the initial definition of "showDetails".

If you click the "View JavaScript" button above the line with "Panel Actions" you will see the JavaScript that this action will execute. While you could have written that code yourself, by using Action JavaScript you let Alpha Anywhere build it for you without you needing to remember the specifics of the function and its arguments.

By putting this all in a JavaScript Action collection you can reuse the code in more than one place in a component just by referring to the named JavaScript Action collection.

If you viewed the JavaScript, dismiss it by clicking the Close button.

Step: 8-18

Click the "Save" button in the dialog just above the line with "Panel Actions". The red dot next to "showDetails" will now be green.

Step: 8-19

Click the "OK" button for the Define Javascript Actions dialog.

Now that we have defined this Javascript action, we can specify that it be run when the "onClick" event is triggered.

Step: 8-20

Click the "Run a Javascript Action" link on the far right under the Javascript code text area.

Step: 8-21

Select "showDetails" as the Javascript Action to Play and click "OK".

You will see that a line of regular JavaScript has been added to the Javascript code that will execute the "showDetails" action.

Step: 8-22

Click the "OK" button to close the List Control System Events dialog.

Step: 8-23

Click "OK" on the List Builder dialog.

You should now be viewing the Design tab showing the Tree View of the controls for this component in the middle.

Step: 8-24

Click on the row in the Tree View for the second panel card, the one that says "[Panel Card: PANELCARD_2] (H)".

Step: 8-25

In the Properties on the right, in the section labeled "Scrolling" which is down a bit, look at the end for the property titled "Scroll to top on focus". Click on the checkbox next to this "Scroll to top on focus" property to enable it.

This ensures that whenever this panel card slides into view it will be positioned correctly, even if it was last viewed scrolled down to view extra data.

Step: 8-26

Click the row in the Tree View for the second panel card's header, the one that says "[PanelHeader: CONTAINER_2]".

Step: 8-27

On the far left, where you see the list of Data Controls and the rows for Panels, Containers, etc., click once on "Other Controls" to expand that sub-list. You should see several control types, including Static Text, Image, and Button.

Step: 8-28

Click once on the row for "[Button]" to insert a button control into the Panel Header.

The inserted button should be selected automatically and you will see the button's properties on the right.

Step: 8-29

Change the "Button text" from "Button" to "Back".

Step: 8-30

Press Enter on the keyboard.

Step: 8-31

A few rows down, you'll see the button appearance property titled "Sub-theme". Click the button on the right.

Step: 8-32

Select the "left" sub-theme and then click the "OK" button.

This specifies that the button should have a shape that points to the left, indicating that it returns you to the previous panel card.

Step: 8-33

In the Other Controls list on the left, click once on the "[TabStop]" row to insert a tab stop that will provide space between the button on the left and a panel title that will be in the middle.

Step: 8-34

Click the row in the Tree View for "[Static Text: PanelCard_4]" to select it. The properties for that control will show on the right in the Properties window.

Step: 8-35

Change the first item in the Static Text Properties from "PanelCard_4" to "Details" by clicking on the text and editing with the keyboard.

Step: 8-36

Press Enter on the keyboard.

Step: 8-37

Click the "[TabStop]" row in the Other Controls again on the left to add another tab after the static text which will cause it to be centered.

Step: 8-38

In the Tree View in the middle, click on the "[Panel Card: PANELCARD_2] (H)" row.

Step: 8-39

On the Properties on the right, in the "Parent Navigation Buttons" section, click the check box for the "Has 'Previous card' button" property.

Step: 8-40

A dropdown will appear for the "'Previous card' button Id". Use the dropdown to select the Back button you just created, "BUTTON_1".

Step: 8-41

Finally, click on the first row of the Tree View, the "[Panel Navigator:...]" item.

Step: 8-42

In the Panel Navigator Properties on the right, a few rows down, change the "Navigator type" property from "Carousel" to "Programmatic".

This turns off the ability to drag horizontally to switch between panels and leaves only your instructions about tapping on the row or the Back button for this purpose.

Step: 8-43

Click the "Save" button at the top below the menu line.

Step: 8-44

Click the Working Preview tab to see what we have now.

Step: 8-45

Click on a row in the list and the view switches to the Detail panel. Click the "Back" button in the panel's header and the view switches to the Items panel.

(Note that the animation effect of smoothly switching from one panel to another does not show in the preview window unless you have Internet Explorer 10 or later installed.)

Step: 8-46

Click on the Design tab to return to editing.

Table of Contents ↑
PART 9:
Show the row's data in the Details panel card

We have the app switching to the Details panel card when you tap on a row. Next we will add data controls to that panel card to display the description, the type, and the full photo. The description will be in a text box that will allow editing. The type will be displayed as a spin list control that lets you choose between the four options: "person", "place", "thing", or "document".

Step: 9-1

Click on the second panel card's "[PanelHeader End: CONTAINER_2]" row.

Step: 9-2

On the far left, click once on the "Data Controls" row to open that sub-list.

Step: 9-3

Click once on the "[Textbox]" row. The New Control dialog will popup.

Step: 9-4

Click the radio button at the top of the dialog for "Create multiple new controls at once".

Step: 9-5

At the bottom-left of the dialog click the link labeled "Populate list from a table". This will bring up a "Select Table and Fields" dialog.

Step: 9-6

Ensure that the Table Type is "AlphaDAO".

Step: 9-7

Click the button on the right of the Connection String row.

Step: 9-8

Use the dropdown to select our connection string, "itemsdatabase", and then click the "OK" button below.

Step: 9-9

Click the button to the right of the "Tablename" row to bring up a dialog to select the table within the database.

Step: 9-10

Click the "itemswithphotos" table and then click the "OK" button at the bottom of the dialog.

Step: 9-11

Now click the "OK" button for the Select Table and Fields dialog.

All of the information needed to insert the right types of controls for all of the table fields and to connect them up to the right database table will have been automatically put in the text area.

Step: 9-12

Click the "OK" button to create all those controls.

Step: 9-13

The last of the five controls should be selected, the one listed as "[thumbnail]". We won't be showing the thumbnail on the detail panel, so, just above the Tree View, click the second red "X" (the "tool tip" or "bubble help" that you see when you hover the mouse cursor over it will say "Delete selected objects"). Be careful when deleting objects — there is no single step undo, but you can always close the component being edited and reload from the last save.

Step: 9-14

Click once on the top one of the items we just inserted, the "[itemnumber]".

While we want to have this value for when we update existing records, we don't need to see or edit it ourselves.

Step: 9-15

On the right, near the last few items in the "Field Properties" section, you'll find the "Hide" property. Specify that the control should be hidden by clicking on the checkbox in this "Hide" row.

Step: 9-16

In the Tree View, click once on the newly inserted "[itemtype]" control to select it.

In the properties list on the right, you'll see that the first property, the Control Type, is set to "Textbox" as we had initially specified it.

Step: 9-17

Click the button on the right of the "Control type" row to change the control type.

Step: 9-18

Choose the "SpinList" control type by clicking on it.

Step: 9-19

Click the dialog box "OK" button.

Step: 9-20

In the "Spin List Properties" section of the properties, click on the button on the right side of the "Static data" row.

This lets us specify which values are displayed in the spin list. Alpha Anywhere has several Pre-Defined Lists that you can use to fill in the static data with common values such as month names and United States state names and abbreviations.

Step: 9-21

For this example, though, in the text area, type in the following four words yourself, each separated by pressing Enter:

Person
Place
Thing
Document

Step: 9-22

Click the "OK" button at the bottom-right of the dialog.

Step: 9-23

Click on the Tree View row for the new "[photo]" control.

Step: 9-24

In the Field Properties on the right, click on the button on the right side of the "Style" property row.

This brings up the Style Editor. You can either type in CSS code directly or use various choosers to set the values. We'll use the choosers.

Step: 9-25

Click the third icon from the left in the Property tab (it has "Filter for Color/Background attributes" as bubble help).

Step: 9-26

Click on the button on the right of the Background Color property.

Step: 9-27

In the System Palette list in the bottom-left, scroll down about half way in the list of colors and click on the "Gray-25" row.

Step: 9-28

Click the "OK" button to close the Color Picker.

Step: 9-29

Click on the fifth icon from the left in the Property tab (the one with "Filter for Box Model attributes" bubble help).

Step: 9-30

Select a Border Style of "solid" from the first dropdown.

Step: 9-31

In the next row, click the button to the right of the Width property and set the size to "1", the units to "px", and then click "OK".

The sample at the top of the Style Editor should have a gray background and a thin border around it.

Step: 9-32

Click the "OK" button.

Step: 9-33

In the next Field Property, "Width", click in the right side of the property and type in the four characters "100%".

These settings will make the photo, if any, be sized for display to just fill the width of the panel's content area and to have an outline and a background color to serve as a placeholder if there is no photo.

Now that we have data controls to display and update the data values, we need to have them populated with the current value for a row when it is tapped. To do this we'll update the "showDetails" Javascript Action that currently just switches to the Details panel. Rather than go into the list properties to find it for edit, we can go directly to the Javascript Action's definition.

Step: 9-34

On the left, click on the "Properties" section of "UX".

Step: 9-35

Scroll through the Properties on the right to the "Javascript" section.

Step: 9-36

Click on the button on the right of the "Javascript Actions" property.

Step: 9-37

Make sure that the "showDetails" Javascript Action is selected and then click the "Edit Action" button in the middle below. You should see an edit dialog with the single Action Javascript line for switching to the detail panel.

Step: 9-38

Click the "Add New Action" button at the top.

Step: 9-39

Type "populate" into the Filter list text field.

Step: 9-40

Click on the Action titled "Populate Controls in a UX Component with data from Tables" and then click the "OK" button at the bottom.

You now get to fill out the details of this line of Action Javascript.

Step: 9-41

Using the dropdown, set the "Method for specifying primary key" to "Read from Dialog Controls".

Step: 9-42

Click the button on the right of the next row, "Controls to read primary key from" to bring up a dialog to indicate which control will have the value to use as the desired record.

Step: 9-43

Click the checkbox next to "list1".

Remember that we set the list to have as its value the value of the primary key of the selected row. In our case, that would be a unique "itemnumber" value.

Step: 9-44

Click the "OK" button on the Select Controls dialog and then click the one for the Populate UX Controls Action Javascript dialog.

Step: 9-45

Type in the comment "Load controls from selected list item" and then click the "OK" button for the comment.

Step: 9-46

Click the little triangle pointing upwards that is in the button bar above the list of Action Javascript lines.

This will move the Populate line to be above the Panel Action line so that it starts before the panels start switching. However, the actual loading of the data may finish later as data is fetched asynchronously from the server.

Step: 9-47

Click the "Save" button in the button bar above the Action Javascript lines.

Step: 9-48

Click the "OK" button at the bottom of the list of Javascript Actions.

You should be back to looking at the Javascript Actions row of the Javascript properties for the entire component.

Step: 9-49

Scroll the properties list up to the top.

You will see that one of the first sections of the properties is the "Wait Messages on Ajax Callbacks" section.

Ajax callbacks refers to the communication that goes on between the mobile device or the browser (both also known as a "client") and the server. The server fetches data from the database, packages that data appropriately for transmission, and sends the data to the client which formats it for display.

For example, the Populate Controls action that we just added to "showDetails" causes an Ajax callback to occur to get the most recent data from the database. The server also reacts to Ajax callbacks from the client to make changes to the data in the database when needed.

These Ajax callbacks and the responses can take varying amounts of time depending upon the complexity of the operation, network speed, and other factors, often running anywhere from fractions of a second to a few seconds.

Step: 9-50

Click the checkbox next to "Show wait messages on Ajax callbacks" to instruct Alpha Anywhere to let the user see a simple message while this process is going on.

The Ajax callbacks are asynchronous ("Ajax" stands for "Asynchronous JavaScript and XML") meaning that other things may be happening on the client while the server is processing the callback. For example, the panel animations may be occurring at the same time as the server is sending new values for display. The Ajax callback responses are often quite quick, especially if there is very little data in the response, such as in our case when there are no images in the database yet or when the client and the server are running on the same computer. In that case, you might not even see the message displayed. On mobile devices connected over a wireless network or with cellular data, though, the delay is often long enough to at least see the message for some fractions of a second if not longer.

Leave the other Wait Message properties at their default values.

Step: 9-51

On the left under "UX", click the "Controls" sub-row to bring back the control Tree View.

Step: 9-52

Click the "Save" button at the top below the menu bar to save your work so far and then click the Working Preview tab to see it in operation.

When you click on a row in the Items list, the display will switch to the Details panel. The appropriate values for the clicked row will be shown. You can go back by clicking the "Back" button to try clicking on the other row and displaying its details.

Step: 9-53

Return to the Design tab by clicking on it to show the Tree View list of the app's controls.

Table of Contents ↑
PART 10:
Create and update records from the client

Now that we have retrieving the data working, let us set up creating new records and updating existing ones, sending values back to the database.

First, let us add a button to switch to the Details panel card with empty data.

Step: 10-1

Click on the third row, the one titled "[PanelHeader: CONTAINER_1]".

Step: 10-2

On the left, click on the "Other Controls" row so that its sub-rows are displayed.

Step: 10-3

Click on the "[TabStop]" row to insert a tab stop as the first item in the panel header.

Step: 10-4

In the Tree View, click on the next item, the "[Static Text: Items]" one, and then insert another tab stop after it by clicking on the '[TabStop]" row on the left.

Step: 10-5

In the Other Controls section on the left, click once on the "[Button]" row to insert a button into the panel header.

Step: 10-6

On the Button Properties on the right, click in the Button text property at the top and change the word "Button" to "New Item".

Step: 10-7

Press Enter on the keyboard.

Step: 10-8

Scroll the properties list on the right down so that you can see the "Javascript - (Touch, Mouse...)" section.

Step: 10-9

Click on the button on the right of the "click" row.

This will bring up a dialog to let you specify the Action Javascript to execute when the button is tapped.

Step: 10-10

Click the "Add New Action" button above the text area in the dialog.

Step: 10-11

Type "record" into the Filter list text field above the list of Actions.

Step: 10-12

Click once on the "New Record" Action and then click "OK" at the bottom of the dialog.

Step: 10-13

Set the Action Comment to "Reset the detail values" and then click "OK".

Step: 10-14

Click the "Add New Action" button again.

Step: 10-15

Type "panel" into the Filter list.

Step: 10-16

Click on the "Panel Actions" Action and then click the "OK" button.

Step: 10-17

Use the "Action name" dropdown to choose "Set Active Panel".

Step: 10-18

Use the "Target Panel name" dropdown to set the panel to "PANELCARD_2".

Step: 10-19

Click the "OK" button at the bottom of the dialog.

Step: 10-20

Make the comment be "Switch to detail panel" and click "OK".

Step: 10-21

Click the "Save" button at the top of the Edit Click Event dialog.

Step: 10-22

In the Tree View of the app's controls, RIGHT-click once on the "[Panel Card: PANELCARD_2] (H)" row that starts the second panel card. This should bring up a menu.

Step: 10-23

Left-click on the "Panel Footer..." menu item.

Step: 10-24

A message will ask if you would like to turn on the footer for this panel. Click "Yes".

The panel footer will be inserted just before the Panel Card End.

Step: 10-25

Click once on the "[PanelFooter: CONTAINER_3]" row.

Step: 10-26

In the "Container Begin Properties" section on the right, click on the "Container alignment" dropdown and change it from "Left" to "Center".

Step: 10-27

On the left, click on the "Defined Controls" row to expand the list of its sub-rows.

Step: 10-28

Scroll that list down until you see the "Submit-Reset" row.

Step: 10-29

Click once on that row to insert a preconfigured set of buttons.

A dialog will pop up that lets you set the conditions that switch those controls from disabled to enabled.

Step: 10-30

Click the "When a control that is bound to a table is dirty" radio button and then click "OK".

You'll now see the two buttons inserted in the footer.

Step: 10-31

Click on the "[Button: Submit]" row in the Tree View.

Step: 10-32

On the Properties on the right, change the Button Property for "Button text" to "Save".

Step: 10-33

Press Enter on the keyboard.

Step: 10-34

On the "Width" properties row, type "150px" into the text field on the right.

Step: 10-35

Next, in the Button Appearance properties, click the button on the right of the "Sub-theme".

Step: 10-36

Select the "confirm" sub-theme by clicking on it, and then click the "OK" button.

This sub-theme change, and the changed width, will make this new "Save" button stand out more than a plain button.

Step: 10-37

Next, change the "Button layout" setting below it from "Image followed by text" to "Text only" with the dropdown.

The default included image for the button does not fit the "look" of this app and makes the button a little high for the footer area.

The Save button will already have the JavaScript set for its click event. This JavaScript calls a function that performs the Ajax code needed to send the appropriate values to the server for updating an existing record or adding a new one.

Step: 10-38

Now click on the "[Button: Reset]" row in the Tree View and then click the red "X" above the Tree View to delete it.

We don't need the Reset button for this app since we can always use the "Back" button to cancel instead of saving.

The next thing we have to do is set the server-side code that saves the received values as needed.

Step: 10-39

To do this, you first, in the top left, in the "Events" section, click the "Server-side" row.

This will bring up a list of the common server-side events in a list and then a text area with the code to be executed for that event.

Step: 10-40

Click on the "afterDialogValidate" row of the Server-Side Events list.

On the right you will see a lot of lines of comments in what is basically an empty function that does nothing. The function is invoked after the data values that have been submitted have been validated on the server but before the server responds to the client that it has successfully processed the data. You can ignore the comments for this tutorial.

The server-side code here is written in a special language called Xbasic that has a very powerful set of libraries for performing operations. You can also use Xbasic to call code written in other, more popular, languages, but we don't need that here. Like with the client-side JavaScript, all we need to do is add one line of Action Scripting that will perform the database operations that we need.

Step: 10-41

Click once on a blank line — for example, click once below the second comment line that starts with "'====" and is above the one that starts with "'----Repeating Sections".

Step: 10-42

At the end of the button bar above the text area, click the "Action Scripting" button.

A list of the types of Server-side Actions will pop up.

Step: 10-43

Select "Save Submitted Data to Table(s)" and the click the "OK" button at the bottom of the dialog.

You will then be requested to specify a name for your customized version of this Action. This is a server-side name. You can leave the default.

Step: 10-44

Click the "OK" button.

You will now be presented with a set of properties for submitting data to a table. The first property specifies what to do after submitting the data. In this case we want to continue with the same record.

Step: 10-45

Set the "After submit action" dropdown to "Edit record just submitted".

Step: 10-46

Next, look at the "Client-side Events" properties and set the dropdown for the "After save succeeded Panel to activate" property to "PANELCARD_1".

This will switch the display back to the list of items when the data saving is completed. (The Ajax callbacks wait message will be displayed until then.)

Step: 10-47

Finally, click the checkbox for the "Refresh List controls" property near the bottom of the list of properties.

Step: 10-48

You will then see a property for specifying the "List controls to refresh". Click the button on the right of that row and click the checkbox for "list1" in the dialog that pops up.

Step: 10-49

Click "OK" to dismiss the "Select List Controls to Refresh" dialog.

This will reload the updated values for the row in our list.

Step: 10-50

Click the "OK" button for the "Save Submitted Data to Tables" dialog.

You'll now see a line that has been added to the afterDialogValidate event handler that runs the Action we just defined. You can always change the Action's settings by clicking on the line in the code and then clicking on the "Action Scripting" button at the top and select "Edit action". We won't need to do that for this tutorial.

We're all done with the server-side code.

Step: 10-51

Click on the "Controls" row under "UX" on the left.

Step: 10-52

Click the "Save" button at the top-left under the menu.

Step: 10-53

Click the Working Preview tab.

Step: 10-54

Click on the "New Item" button.

Step: 10-55

Click in the text field at the top for the description and type in something like "A photo of me", spin the spinner by dragging with the mouse to show "Person", and then click the green "Save" button.

You'll see the new, added item in the list.

Step: 10-56

Click this new row to view the details, and use the keyboard and mouse to change the description to "A photo of a person" and then click the "Save" button again to see the updated value in the list.

Step: 10-57

Click on the Design tab to get back to the Tree View of the controls.

Table of Contents ↑
PART 11:
A button to take a photo

The next thing we will add is a button for setting an item's photo.

Step: 11-1

In the Tree View, in the section between the "[PanelHeader: Container_2]" and "[PanelHeader End: Container_2]", click on the second "[TabStop]" just below the "[Static Text: Details]".

Step: 11-2

On the left, click on the "Other Controls" row to open up the sub-list of other controls and then click once on the "[Button]" row.

This should insert a new button as the last thing in the second panel card's header.

Step: 11-3

Change the "Button text" property, the first one, to "Photo".

Step: 11-4

Press Enter on the keyboard.

Step: 11-5

Click on the button on the right side of the row for the "Javascript Touch, Mouse, Pointer Event" for "click". This will bring up the "Edit Click Event" dialog.

Step: 11-6

Click the "Add New Action" button in the button bar above the text area.

Step: 11-7

In the Action Javascript dialog that comes up, type "image" into the Filter list text field at the top. You should see "Image Upload" in the filtered actions below.

Step: 11-8

Click the "Image Upload" row to select it and then click the "OK" button at the bottom of the screen.

You now get to set the properties that relate to obtaining and uploading an image.

Step: 11-9

The first thing is to set the "Application type" to "mobile". This is the first property row.

Step: 11-10

The Mobile Setting for "Cordova/PhoneGap or HTML5" should be "HTML5".

Step: 11-11

Leave the Image Max Width and Height settings at 1024.

This will cause the app to scale the image to no more than that large before uploading to keep the bandwidth usage and storage requirement from being too high.

Step: 11-12

In the "Image File Upload" section, which specifies how the image is treated on the server when uploaded, click the button on the right of the "Image field" setting.

Step: 11-13

With the dropdown, select "photo" (which is a binary field) as the target image control and then click "OK" for the little popup.

Step: 11-14

A few rows below, click on the "Create image thumbnails" checkbox. This will add a row for "Thumbnail definition".

Step: 11-15

Click on the button on the right side of that row to define how the thumbnails should be created.

Step: 11-16

In the "Define Thumbnails" dialog that pops up, click the "Add New Thumbnail" button under the empty list. A "Scale Image" dialog will pop up.

Step: 11-17

Click the radio button for "Specify absolute image size".

Step: 11-18

Type "50" in the Dimension text field.

Step: 11-19

Set the dropdown to "pixels".

Step: 11-20

Click the "Height" radio button.

Step: 11-21

Click the "OK" button for the Scale Image dialog.

Step: 11-22

On the right side of the Define Thumbnails dialog, click the button on the right of the "Target control/field" for this thumbnail. The "Select Thumbnail Image Field" dialog will pop up.

Step: 11-23

Use the dropdown to select "Field:thumbnail (B)" which is the thumbnail field in the database table.

Step: 11-24

Click "OK" for this dialog and then click "OK" for the Define Thumbnails dialog.

Step: 11-25

Click the "OK" button for the "Upload an Image to the Server" Action Javascript definition.

Step: 11-26

For the Action Comment, type in "Get photo, scale, and make thumbnail".

Step: 11-27

Click the OK button.

Step: 11-28

Click the "Save" button for this Edit Click Event dialog above the list of actions which will save the definition and close the dialog.

Step: 11-29

Click the "Save" at the top-left under the menu.

Step: 11-30

A Notice may pop up letting you know that additional JavaScript needs to be loaded to support access to images and that the component property needed to make this happen will be set appropriately for you. Click "OK" to this notice.

Now it is time to test the new photo functionality. The Image Upload Javascript only works in certain browsers and has different capabilities on different devices. On many mobile devices with recent browser support the code can access the camera as well as the "roll" of photos you've taken previously. This includes Safari running on iOS 6.1 and later as well as the Chrome browser on many Android devices running Android version 4.1 and later. On a desktop or laptop machine, Internet Explorer 10 as well as recent versions of Firefox, Chrome, and Mac Safari support upload of images from the normal file system but probably not the webcam.

Within Alpha Anywhere, Working Preview only supports a subset of the functionality while the app is running. It simulates some of what a server would provide to the app, but not all. Specifically, Image Upload requires a full server to be running.

Alpha Anywhere includes a server built-in. If you use "Live Preview" then that server is started if it isn't running and then a standard Windows web view, provided by the Internet Explorer code, is connected to that server. If you use the menu command "Preview / Live Preview in Selected Browser" you can select other browsers, if they are installed, such as Firefox or Chrome. An appropriate URL will be directed to the selected browser and it will open up a web page in the browser itself, not within an Alpha Anywhere tab, which will display the component in a simulated outline just like Working Preview and Live Preview in the app.

If you have Internet Explorer 10 or later installed (which is preferred for doing Alpha Anywhere development since it supports more of the browser features that Alpha Anywhere exploits) then you can used Live Preview to demonstrate the new photo feature that we just added to the app.

Step: 11-31

Click the "Live Preview" tab in the UX Builder dialog next to the Working Preview one that we have been using.

Step: 11-32

A popup notice will ask if you would like to start the Application Server if it is not already running. Make sure that the "Yes" radio button is selected and then click the "OK" button.

When Live Preview starts it first shows a popup that asks if you want a "Fast Preview" or a "Full Preview". For our purposes with this simple app you can always use "Full Preview".

Step: 11-33

Click the "Full Preview" button.

A preview that looks very much like the one we saw with Working Preview will be displayed.

Step: 11-34

In the preview, click the "New Item" button.

Step: 11-35

Click on the "Photo" button in the app header that we just added.

A dialog should pop up asking you to "Choose File to Upload". Find a ".jpg" file to use. For example, on Windows 7 you will find sample photos in the "Pictures library" in the "Public Pictures > Sample Pictures" folder. You may already have some of your own in the "Pictures library" or you can always use a browser to go to a web site (like www.alphasoftware.com/aaresources) and then right-click on a photo that is a JPEG and save it to the Desktop and then load it for use here from there.

Step: 11-36

Choose the JPEG file and click the "Open" button at the bottom of the "Choose File to Upload" dialog.

An activity indicator will display in the middle of the screen while the app resizes the image if needed and then uploads a copy of the image to the server for temporary storage and to create the thumbnail. Those temporary image files will be used to populate the database table if there is a subsequent saving of submitted data.

Step: 11-37

Click in the description text field and type in a short description of the photo.

Step: 11-38

Drag the spinner to categorize it.

Step: 11-39

Click the green "Save" button to submit the text and photo data to the database table.

You should see the list of items in the first panel along with a thumbnail of the photo you selected next to the new item.

Step: 11-40

Click the Design tab to return to viewing the control Tree View.

Table of Contents ↑
PART 12:
Testing on a mobile device

Now that we have the photo button working, we should try this app on a mobile device.

You can do this very easily if you have certain conditions. You must have an iOS device (an iPhone, iPad, or iPod touch) running iOS version 6.1 or later, or an Android device running Android version 4.1.2 or later. You need to have both the personal computer that is running the Alpha Anywhere development environment as well as the mobile device each connected to the same local area network. This would be, for example, when both are running on WiFi from the same access point in a home.

Here's how to test the app on the mobile device. Note that this process may not work in some corporate environments nor should be used on a public WiFi system where your personal computer should not be giving other devices access to servers running on it.

Step: 12-1

In the button bar under the menus at the top, click the "Remote Test" button.

Step: 12-2

Choose "Full Preview" from the popup. The "Remote Test" dialog will now be displayed.

In order to test, your mobile device needs to use its browser to access the Alpha Anywhere server running on your development machine. You will need a URL that accomplishes this.

The Remote Test dialog presents you with a few options for getting such a URL onto the mobile device and into a browser's address bar. A useful option is by displaying a QR code on your development machine's screen that can be scanned by the mobile device. However, that option requires that you have a QR code reader on the mobile device, which we won't assume here. (If you have a QR code reader on your mobile device then you can use that if you want with the QR code option. Some examples of QR code readers are Qrafter on iOS and QR Droid on Android.) We could use the email option, assuming that you have email reading set up on the mobile device, but that requires filling in a form with email settings.

Instead of these other options, we'll just manually send the URL to the device.

Step: 12-3

Select the "Copy URL to the clipboard" radio button.

In order to formulate a hostname for the URL, the dialog gives you a few options. In our case we will choose "IP Address" and put in an explicit IP address for this machine on the local area network.

Step: 12-4

To help you determine the IP address for your machine, click the "Show IP addresses for my machine" link next to the IP Address text field. A popup will show one or more addresses in a variety of forms.

Step: 12-5

Choose the first one that is four numeric values separated by dots, for example, "192.168.1.104".

Usually this is an address that is only accessible from devices on the same local area network and is not accessible on the other side of your router on the open Internet.

Step: 12-6

Click the "OK" button to select that IP address.

The IP Address field should be filled in with that value. If you subsequently run when your personal computer has a different IP address, a warning will be displayed there in red so that you will know to set it anew.

Step: 12-7

Click the "Remote Test" dialog's "OK" button. A notice will be displayed that the URL has been copied to the personal computer clipboard.

Step: 12-8

Click the "Close" button.

Step: 12-9

Switch to a mail program and email the URL to yourself and then read it on your mobile device.

Step: 12-10

Tap on the URL to launch a browser, or select and copy it to paste into the Address Bar of a browser that isn't the default.

On iOS the default Safari browser should work well, and on Android the Chrome browser should also work well. On Windows 8 phones and tablets the mobile Internet Explorer browser should also work.

Here is it operating on an iPod touch.

I'll use the device's camera to fill in a picture for one of the item records that we already entered — the picture of a keyboard.

Here I'll do the same thing on a Google Nexus 7 Android tablet.

I'll add a photo of me as the person in the third item.

Here is an example of using the Remote Test's ability to display a QR code.

I'm using a simple iOS QR code reader.

Once scanned, I open the URL in a browser.

You might notice that in some of the Alpha Software example videos the app display runs full-screen on an iOS device with no browser controls visible. These videos were shot with the device running the GardenWeb app that is available in the Apple App Store. GardenWeb is a simple app that acts as a full-screen browser with a few other features helpful for a developer. For more information about running full-screen, see the New User Support page.

Table of Contents ↑
PART 13:
Use the grid component to view the new data

Now that we have filled in some more data, including some photos, let's go back to our grid component, the non-mobile application and see the data that was entered from the mobile device into the database.

Step: 13-1

At the bottom of the Alpha Anywhere application, click the "Web Projects Control Panel" tab.

Step: 13-2

Ensure that, in the left column, the "All Files" row is selected. If not, click on it once.

Step: 13-3

Double-click the "itemphotosgrid" component that we first built. The "Design" tab should be selected.

Step: 13-4

On the left, in the "Grid" section, click on the "Fields" sub-row.

Step: 13-5

In the third column, the one labeled "Selected", click once on the "thumbnail" row.

Step: 13-6

In the fourth column, the Field Properties for thumbnail, in the first section, "Display Settings", a few rows down you'll find the "Display format" row. Click the button on right of side of the "Display format" setting.

The "Display Format" dialog will appear. We need to change the Display Format from the default bitmap (".bmp") to JPEG (".jpg").

Step: 13-7

Below the first typing area, in the middle, click the "Special Formats" button. A menu will popup listing a variety of formats.

Step: 13-8

Click the "<JPG Field>" option.

Step: 13-9

Click the "OK" button at the bottom-left of the Display Format dialog.

Step: 13-10

In the left-most column, in the "Detail View" section, click the "Fields" sub-row.

Step: 13-11

Like we did with the thumbnail field, in the Selected column, click on the "photo" row.

Step: 13-12

In the fourth column, use the button on the right of "Display format" to bring up the Display Format dialog.

Step: 13-13

Click the Special Formats button and select the "<JPG Field>" option.

Step: 13-14

Click "OK" at the bottom of the Display Format dialog.

Step: 13-15

Click the "Save" button below the menu at the top of Alpha Anywhere.

Step: 13-16

Click the Working Preview button to see the grid component.

You can see the new records that have been added as well as thumbnails of the images we have uploaded. If you click on a row the Detail View will show the full-size photo as stored in the database table.

Step: 13-17

Click on the Design tab to stop viewing the Working Preview.

Table of Contents ↑
PART 14:
Keeping the mobile list up to date

You can see how the one database table can be updated from multiple sources. The last thing we will do in this tutorial is add a button to refresh the entire list shown on the mobile device to get the latest data. This would only be needed if you were continually using the app while someone else was also adding data. Each time the app is run from start, the initial data for the list is downloaded from the server anew.

Step: 14-1

Click the tab at the bottom of Alpha Anywhere that says "UX Builder: itemphotosmobile", or, if that isn't there, click on the "Web Projects Control Panel" tab and double-click on the "itemphotosmobile" entry there. If the entry isn't showing in the Web Projects Control Panel, ensure that, in the left column, the "All Files" row is selected. If not, click on it once to display all of the files in the web project.

You should be viewing the Design tab for the app's controls.

Step: 14-2

Click the Tree View row for "[PanelHeader: CONTAINER_1]" near the top of the tree.

Step: 14-3

Ensure that the "Other Controls" section on the left is expanded by clicking on it if needed.

Step: 14-4

Click once on the "[Button]" row on the left. This will insert a button control as the first item in the first panel card's header.

Step: 14-5

On the right, change the "Button text" button property to "Refresh".

Step: 14-6

Press Enter on the keyboard.

Step: 14-7

Scroll down in the Properties to show the "Javascript - (Touch, Mouse, Pointer Events)" section and click on the button on the right of the "click" row.

Step: 14-8

Click the "Add New Action" button above the popped up text area.

Step: 14-9

In the Filter list text field, type "list" to narrow down the number of actions shown.

Step: 14-10

Click the "List Control Actions" action row and then click the "OK" button at the bottom. The List Control Actions dialog will popup.

Step: 14-11

Use the "Action name" dropdown to select "Refresh Data".

Step: 14-12

Use the "List Id(s)" dropdown to select "list1".

Step: 14-13

Click the "OK" button for the List Control Actions.

Step: 14-14

For the Action Comment, enter "Refresh the list from the server's table" and then click "OK".

Step: 14-15

Click the "Save" button at the top of the Edit Click Event dialog.

You have made all the changes necessary.

Step: 14-16

Click the "Save" button in the upper-left below the menu.

Step: 14-17

Click the Working Preview button to see the completed app. Leave it showing the list.

Step: 14-18

Click the "Grid Builder: itemphotosgrid" tab on the bottom of Alpha Anywhere.

Step: 14-19

Click the Working Preview tab to show the grid component running.

Step: 14-20

Click on one of the first rows to select it. The Detail View on the right will show its values.

Step: 14-21

Change the description by adding a character or two.

Step: 14-22

Click the "Save" icon below the photo (you may have to scroll down and to the right). It is the next to right-most with the bubble help "Save record".

Step: 14-23

Click the "UX Builder: itemphotosmobile" tab on the bottom of Alpha Anywhere.

You should be brought back to viewing the Working Preview. It should be as you left it, with the old values in the list.

Step: 14-24

Click the new "Refresh" button.

The list should be reloaded with the updated values.

Table of Contents ↑
PART 15:
Epilogue

That's the end of this tutorial.

At this point you should be able to create simple, single table applications like this to capture and display information. Go to the New User Support page on the Alpha Software web site for information about how to construct more extensive examples, how to deploy an app like this on a server accessible on the Internet, and much more.