Alpha Anywhere 2.0 New Features Video Library

PhoneGap Build Integration

Support for the PhoneGap Build service is now tightly integrated into Alpha Anywhere! PhoneGap is an open source product that allows you to build native applications for mobile devices. With the Alpha Anywhere mobile app development platform + PhoneGap integration, you can easily create a Hybrid (HTML5/Native) application that has access to all of the native features of the phone that are exposed by PhoneGap.

Using Native SQL for List Data

When you create a List control that is based on SQL data, you must use Alpha Anywhere 'portable' SQL. If you want to base you List on 'native' SQL (which includes stored procedures), you must define a 'custom' data source for the List and then in the
Xbasic function that returns the data, you can use your native SQL.

Icons to Indicate Selections in a Multi-Select List Control

The Button List control (and the Checkbox control) can show an icon on selected items. The List control can also be configured to allow multiple selections, but it does not show an icon on the selected rows to indicate the row has been selected (it shows selected rows using a different row color). In this video we show how you can easily display an icon on the selected rows using a custom CSS class.

Using the List Scroller to Move Through the Rows in a List

When working with virtualized Lists, it's possible to have Lists with a very large number of rows. This makes navigating by scrolling on the List body cumbersome. To facilitate navigating large Lists, a 'List scroller' can now be added. The scroller shows a message while you are dragging with which row in the List will be shown if you were to stop dragging. Using the scroller, you can very quickly navigate to any row in the List. The List Scroller is not limited to virtualized Lists. It can also be used with non-virtualized Lists. In this video we demonstrate the List Scroller on a List that contains 100,000 rows of data.

Watch the video →

Emailing a Report

A common pattern in Alpha Anywhere is to place a button on a component to print a Report and display the Report in a window, div or TabbedUI pane. However, instead of displaying the Report, you might want to send it as an email. The Action JavaScript action to Print a Report has an option to call an Xbasic function when the Report has printed. In this video we show how you can use this option to e-mail the report using the Mandrill e-mail service.

Dynamically Populating a List with Data from a SQL Database

Populating a List dynamically with data from a SQL database is a very common pattern in application development. In this video we show how this is easily done.

Using the Chrome Embeddable Browser in Xdialog

Xdialog allows users who are building desktop applications to create powerful 'screens' to prompt for and display information to users. You can now embed Google's Chrome browser directly into your Xdialogs. This means that you can use the full power of HTML, CSS3 and JavaScript to create amazing looking Xdialog screens. When you embed the Chrome control in an Xdialog you can easily respond to events in the HTML with either JavaScript or Xbasic code. You can also easily send events from Xbasic to the HTML that is displayed in the embedded Chrome control. If you have used Xdialog in your desktop applications in the past, this new feature will open up many exiting possibilities.

Client-Side Templating - Merge Data into Templates

Alpha Anywhere now includes a very powerful client-side template engine that allows you to merge JavaScript data into templates to produce HTML output that can then be displayed on your component. Client-side templating has become increasingly popular among developers and we are very happy to announce that client-side templating can now be accomplished in Alpha Anywhere.

Client-side Formatting for Numeric Data and Templates

Now, with Alpha Anywhere's Number Format Genie its easy to specify sophisticated numeric formatting for data displayed on the screen, such as currency, part numbers, and more.

Client-side Grouping and List Navigator

Now, group breaks can be inserted into the List control as either server- or client-side group breaks. The advantage of client-side group breaks is that they can be dynamically applied to the List datamaking it easy to switch from grouping by 'Lastname' to 'City', etc. Plus, you can also display summary values in the group headers and footer. For lists with group breaks, you can also display a List Navigator, allowing the user to easily scroll a long List. Check out an overview of both and then go into depth on setting up client-side grouping using Action JavaScript.

Internationalization

Alpha Anywhere 2.0 features enhancements to automate support of internationalized versions of applications through the Internationalization Helper.

Cross-Domain Ajax Callbacks

A cross-domain Ajax callback is a callback that takes places to a server that is in a different domain than the domain from which the component was loaded. Now Alpha Anywhere features support for cross-domain Ajax callbacks, facilitating the retrieval of data from third-party services.

