Getting Started With Alpha Anywhere - Build Your First Mobile App

Description

Follow this step-by-step guide to your first Alpha Anywhere application to run in a mobile web environment. This tutorial is written for Alpha Anywhere 4.4.3.

Overview

In this guide, Getting Started with Alpha Anywhere - Build Your First Mobile App, you will build a mobile web application with data integration and disconnected application support. Your mobile web application will include the ability to search, add, edit, and delete information in the Northwind database. It will also include a responsive layout design that can adapt to a mobile device's size and orientation.

The mobile application you create will be built using the UX Component. All applications in Alpha Anywhere are built using components. The UX Component is the core component for creating mobile applications. Features in the UX Component enable you to take advantage of native mobile functionality using a low-code rapid mobile development approach with built-in support for offline data storage, responsive mobile design, optimized mobile forms, and more.

The mobile app you are building.

By the end of this guide, you will have recreated the MobileAppFramework_Sample_Disconnected_app UX Component template. Templates can accelerate building some types of applications. Alpha Anywhere ships with a number of pre-built templates for many components. In addition, you can create your own custom templates. Watch Grid Templates for more details on creating component templates.

 Approach

There are two approaches you can use when building a mobile app: Layout First or Functionality First.

The Layout First approach focuses on the application's appearance. This involves creating the layout of the app, adding navigation buttons and using placeholder data, if necessary, to get the desired visual appearance before adding any core functionality.

Functionality First approach focuses on getting core functionality -- such as Create, Read, Update, and Delete (CRUD) features -- working first. After this core functionality is built, the interface is added, including creating any additional navigation necessary for using the app in a mobile environment.

This guide uses a Functionality First approach.

 About This Guide

This guide is broken into three parts: First Things First - Setting Up Your Workspace, Part 1 - Building Basic Functionality, and Part 2 - Creating the Responsive Mobile Layout. In addition, there is an Appendix at the end of this document that includes additional resources.

First Things First covers creating a new Alpha Anywhere workspace and create an AlphaDAO connection string for communicating with the Northwind database. An Alpha Anywhere workspace contains the files required for your application.

Part 1 walks you through creating a new List control with a Detail View and Search Part using the List Control Quick Start Genie. The List control is the core building block of any Alpha Anywhere mobile app. It handles displaying records from a database and tracking any changes to that data. The Detail View is an interface for creating, editing, and deleting records in a List control. The Search Part is used to request the records of interest from the data source to display in the List control.

Part 2 details adding layout elements necessary to create a responsive mobile layout that adapts to device's size and orientation. Part 2 also covers styling the UX Component to look and feel like a native mobile interface.

At the beginning of each lesson, a component may be available for download. The downloadable component contains a snapshot of the mobile app as it would look if you had built the component following the previous lessons. Not all lessons will have a component for download. Specifically, Part 1 does not have component downloads for Lesson 3 through 7, as these lessons discuss configuring the List Control Quick Setup Genie, which cannot be saved mid-setup.

At the end of this Tutorial, you will find an Appendix. The Appendix contains troubleshooting information and links to useful resources to add to your Alpha Anywhere development toolbox.

The components available for download in each lesson use the 'AADemo-Northwind' named connection string. The 'AADemo-Northwind' connection string is an AlphaDAO (Alpha Anywhere Data Access Object) connection to the MS Access Northwind database that ships with Alpha Anywhere. Follow the instructions in Lesson 2: Build a Database Connection String to create this connection string.

First Things First - Setting Up Your Workspace

 Lesson 1: Create a new Workspace

To create a new mobile application with Alpha Anywhere, you must create a new workspace. A workspace contains all of the files that your application needs, including files such as UX components, javascript libraries, images, HTML pages, .a5w pages, and css style sheets.

An Alpha Anywhere workspace.
  1. Launch Alpha Anywhere. Under the File menu, select New Workspace... to create a new Alpha Anywhere project.

    Create a New Workspace from the File menu.
  2. Create a new directory called "HelloAlpha". This directory is where you will save your project.

    Create a new directory where your workspace will be saved.
  3. Navigate inside the "HelloAlpha" directory. Type "HelloAlpha" into the File name: text box. Click the Save button to create your new workspace.

    Naming your workspace.
  4. When you create mobile applications in Alpha Anywhere, all mobile resources are added using the Web Projects Control Panel. Check the box for Open the Web Control Panel when this Workspace is opened and click OK.

    Specifying the Web Projects Control Panel should be opened when the Workspace is opened.

You have created a new, blank Alpha Anywhere workspace. You can now start building your mobile application.

A new, blank Alpha Anywhere workspace.

 Tip: Accessing the Web Projects Control Panel

The Web Projects Control Panel can be accessed at any time by clicking the Web Projects toolbar button when you are editing a component or have navigated away from the Web Projects Control Panel.

 Lesson 2: Build a Database Connection String

The application you will be creating will interact with the Northwind database. Alpha Anywhere can communicate with databases using an AlphaDAO connection string. AlphaDAO stands for "Alpha Anywhere Data Access Object". AlphaDAO is an interface through which you access data stored in SQL, noSQL, DBaaS, SaaS, and other data sources, including static JSON and OData (Open Data Protocol) APIs. (See AlphaDAO Overview and AlphaDAO Objects for information on using AlphaDAO with Xbasic.)

Alpha Anywhere provides a pre-defined AlphaDAO connection string you can use to communicate with the Northwind database, a Microsoft Access database included in the Alpha Anywhere Developer Edition.

  1. From the Web Projects Control Panel in Alpha Anywhere, select Manage Connection Strings > Alpha DAO Connection strings from the Edit menu to open the AlphaDAO Connections dialog.

  2. The AlphaDAO Connections dialog allows you to create and manage named connection strings in your Alpha Anywhere projects. "Named" connections are useful as they allow you to define a connection string to a database once and reference the AlphaDAO connection throughout your application using a "named" reference.

    For this tutorial, we will be using the AADemo-Northwind connection string, which is a pre-built connection for the MS Access Northwind database that ships with Alpha Anywhere.

    If the AADemo-Northwind connection string is not already listed, click the Create 'AADemo-Northwind' demo connection string link at the bottom of the AlphaDAO Connections dialog to create it.

  3. When prompted, click OK - Create a named connection string called 'AADemo-Northwind' to create the connection string.

    The Demo Connection String dialog provides useful information about the 'AADemo-Northwind' connection string.
  4. You will be shown a Notice confirming the connection string has been created. Click OK to close the Notice.

  5. Finally, click the Close button to close the AlphaDAO Connections dialog.

    If desired, you can create a connection string to a SQL Server or MySQL version of the Northwind database. Check out the Creating AlphaDAO Connection Strings tutorial to learn how.

Congratulations! You have created a connection string that can be used to interact with data in the Northwind database. You are now ready to begin building your application.

Part 1 - Building Basic Functionality

