IntraWeb 17 Sneak Peek

First, Don’t Panic

We have plenty of towels.

This will be fully integrated into Delphi and most users will never need to write JavaScript or TypeScript. However IntraWeb generates a lot on its own and this makes that task a lot simpler. It also make control authoring much simpler. And finally, it will allow a lot more users to venture into the client side space should they choose to do so.

It does also really open up the possibilities for IntraWeb regarding .NET, PHP, Python, Lazarus and others. While Delphi users may not be so excited by this, it gives us potentially a lot larger customer base and thus more resources which is also be good for the flagship Delphi version.

This code does run, and its just a small piece – one “form” or page. We have already deployed these online at a private URL and are nearing the point of being able to distribute some alphas to test.

It may be too early for many to see the vision or the huge impact this has, but we hope some will.

Code

This is TypeScript, a derivative of JavaScript and runs client side in the browser. Note that the code does not need to (but can) work directly with HTML or the DOM, but instead works with the IWCL (IntraWeb Component Library).

Of other interest is the .Show method, and how new pages can be show and hidden including passing of state back and forth.

namespace Fiddler {
   export class Index extends IndexGen {
     protected Event_butnShow_Click() {
       const xIWML: string = this.editIWML.Lines.toString();
       this.iwmlDisplay.LoadIWML(xIWML);
     }

     protected Event_butnPresets_Click(aSender: IntraWeb.Controls.Button) {
       const xPage = IntraWeb.PageFactory.Fiddler_Presets();
       xPage.Show(() => {
         window.alert(xPage.ReturnValue);
         this.butnPresets.Text.Value = xPage.ReturnValue;
       });
     }

     protected PresetClick(aSender: IntraWeb.Controls.Button): void {
       const xURL: string = aSender.Tag.Value;
       const xData = Atozed.HTTP.Get(xURL);
       this.editIWML.Lines.FromString(xData);
     }

     public Event_butnPresetMonster_Click(aSender: IntraWeb.Controls.Button) {
       this.PresetClick(aSender);
     }

     public Event_butnPresetControls_Click(aSender: IntraWeb.Controls.Button) {
       this.PresetClick(aSender);
     }
   }
}

IWML

Instead of constructing HTML manually, an IWML file is used. Currently IWML is hand crafted, however it will be integrated directly into Delphi using the long familiar drag and drop designer that is in use today. Instead of saving to a .dfm, it will save to an .iwml file. Stand alone designers including in browser ones are also planed.

ACORN 1.0 IWML 1.0
Fiddler.Index
   Title: IWML Fiddler
   Root[]
     Stack
       Orientation: Horizontal
       Cells[]
         Stack
           Orientation: Vertical
           Cells[]
             Button:butnPresets Presets
             Text Presets - Click to load
             Button:butnPresetMonster
               Text: Monster.iwml
               Tag: /IW17/TestApp/Monster.iwml
             ]
             Button:butnPresetControls
               Text: Controls.iwml
               Tag: /IW17/TestApp/Controls.iwml
             ]
             HorizLine;
             Button:butnShow
               Text: Show
             ]
             Empty ,15
             EditMulti:editIWML
               Width: 300
               Height: 500
               Lines:
                 ACORN 1.0 IWML 1.0
                 IntraWeb:Page
                   Root[]
                     SimpleStack[]
                       Button:butnMain Button
                     ]]
                   ]]
                 ]]
               ]
             ]
           ]
         ]
         Empty 15
         Stack
           Orientation: Vertical
           Cells[]
             Text Render Area
             Empty ,25
             IwmlTarget:iwmlDisplay
             ]
           ]
         ]
       ]
     ]
   ]
]