Codeless AJAX in v10 - COMPREHENSIVE LIST OF VIDEOS

[Richard Rabins]

Codeless AJAX - COMPREHENSIVE LIST OF VIDEOS

NOTE - THE first few videos do not have sound

http://news.alphasoftware.com/V10Preview/videos.htm

Number Category Description
1 General This video shows a basic Ajax component. It shows how easy it is to create an Ajax Grid using the Grid builder. The video demonstrates basic interaction with the Grid such as sorting, page navigation and changing the number of record per page.

Watch Video
2 Searching In this video we will show the various types of search features you can add to the Grid:
- Search Part
-Quick Search
- Searching on current sort column
- Query by Example
- Incremental searching, QBE syntax
- Alphabet button bar

The video starts with the Customer grid created in example 1.

Watch Video

3 Editing In this video we show an editable grid. There are many different ways an editable grid can be configured We show:
- Submitting all rows at once
- Saving individual rows
- Edit on demand
- Turning off option to save individual rows
- Moving the new record rows to the top of the grid
- Keyboard support (F9 to save data, Up and Down to change row with focus, etc.)
- Trapping actions that would loose uncommitted data.

Watch Video

4 Rich Text The grid contains a built-in HTML editor for editing rich Memo fields. This video demonstrates how rich Memos can be edited in the Grid part and the Detail View part.
- In the Grid part, the HTML editor is configured as a popup editor - it is opened when you click on the field
- In the Detail View, the HTML editor can be configured to edit 'in-place'.

No Sound
Watch Video

5 Multi-user editing The grid uses 'optimistic record locking' to trap multi-user edit conflicts. This video demonstrates:
- Automatic refresh of data as soon as the user starts to edit (which minimizes chances of a write conflict)
- Trapping write conflicts.

Watch Video
6 Data Validation The grid has exceptionally strong data validation features. This video demonstrates:
- Data validation rules
- Data validation custom Xbasic at the field level
- Data validation events
- For DBF tables, automatic honoring of Field Rules

Watch Video
7 Error Reporting Styles The grid offers several styles for reporting errors. This video demonstrates the various error reporting styles.

Watch Video
8 Lookups The lookup feature in the Grid is exceptional. This feature demonstrates:
- Opening the lookup in a window on the page
- Dynamic lookup filtering

Watcvh Video
9 Detail View This video shows the various options for the grid 'Detail View'. This video demonstrates:
- Various options for where the Detail View is opened:
- on the page underneath the Grid part
- in a modal, popup window
- in a modeless, popup window
- in the Grid part, directly under the row.
- Using the 'pre-fetch' option for greater responsiveness

Watch Video
10 Row Expander The 'row expander' turns on a small icon next to each row in the Grid. When you click this icon, the row expands to show additional information related to the current row. This video demonstrates:
- Row expander showing a single grid
- Row expander showing multiple grids in a Tab control
- Row expander showing multiple grids in an Accordion control
- Setting the row expander to only allow one row to be expanded at a time
- Defining a custom row expander event to show any arbitrary content generated by the server

Watch Video
11 Conditional Formatting The conditional formatting option allows you to format data conditionally, depending on its value. For example, you might set the color of the quantity field to be red if it is above average. This video demonstrates:
- conditional formatting at the cell and control level
- conditional formatting at the row level.

Watch Video
12 Conditional Images The conditional image feature allows you to display different icons in the grid depending on the data in each row. This video demonstrates how above average quantities have a green icon and below average have a red icon. There is no limit to the number of conditions you can test for.

Watch Video
13 Master Templates The Grid component comprises three sub-parts - Search Part, Grid Part and Detail View Part. In previous versions of Alpha Five you laid out these three parts on the .a5w page that contained the Grid component. With Master Templates, you can lay out these parts in the Grid definition itself. You can also enclose the parts in a Tab or Accordion object.

Watch Video
14 Collapse Bar The collapse bar allows you to wrap the entire Grid component in a frame. When you collapse the frame (by clicking on the frame title bar), the Grid is hidden. This is useful if you have a page with multiple Grid components on it.

