dynamic jin

Dynamic JIN (DJIN) provides direct access to the underlying DOM that describes the structure, behavior, and style of a page. Using the methods of the Node and Document object types, the DOM can be manipulated to create an entirely new page. This is useful for presenting options to a user based on the pages state or updating and adding components by grabbing markup from a remote source. These capabilities are all covered with the examples below.

DOM Basics
Options Example
Footer Example
Where Home Example
Asynchronous Jin and XML (AJAX)

DOM Basics

Sample JIN Page

<jin>
  <script>
  function aFunction() {
    // not doing much
  }  
  </script>
  <form id="addForm" action="./doAdd.jsp" method="GET">
    <input type="hidden" id="add" value=""/>
  </form>
  <body>
    <pr>
      <input type="button" id="aButton" value="Press Me" />
    </pr>
    <pr id="aPr">
      <list id="aList">
        <listitem id="item">
          <text>Item 1</text>
        </listitem>
        <listitem>
          <img src="./some.png" id="aImg"/>
          <text>Item 2</text>
        </listitem>
        <listitem>
          <text>Item 3</text>
        </listitem>
      </list>
    </pr>
    <pr>
      <text>Some text</text>
    </pr>
  </body>  
</jin>

DOM Tree

There are many different ways to reference the same element. If there is a need to reference a particular element, we recommend adding the 'id' attribute. As you can by mousing over the nodes below, without the 'id' attribute there can be lengthy chains of indexing. Additionally, previous DOM manipulation can alter the position of an element. Using the 'id' attribute is the best strategy for element discovery.

(mouse over nodes to see methods of referencing)

Options Example

This example demonstrates how the 'onselect' action attribute calls script to alter the pages underlying DOM. Specifically, clicking 'Yes' displays a warning message by altering the text of an element and also shows a 'Submit' button by inserting a node to the end of the body element.

Options Page

<jin>
  <script>
  var showOptions = false;

  function showOptions(show) {
    if (show != showOptions) {
      showOptions = show;
      if (showOptions) {
        document.msg.text = "'Save' will delete your stored information";
        document.body.insertNode('<pr><input type="button" bg="0xC0C0C0"' +
                                 'align="center" border="1" borderColor="0xFFFFFF"' +
                                 'borderFocus="0xFF9911" value="Submit"/><$/pr>');
        document.reset();
        
        // reset pages 'state'        
        document.choices.setSelected(1);
        setFocus(document.msg);
      }
      else {
        document.msg.text = '';
        document.body.removeNode();
        document.reset();
      }
    }
  }
  </script>
  <body>
    <header>
      <text>>> Perform Save ?</text>
    </header>
    <pr>
      <choice id="choices" border="1" fgFocus="0xFFFFFF" bgFocus="0x990000">
        <input type="choice" border="0" onSelect="showOptions(false)">No</input>
        <input type="choice" border="0" onSelect="showOptions(true)">Yes</input>
      </choice>      
    </pr>
    <pr>
      <text>&nbsp;</text>
    </pr>
    <pr>      
      <text id="msg" align="center"></text>
    </pr>   
  </body>  
</jin>

DOM Tree

Footer Example

Where Home Example

Asynchronous Jin and XML (AJAX)

handset reference

iPhone development

resources