Alpha Five v11 Video Library

YouTube Channel

Alpha Software has hundreds of videos showing you the features and how-to instructions for Alpha Five version 11. All of our videos can be found on our YouTube channel.

For your convenience, we've cataloged all of our videos below. Clicking on a category will take you to relavent video collection in YouTube.

 
 

Please note: There can be a delay between the time videos are produced and the time they are posted to the YouTube Channel. For the most up-to-date list, please see this page. You'll find v10 videos there as well.

Calendar Component

Many applications, especially those for service based businesses can greatly benefit from a scheduling tool to graphically display and select dates on the calendar. This could be used for booking appointments online for any service or resource, synchronizing employee schedules and more. Scheduling functionality in business applications is a heavily requested enhancement to Alpha Five.

With the new Calendar Component, building sophisticated scheduling solutions with Alpha Five is literally a task reduced to five or ten minutes from the weeks or even months that it would take with other tools

Cal1

Overview of the Calendar  Component

The Calendar component allows you to display 'events' or 'appointments' in a Calendar view. This video gives a quick overview of the features of the Calendar component. In a subsequent video we show how to set up the Calendar component.

Cal2

Setting up the Calendar Component

This video shows the steps to get started to set up and use a Calendar component in your application.

Cal3

Dynamically Creating New Records in the Calendars Table

When the Calendar Component is opened, it can be configured to only display the events for a particular calendar.

For example, you might have an 'Employees' table and you might have a Grid which shows the records in the Employees table. A button in each row of the Grid opens the Calendar Component showing the appointments for that particular Employee. However, if there is no matching record in the Calendar table for the Employee, it would be convenient to automatically create a new record in the Calendars table before opening the Calendar. This video shows how this is easily done.

Custom Components

V11 introduces Custom and User-defined Components that allow anyone with HTML, JavaScript, and Xbasic skills to write a component within a pre-defined framework that can easily integrate with Grids, Tabbed UIs, and other Alpha Five Components.

CC1

Custom Component

The Custom Component is for developers who want to generate the component using their own Xbasic code. These videos give a basic overview of the Custom Component. They explain what a custom component is, and show how the component can define arguments whose value can be passed in from the calling page or component.

The videos shows how a custom component can be called from a Grid component and how the values of the arguments defined in the custom component can be passed in from data in the current Grid row.

Next the videos demonstrate a more realistic example where the Custom Component is used to define a pie chart displaying the breakdown of items on an order.

Dialog Component

Alpha Five v11 includes an extremely powerful new high-performance Dialog Component that supports repeating sections, transactions, rollback and optional Genie-assisted data binding. The Dialog component is ideal for building questionnaires and forms. The forms can be laid out in any way you want.

D1

Dialog Component - Overview

Overview of the Dialog Component - This video gives an overview of the Dialog component and contrasts it with the Grid Component

D2

Dialog Component - Creating

Creating a new Dialog - This video shows how to create a new Dialog component. You can create controls one by one, or use one of several shortcut methods. You can also insert controls from a 'Control Library', and you can add your own controls to the Control Library.

D3

Dialog Component - Editing in Tree and Wyswyig Mode - Setting Properties in Multiple Controls at Once

This video shows how you can edit the Dialog component properties in either Tree View or Wyswyig Mode. You can change multiple properties at once by pasting a property value from one control to multiple controls and you can also edit in the Xbasic view.

D4

Dialog Component - Complex Layout Using Frames, Containers, Tabs and Accordions

This video shows how you use different types of containers - simple containers, frames, tabs and accordions to control the layout of a Dialog. By wrapping controls in containers and then turning on/off the breaks between containers, you can achieve complex Dialog layouts.

D5

Dialog Component - Copying Controls from one Component to Another

This video shows how you can copy controls from one Dialog component to another.

D6

Dialog Component - Repeating Sections

The Dialog Component can be used for 'Master-Detail' style forms. This is done by putting a 'Repeating Section' on the Dialog. Any controls that are inside the 'Repeating Section' will repeat as many times as you specify. At runtime, when the user is filling in the form, they can click a button to add a new row to the Repeating Section if they need more rows.

This video shows how you can create a simple invoice form with a Repeating Section. The video then shows how you can define client-side calculated fields to show the extended total (Price * Quantity) for each row as data is entered and also client-side summary fields that sum the extended total for all of the rows in the Repeating Section.

D7

Dialog Component - Submitting Data

This video shows how you can put a button on the Dialog to submit the data in the Dialog component to the server and then how the AfterDialogValidate event is fired where your Xbasic code can handle the event.

Typically, your Xbasic event handler would save the submitted data to a table. You are free to write your own code to perform this task, or you can use Server-Side Action Scripting to write the code for you (as shown in a subsequent video)

D8

Dialog Component - Validating Data

The Dialog component has an extremely rich set of features for validating data in the dialog. Validation rules can be defined declaratively, or using code (either Javascript for client-side, or Xbasic for server-side). Validation rules are evaluated on the client where possible (thus eliminating the need for an Ajax callback). Validation rules can be set to fire when the dialog is submitted, or immediately, when the user tabs out of a field.

These videos discuss the various validation options in the Dialog component. Validating data in a Repeating Section

