Custom Web Application Design: Ajax Callback Progress Bars for (I) Large Xbasic Routines and (II) Looping Through a Table or Resultset

Blog



Custom Web Application Design: Ajax Callback Progress Bars for (I) Large Xbasic Routines and (II) Looping Through a Table or Resultset


Independent developer Jeff Benson of HighBrookCREATE shares his progress bars, built in Alpha Anywhere, for custom web application design

Giving users real-time feedback on the progress of application processing is on the wish list of many developers.  This can be useful when your application either (I) has long running Xbasic routines or (II) loops through records in a large table.

I have built two progress bars that accomplish this. I refer to them as Progress Bar Type I and Progress Bar Type II.

Progress Bar Type I

I have an application that runs multiple Xbasic routines to perform updates and posting and I built a progress bar that gives the user some feedback on the progress of the routines. The progress bar looks like this:

Web application design with Alpha Anywhere

The progress bar is displayed in a JavaScript modal-window as soon as the user initiates an action. (e.g. – pressing the “Run Xbasic Callback button). I designed it with 6 segments (blue rectangles). The boxes fill in the progress bar as the application proceeds. A second after the progress bar is fully filled with blue, the window is removed from the screen and a message is written to the screen – “Processing complete.”

The look and placement of the window, the number of “segments” in the processing bar, and the size and color of the elements that make up the progress bar are all customizable with simple changes to the code and graphic elements that compose the progress bar. This video shows the progress bar in action:

HTML5 web application design

Please note that this progress bar is best suited for when you have multiple discrete Xbasic operations you want to perform. Each operation runs while one box of the progress bar is displayed. The progress bar initiates a new Ajax callback for each discrete operation. (This means you can't open a table in one callback and use it in another callback.)

The progress bar has 6 “parts” that must be incorporated into a UX component (our sample UX component is called ProgressBarTypeI.a5wcmp) where you want to use it.

  • Part 1 is the Javascript function that displays the progress bar window (found in the Javascript functions of the Code section of the sample UX component).
  • Part 2 is the graphic elements that are displayed in the window. These are border.png, whitebox.png, and bluebox.png (these must be loaded in your project and published with the component).
  • Part 3 is the Javascript code that displays the progress bar window and initiates the first AJAX callback. This code is in the onClick event of the “Run Xbasic Callback” button in this example.
  • Part 4 is the Xbasic code that is run by the Ajax callback (you should place the Xbasic code you wish to run in any or all of the 6 functions named xbgroup1, xbgroup2, … xbgroup6). (The code for the Ajax callback (myXBcallback) and the xbgroup functions is found in the Xbasic functions in the Code section of the sample UX component).
  • Part 5 is a free-form HTML element on the UX component with a div with id=“PB”.
  • Part 6 is local CSS definitions code (found in the UX Properties CSS section of the component).

Progress Bar Type II

This progress bar shares much of the code and design elements of Progress Bar Type I. It is designed for providing progress while looping through a single large table (or resultset). It displays progress in the same way as Type I – by filling in blue rectangles – but also displays a running count (in increments that you set) of the records processed so far. The progress bar looks like this:

HTML5 web application design

This progress bar also has 6 segments (blue rectangles). As with Progress Bar I, the size and color of the elements that make up the progress bar are all customizable.

This video shows the progress bar in action:

HTML5 web application design

To use Progress Bar Type II, you must know how many rows are in your table or resultset and, if you use the default setting of 6 segments, you should decide on an increment that is >= 1/6 of the rows. So for the sample progress bar in the video, my table has 7305 rows. 1/6 of 7305 is 1218 so I chose an increment of 1250.

Progress Bar Type II has 7 “parts” that must be incorporated into a UX component (our sample UX component is called ProgressBarTypeII.a5wcmp) where you want to use it.

  • Part 1 is the Javascript function that displays the progress bar window (found in the Javascript functions of the Code section of the sample UX component).
  • Part 2 is the graphic elements that are displayed in the window. These are border.png, whitebox.png, and bluebox.png (these must be loaded in your project and published with the component).
  • Part 3 is the Javascript code that displays the progress bar window and initiates the first AJAX callback. This code is in the onClick event of the “Process Rows In A Table” button in this example.
  • Part 4 is code in the Server-side Event “onDialogInitialize” which sets a session variable - fetchstarthere
  • Part 5 is the Xbasic code that is run by the Ajax callback. This code is comprised of three functions myXBcallback, setSessionVariable, and processMyTable and is found in the Xbasic functions in the Code section of the ProgressBarTypeII UX component. To use the code, you must set the name of the table to be processed in the processMyTable function (in the sample component, the table mmvisits2 is opened) and the code you wish to use goes between the comment lines in the sample component in the processMyTable function (note there are two sections where you must repeat your code – the second section processes the final row in your table). Finally, in the myXBcallback function you must set the variable myincrement to the increment you calculated for your table.
  • Part 6 is a free-form HTML element on the UX component with a div with id=“PB”.
  • Part 7 is local CSS definitions code (found in the UX Properties CSS section of the component).

Code

You can set up and use Progress Bar Type I and Progress Bar Type II by downloading the ProgressBars workspace which contains the UX components, graphic files, and sample table from this link: http://sdrv.ms/16o1s5I

For questions or more information please send an email to jeff.benson@highbrookcreate.com. Jeff is available for mentoring, consulting, or development.

Custom web application design, custom progress bar web apps
Visual FoxPro Developers Looking to Build Mobile and Web Apps are Turning to Alpha Anywhere
Business Continuity & Disaster Recovery Company Rapidly Builds Mobile Business App With Alpha Anywhere

About Author

Default Author Image
Chris Conroy

Chris Conroy runs digital programs for Alpha Software.

Related Posts
How Enterprise Architects Can Drive Digital Transformation
How Enterprise Architects Can Drive Digital Transformation
Updating Mobile Apps Just Got WAY Easier
Updating Mobile Apps Just Got WAY Easier
Cold Season Is Here: Here's Some Alka Seltzer for Your Mobile App Development Pains
Cold Season Is Here: Here's Some Alka Seltzer for Your Mobile App Development Pains

Comment

Subscribe To Blog

Subscribe to Email Updates