Watch Video
15 Form Layout The records in a Grid component can be displayed in either a tabular view or a form view. When you use the form view, the Grid offers many different layout options that allow you to create highly customized form layouts. This vide demonstrates:
- Tab controls
- Accordion controls
- Container controls
- Frame controls

Watch Video (Container and Frames)
Watch Viewo (Tabs and Accordions)

16 "Liquid" Forms Smart phones are an increasingly popular platform for running web applications. On a smart phone, the screen real estate is severely limited. This video shows how the Grid makes it easy to design 'liquid' forms - forms that automatically reconfigure themselves based on the screen size.

Watch Video
17 Ajax Windows When you click on a hyperlink in a Grid you can display related information. This video shows how this related information can be shown in Windows on the current page. There are several different types of window styles:
- Modal popup window
- Modeless popup window
- Dropdown windows

In addition, you can also display the related information in any user defined DIV on the page.

Watch View (Popup Windows)
Watch Video (DIV)
18 Cascading Dropdown Boxes in Search Part The Search Part of the Grid can display dropdown boxes for search fields. Say you have a dropdown box for the Country, City and Company fields. You can configure dropdown boxes so that until the user has made a selection from the Country field, the City and Company dropdown boxes are disabled. When the user selects a Country, the City dropdown box is populated with cities in the selected country, and so on.

This video shows how to define cascading dropdown boxes:
Watch Vide (Specifying Cascading Dropdown Boxes)

This video shows how you can control the layout of the Search Part:
Watch Video (Customizing Search Part Layout)
19 Action Javascript - Print Report as PDF This video shows how you can print PDF reports and display them in popup windows (modal, modeless or dropdown), or in an arbitrary DIV on the page.

Watch Video
20 Watermark Fields Watermark fields allow you to put the field label inside the field itself. If you are designing forms where screen real-estate is limited, watermark fields are a great way to save space.

Watch Video
21 Auto-suggest Fields Auto-suggest fields work similarly to the now familiar Google Search Toolbar. As you start typing into a textbox, a list of suggestions is supplied. In the case of the Grid component, the suggestions can come from a static list of values, or more commonly, from a table. The list of choices can be filtered based on other fields previously filled in. For example, say that you have defined the 'City' field to be an auto-suggest field. If you previously entered 'CA' into the 'State' field, then when you start typing into the 'City' fields, the list of suggestions will only show cities in California.

Watch Video
22 Edit-combo box fields. Standard HTML does not support an edit-combo box control. This video shows how you can include edit-combo boxes in your Grid components. You can use edit-combo boxes in the Search, Grid and Detail View parts.

Watch Video
23 Supercontrols This video shows how you can define a window to show Google Maps for the address in the current record.

Watch Video
24 Action Javascript - Open a Grid This video shows how you can open a Grid in a popup window (modal, modeless or dropdown), or in an arbitrary DIV on the page. The Action Javascript genie writes all of the Javascript code.

Watch Video
25 Tabbed UI Builder The Tabbed UI builder allows you to take all of the pieces of your applications (Grids, Reports, A5W pages, etc.) and build a tabbed user interface, much like a modern desktop application would employ.

Watch Video - Part 1
Watch Video - Part 2
26 Page Layout Builder The Page Layout builder allows you to create a complex page layout that contains multiple components. Components can be laid out in tabs, and accordions and can be displayed in on-page windows, or in pop-up windows (either modal, or modeless).

Watch Video - Part 1
Watch Video - Part 2

27 Window Options The Action Javascript builders make it very easy to create buttons that open other Grids, Reports, Pages, etc. in pop-up windows. You can also open up the target Grids, Reports, etc. in new 'Panes' in the Tabbed UI builder. These videos show some of the Window options such as:

Multiple modeless window
Re-using the same modeless window
Setting the window title
Opening a new pane in the Tabbed UI Object.

Watch Video - Part 1
Watch Video - Part 2
28 Constrained Keyword Search The Grid component has always allowed you to create Keyword searches - a search that searches in multiple fields. But now, you can create 'constrained' keyword searches. This allows you to perform a keyword search subject to some other constraint e.g. (Department = "Books").

