Let’s see an example for the new way:
function setOpacity(element:THTML_ElementExt; opacity: Integer); ['Obfuscate=false']; JavaScript; (*!
var object = element.style; object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
*)

function getOpacity(element:THTML_ElementExt): Integer; ['Obfuscate=false']; JavaScript; (*!
var object = element.style;
return (object.opacity);
*)


You can simply copy the above function into your Pascal source file (browser side;-) and then you can call it passing the DOMHandle of any visual control together with an opacity value (in the range of 0-100) to set the element’s opacity, regardless of browser.

Let’s look at the syntax:

• The function declaration part can be pretty much the same as with any ordinary Morfik function (in the Pascal dialect you can use “function” instead of “procedure”, if you wish).
• Then we have the ['Obfuscate=false']; annotation that will direct the code generator to not obfuscate the function.
• Then we have the JavaScript; directive that tells the compiler that this is a JavaScript routine.
• Then comes the actual JavaScript, enclosed in the special comment tag (*! … *).
• You can return the result of the function with the standard JavaScript return statement.

It is very simple to call JavaScript this way from our code, but please keep in mind that the compiler cannot check the JavaScript code, so keep as much as possible in Pascal/Basic/C#/Java and use these techniques only when absolutely needed. Fortunately, as the Morfik Framework matures there are fewer and fewer cases when you have to…

• You can add new items by simply dragging on empty space (or Shift-dragging on events)
• You can move events by dragging (in the caption) or make them longer/shorter by dragging the bottom of the events.
• If you schedule multiple events at the same time on the same day, they will split the cell width nicely (better than Outlook, IMHO;-).
• While you are making the edits, they are sent to the server in the background for storage, without interrupting your work, in a true AJAX fashion (in demo mode after validation we throw away the changes, to make our life of keeping the demo in shape easier).
• As a future feature, I plan to combine this with my Chat demo to create a collaborative event scheduling calendar where if one party edits an event, those changes will be reflected immediately on the other parties’ screen. Will also add month view, etc.
• The architecture is so that the client side interfaces through Web Services (SOAP) with the server, so it should be simple for other applications to integrate with the Calendar (will also create a demo).
• The browser-server communication language is iCalendar, so other calendars will be able to import our events (tested manually with Google Calendar so far) and we will also be able to consume other iCalendar-compatible events.

Having almost 20 years of software development experience, of course, this does not seem such a big deed for me, still in the web space there are not that many really polished Calendars around (again, Google Calendar being a big example). Now taking into consideration the time it took me to get so far with the demo with relatively little hands-on web development experience (I was mostly envisioning/designing/managing our web projects, not coding) we can see what tools like Morfik can do with the web:

1. they can enable software engineers who avoided weakly object-oriented scripting languages thus far to create powerful solutions that can exceed their desktop equivalents in many ways and
2. they can enable small shops that were coding in MSAccess, FoxPro, Paradox, Visual Basic, etc., to become first-class, fully buzzword-compliant web developers without first learning (X)HTML, DOM, JavaScript, SOAP, XML, AJAX, Apache admin, etc. (they will eventually, IMHO, but it is not an up-front cost;-)

So in the end we can hope for more powerful and more productive web applications to come :-)

function AFunctionToCall(x, y: Integer; s: String) : Integer; ['Obfuscate=false'];
Begin
  Result := x+y;
End;

Procedure DefeatTheOptimizer;
// Make sure you call THIS procedure somewhere
// (e.g. in FormReady, or in Initialization)
Begin
  Exit;

  // call all functions here that you don’t
  // want the optimizer to eliminate
  AFunctionToCall(0,0,””);
End;

function GetFuncResult: Integer; JavaScript; (*!
  return AFunctionToCall(34, 26, "hello");
*)

Very simple. Arman Mirkazemi has a few instructions, though:

It is possible to call Morfik functions from JavaScript. You need to make sure that the compiler does not obfuscate the function name by placing a compiler tag ['Obfuscate=false']; in front of your function declaration.
Secondly, the JavaScript optimizer is designed to remove code that does not get called anywhere in the application. When turned on, the JavaScript optimizer produces a lighter weight JavaScript code to send to the browser.
To stop the optimizer from taking your function out you must call it from another Function. In this case your application may not need to call “myMorfikFunction” anywhere, thus to get around that you could call it from one of your methods after an Exit; statement.