In this section, Part 1 - Building Basic Functionality, you will create a List control with a Detail View and Search Part using the List Control Quick Start Genie. By the end of this section, you will have built an app that can perform Create, Read, Update, and Delete (CRUD) operations against the Customers table in the Northwind database, shown below.

Part 1 - Building Basic Functionality

 Lesson 1: Add a UX Component to the Workspace

All applications built with Alpha Anywhere start with a component. Mobile applications are built using the UX Component. Let's start by adding a UX Component to the project.

See First Things First Lesson 1 for instructions on how to create a new workspace.
The UX Builder for the new UX Component.
  1. Add a new UX Component to the workspace by clicking the New button in the Web Projects Control Panel toolbar.

    The Web Projects Control Panel toolbar.
  2. In the New File dialog, select Web Component and click the Next > button.

    The New File dialog.
  3. Select UX from the file types listed and click Next >.

    Selecting the type of component to create.
  4. A number of templates for the UX Component are available. These templates make building some types of applications faster. You will be creating a blank UX Component to start. Select Start with a blank UX Component option and click OK.

    Select UX Component Template
  5. Save your new component. Click the Save button on the toolbar at the top of the screen.

    Save the UX Component
  6. Alpha Anywhere may prompt you to enable pre-rendering for the UX Component. Alpha Anywhere applications (both mobile and web) are rendered using HTML and CSS. The HTML and CSS for a componet can be computed on-demand when a component is viewed or pre-rendered before an application is published.

    Pre-rendering the component can result in substantial performance improvements for an application. A pre-rendered component's layout will not be recalculated when it is viewed in a mobile or web application because the layout is computed during design-time. If server-side code is used to dynamically compute portions of the component when a user tries to view it, you may not be able to use pre-rendering. See UX Component Optimizations to learn more.

    The mobile app you're creating does not require any server-side code to compute the layout, therefore pre-rendering can be used. Click Yes - turn pre-render on.

  7. Since you may want to disable pre-rendering for the next application you build, click This UX component only so Alpha Anywhere will prompt you again for future apps. Pre-rendering can always be enabled or disabled in the UX Component Properties.

Now that you have a UX Component, you can start creating the core functionality needed to interact with data in the Northwind database.

The UX Builder for the new, blank UX Component.

 Lesson 2: Add a List Control

Download Component for Part 1 Lesson 2

The List Control is one of the core building blocks in mobile applications. Using the List Control - Quick Setup Genie, you will create a List with a Detail View and Search part for interacting with the Customers table in the Northwind database.

  1. The interface for the UX Component is designed on the Controls pane. Click Controls. In the Data Controls section, click [List] to insert a new List control into the UX Component's layout.

    Insert a new List Control
  2. Choose Create a single new control. Click the List Control - Quick Setup Genie button to open the List Control Quick Setup Genie.

    Create a new List Control

 Lesson 3: Connect the List to a Database

Configure your List control to connect to the Northwind database using the AlphaDAO connection string you created in First Things First Lesson 2, Build a Database Connection String.

  1. Click the button in the Connection string property to open the Connection String dialog.

    The List Control - Quick Setup Genie.
  2. In the Connection String dialog, select Use a named connection string. Open the list of named connection strings by clicking the Select... button.

    Selecting a named connection in the Connection String dialog.
  3. Select the AADemo-Northwind connection string from the list and click OK. Click OK again to close the Connection String Dialog.

    Selecting 'AADemo-Northwind' from the AlphaDAO Connection Strings dialog.
  4. Click the button for the Table name property.

  5. The Table name property defines what table in the database will be queried for records. Choose the Customers table from the list and click OK.

    Select the Customers table.
  6. The Method for defining SQL query the list will use is FieldsFromTable. This means you will define the table and fields you wish to edit rather than creating a SQL query. Alpha Anywhere will generate the appropriate SQL query to pull the data from the Northwind database from the Table name, Field list, Filter, Order, Distinct, and Record limit properties.

    The List will use the "FieldsFromTable" method to query the database.
  7. Click the next to the Field list property.

    The "Field List" Property
  8. Next configure the Field list property. The Field list property determines what fields will be available for displaying, searching, and editing in the List. If you want to edit records in the table, the table's ID field must be included in the Selected Fields. The ID field for the Customers table is CustomerID.

    Select the CustomerID, CompanyName, Address, City, and Country fields from the Customers table and click OK.

    Selecting the Fields that will be available in the List control to view and modify.
    The List Data Source Definition completely configured to work with the Customers table in the Northwind database.

 Lesson 4: Add the Detail View

Next, you will configure the List control's Detail View. The Detail View is an interface for editing or adding data in the List control.

  1. Find the Has Detail View box in the List Builder.

    The 'Has Detail View'' box
  2. Check the Has Detail View box to add a Detail View to the List control. The default settings for the Detail View will open.

    Add a Detail View to the List control.

The default settings for the Detail View will generate everything your app needs to add, edit, and delete records from the Customers table in the Northwind database. New fields will be created for the CustomerID, CompanyName, Address, City, and Country fields. In addition, buttons will be created to Add, Save, Reset, Delete, and Synchronize records.

 Lesson 5: Configure the Search Part

Now, you will configure a Search Part for the List control. The Search Part queries the Customers table and sends the results to the List control for display.

  1. Find the Search Part Properties section in the List Builder.

    The 'Search Part'
  2. In the Search Part Properties section, click the checkbox for Has Search Part.

    Adding a Search Part to the List control.
  3. You will be creating a Keyword search part. For the Search Part type property, click the button.

    The "Search Part type" Property.
  4. Select SingleKeywordControl in the Select Search Style dialog and click OK.

    The Select Search Style dialog.
  5. Next, find the "Search Part fields" property in the List control. These will be the fields that are queried when a search is executed. Click the button next to the Search Part fields property.

    The "Search Part fields" property.
  6. In the dialog that opens, select all of the fields and click OK.

    Select all of the fields in the List control to search.
  7. When the List control is first rendered, the query to the server will return both the generated HTML to render the application and the results for the query in the List control's definition. While the Customers table in the Northwind database does not contain a large number of records, many databases have tables with millions of entries. Loading a million records when an app is first launched can take a long time and may even time out, creating the perception that your app is unreliable and doesn't work. In addition, the List control stores its data and edits to that data in local storage when disconnected application features are enabled. Local storage can only store up to 5MB of data.

    To ensure your app loads quickly and reduce storage needs, Delay populate List till active search can be enabled, preventing any data from being loaded into the List control until an explicit query against the data source is made by the user.

    Check Delay populate List till active search.

    The Search Part configured to add search capabilities for the List control.

 Lesson 6: Enable Disconnected Support and Generate the Controls

