Tips_tutorials   >   Studiojs201   >   Getting Started

Getting Started

The Studio JS 200 series tutorial assumes you have completed the Studio 100 series tutorials.

Completing the Studio 100 series tutorials is not mandatory, though it is highly recommended. If you are an experienced Omnis Studio developer you will be able to whip through the Studio 100 series tutorials quickly. If you are fairly new to Omnis Studio do not tackle the Studio JS 200 series tutorials before completing the Studio 100 series tutorials!

The first thing you need to do is get the localhost web server running on your computer, and the Omnis Web App Server working on your computer. Refer to your Omnis Studio documentation and to StudioTips -> Internet -> Web Server for information on getting this working.

Please do not email me with questions on how to get your localhost web server and the Omnis Web App Server working on your computer. Send your questions to the Omnis Dev mailing list or Omnis Tech Support. There are just too many variations of installations and possible problems for me to help you out. (The simplest solution I know of is to use Mac OS X.)

The next thing you need to do is download and install FireFox, if you don't already have it. At the time of writing this, FireFox is the best tool for testing and debugging JavaScript.

Once you have the Omnis Web App Server working on your local computer and FireFox installed you are ready to proceed with this tutorial.

We will begin with the Studio 100 series Contacts library. It already has schema classes, query classes, table classes, and a database with records.

The objective of this tutorial is to be able to search and view the Country table records from a web browser.

ContactsWeb Library

To make sure that we are all starting from the same place, download the StudioJS201 zip file from studiotips.net.

  1. Go to - www.studiotips.net/downloads/
  2. Click the StudioJS201 link to download the file.
  3. Unzip the file.

    The folder comes with a ContactsWeb.lbs library and a Contacts.df1 data file.
  4. Open the ContactsWeb.lbs library. When you open the library it automatically opens a session with the data file and installs a Contacts menu.
Tip

If you are a StudioTips member and have StudioTips version 2007-01-26 or greater you have the completed code available to you via the StudioTips Browser. Go to the StudioTips - Tutorials > Studio JS 201. Any code used in this tutorial is available to you by clicking the Sample Code button in the StudioTips Browser window when viewing the appropriate step of the tutorial. You can then copy and paste the sample code into the ContactsWeb library you are working on.

Create Ping Remote Task

One of the first remote tasks I create in my web apps is an rtPing remote task. The rtPing remote class responds with a simple HTML page whenever it receives a message. This allows me to test communication from a web browser through the Omnis Web App Server to a remote task in my Omnis Studio library.

  1. F2 Browser > Select ContactsWeb library.
  2. Click New Class > Remote Task. Name the remote task rtPing.
  3. Add a parameter, pParams, Row data type to the $construct method of the rtPing remote task.
  4. Add the following code to the $construct method of rtPing.

    ; Copy the the params row parameter to a local variable.
    Calculate ParamsRow as pParams

    ; Write a message to the trace log.
    Calculate Mssg as con("Web App Ping received at ",jst(#D,'D:y-M-D H:N.S')," - ",$clib().$name,"/",$cmethod().$name)
    Send to trace log {[Mssg]}

    ; Return a ping message page.
    Do method retPingReplyHTMLContents Returns HTML
    Do method addHTTPContentHeader (HTML)
    Quit method HTML



    Tip

    If you have StudioTips you can copy any of the code snips by clicking the Sample Code button which takes you to the actual code then copy and paste the code to your own method.

  5. Add a retPingReplyHTMLContents method to rtPing with the following code:

    Begin text block
    Text: <html> (Carriage return,Linefeed)
    Text: <head> (Carriage return,Linefeed)
    Text: <title>Omnis Studio Web App Ping</title> (Carriage return,Linefeed)
    Text: </head> (Carriage return,Linefeed)
    Text: <body> (Carriage return,Linefeed)
    Text: <h3>Omnis Studio Web App Ping</h3> (Carriage return,Linefeed)
    Text: <p>Ping test communication successful!</p> (Carriage return,Linefeed)
    Text: <p>$clib().$name = [$clib().$name]</p> (Carriage return,Linefeed)
    Text: <p>$cclass().$name = [$cclass().$name]</p> (Carriage return,Linefeed)
    Text: <p>$ctask().$name = [$ctask().$name]</p> (Carriage return,Linefeed)
    Text: <p>$prefs.$serverport = [$prefs.$serverport]</p> (Carriage return,Linefeed)
    Text: </body> (Carriage return,Linefeed)
    Text: </html> (Carriage return,Linefeed)
    End text block
    Get text block HTML
    Quit method HTML

  6. Add an addHTTPContentHeader method to rtPing
  7. Add a parameter, pfHTML, Field reference type to the method.
  8. Add the following code to the method.

    Calculate ContentLength as len(pfHTML)

    ; HTTP Content type header.
    Begin text block
    Text: Content-type: text/html (Carriage return,Linefeed)
    Text: Content-length: [ContentLength] (Carriage return,Linefeed)
    Text: (Carriage return,Linefeed)
    End text block
    Get text block HTTPHeaderText

    Calculate pfHTML as con(HTTPHeaderText,pfHTML)

    Quit method kTrue

Test Ping Remote Task

Open a web browser and enter the URL which applies to your localhost web server:

All going well the rtPing remote task will receive your request and respond to you with a new web page. If you don't get a response try putting a breakpoint in the $construct method of rtPing. If you do not hit the breakpoint when requesting the above specified URL in your web brower, there is likely a problem with your Omnis Web App Server setup.

You must get the rtPing remote task response working before proceeding any further.

If after trying for 30 minutes you are still stuck, zip your ContactsWeb folder and email it to doug@vencor.ca. I'll check and test it and let you know what I find out.

HTTP Request URL Syntax

Take a moment to study the HTTP request URL which we sent to the web server.

http://localhost/cgi-bin/nph-omniscgi?OmnisServer=5912&OmnisLibrary=ContactsWeb&OmnisClass=rtPing

The URL breaks down into 2 parts:

  1. The URL address - the first part up to the ? character.
  2. The parameters - the part after the ? character.

The syntax of each parameter is simple. ParamName=Value

Each parameter is separated from the next by the & ampersand character. You can include up to 400 parameters in the URL which you send to the Omnis Web App Server.

The only required parameters are:

  1. OmnisServer - the port which the Omnis Web App Server is listening on.
  2. OmnisLibrary - the library containing the remote task we wish to instantiate.
  3. OmnisClass - the name of the remote task we wish to instantiate.

The Omnis Web App Server parses the parameters and put them into a row variable which it passes as the first parameter to the $construct method of the specified remote task. The ParamName becomes the column name, and the Value is copied to the row. Each column is a kCharacter data type.

Once you know the syntax the Omnis Web App Server it really isn't that complicated. Understanding the syntax of the HTTP request URL is important because we will be using JavaScript to generate our own HTTP requests later on in the tutorial.

As you can see, we don't even need a web page to send requests to the Omnis Web App Server. We can simply type in the URL following the Omnis Web App Server syntax in our browser, click the go/load button, and we will get the appropriate HTML returned to our browser from the Omnis Studio remote task via the web server.

StudioTips Documentation - Copyright 2006 Vencor Software