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 Cordova application.
Working Preview
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.
The main benefits of using Working Preview over Live Preview is speed and the ability to detach the preview window, 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:
Open the component.
Click the
Working Preview tab.
While the Working Preview is open, you can interact with your component. The Working Preview window can be reloaded using the F5 key or clicking between the Design and Working Preview tabs to reload the component. The Chrome Debugger can also be opened (using the Open Chrome Debugger link at the bottom of the window) which can be used to diagnose issues with custom client-side workflows.
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.
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.
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.
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.
Open the component.
Click on the
Live Preview tab.
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.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.
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
All videos in this section were produced using the full version of the Alpha Anywhere Development Environment. Community Edition users may encounter screens that don't match their environment due to differences between the two development environments.
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.
This video was recorded with an older version of Alpha Anywhere that let you choose what browser to use for Working Preview: Internet Explorer or Chrome. The Internet Explorer option was removed in newer versions of Alpha Anywhere due to the fact that IE is no longer maintained or updated to keep current with modern HTML, CSS, and JavaScript standards.
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
An embedded version of Google Chrome is used to run 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.
This video was recorded with an older version of Alpha Anywhere that let you choose what browser to use for Working Preview: Internet Explorer or Chrome. The Internet Explorer option was removed in newer versions of Alpha Anywhere due to the fact that IE is no longer maintained or updated to keep current with modern HTML, CSS, and JavaScript standards.
Debugging JavaScript Code
Alpha Anywhere uses an embedded version of the Google Chrome browser to render Live and Working Preview. The embedded Chrome browser includes the Chrome debugger, which you can use to debug your client-side JavaScript code.
In this video, we show how to 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.
This video was recorded with an older version of Alpha Anywhere that let you choose what browser to use for Working Preview: Internet Explorer or Chrome. The Internet Explorer option was removed in newer versions of Alpha Anywhere due to the fact that IE is no longer maintained or updated to keep current with modern HTML, CSS, and JavaScript standards.