Plugin samples

WebKit dialogs

WebKit dialogs allow designing parts of plugin code and UI in HTML/JavaScript. This plugin demonstrates creating such dialog and data exchange between plugin and JavaScript running in html page loaded by WebKit. Besides script you will also need to have webkit.htm in plugin's folder (code below).

Script code:

function DpiAdjust(x) {
    return Round(x * Script.DpiScale);
}

var Web, Form, btn;

function WebkitTest(Sender) {
    Form = new TForm(Application);
    Form.Width = DpiAdjust(450);
    Form.Height = DpiAdjust(450);
    Form.Caption = "Webkit Test";
    Web = Script.CreateScriptableWebkit(Form, Script.GetPath + "webkit.htm", "");
    Web.OnLoadEnd = &OnWebkitLoadEnd;
    Web.Subscribe("Webkit Test Data", &OnWebkitData);
    Web.Webkit.Top = 0;
    Web.Webkit.Left = 0;
    Web.Webkit.Width = Form.ClientWidth;
    Web.Webkit.Height = Form.ClientHeight - DpiAdjust(30);
    Web.Webkit.Anchors = akLeft || akRight || akTop || akBottom;
    btn = new TButton(Form);
    btn.Parent = Form;
    btn.Caption = "Test";
    btn.Top = Form.ClientHeight - DpiAdjust(29);
    btn.Left = DpiAdjust(5);
    btn.Width = DpiAdjust(100);
    btn.Height = DpiAdjust(27);
    btn.OnClick = &OnButtonClick;
    btn.Anchors = akBottom;
    btn.Visible = true;
    Form.ShowModal;
    delete Web;
    delete Form;
}

function OnWebkitData(channel, data) {
    alert("Data received from webkit: " + data);
    return "Thanks for the data";
}

function OnWebkitLoadEnd(Sender, Browser, Frame, Status, Res) {
    Web.Send("Just Loaded", "Start doing something!");
}

function OnButtonClick(Sender) {
    Web.Send("Button Click", "Button was clicked");
}

Script.RegisterDocumentAction("", "Webkit Test", "", &WebkitTest);

webkit.htm:

<!DOCTYPE HTML>

<html>

<head>
    <title>Title</title>
</head>

<body>

<a href="javascript:var s = WeBuilderData.SendWithCallback('Webkit Test Data', document.body.innerHTML, 'WebuilderResponseCallback');">Click me</a>

<script>
function WebuilderResponseCallback(s) {
    alert('WeBuilder replied:\n' + s);
}

WeBuilder_OnData = function(data1, data2) {
    alert('WeBuilder sent us:\n' + data1 + '\n' + data2);
}
</script>
</body>

</html>

Notes

WeBuilder_OnData is magical JavaScript function that gets called when plugin sends data to WebKit browser using ScriptableWebkit.Send.

Related Topics