Watch Video
29 Tabbed Linked Grids You can create very powerful 'master-detail' Grids by placing 'Linked Content Sections' on the Grid. If a 'Linked Content Section' contains more than one Grid, the content is displayed in a Tab or Accordion object. For example, you might have a Customer Grid that display the Orders for the customer record that has focus. The Orders grid, in turn, might display the Order Details for the order that has focus. There is no limit to the level of nesting of linked content.

This show how easy it is to create a Linked Content Section.
Watch Video
30 Client-side Formatting, Calculated Fields and Show/Hide Fields The Grid component supports several powerful 'client-side' features such as calculated fields, dynamic formatting, dynamic show/hide of Grid elements and dynamic enable/disable of Grid elements.

The first video shows how you can define a calculated field. The calculation is performed using Javascript as soon as the value in one of the input fields changes.
Watch Video

The second video shows how you can dynamically style controls in the Grid. It shows how the Quantity field can be displayed in a different font and background color depending on what range of values it is in.
Watch Video

The third video shows how parts of a Grid form can be hidden under certain conditions. The Grid shown has a section for the billing address and shipping address. If the 'Shipping address is same as billing address' field is checked, the entire 'Shipping Address' part of the Grid form is hidden.
Watch Video
31 Client-side Show/Hide and Enable/Disable of Tab and Accordion Panes The panes in a Tab and Accordion control can be dynamically hidden/shown, or enabled/disabled based on an expression that is evaluated in the Browser.

This video shows a Grid with a Tab object with two panes (Billing Address and Shipping Address). If the 'Shipping address is same as billing address' checkbox is checked, the 'Shipping Address' pane is hidden and then disabled.

Watch Video
32 Multiple Language Support If you are developing applications for multiple languages, you might want to change labels and prompts based on the current language. You can tag any text in the Grid definition as 'replaceable' and then you can define multiple language definitions in which you define the value for all of the tagged strings in your definition.

This feature is extremely powerful because the replacement strings that you define in your language definitions can be expressions or static text.
This video shows how you can use this feature.
Watch Video
33 Grid Templates Whenever you create a new Grid Component, the Grid Templates Genie pops up, allowing you to select one of several pre-defined templates, or a template from your own library of templates. Templates can be a great time saver because the can pre-set a multitude of properties when you create a new component.

This video shows how you can use Templates, and how you can define your own templates.

Watch Video
34 Edit-Combo Boxes - Dynamic Filtering An earlier video (number 22) showed how you can create edit-combo box controls in your Grid component. In this video we show how you add dynamic filtering to your edit-combo boxes. With dynamic filtering, the list of choices that are shown in the edit-combo box is filtered on the value in some other control that you have filled in. For example, you might have filled in MA into the State field. When you open the Edit-combo, only cities in MA will be shown.

The dynamic filtering can be client-side, or server-side. If you choose the client-side option, then the edit-combo box is populated at render time with a complete set of data and then when you open the edit combo, Javascript is used to filter the data that is already in memory.

If you choose the server-side option, then when you open the edit-combo, an Ajax callback is made to populate the edit-combo box.

The edit-combo can be used in all parts of the Grid - i.e. Search, Grid and DetailView.

Watch Video - Part 1
Watch Video - Part 2
35 Grid with an Embedded Grid in a Cell Grids are completely recursive. That means that Grids can be placed inside other Grids, up to any depth that you want. In this example, we have a simple Grid showing customers. One of the columns in the Grid contains an embedded Grid showing the Invoices for that customer. This embedded Grid, in turn, has a row expander. When you open the row expander, it shows all of the invoice items for the selected invoice.

Normally, each cell in a tabular grid contains a single field. But in this example, instead of placing a single field in a column cell, we have placed an entire Grid.

Watch Video

[fsi]

Re: Codeless AJAX in v10 - COMPREHENSIVE LIST OF VIDEOS

Sorta looks like video #1 General and video #3 Editing are the same (appear to be even the same links: http://screencast.com/t/LhOwUR4c4k)

[brackley]

Re: Codeless AJAX - COMPREHENSIVE LIST OF VIDEOS

First a little background:

I am an I.T professional with twenty four years experience, and have worked with PowerBuilder, Oracle Forms, Crystal Reports, and some older software most of you would not recognize :)