The final step in setting up the List control with Detail View and Search Part is to add Disconnected support. This allows your mobile app to continue to work when a connection to the data source is lost. Data in the List control, as well as any edits made to that data, will be persisted to local storage on the device. If a connection to the network is lost, or the app is closed, the List control will retain the records and edits to the records until a connection with the data source can be reestablished.

  1. Expand the Disconnected Operation properties section under List Properties.

    The "Disconnected Operation" properties section.
  2. In the Disconnected Operation properties, check the box for Persist List data to Local Storage.

    Enabling offline capabilities for your mobile application.
  3. Click the OK button in the List Control - Quick Setup Genie. This will generate all of the controls necessary for the List, Detail View, and Search Part. Your UX Component should have a list of controls similar to the ones shown in the image below:

    The controls created by the List Control - Quick Setup Genie
  4. Click the Save button on the toolbar to save the UX Component.

Only apps deployed using PhoneGap can offer full disconnected operation support. Web applications with Persist List to Local Storage option enabled will remember the data and edits made to that data in a List control, but may not behave as expected if the network connection is lost as the web browser may attempt to reload the page instead of using the HTML, CSS, and Javascript previously retrieved when a connection was available. See the Getting Started with PhoneGap to learn more.

 Lesson 7: Preview the UX Component

Download Component for Part 1 Lesson 7

Now that the List control, Detail View, and Search Part have been created, let's preview the app and test it out to verify the basic functionality for viewing and editing records in the Customers table works.

Click on the Live Preview tab located between the Design and Working Preview tabs at the top of the UX Builder.

If the development server is not running, you may be prompted to turn it on. If asked if you want to turn on the development server, select Yes and click OK.

If you receive a warning that the port is in use, you need to change the Development Server's Server Port. See Appendix A: Configure the Development Server to learn how to setup the Alpha Anywhere Development Server.

You will be asked what kind of Preview you would like. The options presented are Fast Preview and Full Preview. Since this is the first time you will be previewing your app using Live Preview, select Full Preview. This ensures all of the files you need to preview your app will be created.

In Live Preview, the Search Part should appear above the List control on the left side of the screen. To the right of the List control, you should see several text boxes and several buttons. This is the Detail View.

Previewing the Search Part, List control, and Detail View in Live Preview.

The List control at this point should be empty. This is because there is no data in the List control. Remember that you enabled "Delay populate List till active search" in the List Genie. This means that no records will be available until a search is performed. Let's do a search to populate the list with some data.

Type "Spain" into the Search box and click the Search button.

Searching for "Spain" yields several records in the List control.

Several records should appear in the List control. When you click on a record, the Detail View will be populated with data from that record. Select a record by clicking on it in the List control to display it in the Detail View.

Selecting a record populates the Detail View with the record's data.

Edit the record you selected and click the Save button to save your changes. A little yellow icon will appear next to the record in the List control. This icon indicates that the record has been modified but has not been persisted (ie, saved) to the Northwind database.

The edited record appears with an orange triangle, indicating that it has been modified

If there are any modifications to the data in the List control, no searches can be performed on the source data - eg, the Northwind database. If you tried searching for "Germany" now to pull up all the records from the Northwind database for Customers with a Country of Germany, no results will be displayed in the List control. In addition, you may notice that the Detail View remains populated with the last record you were editing. This is because the Search Part performed a local search on the data in the List and did not query the Northwind data source. This local search is performed to prevent losing changes to data in the List control.

If you want to perform a new search to retrieve a new set of records from the Northwind database, you must persist the changes in the List control with the Northwind database. To persist changes back to the Northwind database, click Synchronize.

Search will only search locally stored records if the List control has unsynchronized changes

When disconnected application features are enabled, the List control will remember both the records in the List control and any changes you have made to those records when you exit Live Preview. The data in the List control is saved in local storage. Click on the Design tab and then back on the Live Preview tab. The List control will remain populated with the data that was in it when you navigated away from Live Preview.

Now that you have the functional components of the mobile application working, let's configure the UX Component to look and feel like a mobile application.

Part 2 - Creating the Responsive Mobile Layout

In this section, Part 2 - Creating the Responsive Mobile Layout, you will add the layout elements necessary to create a responsive mobile application. Using Panels, you will create an application that adapts to a mobile device's size and orientation.

Alpha Anywhere's mobile emulation tools will help you understand how your app will appear and behave on various devices. You will also add a mobile style sheet to the project, which will give UX Component the look and feel of a native mobile app.

By the end of this section, you will have a mobile application that can be deployed using PhoneGap Build or published to the web as a mobile web application.

How your completed mobile app will appear on iPhone 4 with a vertical orientation.
How your completed mobile app will appear on iPhone 6 with a horizontal orientation.

 Lesson 1: Add Panel Cards and Panel Layouts

Download Component for Part 2 Lesson 1

All mobile applications built in Alpha Anywhere use Panels - Panel Cards, Panel Layouts, and Panel Navigators.

Panel Cards group controls into "screens" and provide the navigation between "screens" of your application.

Panel Layouts define the layout of the Panels within them. Panel Layouts can have a horizontal (eg, left to right) or vertical (eg, top to bottom) layout. Buttons can be defined to trigger navigation between panels in a Panel Layout.

Panel Navigators include built-in swipe navigation in addition to being able to specify a horizontal or vertical layout of Panels in the navigator.

Panel Layouts and Panel Navigators can be nested inside other Panel Layouts and Panel Navigators, allowing you to create very complex and sophisticated mobile application layouts. Watch Panel layouts, Panel Navigators, and Panel Cards Explained to learn more.

The UX Component with Panel Cards and Panel Layouts.
  1. Select all of the Search Part controls in the UX Component. Click [Panel Card] listed in the Panels section. Click OK to insert the Panel Card around the selected controls.

    Place the Search Part in a Panel Card.
  2. Next, wrap the List control in a Panel Card. Select the List control in the Tree View and click [Panel Card]. When prompted, click the Insert Around button to place the List inside the Panel Card.

    Wrapping the List control in a Panel Card.
  3. Check the Fill container option so the List control will fill the Panel Card. This ensures the List control will take full advantage of the screen real estate available on the mobile device.

    Configuring a List control to Fill container.
  4. Add a Panel Card around the Detail View the same way as you did for the Search Part. Select all the Detail View controls and click [Panel Card]. Click OK.

    Adding a Panel Card around the Detail View.
  5. Now you must remove the Container controls from the UX. Select the the [Container:CONTAINER_1] and [Container End:CONTAINER_1] controls and delete them by clicking the Delete selected objects UX Builder toolbar button.

    • Removing CONTAINER_1.
  6. Select the the [Container:CONTAINER_1_2] and [Container End:CONTAINER_1_2] controls and delete them as well by clicking the Delete selected objects UX Builder toolbar button.

    Removing CONTAINER_1_2.
  7. The Search Part should appear above the List control. Select PANELCARD_1 and PANELCARD_2, including all of the controls they contain and PANELCARD_2's Panel Card End control. Click [Panel Layout] in the Panels section to wrap the selected controls in a Panel Layout.

    Adding a Panel Layout to contain the Search and List.
  8. Next, change the layout direction for PANELLAYOUT_1 from Left-To-Right (LTR) to Top-To-Bottom (TTB). The Top-To-Bottom layout will position the Search Part above the List control.

    Changing the Panel Layout from LTR to TTB.
  9. Next, add a Panel Layout that will contain both the Panel Layout for the Search Part and List as well as the Panel for the Detail View. Select all of the controls in the UX Component. Click [Panel Layout] in the Panels section to wrap all the controls in a Panel Layout.

    Adding a Panel Layout for the entire UX Component.

