Getting Started With Alpha Anywhere - Build Your First Web App

Overview

In this guide, Building Your First Web Application, you will build a web application with data integration. Staring with a blank Alpha Anywhere workspace, your will use the Flying Start Genie to create an application that can perform CRUD (Create, Read, Update, Delete) operations on every table in a database. We will use the Northwind database, which is included in Alpha Anywhere.

The application will be composed of a Tabbed UI component and several Grid components. The Tabbed UI component provides the user interface through which you can open the Grid components used to view and edit data in the Northwind database.

Why Start with the Flying Start Genie?

Tabbed interfaces are often used in web applications. The Tabbed UI Component includes built-in functionality for adding login and logout features and serves as an interface for opening and interacting with data presented using other components, including Grid Components, UX Components, and Reports. In addition, HTML and .a5w pages can also be shown in a Tabbed UI Component.

The Flying Start Genie creates a Tabbed UI with Grid Components for interacting with the tables in your database. Using the Flying Start Genie is a quick way to develop a set of interfaces for managing data in tables and provides you with a set of example components that you modify to meet your specific needs.

First Things First - Set Up Your Workspace

Before you can start building your web application, you must first setup a new Alpha Anywhere workspace. Your web application will need an AlphaDAO connection that talks with the Northwind database.

Lesson 1: Create a new Web Project

To create a new web application with Alpha Anywhere, you must create a new workspace. A workspace contains all the files that your application needs, including files such as Grid and Tabbed UI components, JavaScript libraries, images, HTML pages, .a5w pages, and css style sheets. Let's create a new, blank Alpha Anywhere workspace.

A new, blank 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. Enter "HelloAlpha" in the Workspace name box. Then click OK.

   

   Create a new workspace.

3. If the Startup Control Panel appears, check the box for Open the Web Control Panel when this Workspace is opened. You will be creating a web application. The Web Control Panel is where all the resources for a web (as well as mobile) application are listed. Click OK to finish creating your new workspace.

   

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

   The Startup Control Panel is not shown in Community Edition.

• 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.

  

Now that you have a workspace, you can start building your web application.

A new, blank Alpha Anywhere workspace.

Lesson 2: Build a Database Connection String

The application you will be creating will interact with the Northwind database. The Northwind database is a database included with Alpha Anywhere available in both Microsoft Access and SQLite format.

Alpha Anywhere communicates with databases using AlphaDAO connection strings. 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 to communicate with the Northwind database.

1. From the Web Projects Control Panel in Alpha Anywhere, open the Tools menu and select Alpha DAO Connection strings. This will 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 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. The Demo Connection String dialog can be used to create either a Microsoft Access or SQLite version of the Northwind database. We will create and use the SQLite Northwind database for this tutorial.

   Verify Use SQLite is selected. Then 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. Next, we'll test the connection. Select the AADemo-Northwind connection from the list and click the Edit button.

   

6. Then, click the Test Connection link to test the connection.

   

7. If the connection succeeds, you will see the Notice shown below.

   

   Success! Alpha Anywhere can communicate with the database.

8. Click Close to close the AlphaDAO Connections dialog when you are done.

   

Congratulations! You have created a connection string that can be used to interact with data in the Northwind database. Next, let's create a Publishing Profile.

Lesson 3: Create a Publishing Profile

You will be using the Flying Start Genie to quickly build an interface for viewing and editing tables in the Northwind database. At the end of the Flying Start Genie, you can choose to publish your web application to the local webroot and launch a web browser to view your web application. In order to publish the components generated by the Flying Start Genie locally, you need to Create a Publishing Profile.

The Publishing Profile describes where web application files will be published, either to the local webroot or on a remote server. During the publishing process, the project files for the web application are compiled and copied to the webroot for the Application Server. This section describes how to configure a project to publish an application to localhost on the development machine.

Let's setup a publishing profile that will be used to publish the web project to the local webroot.

1. From the Web Projects Control Panel, open the Web menu and select Project Settings... to open the Web Project Profiles dialog.

   

   Opening Project Settings

2. Select the Local Webroot profile from the list of profiles listed in the left-hand column. This will display the settings for the Local Webroot publishing profile.

   

   Web Project Properties

3. All files published to localhost will be published in the webroot. The webroot is defined in the Alpha Anywhere Development Server settings. Every Alpha Anywhere application you create will be published to the same webroot. To make it easy to disambiguate between projects for testing purposes, you can set the Target Folder property. The Target Folder is a directory inside the webroot. It's considered best practice to name the Target Folder after your project.

   Enter "FlyingStartGenie" for the Target Folder for the Local Webroot profile. Alpha Anywhere will create a directory called "FlyingStartGenie" inside the local webroot when you publish the web application.

   

   Define a Target Folder for the Local Webroot publishing profile

