Web App Development Overview

Part 3: Using a Web App in a Pascal Desktop App

Contents

Introduction
Running in an External Browser
Running in an Embedded Browser

Introduction

Part 2 showed how to customize a "canned" Web app (QxMap) via simple JSON files deployed with the app. But QxMap can also be customized by passing data as part of the URL query string.

For example, the embedded app below shows the elevation of several locations, where the location and elevation data was passed in the query string, overriding the data in the app's locations.json file. To see the query string, look at this page's HTML source or click here to launch the app in its own browser window.

Here's a list of what can be overridden in the URL query string:

Running in an External Browser

All well and good, but what about using this app somewhere other than a standalone browser, for example in something written in Pascal?

Well, if all you need to do is view the Web app with data supplied by your desktop app, simply launching an external browser and letting it load and run the Web app might be sufficient. For example, in Lazarus you could do something like this:

procedure TForm1.Button1Click(Sender: TObject);
var
  Url : string;
begin
  Url := 'https://macpgmr.github.io/iApps/qxmap/index.html?locations=' +
         '[{"name":"Ouray","lat":38.02,"lon":-107.67,"display":"7,792 feet"},' +
         '{"name":"Silverton","lat":37.81,"lon":-107.66,"display":"9,308 feet"},' +
         '{"name":"Telluride","lat":37.94,"lon":-107.81,"display":"8,750 feet"}]';
{$IFDEF DARWIN}
  fpSystem('open ''' + Url + '''');
{$ELSE}
  Url := StringReplace(Url, '"', '%22', [rfReplaceAll]);
  OpenURL(Url);
{$ENDIF}
end;
Once launched like this, the Web app is independent of your desktop app, meaning you can launch more than one instance if you want. When done with the Web app, the user just closes the browser tab. In this example, the browser functions much like a non-modal report viewer.

Running in an Embedded Browser

This should also be easy, but since Lazarus lacks a cross-platform Web browser control, you'll need to come up with your own solution, possibly a platform-specific one.

For example, here's a screenshot of Xcode with the ObjPMap project loaded. Since ObjPMap is an Objective Pascal app, it can use any Objective C class, so it uses the Cocoa WebView control as an embedded browser to load and run QxMap.

[Image] goes here

To try out ObjPMap, you have two options:

You can also browse the view controller code to see how easy it is to use a WebView control with Pascal and Xcode:

Notes on ObjPMap:

  1. ObjPMap was created using the osx-simple template included with ProjectXC.

  2. Several of the default menus that the template adds to a new app are not relevant to a simple app like ObjPMap. However, these menus have been left alone in case someone wants to extend ObjPMap, for example, to support loading a file containing locations and lat/lon coordinates rather than just using the app's hard-wired locations.

  3. ObjPMap does not use LCL or any intermediate UI code, working directly with the Cocoa frameworks (AppKit, WebKit). As a result, its executable file is quite modest in size, about 240KB.
Update: The TWebBrowser control is now available for Lazarus from here. It currently supports the LCL Cocoa and Qt widgetsets and includes source code for PasMap, the Lazarus equivalent of ObjPMap.

Copyright 2016 by Phil Hess.

macpgmr (at) icloud (dot) com

First posted Nov. 13, 2016; last edited Aug. 1, 2017.

Code syntax highlighting done with highlight.js.