Now that the controls in the UX Component have been encapsulated inside Panel Cards, you can add Panel Headers and Footers. The Panel Headers and Footers will contain the buttons for the Detail View. In a later lesson, you will add buttons for dynamically displaying the Search Part and navigating between the Detail View and List control to the Panel Headers.

The UX Component with Panel Cards and Panel Layouts.

 Lesson 2: Add Panel Headers and Footers

Download Component for Part 2 Lesson 2

Next, Panel Headers and Panel Footers need to be added. The Panel Headers and Panel Footers will contain the Detail View buttons and any other buttons that need to be added to navigate the mobile app.

  1. Select the [Panel Layout: PANELLAYOUT_1] control. Click [Container], which is listed in the Containers controls to open the Insert Container dialog. Select Panel Header from the list of container choices and click the Insert After button.

    Adding a Panel Header to the Search Part.
  2. This Panel Header will hold the New Record and Synchronize buttons. Select the New Record button and click the Move to a specified location button on the UX Builder toolbar.

    Selecting the New Record button for moving into the Panel Header for the Search Part.
  3. Select [PanelHeader: PANELHEADER_1] in the Move Selected Control(s) To.. dialog. Choose After for the Move action. Click OK to move the New Record button inside the Panel Header.

    Moving the New Record button into the Search Part Panel Header using the Move Selected Control(s) To dialog.
  4. Now, move the Synchronize button into the Panel Header. Select the Synchronize button and click the Move to a specified location button on the UX Builder toolbar.

    Selecting the Synchronize button for moving into the Panel Header for the Search Part.
  5. Select [Button: New Record] in the Move Selected Control(s) To.. dialog. Choose After for the Move action. Click OK to move the Synchronize button after the New Record button.

    Moving the Synchronize button into the Search Part Panel Header after the New Record button.
  6. Next, add a Panel Header to the Detail View to hold the Delete Record button for the Detail View. Select the [Panel Card: PANELCARD_3] control. Click [Container] in the Containers controls to open the Insert Container dialog. Select Panel Header from the list of container choices and click the Insert After button.

    Adding a Panel Header to the Detail View.
  7. Move the Delete Record button into the header for the Detail View. Select the Delete Record button and click the Move to a specified location button on the UX Builder toolbar.

    Selecting the Delete Record button for moving into the Panel Header for the Detail View.
  8. Select [PanelHeader: PANELHEADER_1] in the Move Selected Control(s) To.. dialog. Choose After for the Move action. Click OK to move the New Record button inside the Panel Header.

    Moving the Delete Record button into the Detail View Panel Header.
  9. Next, add a Panel Footer to the Detail View. Select the Save and Reset buttons. Click [Container] in the Containers controls to open the Insert Container dialog. Select Panel Footer from the list of container choices and click OK.

    Adding a Panel Footer to the Detail View around the Save and Reset buttons.
  10. Select the [Panel Footer: PANELFOOTER_1] control. In the Container Begin Properties, change the Container alignment from Left to Center. This will center the Save and Reset buttons in the footer.

    Centering the Save and Reset buttons in the Detail View Panel Footer.

The controls in the UX Component have been organized into a Panel structure, with Panel Cards, Panel Layouts, Panel Headers, and Panel Footers. Next, you will add a mobile style sheet and enable mobile emulation for the application so you can visualize how the application will look and behave on a mobile device.

How the app looks after controls are organized into Panel Cards, Panel Layouts, Panel Headers, and Panel footers.

 Lesson 3: Using a Mobile Style Sheet

Now that the Panel structure and navigation has been established, the next step is to start styling the UX Component to look like a mobile application. Alpha Anywhere ships with a number of styles that allow you to build apps that look like iOS or Android applications in addition to some generic mobile styles. Alpha Anywhere also includes tools for emulating a mobile device in Live Preview, which you will turn on in Lesson 3-3.

The app rendered using the iOS7 style sheet and using Mobile Emulation in Alpha Anywhere.

 Lesson 3-1: Choose a New Style

Download Component for Part 2 Lesson 3-1

  1. Start by changing the style sheet used by the UX Component. On the UX Component's Properties pane, click the button for the Style name property to select a new style.

    The Style name UX Component Property.
  2. In the Select Style dialog, choose the iOS7 style from the list of options and click OK.

    Choosing the iOS7 style in the Select Style dialog.

 Lesson 3-2: Install the Style's Icon Fonts

Download Component for Part 2 Lesson 3-2

To preview this style you will need to install a few Fonts on your system. At this point, if you try to open Live Preview, you will see several dialogs informing you that you need to install several fonts in order for your UX Component to render correctly in Live Preview.

Let's install the fonts for the iOS7 style so you can see the icons in Live Preview, as shown below.

The UX Component rendered with an iOS7 style sheet and font icons.
  1. Open Windows Explorer and navigate to the CSS\iOS7 directory in the executable folder where you installed Alpha Anywhere. This is usually C:\Program Files (x86)\a5v12.

    Finding the A5_iOS7Icons.ttf file in the CSS\iOS7 directory.
  2. Double-click the A5_iOS7Icons.ttf file. If file extensions are not configured to display, double-click the A5_iOS7Icons with a Type description of "TrueType". Windows will prompt you to install the font. Click the Install button to install the font.

    Installing the A5_iOS7Icons.ttf font.
  3. Once the install completes, close all windows and return to Alpha Anywhere.

  4. Next, you need to install the font-awesome font library that ships with Alpha Anywhere. In the Web Projects Control Panel, click the Open Project Folder in Windows Explorer button on the toolbar.

    Opening the project directory using the Open Project Folder in Windows Explorer tool.
  5. Navigate to the fonts directory inside the css/CSSIcons/font-awesome in the project folder in Windows Explorer. Double-click the fontawesome-webfont.ttf file, or if extensions are not shown, double-click the fontawesome-webfont file with a Type description of "TrueType". Click the Install button to install the font.

    Finding the fontawesome-webfont.ttf file in the css\CSSIcons\font-awesome\fonts directory.
  6. When the install is complete, close all windows and return to Alpha Anywhere.

Now, when you open Live Preview, the app will render using the iOS7 style sheet and display images from the font libraries you installed.

The UX Component rendered with an iOS7 style sheet and font icons.

 Lesson 3-3: Enable Mobile Preview

Download Component for Part 2 Lesson 3-3

