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? 

Working Preview can be used to test your application within the Alpha Anywhere IDE. Working Preview doesn't require the Alpha Anywhere development server to be turned on. Working Preview talks directly to Xbasic using an Alpha Anywhere protocol, not the http protocol.

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

The main benefits of using Working Preview over Live Preview is speed and the ability to detach the preview window when using Chrome -- allowing you preview your component as you make changes.

Viewing a Component in Working Preview 

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

  1. Open the component.

  2. Click the Working Preview tab.

While the Working Preview is open, you can interact with your component. The Woring Preview window can be reloaded using the F5 key or clicking 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 context.session or context.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 or publish your application locally and test it in a web browser.

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 either the Internet Explorer or Google Chrome web browser. When using Chrome, you can access the Chrome Debugger.

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 locally 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. This includes 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 performed, 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 further. 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 F5 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.

Videos

The Working Preview Pane in the Grid Builder

The Working Preview pane in the Grid Builder allows you to run the Grid (just as the Live Preview pane does). Working Preview does not use the Application Server - Instead, it uses a special protocol (not "http") to talk to Alpha Anywhere directly. Debugging your Xbasic event handlers is very easy when you use Working Preview.

"The Working Preview Pane in the Grid Builder" was recorded for Alpha Five Version 11. At the time, only Working Preview could be used to debug Xbasic Scripts. In Alpha Anywhere, Live Preview fully supports debugging Xbasic scripts.

Debugging Server-Side Xbasic in Web Applications - Live Preview

While you have always been able to use "Working Preview" to debug server-side Xbasic, this approach has limitations: session variables and the Security Framework are not enabled in "Working Preview". In this video, we show how to debug Xbasic using Live Preview. Live Preview can be used to debug Xbasic in .A5W pages, server-side event handlers in Components, and Ajax Callbacks.

Using Chrome for Working Preview - Debugging Javascript using the Chrome Debugger

In the Component builder, you can choose whether to use Chrome rather than Internet Explorer to run the Working Preview.

Using Chrome has several benefits, including the ability to detach the Working Preview window. Detaching Working Preview allows you to run Working Preview while you are actively designing your component.

You can also access the Chrome Debugger to debug your JavaScript or inspect elements in the component when you use Chrome for Working Preview.

In this video, we demonstrate how to use Chrome for Working Preview.

Debugging Javascript Code

Alpha Anywhere has an embedded version of Chrome, which means you can use the Chrome debugger to debug your client-side Javascript code.

In this video we show how you can step through client-side Javascript code in the Chrome debugger and how to use the Console window to watch the value in different variables in your JavaScript code.

2019-06-07