The file Example/scripting.html can be used to illustrate many of the methods from the Zed Custom API. It consists of an HTML page with a separate JavaScript file Example/scripting.js that uses properties, methods and events to create an interactive demo illustrating the solution to the quadratic equation. Clicking on the above link will bring up the demo in its own window and display a succession of expressions in a fixed-size instance of the Zed component. Once the demo runs to completion, typing the Enter key in the Zed window restarts the demo in a window that resizes itself to accomodate the expression being shown. The demo uses facilities from each of the smaller APIs described in the following subsections.

Initialization Properties:

• AutoSize
• GrabFocus
• FontSize

Zed provides the boolean property AutoSize to allow the container to specify that it supports the ability of the component to automatically resize itself as the expression changes. If this property is set to true, the component will resize itself and notify the container with appropriate events. Typically this property is used by the container to flow text or other objects around the component.

Zed provides the boolean property GrabFocus to allow the container to arrange for a particular instance of the editor to have the focus when the container document is first loaded. This property is useful if there are several instances of the editor on a single page, and the intent is that one particular instance should get the attention of the user first.

Zed provides the string property FontSize to allow the container to modify the default font size for a particular instance of the editor. Setting the value of this property changes the value of the fontsize attribute in the presentation of the MathML content contained in the document associated with this instance of Zed.

<object id="zedit" width="50%" height="50%"
        classid="CLSID:8D917303-E449-465A-B882-90EFB15B8492">
  <param name="AutoSize" value="false"/>
  <param name="GrabFocus" value="true"/>
  <param name="FontSize" value="24pt"/>
</object>

The above code, taken from the file Example/scripting.html, illustrates how to insert the Zed component into an HTML page, and how to set the initial values of the AutoSize, GrabFocus, and FontSize properties that will be used when the component is first created. In this example, the value of AutoSize starts out as false, and the value of GrabFocus is set to true, and the initial FontSize is set to 24pt. The value of AutoSize is later set to true by a call to the function SetAutoSize() that can be found in the file Example/scripting.js:

function SetAutoSize()
{
  // This form resizes Zed to fit the expression
  document.zedit.AutoSize = true;
}

Synchronization Properties:

• ReadyState

Synchronization Events:

• ReadyStateChange
• Onload
• Update
• Submit

In addition to the stock event ReadyStateChange and the stock property ReadyState, Zed also provides three custom events that control synchronization with external scripts and other components. The Onload event is fired once Zed has been completely loaded and all of its data structures have been initialized. This event allows script writers a means of ensuring that Zed is ready to accept other method calls before the script initiates other actions. The Update event is fired each time the expression being edited is changed. This event can signal any number of different conditions, including user input, script actions, or file or configuration loading. The Submit event is fired upon request by the user, typically in response to a keyboard accelerator as specified by the configuration. This event is typically bound to a key such as the Enter key, but may be rebound as desired by the script writer.

<script language="JavaScript" for="zedit" event="Onload()">
  CallShowPalette();
  CallShowFormat();
  CallAddConfig();
  ShowContent( 1 );
</script>

<script language="JavaScript" for="zedit" event="Submit()">
  CallShowPalette();
  CallShowFormat();
  SetAutoSize();
  ShowContent( 1 );
</script>

The above code fragment illustrates one way to provide JavaScript code that responds to the synchronization events. When the Onload event is fired, JavaScript functions are called to show a palette, to add configuration information, and to start the demo. Putting these calls in such an event handler ensures that the component is properly instantiated before the methods are called. When you press the Enter key, the Submit event is fired and the demo is restarted, this time with the AutoSize property set to true.

Configuration Methods:

• LoadConfig
• SaveConfig
• GetConfig
• SetConfig
• AddConfig
• ReadConfig
• WriteConfig

Zed provides the LoadConfig and SaveConfig methods for loading and saving the entire collection of configuration options to a named file in a compressed format. The GetConfig and SetConfig methods allow access to a particular section of the configuration options using an expanded string format, and the AddConfig method can be used to augment that string with additional declarations. The ReadConfig and WriteConfig methods allow these section-specific strings to be read from or written to a particular file, aiding the creation of the compressed configuration files. Many of these methods take as their first argument the key name of the configuration property being accessed, identified using one of the six built-in strings used to name each section, as described in the Configuration section.

function CallAddConfig()
{
  // This form makes Zed display plus as a circled plus
  document.zedit.AddConfig( "layouts", "(eq plus (mo ⊕))" );
}

The CallAddConfig function illustrated above demonstrates how the AddConfig method can be used inside a script to customize the appearance of the multiplication symbol so that it appears as a visible centered dot. Much more elaborate examples would follow a similar pattern.

Document Markup Properties:

• MmlContent
• MmlPresent
• MmlCurrent
• MmlSource
• ZedContent
• ZedPresent
• ZedCurrent
• ZedSource