Alpha Anywhere includes the built-in tools for simulating your application on a Mobile device in Working Preview and Live Preview. In order to style the app to look and feel like a native mobile app, mobile emulation helps visualize the space Panels and buttons require and navigation controls required to handle small screens. It also allows you to test actions, such as "swiping" within the Alpha Anywhere development environment.

  1. To preview your app on a variety of Mobile devices, first check the Mobile checkbox on the UX Builder toolbar.

    UX Builder toolbar's 'Mobile' checkbox
  2. The Mobile device emulation tools will now be enabled when you test your app. Click on the Working Preview or Live Preview tab to preview your mobile app using the mobile style sheet with the mobile emulator turned on.

    Previewing with the mobile device emulator.
  3. You can choose from a list of devices. Each device has an option for portrait or landscape orientation. Click on the dropdown box and select a different device option.

    Available device emulation options.
In addition to using the built in mobile emulator, you can also perform a Remote Test of your mobile application on any device that is on the same network as your development machine. See Appendix A: Remote Testing for more information on how to perform a Remote Test.

Now that your app has a mobile style sheet and can be previewed using the mobile emulator, the next step is to configure the controls so they fit comfortably on a small screen.

How the app looks emulated on an iPhone 4 in portrait (vertical) orientation after adding the iOS7 style sheet.

 Lesson 4: Style the UX Controls for Mobile

In this lesson, you'll start styling the UX Component to fit on a mobile device. In the next 3 lessons, you'll define the space each Panel requires, which will force the Detail View to render on its own screen rather than side by side with the List control. The buttons in the Panel Headers will be modified to display just an icon, allowing more space for additional buttons to be added in Lesson 5 to provide navigation between the List control and Detail View Panels. You will also modify the Search Part's panel to display on demand.

The Search Part is now hidden, shown only when the search icon in the upper left-hand corner is clicked. The Detail View is not shown because there is not enough space to render it on-screen with the List control.

 Lesson 4-1: Sizing Panels

Download Component for Part 2 Lesson 4-1

The next step in creating a responsive layout for your mobile application is to add size information to the panels. The Panels containing the Detail View and List need to have their Layout size defined. A Layout size for a Panel defines how much space the Panel requires to display its contents. On smaller devices, if two Panels' total required Layout size is greater than the space available on screen, only one Panel will be displayed at a time.

The UX Component rendered on iPhone 4 with a vertical layout. The Detail View is not visible because there is not enough space to show it and the List control and Search Part, which require 300px of space.
  1. Select the [Panel Layout: PANELLAYOUT_1] control. In the Panel Size and Dock Options, set the Layout size to 300px.

    Setting the Layout size for the Search Part and List Panel Layout to 300px.
  2. Next, select the List's Panel Card, [Panel Card: PANELCARD_2], and set the Minimum size to 300px in the Panel Size and Dock Options.

    Setting the Minimum size for the List's Panel Card to 300px.
  3. Finally, select the Detail View's Panel Card, [Panel Card: PANELCARD_3], and set the Minimum size to 300px in the Panel Size and Dock Options.

    Setting the Minimum size for the Detail View's Panel Card to 300px.
The UX Component rendered on iPhone 4 with a vertical layout. The Detail View is not visible because there is not enough space to show it and the List control and Search Part, which require 300px of space.

 Lesson 4-2: Style the List Buttons

Download Component for Part 2 Lesson 4-2

Next, you will modify the Detail View buttons to use images from the UX Component's style instead of text to fit in the headers and footer of the mobile layout.

The New Record and Synchronize buttons displaying as icons.
  1. Select the New Record button and change its Button layout to Image only.

    Changing the button layout for the New Record button to Image only.
  2. Click on the label for the Button layout property for the New Record button to select the property. Then, click on the Paste Properties button on the UX Builder toolbar.

    Selecting the Button layout for the New Record button so it can be copied to multiple controls using the Set Multiple Properties tool.
  3. Select the Synchronize and Delete Record buttons in the Select Controls dialog and click Set Properties to set the selected controls' Button layout property to Image only.

    Selecting the Synchronize and Delete Record buttons to set their Button style to Image only using the Set Multiple Properties tool.
The New Record and Synchronize buttons displaying as icons.

 Lesson 4-3: Dock the Search Panel

Download Component for Part 2 Lesson 4-3

The Search Part only needs to be shown when the user wants to perform a search. The rest of the time, the Search Part can be hidden, or docked, off screen. By docking the panel, the content in the panel is only displayed when an explicit call to display the panel is made.

In this section, you will configure the Search Part's Panel to be a Docked Panel and add a button that can be clicked to show or hide the docked Search Part.

Clicking the Search icon in the upper left-hand corner brings the docked Search Part into view.
  1. Select the Panel Card that contains the Search control and change the Dock property to collapse-before.

    Changing the Dock property from none to collapse-before for the Search Part's Panel Card.
  2. Next, set the Layout Size of the Panel Card to 100px.

    Adding a Layout size of 100px to the Search Part's Panel Card.
  3. Select the Panel Header Begin control for the header for the Search Part and List control. Click [Button] in Other Controls to insert a new button in the Panel Header. This button will be used to toggle the display of the Search Part.

    Add a button to the component by clicking [Button] listed in Other Controls.
  4. Name the button you just inserted. Select the button and click the button for the Id property. Type "TOGGLESEARCH" into text box for the button's ID.

    Changing the ID for a control using the Specify New Id dialog.
    When specifying a new ID for a control, the New ID must be unique among the controls in the UX Component.
  5. Remove the break after the Toggle Search button. Select the Toggle Search button and click the Toggle break button on the UX Builder toolbar.

    The Toggle break tool will add or remove a break after the selected control(s).
  6. Select the Toggle Search button. In the Button Appearance settings for the Toggle Search button, change the Button layout to Image only.

    Changing the Button layout to Image only for the Toggle Search button.
  7. Add the Search icon image to the Toggle Search button by clicking on the button for the Image name property. This will open the Specify Image dialog. In the Specify Image dialog, select Image in Web Project or Style to pick an image from the UX Component's style. Then, click the Select button and choose the Select from the Style option.

    The Specify Image dialog.
  8. Using the Filter text box, search for the {images.SearchPart.RunSearch} option. Select {images.SearchPart.RunSearch} and click the OK button. Click OK in the Specify Image dialog to set the Image name property to the style image you selected.

    Selecting the image to display from the images in the UX Component's style.
  9. Select [Panel Layout: PANELLAYOUT_1] and click the button for Dock Panel controller buttons.

    Open Docked Panel controller buttons property by clicking the button for the property.
  10. Click the Add Button Controller button to add a new Docked Panel Controller Button.

    Add a new Button Controller on the Docked Panel Controller Buttons dialog by clicking Add Button Controller.
  11. In the Add New Dock Panel Controller Button dialog, set Button Id to TOGGLESEARCH and Panel Id to the Panel Card for the Search Part, PANELCARD_1. Click OK.

    The Add New Dock Panel Controller Button dialog.
  12. Click OK to save the changes in the Docked Panel Controller Buttons dialog. The Search Part will now be shown when the TOGGLESEARCH button is clicked.

    Linking the Toggle Search button (TOGGLESEARCH) to the Panel Card for the Search Part (PANELCARD_1.)
  13. Select the Search and Clear Filter buttons. Click [Container]. Select ButtonGroup from the list of options and click OK.

    Adding a Button Group around the Search and Clear Filter buttons for the Search Part. The Button Group will apply special styling to the button controls within it.
  14. Change the Button text for the Search Part's clear button to "Clear":

    Changing the Button text for the Clear button for the Search to "Clear".
  15. Select the LIST1_KEYWORDSEARCH control. Click the Set control width UX Builder toolbar button. Choose 100% from the list of options to resize the Search text box to 100% wide.

    Setting the Search text box width to 100% wide.
  16. For the LIST1_KEYWORDSEARCH control, change the Position for the Field Label to None.

    Removing the label for the search box.

