Next Previous

Retired Document

Important: This sample code may not represent best practices for current development. The project may use deprecated symbols and illustrate technologies and techniques that are no longer recommended.

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

    "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

<html>

<head>

    <title>Sample WebKit Safari Plug-In</title>

<script type="text/javascript" language="JavaScript"><!--

    /* the following four routines are called by our plugin

    to notify the JavaScript on this page about changing

    values inside of the plug-in */

function speedValueChangedTo(newSpeedValue) {

    var speedField = document.getElementById('speed');

    speedField.value = newSpeedValue;

    return null;

function curvatureValueChangedTo(newCurveValue) {

    var curveField = document.getElementById('curve');

    curveField.value = newCurveValue;

    return null;

function ticksValueChangedTo(newTicksValue) {

    var ticksField = document.getElementById('ticks');

    ticksField.value = newTicksValue;

    return null;

    /* the following three routines are called in response to

    button clicks beside the individual settings.  Here, we call

    methods on the plug-in to set the new values. */

function SetNewSpeed() {

    var speedField = document.getElementById('speed');

    var jsPlugin = document.getElementById('jsPlugin');

    jsPlugin.SetSpeed(speedField.value);

function SetNewCurve() {

    var curveField = document.getElementById('curve');

    var jsPlugin = document.getElementById('jsPlugin');

    jsPlugin.SetCurvature(curveField.value);

function SetNewTicks() {

    var ticksField = document.getElementById('ticks');

    var jsPlugin = document.getElementById('jsPlugin');

    jsPlugin.SetTicks(ticksField.value);

    /* called when the page finishes loading.  We use this opportunity

    to call retrieve the current settings from the plug-in and display

    them in the fields on the page. */

function CompletePageLoad() {

    var speedField = document.getElementById('speed');

    var curveField = document.getElementById('curve');

    var ticksField = document.getElementById('ticks');

    var jsPlugin = document.getElementById('jsPlugin');

    speedField.value = jsPlugin.GetSpeed();

    curveField.value = jsPlugin.GetCurvature();

    ticksField.value = jsPlugin.GetTicks();

    GetTitle();

    GetTotal();

    return null;

    /* The following three methods are called in response to clicks on the preset

    buttons.  They show how to call methods defined on the plug-in that receive

    more than one parameter.  */

function PresetOne() {

    var jsPlugin = document.getElementById('jsPlugin');

    jsPlugin.SetSpeedTicksAndCurve(33,14,90);

function PresetTwo() {

    var jsPlugin = document.getElementById('jsPlugin');

    jsPlugin.SetSpeedTicksAndCurve(56,9,30);

function PresetThree() {

    var jsPlugin = document.getElementById('jsPlugin');

    jsPlugin.SetSpeedTicksAndCurve(89,14,75);

    /* the following are called in response to clicks on the buttons

    beside the title and total fields.  These calls show how javascript

    can access instance variables defined in the Objective-C plug-in

    class using the accessor methods defined on that class for those

    variables. */

function GetTitle() {

    var jsPlugin = document.getElementById('jsPlugin');

    var titleField = document.getElementById('title');

    titleField.value = jsPlugin.title;

function GetTotal() {

    var jsPlugin = document.getElementById('jsPlugin');

    var totalField = document.getElementById('total');

    totalField.value = jsPlugin.total;

function SetNewTitle() {

    var jsPlugin = document.getElementById('jsPlugin');

    var titleField = document.getElementById('title');

    jsPlugin.title = titleField.value;

function SetNewTotal() {

    var jsPlugin = document.getElementById('jsPlugin');

    var totalField = document.getElementById('total');

    jsPlugin.total = totalField.value;

// -->

</script>

</head>

<body onLoad="CompletePageLoad();" background="background.gif">

<form>

<table border="0" cellpadding="12">

<tr><td valign="top" colspan="2" align="center">

    <embed name="jsPlugin" id="jsPlugin"

        width="500" height="300" type="application/x-javascriptplugin"></embed>

</td></tr>

<tr><td valign="top">

<p>speed = <input type=text id="speed" value="???"> <input type=button value="set" onclick="SetNewSpeed();"></p>

<p>curve = <input type=text id="curve" value="???"> <input type=button value="set" onclick="SetNewCurve();"></p>

<p>ticks = <input type=text id="ticks" value="???"> <input type=button value="set" onclick="SetNewTicks();"></p>

</td><td valign="top">

<p>title = <input type=text id="title" value="???"> <input type=button value="get" onclick="GetTitle();"> <input type=button value="set" onclick="SetNewTitle();"></p>

<p>total = <input type=text id="total" value="???"> <input type=button value="get" onclick="GetTotal();"> <input type=button value="set" onclick="SetNewTotal();"></p>

<p><input type=button value="Preset One" onclick="PresetOne();">

<input type=button value="Preset Two" onclick="PresetTwo();">

<input type=button value="Preset Three" onclick="PresetThree();"></p>

</td></tr>

</table>

</form>

</body>

</html>

Next Previous