Currently I am involved in setting up a reporting database, using data from the CERNER health care suite of products.

I dabbled with A5 V8 as a novice and liked what I saw on the surface. I relied mostly on Genies and did not go into Xbasic (found it a tad cryptic)

Now, on to V10, and the videos. I just watched a few on the web components and the grid components and I am completely amazed. If the final product ships with all this working correctly, and Alpha prices this well and does some decent promotions/advertising, I believe it will be a game changer. I cannot believe the amount of customization available without coding. The amount of hours that Alpha must have put into this 'codeless Ajax' must be staggering.

And to have the owners post videos at 2AM, and get the information out there, is unprecented in this industry.

I will download the final product as a trial, and if all goes well, I will purchase it.

It is the first week of August and I hope this ships soon, the suspense is killing me.

Good work.

Brent Eamer
Prince Edward Island, Provincial Government (Health Care)
Charlottetown PEI
Canada

[Richard Rabins]

Re: Codeless AJAX - COMPREHENSIVE LIST OF VIDEOS

We (and especially the Alpha Five v10 development team) appreciate your comment very much

when you say
"I just watched a few on the web components and the grid components and I am completely amazed. If the final product ships with all this working correctly, and Alpha prices this well and does some decent promotions/advertising, I believe it will be a game changer. I cannot believe the amount of customization available without coding. The amount of hours that Alpha must have put into this 'codeless Ajax' must be staggering."

You are correct the amount of work behind "codeless AJAX" is staggering but we felt that if we wanted to create, as you state, a "game changer," this is what is needed in the marketplace where people want web apps that feel like desktop apps BUT do not have the time or energy to learn all that goes into building AJAX applications the conventional way (i.e. JavaScript, XML, Server Side Scripting, the DOM and the differences between the browsers.)

[brackley]

Re: Codeless AJAX - COMPREHENSIVE LIST OF VIDEOS

Having gone through the client server transition, it has been fun to watch.

The web allowed zero deployment, using a browser as the presentation layer, but alas, when Java came along, we had the AWT (Abstract Windows Toolkit). That was rudimentary at its best. The end user still wanted the rich functionality that typical client server applications provided. Then came SWING, but it was difficult to learn and had serious performance issues.

Then we had JSP and JavaServerFaces and host of frameworks that attempted to address desktop functionality at a 'browser price'. But we still had the issue of submit and posts back to the server. That brings us to AJAX, but then again, more coding required. DOJO is one attempt at solving the coding issue.

So with that, Alpha has decided to tackle the isssue. Bold step indeed. And I must emphasize the importance of advertising this version. As much as it may cost, take out full page ads in the New York Times if necessary or appropriate; given the current economic situation, you may get a good price!

Other technologies have succedded by merely by choosing the hot media of the day (Not suggesting SuperBowl ;) But maybe a google banner on the realease date, not sure of the cost of that one.

But you have as they say, thirty seconds to make a good impression. So load the guns and hold no prisoners when you release this.

[Richard Rabins]

Re: Codeless AJAX in v10 - COMPREHENSIVE LIST OF VIDEOS

If you are interested in applying to get a beta copy of Alpha Five v10 please email [email protected]

Please include some background on yourself and your use or intended use of Alpha Five v10

Thank you

[mmaisterrena]

Re: Codeless AJAX in v10 - COMPREHENSIVE LIST OF VIDEOS

I agree with brackley
Make an efort ($$,$$$) to get the word out and have your 15 minutes of fame on any major publication. then the product will sell by itself ($,$$$,$$$)

[Dan Blank]

Re: Codeless AJAX in v10 - COMPREHENSIVE LIST OF VIDEOS

In Video #4 I do not see the possiblitly of addiding images or even adding links included in the HTML editor. Or am I not seeing it? This is one of the nice joys of HTML editors. Steve Woods HTML editor (along with many others) provides this functionality which I really like.

Are there plans to add this functionality to the Rich Text fields in v10?

[mmaisterrena]

Re: Codeless AJAX in v10 - COMPREHENSIVE LIST OF VIDEOS

yea thats strange that adding links is not available on the html editor.

Another question:

Now that we have this new cool html fields can we show them in reports(pdf)? without the html code of course

Mauricio