Getting Started With Alpha Anywhere - Build Your First Web App
A step-by-step guide to building your first web application using Alpha Anywhere's Flying Start Genie.
This tutorial was built using the full Alpha Anywhere Development Environment. Community Edition users may encounter screens that don't match their environment due to differences between the two development environments.
We strongly recommend starting with the tutorials in the Alpha Software Learning Center to start learning Alpha Anywhere.
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.
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.
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.
Launch Alpha Anywhere. Under the File menu, select New Workspace... to create a new Alpha Anywhere project.
Enter "HelloAlpha" in the Workspace name box. Then click OK.
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.
The Startup Control Panel is not shown in Community Edition.
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.
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.
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.
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.
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.
You will be shown a Notice confirming the connection string has been created. Click OK to close the Notice.
Next, we'll test the connection. Select the AADemo-Northwind connection from the list and click the Edit button.
Then, click the Test Connection link to test the connection.
If the connection succeeds, you will see the Notice shown below.
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.
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.
From the Web Projects Control Panel, open the Web menu and select Project Settings... to open the Web Project Profiles dialog.
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.
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.
Click OK to save the changes you made the Local Webroot 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.
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.
On the Web Projects Control panel, select All Files in the list on the left-hand side of the screen.
Select Flying Start Genie and click OK.
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 Native .dbf Tables choice is not available in Alpha Anywhere Community Edition.
Select the AADemo-Northwind connection string in the left-hand column.
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.
Click OK to set the connection string. Click Next > to move to the next step in the Flying Start Genie.
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.
In the Filter Table/View List dialog, uncheck the option for "Views". This will remove views from list of options for Select Tables.
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 >.
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.
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_".
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.
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.
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.
You will be asked if you want to save the Flying Start Genie settings. Click Yes to save the settings.
Name the Flying Start Genie settings Northwind and click OK.
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.
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.
If the Alpha Anywhere Development Server is not running, you will be prompted to start the server. Click Yes to start the Development Server.
The Development Server will ask you if you want to start the server. Click Yes.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.
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 TestSee 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.
When the web browser is launched, you will see the Tabbed UI interface generated by 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.
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 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.
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 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.
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.
On the Web Projects Control Panel, open the Development Server Settings. They can be accessed under the Web menu. Select "Development Server".
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.
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.
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.
You will see a confirmation pop-up that the development server settings were saved. Click OK.
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.
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.
To learn more about the Flying Start Genie, watch the videos below:
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
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
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
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.