There are many options available for docked panel behaviors, allowing for a wide variety of uses. Panels can be docked on the edge of the screen relative to the panel layout. In a Top-to-Bottom layout, panels can be docked on the top or bottom of the screen. In a Left-to-Right layout, panels can be docked on the sides of the screen. Panels can also be configured to dock when the device is in a specific orientation (ie, landscape or portrait.)

In addition to overlapping other panels when shown, docked panels can push content off screen when they slide into view. For more information about docking panels and some use cases, check out these videos:

  • Showing a Docked Panel - How the docked panel is shown can be configured. Watch this video to learn about the options available.

  • Building a Docked Menu - A popup menu in a mobile application can be created using docked panels. Watch this 5 part video series to learn how to build a docked menu in Alpha Anywhere.

Now that the Search Part is docked, you need to add javascript to show the Detail View when a record in the List control is selected or the New Record button is clicked. On devices that do not have enough space to display both the List control and Detail View side by side, the Detail View is rendered off-screen.

In addition to navigating to the Detail View, you also need to add a button to navigate back to the List control from the Detail View.

Clicking the Search icon in the upper left-hand corner brings the docked Search Part into view.

 Lesson 5: Add Navigation Between the List and Detail View

Javascript can be used to navigate between the List control and Detail View when records are selected. On devices with more screen space, such as a tablet, the Detail View and List will be shown side by side. However, on smaller screens, such as smartphones, the Detail View is hidden on another "screen". You need to add javascript to show the Detail View when a record in the List control is selected or the New Record button is clicked.

The List control and Detail View panels shown side by side, rendered on iPhone 4 with a vertical layout.

 Lesson 5-1: Add Javascript to Show the Detail View