In this video we show how the visual effects used in the sample dialogs shown in the above videos were created.

D9

Dialog Component - Genie Style

When building Dialogs that have a large number of fields, it is common to present the controls to the user in 'genie' or 'wizard' style. In this style 'page 1' of the Dialog is shown, with a next button at the bottom of the Dialog. When the user has entered data into the controls on page 1, pressing Next moves to page 2, and so on.

Typically, the user cannot move to the next page until the data on the current page has been validated.This video shows how easy it is to create 'Genie' style Dialog components.

D10

Dialog Component - Data Binding - Creating Tables to Match the Dialog Layout

When you create a Dialog component, you will often want to store the data the the user submits in a table. In some cases, when you design the Dialog, you will already have an existing table. However, there may be cases where you design the Dialog first, and only then create the table into which the data will be stored.

These videos show how you can design a Dialog component, and then automatically create one or more tables to match the structure of your Dialog component. Entering data into the newly created table

D11

Dialog Component - Data Binding - Binding to Existing Tables

After you create a Dialog component, you may want to 'bind' the controls in the Dialog to one or more existing tables so that you can use Server-side Action Scripting to automatically enter data into tables.

(You can't use Server-side Action Scripting until you have first 'bound' the Dialog to tables).In this video we show how you can bind the controls in a Dialog to a table. Once the controls have been bound, we then show how you can use Server-side Action Scripting to enter or edit records in the table.

D12

Dialog Component - Creating Multiple Tables to match the Structure of a Dialog Component that has one or more Repeating Section

These next set of videos show how, if the Dialog has Repeating Sections, when you can create both the Master and Detail tables automatically. Alpha Five analyzes the structure of your Dialog and lets you create multiple tables, linked in either one-to-one, or one-to-many relationships. Next, the videos also show how Server Side action scripting can be used to insert, update and delete records in the tables. All of the SQL statements can be wrapped in a single transaction.

D13

Dialog Component - Repeating Sections - Scrollable Containers

If you have a Repeating Section in a Dialog, you can put buttons below the Repeating Section to add or remove rows from the Repeating Section. When you add or remove rows, all of the controls on the Dialog that are below the Repeating Section will move up and down as the size of the Repeating Section changes. You might prefer to put the Repeating Section in a fixed size, scrollable container. When you scroll this container however, you want the titles for each column in the Repeating Section to remain fixed.

This video shows how this is easily done.

D14

Dialog Component - Eye candy - Adding free-form text to the Dialog

In this video we show how some nice visual effects can be added to a Dialog component.

D15

Dialog Component - Grid Component - Calling a Dialog Component from a Grid and then Passing Information from the Dialog to

the Grid

flash video

YouTube

D16

Dialog Component - Setting Multiple Properties at Once Using Xbasic

This video shows how you can use an Xbasic function when you are setting properties in multiple controls at once. For example, assume that you have built a component with many controls and you would like to wrap all of the control labels in language tags (<a5:r> and </a5:r>), so that you can internationalize your component.

In the video we show how this is easily done. Note: The feature shown here in the Dialog also applies to the Grid component.

D17

Adding a Row Number to Each Row in a Repeating Section

This video shows how you can add a row number to each row in a Dialog Repeating Section.

D18

Button Styling Options

This video shows you how you can make the buttons on the dialog look more interesting by including images on the buttons. (Requires build 3811 or above)

D19

Field Level Validation in the DialogValidate Event

By default, when you execute validation code in the DialogValidate event and you want to display a validation error to the user, the error text is displayed in a message area above the Dialog. This is different than Field Level validation errors, which are displayed next to the field in error. Field Level validation rules are defined at the Control level in the Dialog Builder.

Howerver, in some cases it is more convenient to put all of your validation logic in the Dialog Validate event, but still be able to show errors next to the fields in error, rather than in the message area at the top of the dialog. This video shows how you can defined field level validation in the DialogValidate event.

Desktop Application Features

While many of the new features in Alpha Five are aimed at mobile and Internet based computing, quite a few new features have been added to support new desktop applications.

DT1

Layout Editors - Control Libraries

When you are editing a Layout (e.g. Form, Report, etc.), you can select one or more controls and then place them in a 'Control Library' on the Toolbox. Controls in the Control Library can be placed on any Layout.

This video shows how you can add controls to the Control Library, and then use controls that you previously added to the Control Library.

DT2

Layout Editors - Embedded Charts

Alpha Five V11 introduces a powerful charting engine. Charts can be used in Form, Reports, Labels, Letters, Xdialogs, and Web Components.

This video shows how a chart can be embedded into a form.

DT3

Charts - Xdialog Examples

The charting features in V11 can be used in Xdialogs. The following video show how you can embed custom charts in your own Xdialogs.

The Xdialogs shown in the above video are all in the sample 'Learning Xdialog' database that ships with V11. Since there are many example scripts in 'Learning Xdialog' that would be useful to have quick access to, regardless of which database you are working in, we show in this video how you can easily create a Code Library from the examples in 'Learning Xdialog'.

DT4

Forms - Embedded Charts - Charting Summary Data

The charts that you embed on a Form or Report can plot summary data. The charts can either be defined declaratively, or you can use custom Xbasic.

These videos show how a chart that summarizes attendees at a seminar by state can be defined using the built-in Chart Genie, or using Xbasic.The sample database used in the videos can be be downloaded.

Google Maps Component

Alpha Five v11 does the "heavy lifting" for you when it comes to mapping, geography, and graphical information systems. The new Google Map component allows your desktop, web, and mobile applications to link to Google Map web services. You can perform geographic searches, display points on a map, and much more. This makes it easy, for example, to add a store locator to your application, so that people can find the nearest points of interest based on their current location.

GM1

Google Maps/Alternate Views-Introduction

Grids have a property called 'Alternate Views'. An Alternate View is simply another way of displaying the data in the Grid. You can define custom Alternate View (using Xbasic), or you can use one of the built-in Alternate Views. The most commonly used built-in Alternate View is a Google Map. This is used to plot the data displayed in the Grid as markers on a Google Map. The following videos show how you can use the Google Map Alternate View in a Grid. This video show:1) Defining an Alternate View with a Google Map and showing a marker on the map for each record in the Grid.
2) Defining the bubble help for each marker on the Grid so that it shows data from the corresponding record in the Grid.