Zed provides properties for accessing the document markup string for the expression being edited. This markup is somewhat human-readable, but is typically more suited for parsing by another application or component in cooperation with the editor. The MmlContent and MmlPresent properties give read/write access to the MathML content and presentation markup for the document, and the MmlCurrent property gives access to the MathML content markup for the current expression selected by the expression cursor. The MmlSource property gives access to the filename used to initialize the document. Each of these properties has a corresponding version for accessing the internal Zed markup for each expression.

function ShowContent( n )
{
  var str = GetContent( n );

  ...

  // This form replaces the entire expression
  document.zedit.MmlContent = str;

  ...
}

The file Example/scripting.js contains the function ShowContent that cycles through a sequence of expressions as the main part of the example. One variation of this function uses the MmlContent property to replace the expression displayed by the component with the value of the variable str. The function GetContent is used to collect up all of the MathML strings (not shown here) at the end of the file.

Document Labels Properties:

• MmlContentById
• MmlPresentById
• ZedContentById
• ZedPresentById

In addition to giving access to the current expression, Zed provides parameterized properties for accessing the content or presentation markup (in either MathML or Zed format) for elements in the document that are identified with an id attribute. The MmlContentById and MmlPresentById properties give read/write access to the MathML content and presentation markup for the element identified with the id attribute whose value matches the parameter given. Corresponding parameterized properties ZedContentById and ZedPresentById allow access to the internal Zed markup for expressions identified in the same way. Ultimately these properties would be superceded by providing more complete support for the Document Object Model in addition to the Zed Custom API.

function ShowContent( n )
{
  var str = GetContent( n );

  ...

  // This form replaces the expression with id='id<n>'
  document.zedit.MmlContentById( "id" + n ) = str;

  ...
}

The actual version of the function ShowContent used in the file Example/scripting.js illustrates the use of the document labels, using the parameterized property MmlContentById. The use of this property allows the GetContent method to contain much shorter strings that are used to replace only a subpart of the expression, as referenced by the id attribute.

Document Position Properties:

• ZedPosition
• ZedPositionById

Zed provides two additional properties for controlling the position of the expression cursor in a document. The ZedPosition property provides access to the position of the current expression as a list of indices that describe how to navigate from the root element of the document to the current expression, where each index specifies which argument of the expression is to be selected. The ZedPositionById property provides access to the id attribute of the current expression and can be used to move the expression cursor to a particular expression by setting its value to the id attribute of the expression to be selected.

  ...

  // This form moves the expression cursor using a list of indices
  document.zedit.ZedPosition = "(1 2 1 2 1 1 2)";

  // This form moves the expression cursor using an id attribute
  document.zedit.ZedPositionById = "rhs";
  ...
}

User Interface Methods:

• ShowPalette
• HidePalette
• ShowFormat
• ApplyTemplate
• ApplyTemplateByName

This version of the editor provides basic programmatic control over the user interface for the editor, in addition to the configuration customization interfaces described in the Configuration section. The ShowPalette and HidePalette methods can be used to show or hide particular palettes available to the user. The ShowFormat method can be used to control the layout formatting switches that appear on the formatting toolbar. The ApplyTemplate and ApplyTemplateByName methods can be used to invoke an editing template by specifying either the template rule itself, or by specifying the name of an existing template, respectively.

function CallShowPalette()
{
  // This form makes the Greek palette visible
  document.zedit.ShowPalette( "Greek" );
}

function CallHidePalette()
{
  // This form makes the Greek palette invisible
  document.zedit.HidePalette( "Greek" );
}

function CallShowFormat()
{
  // This form makes the invisible times operator visible
  document.zedit.ShowFormat( "times", "true" );

  // This form makes the structure of associative operators visible
  document.zedit.ShowFormat( "assoc", "true" );

  // This form keeps the invisible apply function operator invisible
  document.zedit.ShowFormat( "apply", "false" );
}

To complete the code fragments given above, here are the definitions for the methods CallShowPalette and CallHidePalette, that each call the respective methods from the Zed Custom API to show and hide the Greek palette at the beginning and end of the example. The definition for the method CallShowFormat demonstrates how to call the ShowFormat method to control several of the layout formatting switches that appear on the formatting toolbar.

  // This form applies the sin template by supplying the template itself
  document.zedit.ApplyTemplate( "(eq (sin +) (sin +))" );

  // This form applies the sin template by giving the name of the template
  document.zedit.ApplyTemplate( "cos" );

This final code fragment illustrates how to call the ApplyTemplate and ApplyTemplateByName methods to invoke editing templates. When calling the ApplyTemplate method, the template to be invoked appears as the argument to the method. In the case illustrated above, the template being invoked is the one that introduces the <sin> operator around the current expression. When calling the ApplyTemplateByName methods, the name of the template to be invoked appears as the argument to the method. In the case illustrated above, the template being invoked is also the one that introduces the <cos> operator around the current expression.