Making a TextArea Fill a PanelCard

Controls such as Lists and Maps have a 'Fill container' property that allow you to automatically cause the List or Map to fill the Panel Card in which the control is contained. Other controls, such as Text Areas, do not have this property. In this video we show how you can configure the UX so that the Text Area control automatically fills the Panel Card in which it is contained.

Using 3rd Party Icon Font Libraries (CSS Icons)

There are many 3rd party Icon Font (CSS Icons) libraries that can be used with Alpha Anywhere. In this video we show how you can go to a source of icon fonts and download a font library that can then be installed into Alpha Anywhere.

Using CSS Icons from the Font-Awesome Icon Library

The Font-Awesome CSS Icon library is bundled with Alpha Anywhere and can be used in the UX, Grid and TabbedUI components.
In this video we show how to use the Font-Awesome font library and CSS icons in general.

Split Buttons

A split button is displayed as a regular button and a smaller button with a dropdown icon. You can have different event handlers for the dropdown button portion of the button and the regular portion of the button. When space is constrained, you can use a single split button to perform many tasks, while still giving the user single click access to the last selected task.

Absolute Layout Container - Save as PDF

The Absolute Layout container in a UX allows you to place controls at absolute locations, typically using a bitmap image of a form as a background. You can use an action in Action JavaScript to save the contents of the Absolute Layout container as PDF file and then download the PDF to the client, or call some Xbasic function to process the PDF file. This video shows how this is done using Action JavaScript.

Transform List Data Type

By default, the data type for each field in a List is a JavaScript string. In some cases you might want the data type for a column to be a JavaScript date or number object. A benefit of transforming dates into true Javascript date objects is that you can then use date formatting in the template for the List.

Pre-Defined 'Split-View' Quick Start Templates

A common pattern in mobile apps is the 'split-view' which shows a menu on the left and a work area on the right.
On a phone, the menu is hidden and only shown on demand, but on a tablet, the menu is always shown. Now, with Alpha Anywhere, you can simply select a pre-defined split-view quick start template to automatically generate the outline—complete with CSS icons—of a stunning menu for your mobile apps!

Opening a UX and Passing Data from a Button an a Grid

You can open a UX component from a button on a Grid using several different actions in Action JavaScript. For example, there are built-in actions to edit the data in the current row of a Grid using a UX. But sometimes you want to simply open a UX and pass information from the current row in the Grid to the UX. See how this is easily done by defining arguments in the UX component and then automatically setting the value of these arguments when the UX is opened.

Using Google Charts as an Alternative to the Built-in Chart Controls

Easily add client-side charts to your applications with Alpha Anywhere and the Google Chart API.

List Virtualization

When you are working with List controls that contain a large number of rows (say several thousand rows), it is advisable to turn on the List's 'virtualization' feature. With virtualization turned on, the List will only render a small number of rows at a time (the visible rows and some additional rows above and below the visible rows). Turning on List Virtualization will dramatically reduce both the time taken to load the List and the amount of memory consumed by the List.

Dragging Rows from a Source List to a Target List

A common design pattern in applications is to allows users to drag items from one List to another. The Alpha Anywhere JavaScript library contains powerful drag and drop functions that allow you to easily enable this type of functionality. In the first video, we show how you can create a UX with two List controls and drag rows from one List to the other. In the second video, we explain the JavaScript code that enables this functionality:

Display Detail Info (Field/Value Pairs) for a Record

A common pattern in mobile applications is to display a List of records and then when the user clicks on a row in the List to display a list of fields and corresponding values for the row the user clicked on, with one field/value pair per line. In this video we show how a second List can be used to display the field/value pairs and how this List can be dynamically populated when the user clicks on a row in the main List of records

Lookup Columns

The List control allows you to define 'lookup columns' where the data in the column is 'looked up' either by calling a JavaScript function (that you define), or by looking up the value in some other List. A typical use case for this is a List that shows Order Details. Each row in the list has a 'productId' field. You would like to display the product name for each product ID.