Alpha Five v11 Video Library
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
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
IG3
IG4
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 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.
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
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.
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.
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.
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.
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)
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.
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
V10FP8
File Upload
The File Upload Feature Pack allows you to upload files from the user's machine to the server.
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.
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.
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
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.
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.
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.
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.
Five Way
The Alpha EcoSystem