OK. Now let’s see Morfik methods. They are a bit different, since you have to make sure that self/this is set up properly:

Type
  TTestClass = Class(TObject)
    s: String;
    i: Integer;
    f: Double;

    constructor Create;
    function GetIMultipliedBy(x, y, z: Integer): Integer;
  end; ['Obfuscate=false'];

constructor TTestClass.Create;
begin
  s := 'apple';
  i := 42;
  f := 3.1415926;
end;

function TTestClass.GetIMultipliedBy(x, y, z: Integer): Integer;
begin
  Result := i * x * y * z;
end;

function GetMethodResult(p: Pointer): Integer; JavaScript; (*!
  return p(2,10,100);
*)

function getSimpleMethodPointer(o,m: Pointer): Pointer; JavaScript; (*!
  if(m)
    return function(){
      return m.apply(o, arguments);
    }
  else
    return null;
*)

Procedure Index.ButtonTestClick(Event: TDOMEvent);
Var
  tc: TTestClass;
  s: String;
Begin
  salamon := 'hello world';
  tc := TTestClass.Create;
  s := tc.s + '';
  s := s + TJObject(tc).toString + '';
  s := s + tc.ClassName + '';
  s := s + IntToStr(GetMethodResult(
      getSimpleMethodPointer(tc, @tc.GetIMultipliedBy)
    ));
  tlTC.Caption := s;
End;

The tricky part is getSimpleMethodPointer(). It will return a pointer to the method instance (technically it creates an anonymous function that calls the function on the class with all the parameters it was called with). Please note that there is a similar Morfik function called getMethodPointer(), but that does not handle multiple parameters at the moment and is also fiddling with the bandindex that takes CPU cycles, so I prefer to use this one, if I know I’m not on a continuous form. And it cannot work on normal functions or class methods either (see later).

BTW with this solution you do not need to turn off Obfuscation, since you will pass the actual (obfuscated) name of the object and method to the function at runtime, as opposed to the previous function call, where the compiler will not replace inside the JavaScript routine the name of the Morfik function with the obfuscated version (wow! Simple, is it!?;-). So you could do a similar trick with non-method functions by doing this: getSimpleMethodPointer(Nil, AFunctionToCall); This would also eliminate the need for the DefeatTheOptimizer function, since you do refer to the function-to-be-called-from-JavaScript, so the optimizer will not eliminate it. Of course, you have to alter the JavaScript function to take the function-to-be-called-from-JavaScript as a parameter. You can call class methods (ones that don’t need an instance) the same way, by passing Nil as the first parameter.

Update – getSimpleMethodPointer() explanation

It turned out that I skipped some details on the parameters of getSimpleMethodPointer(), so let’s remedy that now:

• o is an object instance (address) upon which you want to call the method and
• m is the method (address) of the object you want to call (always use the address-of (@) operator to play on the safe side).

First this seems straightforward, but! Let’s see a confusing example:

procedure AJavaScriptFunction(s : string; cb: pointer); JavaScript; (*!
  cb(s);
*)

procedure Index.CallTheJavaScriptFunction;
begin
  AJavaScriptFunction('Morfik rulez', getSimpleMethodPointer(Self, @SendMessage));
end;

procedure Index.SendMessage(sMsg: String);
begin
  ...
end;

The important part is the getSimpleMethodPointer() call’s first parameter: Self. One could first simply put Index instead of Self here, but that would be wrong. Why? because Index represents the class (technically it will become (the name of) a JavaScript constructor function) and we need instead an object instance here, which in our case is stored in Self. That’s why in my original example I used tc (which is an object instance) instead of TTestClass (which is the class). Hope this helps…

BTW (for Delphi chaps) it would be more prudent to use the semi-Hungarian naming convention for forms, because then Index would be called TIndex, and no one would mistake it for an instance variable (Var Index: TIndex, anyone?). Aren’t all good things invented by Hungarians? ;-) Quiz question: why is it called the Hungarian naming convention?

