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 is written for Alpha Anywhere 4.4.3.
In this guide, Building Your First Web Application, you will build a web application with data integration that can be deployed to a website or internal intranet. 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 the Northwind database. 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 that are used to view and edit data in the Northwind database.
In addition, you will learn how to publish web applications to the local webroot.
If you plan on building web applications, using a Tabbed UI Component for your web interface is recommended. 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. You will also need to setup the Development Server and a publishing profile so you can publish and test your web application in the local webroot.
Launch Alpha Anywhere. Under the File menu, select New Workspace... to create a new Alpha Anywhere project.
Create a new directory called "HelloAlpha". This directory is where you will save your project.
Navigate inside the "HelloAlpha" directory. Type "HelloAlpha" into the File name: text box. Click the Save button to create your new workspace.
When 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 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.
You have created a new, blank Alpha Anywhere workspace. You can now start building your web application.
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.
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.
When prompted, 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.
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. 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 Publshing 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.
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.
Select Use a named connection string. Click the Select... button and select the AADemo-Northwind connection string. The Flying Start Genie requires a named connection string. 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 Fyling 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 styles in the left column 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://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:
- 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.