4. Click OK to save the changes you made the Local Webroot publishing profile.

   

   The completed publishing profile

Now that the workspace and Development Server are configured with a connection string and publishing profile, you are ready to start building the web application.

Creating the Web Application

The Flying Start Genie is a tool that can help you to build a web application quickly. The Flying Start Genie generates a set of Grid Components for viewing, editing, and searching selected tables from a database. The generated components are placed in a Tabbed UI Component, which can be published immediately after completing the Flying Start Genie. Using the Flying Start Genie is a great way to start building a web application.

You will use the Flying Start Genie to generate a Tabbed UI interface for viewing and editing tables in the Northwind database.

1. On the Web Projects Control panel, select All Files in the list on the left-hand side of the screen.

   

2. Next, click the New toolbar button.

   

   Click New to open the New File dialog

3. Select Flying Start Genie and click OK.

   

   The New File dialog

4. On the Connect to Database tab, set the connection string. Select SQL Database and click the Define Connection String to open the Connection String dialog.

   

   The Connect to Database page in the Flying Start Genie

   The Native .dbf Tables choice is not available in Alpha Anywhere Community Edition.

5. Select the AADemo-Northwind connection string in the left-hand column.

   

   The Connection String dialog

   If you do not have a named connection string for the Northwind database, see Lesson 2: Build a Database Connection String to create a named Northwind connection string.

6. Click OK to set the connection string. Click Next > to move to the next step in the Flying Start Genie.

   

   The Connection String is configured. The next step is to select tables from the database.

7. The Flying Start Genie creates Grid Components for a set of tables or views that you pick from the selected database. The Select Tables lists the available tables and views you can select. The SQL objects listed can be filtered. By default, all tables and views are displayed. Click Filter available object types to open the Filter Table/View List dialog.

   

   The Select Tables page. By default, all tables and views in the database are listed.

8. In the Filter Table/View List dialog, uncheck the option for "Views". This will remove views from list of options for Select Tables.

   

   Filter Table/View List dialog

9. Add the Categories, Customers, Employees, Order Details, Orders, Products, Shippers, and Suppliers tables. Select each table and click the Select button to select each table in the Northwind database. A Grid Component will be created for each table selected. Click Next >.

   

   Select all the tables available on the Select Tables page

10. The Global Properties page is where you can view and edit the Global Settings for the Flying Start Genie. The Global Settings are the default settings used to generate the Grid Components for the tables you selected on the Select Tables page. Check the Show Global Settings box to expose the Global Settings.

    

    The Global Properties page
    

    The Flying Start Genie Global Properties. These properties affect what options and features will be created for the generated Grid components and Tabbed UI.

11. Change the Grid name prefix in the Grid Part settings to Northwind_. This will prefix the name of the Grid Components generated for the selected tables with "Northwind_".

    

    Changing the Grid name prefix to "Northwind_"

12. Next, set the style used by the Flying Start Genie to GrGray. Click the button for the Style name property to open the Select Style dialog. The Style name defines the style used by all components generated by the Flying Start Genie. The style contains CSS that dictates how controls are rendered in a component.

    

13. Styles used by components in Alpha Anywhere can live in one of three locations: Local, Global or System. Local styles are stored in the web project for a workspace while Global styles are stored at the workspace level, making them available to every project. Both Local and Global styles can be modified. System styles live in the executable folder for Alpha Anywhere and cannot be directly edited. A System style must first be copied locally or globally before it can be customized.

    If you started with a blank workspace, no Local or Global styles will be available. Therefore, we will choose a System style for the Flying Start Genie to use in the generated components.

    Click System tab to display a list of build-in styles in Alpha Anywhere. Select the GrGray style and click OK. Then, click Next >.

    

    Alpha Anywhere contains several style versions. Styles with the "Gr" or "Mob" prefix and the iOS style are version 2 styles. To modify a version 2 style, the style must be copied locally (either as a 'Local' or 'Global' style) and modified directly.

    Version 3 styles, which include the Alpha, AndroidDark, AndroidLight, and iOS7 styles can be modified without copying the style using Style 'tweaks'. This allows you to add modifications to a style while also retaining the ability to receive updates for bug fixes and new controls that require updating a System style. See Style sub-theme and CSS 'tweaks' to learn more.