One word on the address-of operator (@): if the function does have parameters then you don’t have to use it, because the compiler can tell that you want to get the address of the function, but if your function has no parameters, then (in Pascal) the compiler will guess that you want to call the function, and getSimpleMethodPointer() will get the return value of the function, which is not what we wanted. So play on the safe side and use the address-of operator.

Enjoy! Comments appreciated…

This demo was created with Morfik technology within cca. one engineer-week’s time. Some notes on features and limitations:

• The edits to the events are sent to and are validated by the server, but they are not saved in this demo (to help us maintain the demo:-)
• The demo will always show the same week (start of March, 2007) again, to help us maintain the demo.
• You cannot add all-day events in this demo.
• This started out as proof of concept to see how easy it was to develop a complex control in Morfik. You can judge it for yourself: for one week’s time it is quite polished, IMHO :-).
• We have frozen the feature set of the demo so there are many functions missing, but we are continuing the development of the Calendar control itself, so please contact us, if you need a production quality full featured solution (including back-end logic).

PLEASE NOTE: this version of the calendar is NOT secured, there are gaping holes and can be mistreated quite easily, so DO NOT use it for production purposes.

…simple. Now you can create a server-side application event (i.e. an event of your application object) called OnPrintLoadingMessage() that will be called exactly before the default “Loading…’ message is going to be printed, so you can print your own message, and by setting the var parameter Print to False you can prevent the Framework from printing its own message, thus you can completely control the appearance of the “splash screen”.

To enter the following example, do the following:

• Go to the Project (top) tab.
• Select the Server (bottom) tab.
• Press F11 to bring up the Properties sheet.
• Double-click on OnPrintLoadingMessage.
• Paste in the following code:

Procedure <YourAppNameHere>XApp.XAppPrintLoadingMessage(Response: THTTPResponse; Var Print: Boolean);
Begin
  // -------- start of copy only this part --------
  Response.WritelnString(' <div id="__LoadingText" '+
    'style="left:48%;top:45%;position:absolute;font-weight:bold;'+
    'text-align:center;font-size:12px;font-family:verdana,serif;'+
    'background-color:#f0f0f0;padding:10px 14px 10px 14px;border:1px dotted gray;'+
    'color:red;">');
  Response.WritelnString(' Loading...');
  Response.WritelnString(' </div>');
  Print := False;
  // -------- end of copy only this part --------
End;

You will also find other interesting events here that may control the genration of the initial bootstrap “code”: look at Procedure TFormServer.GenerateMainHTMLPage; in FrameWork\SystemServerDocForm.mmd for more details.

In SystemServerDocForm, in the Browser code, in TFormServer.GenerateMainHTMLPage, replace line 595 with the following:

// !PI! Added a little style to the "Loading" message
Response.WritelnString('    <div id="__LoadingText" '+
 'style="left:40%;top:50%;position:absolute;font-weight:bold;'+
 'text-align:center;font-size:12px;font-family:verdana,serif;'+
 'background-color:#f0f0f0;padding:10px 14px 10px 14px;'+
 'border:1px dotted gray;color:red;">');

This is valid for 0.9.16.1 — if you have a different version, your mileage may vary somewhat.

This is a quickie, and I suppose will be outdated pretty soon, as Morfik will do something better about it (e.g. put a class on this DIV, and make it possible to have an external stylesheet to customize), but for the time being it is a good fix. Of course, you may want to adjust the settings to your liking. Can also add some logo, change the text itself, etc.

So we cooked up the following little Pascal function that will return the string equivalent of the value of filed ‘v’ of class ‘c’. This is a first cut, some tests should be done (and will be for our production lib) but it is a good start, if you happen to stumble upon the same problem.

function GetValue(c:Pointer; v:String):String; JavaScript; (*!
{
  return c[v];
}*)

Among other things this demonstrates how you can call JavaScript code from within the Pascal code without using external .js files. This is a relatively new syntax (from around the 0.9.1x.x branch AFAIS) but is way cool.

