Creating custom web application components with the look and feel of native Alpha Five components

Recently, we received this post from Alpha developer Jim Coltz on creating custom web application components in Alpha Five v11:

With thousands of off-the-shelf Javascript and jQuery libraries available, developers with a moderate amount of knowledge of XBasic can use the new, User Defined Component (UDC) that was introduced in Alpha Five v11 to build easy-to-use, custom web application components that extend the native Alpha Five development environment. By using the tools that Alpha Five provides, you too can create custom components that have the "look and feel" of native Alpha Five components.

By combining a readily available jQuery calendar, known as WDCalendar, with my own extensive customizations and additions to the jQuery source code to make it work the way I wanted it to, and with a few custom XBasic functions to pull it all together, I developed a custom scheduling calendar for my Alpha Five web projects.

A5 JQCalendar: How "User Defined Components” in Alpha Five v11 enable developers to build and distribute custom web application components with the "look and feel" of native Alpha Five components.

The A5 JQCalendar project began as a custom component (another of the new version 11 features) for use in one of my own web applications. I am an independent developer who writes applications for my own use in a couple of businesses that my wife and I own. I started with Alpha Four back in the DOS days and have used Alpha Five since v6. When v10 was introduced, I decided to move one of my larger applications over to the web. v11's release has convinced me that I made the right choice.

When I realized that other developers may want to purchase my custom component to use in their own projects, I added more features and options and then converted them to a User Defined Component (UDC).

The UDC, Alpha's robust XBasic language, and as its tight integration of JavaScript and jQuery into the development environment, allowed me to create a powerful, easy-to-configure, add-on component.

There are articles in the built-in Documentation Viewer that's included with Alpha Five v11 that give a good overview of how to create a custom component and how to turn them into a UDC.

The screen shot below, from my UDC, shows the familiar property sheet format that is shared by native Alpha Five v11 components. You can define the property sheet for the UDC by modifying the example that is provided by Alpha when you create a new UDC. Reading up on the Help topic “Property Grid comprehensive sample” will give you a good starting point for creating a user friendly property sheet. The UDC also includes server-side and client-side events that allow for you, or your end user to insert code to customize your components so that they work the way you want them to. The UDC also has “system” server-side events that the UDC creator defines when building the component. These system events are where you add the functions to generate the code that creates the HTML, JavaScript, and jQuery that end up on the web page that the user sees in his browser.

By using AlphaDAO, portable SQL and Alpha Five's rich set of XBasic functions, I was able to build in support for MySQL, Microsoft Access, Microsoft SQL Server and PostgreSQL back-end SQL databases as well as DBF tables. By using a fair amount of XBasic, and the UDC property sheet, I was able to build in table-mapping to allow users to use their own calendar table column names. I used jQuery AJAX callbacks to handle the drag and drop edits. For more detailed edits, I used an A5 V11 dialog2 component on an a5w page that is loaded via an AJAX callback. The data binding available in the dialog2 component made it easy to give users a familiar interface for adding, editing and deleting events without having to write the code to persist the changes back to the database. Alpha even made it simple to specify a style in the UDC property sheet. The style is then “inherited” by the A5 Message boxes I integrated into the calendar’s code, as well as the dialog2 component. This makes for a very clean user interface that blends in nicely with other native A5 components.

Due to the way that Alpha Five has built the User Defined Component to integrate seamlessly into the Alpha Five web project control panel, the UDC is available as a choice from the control panel when creating a new web component.

Once a UDC component is saved, it is available as a choice to add to a Tabbed UI, to embed in a dialog or add to an .a5w page etc... Alpha Five has built in support for the UDC, so Action Scripts that work with native Alpha Five components are also available for use with the UDC.

The UDC can be designed to use arguments that are either defined at design time, or bound to session variables, page variables, or cookies. When bound to an argument at design time the arguments can then be bound to values in dialogs and grids, or to custom JavaScript functions that the developer creates, to generate the values to pass into the calendar. This is an extremely powerful feature that allows for many creative uses. My JQCalendar UDC has almost all of the options set as arguments. This allows the developer to customize the calendar both at design time and dynamically at run time.

The ability to build and easily distribute custom jQuery, Javascript or other browser-based components for use in Alpha Five v11 web applications is a major breakthrough for developers. The UDC gives developers the tool they need to create add-on components that extend the Alpha Five development environment and to package the add-on components for sale to other developers.

For more information about A5 JQCalendar visit

A5 JQCalendar, as well as other developer designed software, is available for sale at the IADN web site:

[Learn more about Alpha Five v11. Try Alpha Five v11 free.]
Mobile Business Applications Will Comprise 33% of All New Enterprise Applications In 2013, According to IDC
The Rise of Custom Mobile Apps for Small Business

About Author

Default Author Image
Chris Conroy

Chris Conroy runs digital programs for Alpha Software.

Related Posts
an Advanced Health Care Application Built Rapidly in Alpha Anywhere
an Advanced Health Care Application Built Rapidly in Alpha Anywhere
405 Technology Offers Mobile App to Help with Contactless Food Orders
405 Technology Offers Mobile App to Help with Contactless Food Orders
Company Saves Thousands, Increases Productivity and App Performance with Alpha Cloud
Company Saves Thousands, Increases Productivity and App Performance with Alpha Cloud


Subscribe To Blog

Subscribe to Email Updates