Rich.Uchytil.com

home | Progress
Progress | WebSpeed & AJAX Demo

 

WebSpeed & AJAX Demo.

In a recent ORPUG meeting I did a presentation of my experiences so far with WebSpeed and AJAX. This is the demo I created.

This code requires WebSpeed. Click here to get the zip file. You can also get my PowerPoint presentation.

There are three programs in the zip file:

ws-schema-table.p The main program. This displays all of the tables in the database alphabetically.
ws-table.p When you click on one of the tables this program is called to display the details - fields, indexes, etc.
ws-xref.p Each field in the detail display is a link. If you click on that link it will show you all of the tables that have that field. Each table in this display is a link. Click on the table and you will get the details for that table, it will run ws-table.p for that table.

All of this is done through WebSpeed. It displays the schema for the database connected to the Webspeed broker. I could have created another page that would list all databases connected and let you pick one, but this was a quick and simple demo, I didn't add that part.

The AJAX part is when it displays the tables that have that field. ws-xref.p will move the other fields down and insert the list of tables without reloading the entire page. If I didn't run out of time, I would have made it so if you click the field name again it would hide the list of tables.

I accomplished the AJAX part by using innerHtml. This isn't the way I wanted to do it. I wanted to manipulate the DOM by adding a table row <tr>. The way it is currently there's a little extra space between each row that I don't like. But again, this is a quick demo and I ran out of time trying to figure out how to maniuplate the DOM. What I did works and shows how easy AJAX is and what you can do, but it's sloppy. Here's what the code looks like:

FOR EACH _field OF _file NO-LOCK BY _field._field-name: {&out} " <tr>". {&out} " <td> _field._order "</td>". {&out} " <td></td>". {&out} " <td><span style=~"cursor: pointer; text-decoration: underline; color: 0000EE~" onclick=~"getXref('" _field._field-name "')~">" _field._field-name "</td>". {&out} " <td></td>". {&out} " <td>" _field._data-type. IF _field._extent > 0 THEN {&out} "[" STRING(_field._extent) "]". ELSE {&out} "". {&out} "</td>". {&out} " <td></td>". {&out} " <td>". IF _field._fld-case THEN {&out} "c". ELSE {&out} "". IF CAN-FIND(FIRST _index-field OF _field) THEN {&out} "i". ELSE {&out} "". IF _field._mandatory THEN {&out} "m". ELSE {&out} "". IF CAN-FIND(FIRST _view-ref WHERE _view-ref._ref-table EQ _file._file-name AND _view-ref._base-col EQ _field._field-name) THEN {&out} "v". ELSE {&out} "". {&out} "</td>". {&out} " <td></td>". {&out} " <td>" _field._format "</td>". {&out} " <td></td>". {&out} " <td>" _field._initial "</td>". {&out} " <td></td>". {&out} " </tr>". /** NOW CREATE TR ROW WHERE TABLE WHERE USED WILL GO **/ {&out} " <tr>" skip. {&out} " <td colspan=12 id=~"" _field._field-name "~"></td>" skip. {&out} " </tr>" skip. END.

The last three lines show where I am going to put the list of tables. innerHTML is nice and very easy, but not what I really want to do here. Oh well, this gives me another project to do some time in the future.

Feel free to use this any way you want. My only request is if you do improve it (which won't be hard), please send me a copy and let me know what you did. Not that I'll post it here or anything, rather it helps me learn to see what others have done.

Thanks and enjoy!