Tips_tutorials   >   Studiojs201   >   Introduction

Introduction

Welcome to the Studio JS 201 tutorial. (JS stands for JavaScript)

The Studio JS 201 tutorial is the first in a series of tutorials which take you step by step through writing an Omnis Studio ultra-thin web application. An ultra-thin web application does not use the Omnis Web Client plug-in. Users can interact with your Omnis Studio application using FireFox, Internet Explorer, or Safari... no plug-ins required! Functionality on the client side is provided using JavaScript. Page decoration (fonts, colors, borders, etc.) control on the client side is provided by CSS (Cascading Style Sheets).

I wrote my first Omnis Studio web app in 2003 for the Wingham Cemetery. I used the Omnis Web Client Plug-in. Initially the app seemed good, but I kept running into problems with glitches with the Omnis web client plug-ins between different versions of browsers. Also, each time the client upgraded or changed computers they had to go through the Omnis web client installation. This proved to be too difficult for low level computer users.

In 2005 I started tinkering around with PHP and JavaScript. I discovered that you can do some pretty amazing and powerful stuff with PHP and JavaScript! I started thinking about writing web apps using PHP & JavaScript... dropping Omnis Studio altogether. But I had numerous Omnis Studio applications running on LANs with runtime clients. I was also very familiar and productive with Omnis Studio. Writing and debugging code in Omnis Studio is a cake walk, compared to JavaScript. One character out of place in JavaScript and nothing runs.

The best thing in my situation was to make use of the code I'd already written in Omnis Studio and extend my applications to the web using the Omnis Web App Server, ultra-thin client, JavaScript, and CSS.

I rewrote the Wingham Cemetery app in 2006 using the Omnis Web App Server, ultra-thin client, JavaScript, and CSS. The results were very encouraging. Performance was excellent. The customer could access, update, and insert cemetery records from any computer, anywhere, anytime. No plug-ins, no delays. They loved it, and so did I.

You can try out the public search page of the Wingham Cemetery at www.vencor.ca/cemetery/wingham/search

At the time of writing this tutorial the Wingham Cemetery web app is running on a headless MacMini. FrontBase is being used for the database.

Overview

There are several components to the ultra-thin client application you will be building in this tutorial.

  1. The Omnis Studio library which contains the remote task classes.
  2. Omnis Web App Server is the instance of Omnis Studio listening for messages from the CGI or Script. If it receives a request it instantiates the specified remote task and sends it a $construct message with the HTTP request parameters in a row variable.
  3. The web server which receives standard HTTP requests. Port 80 is the default port for HTTP requests.
  4. The CGI or Script which handles communication between the web browser and the Omnis Web App Server.
  5. The user's web browser which displays web pages sent to it from the web server.
  6. JavaScript which adds functionality to the web page and sends requests to the web server CGI or script.

The following communication takes place in the demo we will be building.

  1. Using a web browser the user requests a static web page from the web server, searchcountries.htm
  2. The webserver responds with the HTML which the web browser displays to the user.
  3. The user fills in a search value and clicks the Search button on the web page.
  4. The Search button calls a JavaScript function which checks to make sure a search value has been entered, and then sends the request to the web server CGI or script.
  5. The request is processed and forwarded to the Omnis Web App Server which instantiates the specified remote task in the specified library and sends a $construct message with the HTTP parameters in a row variable.
  6. The remote task processes the request building the HTML for a new page with the search results. The HMTL page is returned to the Omnis Web App Server which passes it back to the CGI or Script which passes it back to the web browser.
  7. The web browser displays the HTML to the user.

Here is the finished product of what we are going to build in this tutorial.

SearchCountriesBrowser.jpg