GM2

Google Maps/Alternate View-Customizing the Marker Title and Info Box

This video continues from video GM1. The video shows how you can customize the 'info box' for each marker on the map. The 'info box' is a small window that pops up when the user clicks on a marker.

The video shows how you can put any HTML that you want in the info box and how the html can include placeholders to include data from the corresponding row in the Grid. The HTML can also include Javascript commands. In the video we show how you can insert the Javascript to open the corresponding Detail View part for the current record.

GM3

Google Maps/Alternate View-Dynamic Marker Icons-Alternate View Layout Options

This video continues from GM2. The video shows how the icon for each marker that is placed on the map can be dynamically specified. So, for example, if record 1 in the Grid was for a customer with a low credit rating, the corresponding icon on the map might be red. If record 2 was for a customer with a high credit rating, the corresponding icon on the map might be green.

In the video we have a Grid based on our sample Airports table and we show how a different map icon is used depending on the elevation of each airport shown in the Grid. The video also discusses the different ways in which the Alternate Views can be shown on the Grid. Alternate Views can be shown in Tabs, or they can be shown on the main page, alongside the main Grid.

GM4

Google Maps/Alternate View-More Alternate View Layout Options

This video continues from GM3. The video shows more options for how the Alternate Views and the main Grid can be displayed on the page. It shows how you can display the Alternate Views in accordions, tabs or on the main page.

The video shows how you can even suppress the display of the main Grid part and only show the Alternate view. In the video, we show the map, with a marker for each row in the Grid. The Grid itself is hidden. However, when the user clicks on a marker, the Detail View for the current row in the (hidden) Grid is shown.

GM5

Google Maps/Alternate Views-Dynamic Marker Circles

When you place a marker on a map you have control over the marker icon, bubble help and info box text. You can also draw a circle around the marker and you can control the color of the circle and the shading of the interior of the circle. The circle and its color can be used to convey information about the corresponding record in the Grid.

The ability to draw a circle around the marker could be used to indicate the service area of a branch location. Or it might be used to represent the relative price of a house in a real estate application. For example,for more expensive houses you might draw a larger circle around the marker on the map. In this video, which shows a Grid based on the sample Airports database, we draw a circle around each marker on the map. The radius of the circle is proportional to the airport's elevation.

GM6

Google Maps/Alternate Views-Dynamic Images and Image Sequences

When you place a marker on a Google Map, you have full control over the icon that is used. You can specify an expression that evaluates to the icon name to use for the marker. Or, you can specify an Xbasic function that will get called for each row in the Grid. The function can compute the marker icon based on the data in the current Grid row.

You can also use built in image sequences. An image sequence is a set of numbered icons. In this video we show how you can use an image sequence in the map and also use the same sequence in the Grid itself. This makes it very easy for the user to see a record in the Grid and immediately locate the corresponding marker on the map.

GM7

Google Maps - Layers

When you place a marker on a Google Map you can assign the marker a logical 'layer' name. For example the layer name for a marker could be 'High Risk', or 'Medium Risk', etc. Then using the automation features on the map that Alpha exposes, you can hide and show different layers on the map. For example, you might put a checkbox control on your Grid with these entries: High risk, Medium risk and Low risk. Then when the user checked or unchecked an entry, your Javascript automation code could hide or show the markers in the corresponding map layer.

In this video we show how we have defined a map with 3 logical layers - 'layer1', 'layer2' and 'layer3'. When each marker is placed on the map is is assigned to one of these layers. In the example, the rule for assigning a marker to a particular layer is contrived - if the marker is for a record in the first 3 rows of the Grid, it is in 'level1', and so on. Obviously, in a real application you would have more realistic rules for assigning markers to different map layers. Then, we put a checkbox control in a free-form region of the grid to control which layers as shown. We also show how the markers in a particular layer can be animated to draw attention to them.

GM8

Google Maps - Animating Markers

When markers are placed on a Google Map, you can specify that the markers should be animated as they are placed on the map. Two animation modes are supported: Drop and Bounce. The video shows how to use the animation effects.

