Previewing Components

Description

A guide to testing an Alpha Anywhere mobile or web application using Working Preview and Live Preview.

Discussion

Alpha Anywhere's development environment includes tools for previewing a component: Working Preview and Live Preview. Working and Live Preview allow you to test a component before publishing it locally, to a web server, or deployed as a PhoneGap application.

 What is Working Preview?

The Working Preview is like the Live Preview in that it shows an actual working version of your component. Unlike Live Preview, Working Preview doesn't require the Alpha Anywhere application server to be turned on. Instead, the Working Preview talks directly to Xbasic using an Alpha Anywhere protocol, not the http protocol.

The Working Preview has two main benefits, speed and the ability to easily debug into your Xbasic event handlers. If you want an example of how you might go about doing this see the example below or watch this "Working Preview" video.

You can optionally change Working Preview to use Google Chrome. When using Google Chrome, the Working Preview window can be detached from the component builder, enabling you to preview changes live. You also gain access to the Chrome debugger, which is a useful tool for diagnosing client-side javascript and exploring the HTML structure of your components.

 Viewing a Component in Working Preview

To view a component in Working Preview, follow the steps below:

  1. Open the component.

  2. Click on the Working Preview tab.

While the Working Preview is open, you can interact with your component. You can hit the F5 key or click between the Design and Working Preview tabs to reload the component.

 Working Preview Limitations

Working Preview has several limitations. If your component contains Javascript events that open an Alpha Anywhere report or .a5w page in a pop-up window or DIV on the page, you cannot test these actions in Working Preview. Working Preview also does not have access to the Application Server objects, such as session or request. If you need to test features that require the Application Server, create reports, or display .a5w pages, you need to perform a Live Preview.

 What is Live Preview?

Live Preview is similar to Working Preview in that allows you to preview and test a component in Alpha Anywhere. While Working Preview allows you to test many aspects of a Component, Working Preview lacks the ability to open any reports or .a5w pages. You also cannot test any code that references Xbasic server variables, including the session and request objects.

Live Preview renders the component using the Alpha Anywhere Application Development Server. This gives you access to Reports as well as the ability to open external .a5w pages and test Xbasic code that uses server variables. You can also do limited testing of controls with security restrictions set using Security Groups.

The Live Preview is rendered using the Internet Explorer web browser. You are not limited to using Internet Explorer to perform a Live Preview. You can optionally launch the component in a browser of your choice using the dropdown menu in the toolbar or by clicking one of the browsers listed at the bottom of Live Preview.

While you do have access to some server objects (session, request), Live Preview lacks the context of a full web browser. Ultimately, you will need to publish your project to the local webroot or a remote server to fully test your web application.

 Full Preview versus Fast Preview

When you Live Preview a Component, you will be asked what type of Live Preview you wish to perform: Full Preview or Fast Preview.

The Component is published to a special directory called "Live Preview" in the webroot when you perform a Live Preview. The "Live Preview" directory includes not only the component, but all resources required to render the component, including external CSS and Javascript files, images, web fonts, other components referenced by the Component, and other resources required by the Component. In order for these files to be published, however, a Full Preview is required. If there are a large number of resources, it can take a few moments for the Full Preview to publish the files needed to perform a Live Preview of the Component.

Once all resources the Component requires have been initially published, the publishing step can be skipped using Fast Preview. When a Fast Preview is perfomed, only the Component is published to the "Live Preview" directory.

If you make changes to the Component's referenced resources, a Full Preview is required so the new resources will be published to the "Live Preview" directory.

The default webroot location is C:/A5Webroot. The webroot can be changed in the Development Server Settings. From the Web Projects Control Panel, click on the Web menu and select Development Server. The Document Root property on the General tab defines the webroot.

 Viewing a Component in Live Preview

If your component has security group restrictions for controls, pop-up .a5w windows, or executes javascript from external files, use Live Preview to preview the component.

  1. Open the component.

  2. Click on the Live Preview tab.

  3. If the Development Server is not running, you will be prompted to turn it on. The Development Server must be running to use Live Preview. If you are prompted to turn on the Development Server, you will have three options: "Yes", "No - Cancel Preview", and "No - Continue with Preview - I already have a server running in another instance". If you have multiple instances of Alpha Anywhere running, you can perform a Live Preview without starting the Development Server if the server was already started by another Alpha Anywhere instance.

    Select Yes and click OK to start the Development Server.

    If you have never configured the Development Server, you may receive an error message stating "Port 80 is already in use." Follow the instructions outlined in Configuring the Alpha Anywhere Development Server to configure the Development Server on your system before proceeding futher. See also Port is Already in Use Error when Starting Server for more information about resolving Port in use issues.
  4. You will be asked if you would like to perform a Fast Preview or Full Preview. Click the Full Preview button.

While in the Live Preview tab, you can interact with the component. If you need to reload the component, you can hit the F5 key or click between the Design and Live Preview tabs. If you wish to launch the Live Preview in a browser, click one of the browser buttons listed at the bottom of the Live Preview tab. You can also use the dropdown menu in the component builder toolbar to launch Live Preview in a browser.

Clicking the browser button at the bottom of Live Preview will open the Component in that browser
Select a browser from the menu to launch Live Preview. Note, if the browser listed is not installed on your system, you will see an error message, "Browser not found."

 Live Preview Limitations

There are some limitations to using Live Preview. As is the case with Working Preview, Live Preview also lacks the full context of a web browser. To overcome the limitations with testing in Live Preview, you can publish your application to the local webroot. Applications published to the local webroot, or a remote server, can be tested using a web browser and the Alpha Anywhere Application server. To learn how to publish an application to the local webroot, check out the How to Publish an Alpha Anywhere Application Getting Started tutorial.