If you happen to have to drop to JavaScript, some of my advices:

• do NOT do that, unless you know what you are doing — if you are new to JavaScript, it will be an interesting experience;
• in Project / Project Options / Compiler, switch off “Obfuscate JavaScript” (and “Optimize JavaScript”, for that matter) to make your life easier when you are debugging;
• install the Microsoft Script debugger as described in Appendix ‘G’ (if I recall correctly).

Happy sailing!

You can take a look at the application here and download the source code in the Morfik Labs.

Telling the truth, I created the original chat app almost a year ago (February, 2006) and now due to interest in the Morfik forums I dusted it off and updated to the latest version of Morfik WebOS AppsBuilder (0.9.16.1). I thought originally it would be a two-three hours exercise, and man I was wrong! It took me two days to tidy up a few hundred lines of code :-) The reason was that the original version used subforms for displaying the messages, but that was tooo sloooow, so I decided to wander a little bit into the wonderland of DOM programming.

So some details (shamelessly copied form the readme.txt): the Basic Chat example application is the innermost prototypical core of a chat engine and still it can provide some insight into areas of Morfik programming. A few examples:

- using web methods
- using inline JavaScript functions with parameters
- using critical sections in server logic to accommodate concurrency
- using in-memory caching on the server (the chat session is stored in server memory)
- using visual effects for highlighting UI changes
- no security measures: a very good example for many types of web application security attacks, especially injections :-)

PLEASE NOTE: this version of the chat engine is NOT secured, there are gaping holes and can be mistreated quite easily, so DO NOT use it for production purposes. It is very basic as well, you cannot set up chat rooms, or schedule events, authenticate users, there is no smiley handling, there are no application specific extensions, etc. Please also note that at the moment there are some open issues related to resource consumption in the Morfik framework that do affect the performance of the chat app. It has not been overly optimized either so substantial performance improvements can still be achieved.

If you need a production quality, secure chat engine, please contact me ;-).

What I wanted to do is: create a hover effect (i.e. the entire row is highlighted when the mouse is over) for continuous forms.

First I put a Container on the continuous form and placed all the other text controls and checkboxes and others on the Container (since the Detail does not have OnMouseOver/Out events), then set up the Container for OnMouseOver and OnMouseOut. It fundamentally worked, but the hovering effect was slooow and sometimes did not even register on some of the lines (depending on how fast I moved the mouse pointer).

I though the issue was related to the way the controls contained by Container bubble these events to Container. So I simply set the OnMouseOver/Out event handlers for all controls to the same event handlers and bingo! now it works properly. The exact code sample is below:

Procedure TestForm.InfoContainerMouseOut(Event: TDOMEvent);
Begin
  SwitchBandIndex( Event );
  InfoContainer.DOMStyle.backgroundColor := 'White';
End;

Procedure TestForm.InfoContainerMouseOver(Event: TDOMEvent);
Begin
  SwitchBandIndex( Event );
  InfoContainer.DOMStyle.backgroundColor := 'LightBlue';
End;

Now there are two more items I have to explain:

• SwitchBandIndex() will do some magic for continuous forms, making sure that by using controls like InfoContainer you will access the right instance of that control (since there are as many instances, as many bands/lines in your continuous forms are);
• DOMStyle is another magic property of all controls through which you can access and manipulate the style of the underlying HTML control: here I set the backgrtound color of the InfoContainer (for the technically more inclined: it is a DIV deep inside).

That’s it. Clean and simple. Now if we could manipulate the :hover pseudo-class easily…

Until then the very short summary:

• it was surprisingly easy to create the custom control (the clock itself): it took a few hours without knowing anything about the new Adapter architecture in Morfik;
• there is no single standard for vector graphics on all browsers, or there is (SVG), but Internet Explorer does not support it (instead it does VML) — so I created a rendering engine that sits above these and provides a browser independent way of doing vector graphics (it should work in recent versions of IE, Firefox, Netscape, Safari, Opera, and other Gecko 1.8+ based browsers).

You can take a look at the application here and download the source code in the Morfik Labs.

To Be Continued…