Download Component for Part 2 Lesson 5-1

  1. Open the List Builder for the List control by selecting the list and clicking the button for the List Properties in the Properties pane.

    Open the List Builder by clicking the button for List properties.
  2. Click the List Events... button in the toolbar at the bottom of the List Builder to open the List Events Editor.

    The List Events button provides quick access to all of the Client-Side events for the List control.
  3. Search for the onClick event by typing "click" in the Filter text box.

    Use the Filter box to quickly find the event you're looking for in the List Control System Events editor.
  4. Click the Insert method... link at the bottom of the Javascript code editor. This opens the Insert Method dialog. The Insert Method dialog lists javascript methods available for the UX Component and objects (List controls, maps, button lists, etc) in the UX Component. The placeholder, {dialog.object}, represents a javascript object for the UX Component. It has methods and properties that can be utilized to interact with the interface elements in the UX Component.

    Insert Method dialog for the UX Component
  5. To show the Detail View panel when a List control record is clicked, you need to call the {dialog.object}.panelSetActive method. Search for "panelSetActive" in the Filter text box. Select {dialog.object}.panelSetActive(UXPanelName [, flagAnimate]); from the Method list and click Insert

    Insert Method dialog for the UX Component
  6. In the Javascript code editor, delete the text "UXPanelName [, flagAnimate]" from between the opening and closing parentheses for the panelSetActive method. Type a single quote (') between the parentheses to activate the autocomplete system in Alpha Anywhere. Press the "Ctrl+Down key" on the keyboard to open a popup menu of available Panel objects that can be activated using the panelSetActive method. You can also right-click on the text in the popup to activate the menu. Select PANELCARD_3 from the list of choices to set the UXPanelName parameter for the panelSetActive method.

    Autocomplete is available for most methods in the Javascript code editor.
    A dropdown menu is available for some methods, listing available controls a UX Component's method can access. Follow the instructions in the popup help for a method to access any dropdowns and genies that may be available.
  7. For the second parameter, flagAnimate, type in false. The flagAnimate parameter defines whether or not an animation should be used when activating the panel. A value of false means that no animation will be used.

    Set the animation flag to false.
  8. The javascript to activate the Detail View in the List control's onClick should like the code in the example below. Click OK to save your changes.

    {dialog.object}.panelSetActive('PANELCARD_3',false);
  9. When you return to the List Builder, click the List Builder's OK button to save your change to the List control.

  10. Select the New Record button in the UX Builder.

  11. Next, click the button to open the editor for the New Record button's click event.

    Open the Event editor for an event by clicking the button.
  12. Add code to the click event for the New Record button to navigate to the Detail View's pane when the button is clicked. There are already 2 lines of Javascript code in the button's click event. Add the same call to {dialog.object}.panelSetActive() at the end of the script. Click Save to save your changes and close the Edit Event dialog.

    var lObj = {dialog.object}.getControl('LIST1');
    lObj.newDetailViewRecord();
    {dialog.object}.panelSetActive('PANELCARD_3',false);
    The Event Editor is where you can add Action Javascript, Javascript, or even Server-side Xbasic to perform actions when client-side events occur for controls in the UX Component.

 Lesson 5-2: Add a Back Button

Download Component for Part 2 Lesson 5-2

Now that you can navigate to the Detail View from the List control, a Back button needs to be added so that you can return to the List and Search Part from the Detail View.

The Detail View Panel with a Back button in the Panel Header.
  1. Select the [PanelHeader: PANELHEADER_2] control. In the Other Controls section, click [Button] to add a new button.

    Inserting a button into the UX Component.
  2. While the new button is selected, click the Toggle break button on the UX Builder toolbar to remove the break after the button.

    The UX Builder toolbar.
  3. In the Button text property, type "Back".

    Add text to a new button by changing the Button text property.
  4. Change the button's Id to "BACK". Click the button for the Id property to open the Specify New Id dialog. Type in "BACK" in the New ID text box. Click OK to save the changes.

    Changing the ID for the Button using the Specify New Id dialog.
    When specifying a new ID for a control, the New ID must be unique among the controls in the UX Component.
  5. Under Button Appearance, change the Button layout to Image followed by text.

    Changing the Button layout from Text only to Image followed by text.
  6. Click the for the Image name property to open the Specify Image dialog. With Image in Web Project or Style select, click Select and select Select from the Style from the list of options. Search for "prev" and select the {images.dv.prevRecord} image from the style. Click OK to select the image. Click OK again to close the Specify Image dialog and save your changes.

    Selecting the image to display on the button.
  7. Add an enable expression to the Back button to prevent the user from going back to the List control if any changes have been made in the Detail View. In the Client Side Properties for the Back button, click the button for Enable expression

    Open the Define Client-Side Enable Expression editor by clicking the button for the Enable expression property.
  8. In the Define Client-Side Enable Expression dialog, click the Insert Field button. Select {dialog.listDetailView.LIST1.isDirty} from the list to insert it into the expression.

    Click Insert Field to insert a control or UX Component variable into an Enable Expression.
  9. {dialog.listDetailView.LIST1.isDirty} is a logical variable that is true if the Detail View has been modified and false if no changes have been made. The Back button should only be enabled when the Detail View is modified, or when {dialog.listDetailView.LIST1.isDirty} is false.

    After {dialog.listDetailView.LIST1.isDirty}, type = false into the Enable Expression builder. You're Enable Expression should match the expression shown in the code example below. Click OK to save the Enable Expression.

    dialog.listDetailView.LIST1.isDirty = false
    The complete Enable Expression for the Back button.
  10. Select the Panel Card that contains the Detail View, [Panel Card: PANELCARD_3]. In the Parent Navigation Buttons properties, check the Has 'Previous card' button.

    Check the box for Has 'Previous card' button to enable display of the 'Previous card' button ID property.
  11. For the 'Previous card' button Id, select BACK from the dropdown.

    Setting the 'Previous card' button ID to BACK.

Now that there is a Back button, you can return to the List control after viewing or modifying a record on the Detail View pane.

The Detail View Panel with a Back button in the Panel Header.

 Lesson 5-3: Right Align Buttons in the Panel Header

Download Component for Part 2 Lesson 5-3

In this lesson, you will add separation between the Toggle Search button and New Record button, making it easier to open the search part without accidentally tapping the New Record button. Similarly, space will be added between the Back button and the Delete Record button in the Detail View's Panel Header, reducing the chance of tapping the Delete Record button when navigating back to the List control.

Right aligning the New Record, Synchronize, and Delete buttons.
  1. Select the New Record and Synchronize buttons. Click [Container] to insert a Container around the selected buttons. Choose None and click OK

    Add a container around the New Record and Synchronize buttons.
  2. Add "float:right;" to the Container style property for the Container. This will align the New Record and Synchronize buttons on the right side of the Panel Header.

    Adding float:right; to the Container's style will align the New Record and Synchronize buttons to the right-hand side of the Panel Header.
  3. Select the Delete Record button. Click [Container] to insert a Container around the Delete Record button. Select None and click Insert Around.

    Add a container around the Delete Record button in the Detail View's Panel Header.
  4. Add "float:right;" to the Container style property for the Container. This will align the Delete Record button on the right side of the Panel Header.

    Adding float:right; to the Container's style will align the Delete Record button to the right-hand side of the Panel Header.
Right aligning the New Record, Synchronize, and Delete buttons.

 Lesson 6: Styling the List Control and Detail View

The final steps are to add a few styling elements to the List Control and Detail View so the controls are easier to read and use on a mobile device.

 Lesson 6-1: Add a Freeform Layout to the List

Download Component for Part 2 Lesson 6-1

You will now add the layout and styling necessary to make it readable on a mobile device. This starts with converting the List's layout from a Column Layout to a Freeform layout, allowing you to take advantage of Client-side Templates to render the data in a more mobile-friendly fashion.

The List control rendered with a Freeform layout.
  1. Open the List Builder for the List control. On the List Properties tab, change the Layout from Column to Freeform

    Changing the layout type for a List control.
  2. On the List Layout tab, click the Pre-defined Templates link located along the bottom of the Template editor. This will open the List Template Picker. Select the template with Level1, Level2, and Detail on the left and Context on the right. (Watch Pre-Defined Free-Form List Templates to learn more about the pre-defined Freeform list templates available.)

    One of the pre-defined templates available in the List Template Picker
  3. Assign the fields from the List control to the placeholders in the pre-defined template. You can select the fields from the dropdown controls or type them in manually. You can assign multiple fields to the same placeholder by typing them in.

    Assign the [[Context]] placeholder to {CustomerID}

    Assign the [[Level1]] placeholder to {CompanyName}

    Assign the [[Level2]] placeholder to {Address}

    Assign the [[Detail]] placeholder to {City} {Country}

    Assigning fields to template placeholders.
  4. The placeholders in the list template will be replaced with the fields you picked. This will produce a template that will look similar to the following:

    <div style="display: table; width: 100%;">
    	<div style="display: table-cell;">
    		<div class="{dialog.style}ListItemLabelContext" style="float: right;">{CustomerID}</div>
    		<div class="{dialog.style}ListItemLabelMain">{CompanyName}</div>
    		<div class="{dialog.style}ListItemLabelSub">{Address}</div>
    		<div class="{dialog.style}ListItemContent">
    			{City} {Country}<br/>
    
    		</div>
    	</div>
    
    
    	<div style="display: table-cell; width: 40px; text-align: right; vertical-align: middle;">
    		<img src="{images.dialog.listNav}" />
    	</div>
    </div>

Client-side templates allow you to define a dynamic layout for a List control that is calculated client-side, rather than server-side. This enables the List control to render new records when the mobile device is disconnected from the internet. Rendering data using client-side templates also offers speed advantages as it reduces the amount of data required to download from the server and can be done on the user's computer.

There are a rich variety of template directives available. Read Client Side Templates to learn more about the Client-Side Template syntax. You can learn more about Client-Side Templates by watching the videos below, as well.

Now that the List control is styled so data in the List is readable, you can style the Detail View's controls to render with a more mobile-friendly look.

The List control rendered with a Freeform Layout.

 Lesson 6-2: Mobilize the Detail View Controls

Download Component for Part 2 Lesson 6-2

The final thing you need to do is to style the Detail View's controls to be mobile friendly.

  1. Select the CustomerID, CompanyName, Address, City, and Country text controls in the Detail View. Click [Container]. Select ControlGroup and click OK

    Select the text boxes in the Detail View to place them inside a ControlGroup.
  2. Select the same group of controls again and click the Set control width UX builder toolbar button. Choose 100% from the list of options to resize the controls to 100% wide.

    Change the width of all of the text boxes in the Detail View to 100% wide.
  3. Select the CustomerID control. Change the Position in the Field Label properties to Left.

    Change the Label Position to Left for the CustomerID control.
  4. While the CustomerID control is selected, select the Position property. Click the Paste Properties UX Builder toolbar button to open the Set Multiple Properties dialog.

    Selecting the Position property for the CustomerID control so it can be copied to multiple controls using the Set Multiple Properties tool.
  5. In the Select Controls dialog, select the CompanyName, Address, City, and Country controls. Click Set Properties to copy the label position from the CustomerID control to the selected controls.

    Selecting the other text box controls in the Detail View so their Label Position can be set to Left.
  6. Select the CompanyName control. Change the Label in the Field Label properties from "CompanyName" to "Company".

    Change the CompanyName title to "Company".

Now, when you view the Detail View, the text boxes appear larger and will fill the space available on the mobile device.

 Congratulations! You have built your first Mobile App!

Download Completed App

You have completed building your first mobile app. This app is ready to be deployed and will support a variety of mobile layouts. This app can be distributed as a mobile web application or published as a PhoneGap application and distributed through a private or public app store. Read the Getting Started with PhoneGap to learn how to deploy an app using PhoneGap.

Searching for records.
Search results in the List.
Viewing a Record.
A record after the City field was edited.
The List indicating a change is ready to synchronize with the server.
The same app in an iPhone 6 Horizontal layout.

Before You Deploy: Remote Testing

Before you consider deploying your application using PhoneGap, it's worth performing a Remote Test of your app on a mobile device.

Remote Testing is a way to test a mobile web application on a remote device. Remote Testing can be useful when trying to figure out layout and design elements for your mobile application. While the mobile emulator simulates several devices, it doesn't simulate all mobile devices on the market. With Remote Test, you can test your mobile and web applications on devices that are not available in Alpha Anywhere's mobile emulator.

Both the device and your development computer must be running on the same network. If they are not on the same network, remote testing is not possible.

Remote Testing cannot be used to test features that require access to a device's hardware, such as the camera or GPS. In order to test functionality that uses the device's hardware, you must deploy your application using PhoneGap. See Getting Started with PhoneGap to learn how to deploy an app using PhoneGap.

Let's perform a Remote Test with the mobile application you have built. You can optionally download the full mobile app to use with Remote Testing: Download Completed App.

  1. Click the Remote Test toolbar button. This will open the Remote Test dialog.

  2. If the development server is not running, you may be prompted to turn it on. If asked if you want to turn on the development server, select Yes and click OK.

  3. Next, you will be asked what kind of Preview you would like. The options presented are Fast Preview and Full Preview. Since this is the first time you will be previewing your app using Remote Test, select Full Preview. This ensures all of the files you need to preview the app are published to a local testing directory.

  4. Next, you need to configure how the Remote Test URL will be generated and delivered. You can get the URL for the test page one of 3 ways: Send an Email, Display a QR Code, or Copy URL to the clipboard. The last option, Do nothing, should only be selected if you have made changes to the UX Component and want to test those changes on a device that already has a Remote Test active for the component.

    If your device has a QR Reader, select the Display a QR Code with the URL of the test page option. Otherwise, choose Copy URL to the clipboard.

  5. For the Host Name Settings, select Automatic and click OK.

  6. If you chose to copy the URL to the clipboard, paste the URL into an application such as Notepad. You will need to type this URL manually in the address bar in the browser on your device. Do this now.

    If you chose to display a QR code, the QR code should be on the screen. Open the QR reader on your device and use it to scan the QR code. The web browser on your device will open and navigate to the URL for the Remote Test.

You can now test your app on your remote device.

If you have trouble establishing a Remote Test on your mobile device, verify that the port for the Application Web Server is not being blocked by the firewall or other security software on your computer.
Your development machine and remote device must be on the same network in order to perform a Remote Test. Verify both devices are on the same network.

Appendix

 Appendix A: Configure the Development Server

Live Preview is a tool for testing your Alpha Anywhere application before publishing it to the local webroot or a remote server. Live Preview requires the Alpha Anywhere Development Server in order to run. You need to configure the Development Server to run on your local development machine first, however, before a Live Preview can be performed. See Previewing Components for more information about Live Preview.

The Development Server is also required to do a Remote Test. Remote testing allows you to test your component remotely on another device or computer connected to your local area network. You will perform a Remote Test of the completed mobile app at the end of this tutorial.

  1. On the Web Projects Control Panel, open the Development Server Settings. They can be accessed under the Web menu. Select "Development Server".

  2. The Server Port is the port number that requests to the Alpha Anywhere Server are made. The default value for the Server Port is 80. In a production environment, requests to the Alpha Anywhere Server will be made on port 80. However, in a development environment, port 80 is usually in use by other applications. If you start the development server using port 80, you will see an error message stating port 80 is already in use.

    Change the Server Port to another port number. Pick a high-number port, such as 8080, for your Server Port setting.

    Error message stating that Port 80 is already in use.
    Changing the server port to 8080.
  3. Click Save to save the changes to the Development Server. If the Development Server was already running, click the Restart Server button for the changes to take effect. If the Development Server is not running, click Start Server to start the server.

    Prompt asking to confirm starting the development server.
  4. If this is the first time you have started the development server, you will be asked if you wish to create the Document Root "C:\A5Webroot". This directory is where all files are published for local testing. Click Yes to create the directory.

    Message asking to create the C:\A5Webroot directory.
  5. You will see a confirmation popup that the development server settings were saved. Click OK.

    Popup confirming that settings were saved.
  6. Windows Firewall may display a Windows Security Alert when the Alpha Anywhere application server starts. Click the Allow access button to allow Alpha Anywhere to communicate through the firewall. If access is not given to Alpha Anywhere, you may not be able to use some features, such as Remote Testing and Live Preview, on your system.

    Windows Security Alert from Windows Firewall asking to allow Alpha Anywhere to communicate over the network.
  7. The development server should be running. Check the Server Status. The icon should appear green with the words "Running" next to it. Underneath the server status is the License State. The license state indicates how many simultaneous sessions you can have.

    Click Close to close the Development Server Settings and return to the Web Projects Control Panel.

Now that the development server is configured and running, you can use Live Preview and Remote Test tools for testing Alpha Anywhere applications.

 Appendix B: Helpful Resources

In addition to the Alpha Anywhere documentation system, located at http://www.alphasoftware.com/documentation, there are several other resources you may find useful for finding help or learning new tips and tricks about Alpha Anywhere:

Where You Should Go
Why You Should Visit
Alpha Anywhere Video Library

http://www.alphasoftware.com/videos

Alpha Anywhere has a vast array of videos covering a variety of topics. Find how-tos, overviews, recordings of webinars and classes, and more.

Alpha Users Forums

http://www.alphasoftware.com/alphaforum

The Alpha Forum is a highly active users forum and is an excellent resource for any Alpha Anywhere developer. Collaborate with other Alpha Anywhere developers on problems and show off apps you've built. No question is too simple nor complex.

Alpha Software Blog

http://www.alphasoftware.com/blog/

Learn the latest features and news from Alpha Software. Posts range from what's hot in the market to development tips and announcements of new features in Alpha Anywhere.

See Also