14. On the Finish page, you will see a summary of the tables for which the Flying Start Genie will create Grid Components. A Tabbed UI Component will also be created. A button to open each Grid Component will be added to the Tabbed UI Component. There is a checkbox above the table list, Publish files to the 'Live Preview' folder and open the Tabbed UI component in your browser?. If this box is checked, all files created by the Flying Start Genie will be published to localhost and the web browser will be launched. Make sure the Publish files to the 'Live Preview' folder and open the Tabbed UI component in your browser? box is checked and click Finish.

    

    The Finish page for the Flying Start Genie

15. You will be asked if you want to save the Flying Start Genie settings. Click Yes to save the settings.

    

    Prompt asking if you would like to save the Flying Start Genie settings to use again in the future

16. Name the Flying Start Genie settings Northwind and click OK.

    

    The Flying Start Genie - Saved Settings dialog

17. A Notice will appear after you save the Flying Start Genie settings. If a large number of tables are selected, generating the Grid and Tabbed UI components can take some time. Click OK.

    

    Notice indicating that generating the Grid components may take a while

18. The Wait dialog shows the Flying Start Genie progress. As each Grid Component is created, the progress bar will be updated. When the Flying Start Genie is done creating the Grid and Tabbed UI Components, the Wait dialog will automatically close. Leave this window alone until the Flying Start Genie finishes creating the components.

    

    Progress dialog for the Flying Start Genie

19. If the Alpha Anywhere Development Server is not running, you will be prompted to start the server. Click Yes to start the Development Server.

    

    Prompt asking if you would like to start the Development Server

20. The Development Server will ask you if you want to start the server. Click Yes.

    

    Confirmation dialog that you would like to start the Development Server
    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.

21. Next, a small menu will appear asking if you would like to perform a Live Preview or Remote Test. Select Live Preview. This will launch your web browser and load the .a5w page containing the Tabbed UI Component that was created by the Flying Start Genie.

    

    When the Flying Start Genie launches the preview, you can choose to do a Live Preview or a Remote Test
    See Remote Testing to learn more about how to do a remote test on another device that is on the same network as your development machine.

Using the Web Application

When the web browser is launched, you will see the Tabbed UI interface generated by the Flying Start Genie.

The generated Tabbed UI interface for the Northwind database using the Flying Start Genie

On the left side of the page is the Tabbed UI Buttons Panel. The buttons panel lists buttons that can be clicked to open components or .a5w pages in a new tab. The button's text corresponds to a table in the Northwind database. Clicking a button will open a Grid component that displays data for the table.

Clicking the customers button opens the Grid component for the customers table

Each Grid component created by the Flying Start Genie has three parts: a Grid listing the records of interest, a Search Part for filtering the records, and a Detail View for viewing and editing records.

Records in the Grid can be sorted by clicking on the heading for a column. The records are displayed 10 records at a time. You can navigate between pages of records or change the number of records displayed per page using the navigation toolbar at the bottom of the Grid.

The Grid part lists the records in the table

The value in the first column of the Grid can be clicked to open the Detail View for a record. The Detail View displays all fields for a record. You can view, edit, and delete records using the Detail View. New records can be added by clicking the New Record link, located next to the navigation toolbar.

Clicking "ANTON" in the Grid opens the Detail View for the ANTON customers record

The Search Part is hidden by default. To view the Search Part, click Click here to search... located above the Grid. Click the title Search, located above the search fields, to hide the Search Part.

The Search Part for the customers Grid component

The available search fields correspond to the columns in the Grid. You can filter the records in the Grid by entering search criteria into the text boxes and clicking the Search button. You can also reset the filter by clicking the Clear Search Criteria link.

Typing "Manager" in the Contact Title field will filter the Grid to display only the records with the word "Manager" in the Contact Title field when the search is applied

Appendix

Appendix A: Configure the Development Server

The Alpha Anywhere Application Development Server enables you to test your web applications on your development machine before deploying them to a web server. The Development Server is required if you want to publish your web application to the local web root. The Development Server is also required if you want to use Alpha Anywhere's Live Preview or Remote Test features to test components in the development environment before publishing to the local webroot or a remote server.

Let's configure the Development Server to run locally on your machine.

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 pop-up that the development server settings were saved. Click OK.

   

   Pop-up 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, 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.

   

Appendix B: Flying Start Genie Videos

To learn more about the Flying Start Genie, watch the videos below:

• Flying Start Genie Part 1
• Flying Start Genie Part 2

Appendix C: Helpful Resources

In addition to the Alpha Anywhere documentation system, located at https://documentation.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

https://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

https://forum.alphasoftware.com

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

https://www.alphasoftware.com/blog/

Learn about 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.