You can also use the Action Javascript to animate a marker after it has been placed on a map to draw attention to it. For example, you could click on a Grid row and cause the corresponding marker on the map to bounce.

GM9

Google Maps/Alternate Views-Treating the Map as a Blank Canvas so that the Markers on the Map can be Added Programmatically

In the previous videos, the markers on the map have been added automatically. For each record in the Grid, a corresponding marker has been placed on the Map. However, you can specify that there should be no markers on the map initially. You would do this if you want to add the marker to the map with your own code.

This video shows how you can turn off the automatic placement of markers on the map and then use Action Javascript to add markers to the map programmatically.

The video shows a Grid with a list of states. Each row in the Grid has a button to populate the map with the 10 airports in the state with the highest elevation. When you click a button in the Grid row, an Ajax callback is made to place the markers on the map.

GM10

Search Part - Geography Searches - Google Maps

Certain SQL databases (such as SQL Server, Oracle, DB2, MySQL, Postgres) support a special data type called 'Location'. If a table has a location field (which contains information about a record's position - latitude and longitude), then you can perform 'geography' searches. For example, you can find all records that are within x miles of a certain location, or all records that fall within an area marked by the latitude and longitude of 3 or more points.

You can put a Google Map in the Search part of the Grid to make specifying geography searches easy. This video shows how you can put a Google Map into the Search Part and how Alpha Five automatically generates the Portable SQL to query the database. The video demonstrates both 'location' and 'radius' searches.

GM11

Search Part - Geography Searches - Google Maps - Show Search Results on Screen

This video continues from GM10. When you have a Google Map in the Search Part of a Grid you can use the Map to mark a search polygon or radius, as shown in the previous video. However, you can also display markers on the map to show the location of the records found by the search.

In this video we show how the search results can be plotted on the map. A marker is placed on the map for each record found by the search. The video shows how you can customize the bubble help, title and info box for each marker that is placed on the map.The video also shows how the click action for each marker can be customized - you can use a built-in action, such as 'open Detail View', or you can define your own Javascript.

GM12

Search Part - Radius Search - Sorting result by distance from the map center point.

When you do a radius search (i.e. find all records with a certain distance of a map center point), it can be useful to order the records by distance from the map center point. This video shows how this is easily done.

For more information on how the Grid in the video was configured, click

GM13

How to use a Grid to implement a typical 'Store Finder' application.

A typical pattern often seen in web applications is a 'store finder' The user enters his location and clicks a button and a list of store branches that are closest to his location is retrieved. In this video we show how this type of application is easily built using a Grid component with a Search Part.

(Note: To get a complete summary of how the Grid was configured for this example, scroll to the bottom of this page).

GM14

Shows how to Update the Latitude and Longitude in the current Grid row when a Marker in the Map is dragged to a new Location.

In this video we show how the latitude and longitude value in the current Grid row can be updated when the user drags the marker to a new position on the map.

GM15

Updating a Geography data type field automatically when a Longitude or Latitude Field is Changed

In order to perform a Geography search on a table, the table must have a special 'Geography' field (supported in certain SQL databases, such as SQL Server, MySQL, Oracle, Postgress, DB2, etc.). The Geography field is a special type of field that contains binary data, so you can't update its value as easily in your SQL INSERT or UPDATE statement as you can for regular fields. However, it is highly desirable to automatically update the value in the Geography fields in a record whenever a longitude or latitude value is changed.

This video shows how this is easily accomplished in a Grid component. Alpha Five automatically generates the appropriate Portable SQL statement to update the Geography field whenever there are changes to the longitude or latitude field on which the Geography field is based.

Image Gallery Component

The image gallery component is a beautiful, and intuitive interface for displaying pictures in desktop, web and mobile applications. On mobile applications, orientation changes can be detected (and adjusted for) and touch events are supported. The component is smart enough to detect the capabilities of each device, and depreciate features when needed.

IG1

Quick Start

The Image Gallery is a powerful component for displaying images in a Web or Mobile application.

This video shows how easy it is to get started with the Image Gallery Component.

IG2

Overview of Image Gallery

Overview of the Image Gallery Component

IG3

Using the Image Gallery in a Tabbed UI Component

IG4

Calling the Image Gallery from a button in a Grid

Mobile Features

Alpha Five uses HTML5 to extend the applications you build to any device, including iOS and Android devices.

M1

Client-side Show/Hide Expressions can use Animation

The Grid and Dialog component both allow you to define client-side show/hide expressions to dynamically hide and show controls on a component. Now, you can associate an animation effect with each show/hide expression you define. This video shows how you can do this.

M2

Group Headings in Grid

When a Grid is rendered it can be useful to break the Grid up into logical sections by inserting Group Breaks into the Grid. These videos show how this can be done for both tabular and snaking columnar Grids.

M3

Summary Values in Group Headers and Footers

You can include summary values in Group Headers and Footers.

(Contrary to what the video says, this feature is supported on both SQL and .dbf tables).

M4

Collapsing and showing rows in each Group

When you turn on Grouping in a Grid, it can be useful to collapse and show the rows in each Group. This video shows how this is easily done.

M5

Scrollable Grids and Fixed Column Widths

If a Grid is set to display a large number of records, it can take up a large amount of vertical space on your page. You might prefer to specify a fixed amount of vertical space and then have the Grid scroll within the specified window size, keeping column titles and summary values fixed in place when the Grid is scrolled.

This video shows how this is easily done:

M6

Setting Multiple Properties at Once Using Xbasic

This video shows how you can use an Xbasic function when you are setting properties in multiple controls at once. For example, assume that you have built a component with many controls and you would like to wrap all of the control labels in language tags (<a5:r> and </a5:r>), so that you can internationalize your component.

Note: This feature applies to both the Grid and the Dialog component. The video shows the feature in the Dialog component, but the feature operates in exactly the same way in the Grid.

M7

Project Styles - Set the style of every component in one place to make it easy to change the style of every component at once.

This video shows how instead of hard coding the style used by each component in your project at Design Time, you can now set the style to <ProjectStyle>. The actual style to use is set in the Web's Project Properties dialog.

M8

Default Value for New Records when doing data entry in the Grid Part.

The Grid allows you to enter new records directly in the Grid part, or in the Detail View part. The Grid builder allows you to specify default values for fields in new records. This can be done by either specifying the field's 'Initial Value' property, or by specifying code in the 'onInitialValueCalculate' event.

In the case where data entry is done in the Grid Part (as opposed to the Detail View), the issue with the 'onInitialValueCalculate' event (which is a server-side event), is that it is only called once, when the Grid is initially rendered. So, if you enter a new record and then save that record, the event is not called before the next new record is displayed. This video shows how you can save the value of a field that was just entered inside the Grid's 'stateInfo' object, and then use the 'afterRowPopulate' event to retrieve that value and use it as a default in the next new record.Note: The .setValue() method is not used to set the value of the field in the new record row because this would cause the new record row to go 'dirty'. Instead we get a pointer to the element and then simply set its value property.

M9

Tabbed UI - Tree Control

The Tabbed UI displays a series of buttons on the left hand button panel. These buttons open the various pages in your application and shown them in tabs in the Tabbed UI. Now, you can organize these buttons in a tree control layout.

M10

Auto-suggest Control - New 'Contains' option

The auto-suggest feature in the Grid and Dialog component displays a list of matches as the user types into a field. Previously, the control displayed matches that start with the characters that the user typed. Now, you can configure the control to display matches that contain the characters that the user has typed.

M11

Global Update Operation to Update a Field in Multiple Rows in a Grid

When doing data entry into a Grid there may be times when the user wants to copy a value from one row to multiple rows in the Grid. Using Action Javascript is is easy to make a button that does a 'global update' operation on all visible rows in the Grid.

It is important to recognize that the action shown in this video is a 'client-side' action. No data is actually written to the database until the user clicks the 'Submit' button.

M12

Global Search and Replace Operation in a Grid

When doing data entry into a Grid there may be times when the user wants to perform a search and replace operation on the data the currently visible rows in the Grid. Using Action Javascript, it is easy to make a button does a 'global search and replace' on all visible rows in the Grid.

It is important to recognize that the action shown in this video is a 'client-side' action. No data is actually written to the database until the user clicks the 'Submit' button.

M13

Date picker, Date/Time picker and Time Picker

The Date picker in V11 has been substantially improved over the V10 date picker. It can be be configured as a date picker, date/time picker or time picker. It has a full Javascript event model. Many of the properties (such as the low and high date can be set dynamically using Javascript functions).

These videos give a tour of the new features.

M14

Auto-suggest and Edit-combo Controls allow you to select multiple values

Both the auto-suggest and edit-combo controls allow you to enter multiple values in the field you are editing. For example, say you have a field called 'Send to' and you want to support a comma delimited list, such as 'Smith,Jones,King,Cohen' and you want the user to be able to select each entry in the list from the pick list.

This video shows how either the edit-combo, or auto-suggest control can be used for this.

M15

Using Action Javascript to toggle the show/hide state of any arbitrary DIV or 'container' using animation

Animation is built into many of the objects in V11, but there may be times when you want to animate some arbitrary DIV or container. This is now very easy using Action Javascript. You can define complex animations without having to write any code.

M16

Changing the number of New Record rows shown in a Grid at run-time

In an updateable Grid, the number of new record rows shown is a property that is set at Design time.

In some applications you might want to expose a property to the user to set this value at Run time. These videos show how you can do this.

M17

Action Javascript - Open A Grid Component - How to Invoke a Server-side action when a Grid is Opened

When you have a client-side event handler (such as a button's onClick event), that opens a Grid (in a pop-up Ajax window, a div, a tabbed UI pane, etc), you might want to execute some Xbasic on the server before the Grid is executed on the server. This topic discusses how you can do this.

M18

Grid and Dialog Component - Client-side Mask - Dynamically Setting the Mask at Run-time

You can now specify a Javascript function to dynamically compute the mask for a control. The Javascript function gets called every time the control gets focus. When the Javascript function gets called, it can read data in the current Grid row, (or Dialog) and compute the mask to use based on this data. For example, say you have a mask for a telephone number field. In the US, UK and Europe, different formats are used for telephone numbers. The Javascript function can decide what format string to return based on the current value of the 'COUNTRY' field.

M19

Using jQuery Controls in a Dialog or Grid Component

V11 tightly integrates the jQuery Javascript Library. This video shows how you can use a jQuery UI control in a component. In the video we show a jQuery date picker, but the principle applies to other jQuery controls as well.

M20

Grid Component - Setting Default Initial Properties - International Developers

The Options, Set Default Properties command in the Grid Builder has always allowed you to set default properties for the Grid when you create a new Grid. However, if you created a new Grid from a Template, the default properties that you set were not honored. They were only honored if you created a blank new grid. Now, the default properties are used even if you use a template. This makes it much easier to customize the Grid builder for developers whose native language is not English.

M21

Grid Component - Search Part - Save and Load Search Criteria

You can now use the new Repository feature in V11 to save search criteria to the repository and load searches from the repository.

M22

Repository Table - Managing Records in the Repository

This video is aimed at advanced used who use the Repository feature in V11.

The video shows how you can create a Grid to manage the records in the Repository that 'belong' to the current component. For example, when you save search criteria from the Search Part of a Grid to the Repository, the search is saved with the GUID of the current component. This is important because when you load a saved search, you only want the user to see the saved searches that 'belong' to the current component. If you want to manage the records in the Repository, (by creating a Grid that is based on the Repository table), you might want to filter the records in the Repository based on the Guid of a particular component. Say you have a Grid called 'Customers' and you want to put a button on this Grid to show the Repository entries that belong to this Grid. You can do this by setting the filter on the target Grid to componentGuid = ComponentGuid()

M23

Grid Component - Summary Fields - Styling Summary Values

You can now define inline styles for summary values. You can also use the new BeforeSummarySectionRender event to make the inline style conditional based on the value of the summary field.

M24

Detail View - Animation

Regardless of where the Detail View is shown, it can be animated. This includes the 'OnPage' and 'InGrid' options.

M25

Tabbed UI - Animating the Menu Panel

You can now animate the showing and hiding of the menu panel on the Tabbed UI Component. To enable animation, check the 'Animation' property in the 'Tabbed UI Properties' pane.

M26

Ajax Windows - Animation

Animation effects have been added for pop-up Ajax windows.

Important Note: Ajax windows that contain IFrames, which in turn contain display PDF files cannot be animated. As a result, the Animation property has not been made available for Ajax windows that host .a5w pages (since .a5w pages are hosted in an IFrame).

There are several animation methods that have been exposed. The 'slide' and 'fade' methods are based on methods in the jQuery core library. All of the other methods are based on method in the jQueryUI library. By default, both of these libraries are loaded. The Web Project Properties dialog contains settings which control if these libraries are loaded, and from where they should be loaded. You can control the animation effect for the window display and the window close. You can also control the animation speed. Certain animation styles will mess up the positioning of windows. If you find this to be the case, you should stick with the 'Fade' style for the 'show' animation.

M27

Grid Component - Tab and Accordion Controls - Animation

You can now animate the tab and accordion controls in the Grid component.

You can control the animation method to hide and show panes. The animation methods are 'slide' and 'fade'. You can use one method to show the pane, and another method to hide the pane. For example, you might choose to 'slide' the pane into view, but 'fade' it out of view.

M28

Tabbed UI/Page Layout Components - Animation

You can now animate the tab and accordion controls in the Button Pane of the Tabbed UI and Page Layout components.

You can control the animation method to hide and show panes. The animation methods are 'slide' and 'fade'. You can use one method to show the pane, and another method to hide the pane. For example, you might choose to 'slide' the pane into view, but 'fade' it out of view.

M29

Grid Component - Row Expander - Animation

You can now set animation options for when a row expander in the Grid is opened or closed. To turn animation on, check the 'Animate' property in the Row Expander section of the Grid Builder.

M30

Automatic Backup of All Component Files

Whenever you edit a component, it is automatically backed up.

By default, the backups are stored in the _backup.backup folder in your Web Project folder. You can specify where backups are stored by going to the Web Project Properties dialog. For example, you might want to store your backups on a different machine, or in a folder that is linked to your 'DropBox' account. If you store your backups in a DropBox folder, for example, then all of your backups will be automatically backed up into the 'cloud'.

M31

Action Javascript - Open .a5w Page - New Options for the Target Window

This action now has additional options for the target. Previously, the target could be a pop-up Ajax window, a DIV or a Tabbed UI Page. Now you can also specify 'Browser window' to open the target page in a new browser window.

When you select the 'Browser window' option, you can specify several different options to control different aspects of the browser window.

M32

Grid Component - Making a Grid Behave Like a Data Driven Accordion Component

Using the new 'Row expand method' property, you can make a Grid component behave like a data driven Accordion Control.

M33

Grid Component - Search Highlighting

The search highlighting feature highlights the strings in the Grid that match your search criteria. This makes it easy to see why a particular record in a Grid was selected when you executed a search.

M34

Action Javascript - Opening PDF Files - New Options

PDF Documents - Tabbed UI, Page Layout, Grid and Dialog Components - All of these component allow you to create Javascript actions that open static PDF files, or dynamically generated PDF files (from Alpha Five reports). Now you can control several aspects of how the PDF in initially rendered. For example, you can set the zoom level to 50% and navigate to page 2 of the document.

M35

Abstract CSS Class Names

V11 Introduces the concept of 'Abstract CSS Class Names'. When you design a Component, all of the HTML is now marked up using abstract CSS class names (e.g. [class.gridPartSelect]). A class map defines how the abstract CSS class name maps to the physical class names in your CSS stylesheets. This is a very powerful concept because it gives you very granular control over the styling of different elements in your components. These videos explain the concept in more detail.

M36

Action Javascript - Binding an Argument Value to Result of a Javascript Function

(This video is aimed at advanced developers). When you use Action Javascript to open a Grid, Report, Dialog, Custom Component, etc. you often need to bind the value of an argument to a value from the parent Component. For example, you might bind the value of 'arg1' to the value of the Lastname field in the current Grid row.

Now, instead of binding an argument to the value of a field in the Grid, you can specify an arbitrary Javascript function to execute. The argument is bound to the value that this Javascript function returns. (Requires build 3816 or above)

Reporting

Reporting Features

HTML reporting, drill down reporting, and tabular reporting are some of the exciting new features in Alpha Five v11.

R1

Reports - Embedded Charts

This video shows how charts can be embedded into an Alpha Five report.

R2

Reports - Adding a Chart to the Sample Invoice Report

In Video R1 we showed how you can add a chart to a report. In that video, the data source for the chart was set to 'Table'. In this video we show how a chart can be added to the sample 'Invoice' report in the sample 'AlphaSports' application that ships with Alpha Five.

In this video, the data source for the chart is set to 'Report', which means that the data used in the report is used for the chart, rather than a separate query. By setting the data source to 'Report' the chart can use all of the calculated fields and summary fields that the report calculates.

v10

Style Builder

The new style builder simplifies the process of stylizing all aspects of your application. At the same time it provides a great degree of granular control than in the previous version.

SB1

Introduction to the Style Builder

The Style Builder, which is used to edit the appearance of Components in a Web Application, has been completely re-written in V11. It is now no longer just a Grid style editor. It is used to edit the style of all Components - Grid, Dialog, Tabbed UI, etc.

This video gives an overview of the new Style Builder.

SB2

Creating a New Style from a Template

When you create your own custom Styles for use in a Web Application you can either start by editing one of the built-in Styles (such as GrBlue - the 'Gr' prefix indicates that the style is a 'Gradient' style), or you can create your new style from one of the built-in Templates.

A 'Template' is a style that has no colorization. Everything (all CSS colors, all Icons etc.) are just shades of grey. When you create a new style from a Template, you use hue, luminance and saturation sliders to adjust the color of your new style. This video shows how this is done.

SB3

Adjusting the Colors in an Existing Style

After you have created a style you might want to make adjustments to the overall color of the style. Visiting each selector in the CSS stylesheet to make an adjustment would be tedious. You can make adjustments to all of the colors used throughout the style at once, as shown in this video.

The color adjustments that you make here are all 'relative'. I.e. you add more saturation, or luminance to every color used in the style.

SB4

Understanding the 'Part' Tab in the 'Manager' Panel in the Style Builder.

This video explains the purpose of the 'Part' tab in the 'Manager' panel of the Style Builder. It allows you to quickly see and edit the selectors used in a style.

SB5

Understanding the 'Selectors' Tab in the 'Manager' Panel in the Style Builder.

This video explains the purpose of the 'Selectors' tab in the 'Manager' panel of the Style Builder. It give you direct access to the selectors used in the CSS style.

SB6

Understanding the 'Icons' Tab in the 'Manager' Panel in the Style Builder.

This video explains the purpose of the 'Icons' tab in the 'Manager' panel of the Style Builder. It gives you full control over the icons that are used in your style.

SB7

Understanding the 'Settings' Tab in the 'Manager' Panel in the Style Builder.

This video explains the purpose of the 'Settings' tab in the 'Manager' panel of the Style Builder. This tab gives you access to certain style settings that are not part of the CSS file.

SB8

Understanding the 'Edit' Panel in the Style Builder

The 'Edit' panel in the Style Builder is where you can edit the actual CSS in the style. This video shows how to use the 'Edit' panel.

SB9

'Edit' Panel - Generating Interesting Backgrounds for Elements in a Component

 

flash video

YouTube

SB10

Understanding the 'Help' Panel in the Style Builder

The Style Builder integrates a help system that explains the purpose of the various selectors in the style.

SB11

Understanding the 'Assets' Panel in the Style Builder

The 'Assets' panel shows you all of the colors and icons used in a style. The 'Assets' panel exposes powerful editing features for making changes to the colors and icons used in the style.

SB12

Introduction to 'Design Mode' in the Style Builder.

This video introduces you to the 'Design Mode' in the Style Builder. It shows how you can interact with the preview of the style elements to select and edit style settings.

SB13

Using the 'Appearance' Tool in the 'Design Mode' of the Style Builder

This video discusses the 'Design Mode' of the Style Builder in more detail. It shows you you can use the 'Appearance' tool to copy/cut/paste appearance from one element to another. It also shows how you can clear the appearance settings of an element.

SB14

Using the 'Asset' Tool in the 'Design Mode' of the Style Builder

This video discusses the 'Design Mode' of the Style Builder in more detail. It shows you you can use the 'Asset' tool in 'Design Mode'.

SB15

Searching in a Style

The Style Builder has powerful search features, including search and replace features. This video explains how you can use the search features of the Style Builder.

SB16

Scaling Fonts in a Style

Sometimes you want to make all of the fonts in a style bigger or smaller. This video shows how this is easily done in a single global operation. You don't have to edit each font size CSS selector individually.

SB17

Converting a Legacy Style to a new Style

The CSS for styles in V11 is quite different from that used in previous versions. The Style Builder allows you to convert a legacy style to a V11 style. This video explains how to go about converting a legacy style.

Version 10 Feature Packs

The features below were sold separately in Alpha Five version 10. All of these features are now included in Alpha Five v11 at no additional charge.

V10FP1

Advanced Search Layout Options

The Grid Component Search features that are included with Alpha Five are quite powerful, but when you need even more control, upgrade to the Advance Search Feature feature pack.

More Information

V10FP2

Tree-control Navigator

The Tree-control Navigator displays a tree-control on the page. When the user makes a selection in the tree-control you can optionally filter the associated Grid component. In other words, the tree-control is used to navigate in the Grid.

More Information

V10FP3

Grid Components for Desktop Applications

Web components are powerful and flexible graphical user interfaces (GUIs) - and with this feature pack you can embed them into desktop forms or you can use Action Scripting to open them in dialog windows.

More Information

V10FP4

Database Upsize Genie

The Database Upside Genie is for developers who have developed a Desktop Application in Alpha Five that uses Alpha Five's native .dbf tables for data storage. The Genie allows you to 'upsize' your application to use a SQL database for data storage.

More Information

V10FP5

Flying Start Genie

The Flying Start Genie allows you to get a quick start on a new Web Application by automatically creating a Grid component for every table and view in your Database. The Genie also creates a Tabbed UI component which serves as your 'home page' for your auto-generated application. The Flying Start Genie can be used against both SQL databases and native Alpha Five databases (.dbf tables)

More Information

V10FP6

Export to Excel and ASCII

The 'Export to Excel, Ascii or Custom Format' Feature Pack allows you to export data from a Grid component to a file that can then be downloaded from the server to the user's machine where the file can be saved to user's machine.

More Information

V10FP7

Image Upload

Using the Feature Pack, you can:

Define a button that will upload an image to the server and store the filename of the uploaded image in a field in the current Grid record (this is a 'linked image')

Define a button that will upload an image to the server and store the binary contents of the file in a BLOB field in the current Grid record (this is an 'embedded image')

Scale the uploaded images before that are saved. You can scale the image by specifying a percentage of the source image, or you can specify absolute dimensions (in either inches or pixels).

And more

More Information

V10FP8

File Upload

The File Upload Feature Pack allows you to upload files from the user's machine to the server.

More Information

V10FP9

File/Image Download

The File Download Feature Pack allows you to define an action for an event in your Grid (such as when a user clicks a button) that downloads a file from the server to the user's machine.

More Information

V10FP10

Reports - Table of Contents, Bookmarks and Index

Alpha Five includes a powerful banded report writer that you can make even more powerful with this feature pack. It allows you to add dynamic indexes, bookmarks and tables of contents.

More Information

V10FP11

Action Buttons in Grid Components

This Action Pack extends the abilities of Ajax Javascript even further. Instead of restricting you to just javascript buttons in the rows of your grid - with "Action Buttons for Grid Components" you can place buttons anywhere on your grid components

More Information

V10FP12

Import Genie for Grid Components

The Import Genie feature pack lets you create applications in which users can upload Microsoft Excel or ASCII text files and have the data imported to the current grid or any table in your database. It allows a quick way for you to get data from end-users or employees in the field - and it requires absolutely no programming on your part, and you can set it up within a few minutes.

More Information

V10FP13

Generic User Defined Ajax Windows

With the Generic User Defined Ajax Windows dialog box, you can create modern, sophisticated user interfaces for your web applications. Alpha Five already allows you to display a detail view in an javascript popup window. But with this feature pack, you can create the same kind of functionality in interfaces you design - with little or no coding.

More Information

V10FP14

Custom Help Windows for Grid Components

Using this feature pack, you can display help icons on the grid's search, next to selected fields, or elsewhere. When you click (or optionally mouse over) the icon, an Ajax popup window appears with content you create. The window can be fully formatted using HTML.

More Information

Design

Alpha Five lets you quickly integrate your design work with your development effort.

Build

Alpha Five's component builders quickly generate clean, working code that you can easily modify

Deploy

You can deploy your application to your servers or hosted servers.

Refine

Easily make incremental changes to your applications as needed.

The Alpha
Five Way
Alpha Software

The Alpha EcoSystem

 


get-the-free-30-day-trial
@alphafive


FOLLOW @ALPHAFIVE ON TWITTER >




SUBSCRIBE TO OUR MONTHLY NEWSLETTER

Email: