Client-side Scripting in DesignBais

The Developer Perspective

Again, being a geek and not so willing to relinquish "control", I’m not firm on the idea that some feature should not be supported. I welcome your comments on these points at the bottom of this article. Here are some examples of what I think might be valid use of client-side scripting:

• I can easily see a web page that includes a clock feature that ticks off the seconds or minutes without calling to the server (where the time might be different!).
• Another example would be a calendar control – the control commonly used with DesignBais is built with an OnForm report (grid) and while this model works great it’s not quite as elegant as the control we commonly see on other websites. (I’ll try to provide an example of this in an upcoming blog entry)
• We also can’t drag and drop data on the screen. Most developers don’t do this anyway, but the point is that some may want to, perhaps as part of an inventory movement application.

In my mind, the reason to support a feature, or at least not restrict it, is simply that the customer base might want it. With enough demand I’m fairly certain DBI would provide some basic support for scripting despite the valid arguments above.

That said, rather than using client-side scripting, calls to the back-end from a DesignBais form execute pure MV BASIC code. There’s (arguably) nothing you can do in scripting that you can’t do in BASIC, especially if you shell out to call some remote process, web service, etc.. To organize this code, you can create a single program with lots of snippets to be used by many forms, or you can put individual subroutines in separate items. This is the way we’ve been writing MV BASIC code for years – why change just because we’re using a browser now?

OK, OK, You can include script in DesignBais forms!

Given all of this rhetoric against scripting, you can actually include script in your DesignBais web pages. An excellent HowTo was written by Symeon Breen, explaining how to add File Upload functionality to DesignBais forms, using an IFrame and server-side scripting. Using his model as a base I came up with the sample below. There are many arguments against using IFrames and caveats related to security. If you do use these techniques you’ll need to do some homework to ensure security and perhaps cross-browser compatibility.

You can include script from an existing file or you can generate it live from BASIC. If you use a file, the script is cached in browsers and is not refreshed until the browser is closed and re-opened. If the code comes from BASIC it is dynamically refreshed on each page load.

My sample displays a form with data returned from both an external script and one that was generated in BASIC. The latter just displays some formatted text and the current client-side time of day. I created a simple work file with two fields, WORK1 and WORK2, corresponding to attributes 1 and 2. I added these fields to a new form and ensured that they referred to DBRECORD. In the After Display event, I call the following program:

   SUBROUTINE JS1
   $INCLUDE DBI DBI.COMMON
   GOSUB SCRIPT1
   DBRECORD<1>=VAR
   GOSUB SCRIPT2
   DBRECORD<2>=VAR
   RETURN

SCRIPT1: * call to external HTML that contains script (or anything else!)
   VAR = ""
   VAR := "<iframe "
   VAR := " frameborder=0"
   VAR := " width=’300’"
   VAR := " height=’40’"
   VAR := " scrolling=’no’"
   VAR := " name=’js1’"
   VAR := " src=’scripts\js1.html’"
   VAR := "></iframe>"
   RETURN

SCRIPT2: * build HTML and script
   HTML = \<u>This</u> text came from <strong>in-line</strong> script!\
   VAR = ""
   VAR := "<iframe "
   VAR := " frameborder=1"
   VAR := " name=’js1’"
   VAR := " height=’150’"
   VAR := " scrolling=’auto’"
   GOSUB BUILD.TIME
   VAR := \ src=’javascript:\
   VAR := T
   VAR := \document.write("\ : HTML : \"); \
   VAR := \document.write\
   VAR := \("Client time is " + Hours + ":" + Mins + Time + ""); \
   VAR := \’></iframe>\
   RETURN

BUILD.TIME: * build a single line with a long script
   T = ""
   T := "var Stamp = new Date();var Hours;var Mins;var Time;"
   T := "Hours = Stamp.getHours();"
   T := \if (Hours >= 12)\
   T := \ { Time = " P.M."; } else { Time = " A.M."; }; \
   T := \if (Hours > 12) { Hours -= 12; }; \
   T := \if (Hours == 0) { Hours = 12; }; \
   T := \Mins = Stamp.getMinutes(); \
   T := \if (Mins < 10) { Mins = "0" + Mins; };\
RETURN

The code that generates the IFrame can easily be encapsulated into its own subroutine so that you can just CALL to some code to generate the proper script for some function – this way the BASIC developer still never sees script code, while still taking advantage of what could be a library of functions.