Sw4   >   Web   >   SW + JavaScript

StudioWorks+JavaScript

By combining JavaScript, the Omnis Web App Server, and the StudioWorks framework we are able to create a zero footprint StudioWorks web application. (No Omnis Web Client plugin, no remote forms, no Java applets.)

The project has been dubbed SW+JavaScript.

swjsOverview.jpg

JavaScript is used to do event handling, basic validation, user prompts, and to submit requests to the Omnis Web App server. The Omnis Web App Server receives the request and passes it to the StudioWorks application running on the server. The StudioWorks application processes the request and returns the content for the next page.

swjsOverview.jpg

The Omnis Web App Server instantiates the rtDispatcher remote task passing along the HTTP parameters. The remote task binds itself to the main library Startup_Task, giving it access to the StudioWorks application's class instances. The remote task then dispatches the request to the applicable object class which processes the request and returns the HTML for the next page or a URL to point the web browser to a different page.

The web page that is returned to the user is made of 3 components.

swjsOverview.jpg

  1. JavaScript for client side code. The web page links to the actual JavaScript code which is located in separate files.
  2. CSS (Cascading Style Sheets) for the client side presentation. The web page links to the CSS file.
  3. HTML for the actual content.

By breaking the web page into these 3 distinct components we simplify and minimize the amount of HTML which our StudioWorks application has to prepare and return to the client. The JavaScript code is generic so that it can be reused over and over. The CSS file contains all of the color and font information that would normally be included in the web page.

The goal for this project is to be able to write a normal StudioWorks application, add the web module with its basic classes, install the app on a web server and be able to sign-in, navigate, search, edit, insert, delete records, and run reports from any web browser.

JavaScript Programming

Programming in JavaScript is not for the faint of heart.

You use a text editor (e.g. BBEdit) for writing JavaScript and then test your code with a browser. If your JavaScript code doesn't work you look at the browser's error log to find out why and where the code failed. One incorrect character in your code can stop all of your JavaScript functions. Everything is case sensitive.

At the time of writing this, FireFox is the browser of choice for JavaScript programming. The FireFox error log is the most informative of the ones I've tested. For IE compliance you will have to retest your JavaScript with the IE browser.

For FireFox and Safari, if you make changes to a JavaScript file you need to clear the browser cache before you reload the page to make sure your modified JavaScript file is reloaded by the browser.

There is tons of JavaScript code information and tips on the internet. If you Google a JavaScript question you'll find many pages of answers.

To learn JavaScript I purchased and read two books.

  1. JavaScript - A Beginners Guide by John Pollock.

    This book was a good introduction to learning JavaScript but it doesn't go deep enough for more complex JavaScript.
  2. JavaScript Bible by Dany Goodman

    This book is a great JavaScript reference book. For me, writing JavaScript without this book would have been very difficult and taken much longer.

Multiple Languages

The StudioWorks framework is designed to support multiple languages but not within a single instance of the Omnis Studio. You will likley need to run a separate instance of your StudioWorks application for each language you wish to serve over the web. The language must be set by the user which opens the StudioWorks application on the web server. You will need a different WebAppLibName for each language. e.g. LibrarianWeb_it, LibrarianWeb_fr.

As of 2006-03-28 running multiple languages on a web app has not been tested.

Lookup Type-Ahead Droplist

As of 2006-03-28 the ability to do a type-ahead or droplist on lookup records has not been implemented. To do so would require the use of the XHMHttpRequest object. If you require this functionality you will need to dig in and write your own code to accomplish this. See the topics JavaScript AutoSuggest and AJAX - XMLHttpRequest.

Fetch Limit and More Button

As of 2006-03-28 limited the number of records returned by a search and adding a More button to the search results web pages has not been implemented. If you require this functionality you will need to dig in and write your own code to accomplish this. I'm not sure how to accomplish this since the statement object used to fetch the first batch of records will be lost when the remote task is closed. Subsequent fetches are only available to the same instance of the statement object which issues the select.

Note

MySQL has a LIMIT option for SELECT which allows you to specify the offset and number or rows, but implementing LIMIT would only work if you use MySQL for the database.

JavaScript AutoSuggest

There is an excellent tutorial written by, Nicholas C. Zakas, available at:

http://www.webreference.com/programming/javascript/ncz/

I printed the 3 tutorials and followed the examples for constructing my own auto suggest lookups. The sample code is well structured and commented. The techniques used are brilliant and elegant.

The 3rd tutorial adds server side logic with an interesting twist by returning the suggestions from the server in JSON syntax (JavaScript Object Notation) rather than HTML or XML. Using JSON is lightweight and simply to code.

To find out more about JSON visit http://www.crockford.com/JSON/js.html

AJAX - XMLHttpRequest

AJAX is an acronymn for Asynchronis JavaScript And XML

The XMLHttpRequest object lets you send a request from a web page to the Omnis web app server. The response is returned to the object where JavaScript code can take the returned content and use it to dynamically update the existing page. This reduces bandwidth, saves having to refresh the entire page each time you communicate with the web app server, and lets you give the user a richer user interface.

Creating dynamic auto suggest type-ahead fields with dropdown lists is one many things you can implement with JavaScript and the XMLHttpRequest object.

There is a helpful tutorial written by Cameron Adams at:

http://www.sitepoint.com/article/remote-scripting-ajax