【www.gdgbn.com--js教程】

Users’ Guide

Compiled by Solaris_navi on Apr. 2008

Engine Version: 0.97

Document Version: 0.97_Modify_1

Abstract

The goal of this guide is to introduce how to use this JavaScript Engine Beta Version for GUIXML correctly to create a basic web application.

 

CONTENTS

Chapter 1 A GUIXML file......................................................................................................................... 2

1.1 Structure of GUIXML.................................................................................................................. 2

1.1.1 Main Body Containers.................................................................................................... 2

1.1.2 Solution.......................................................................................................................... 2

1.1.3 Forms............................................................................................................................. 3

1.1.4 Reaction......................................................................................................................... 5

1.2 A well-formed GUIXML file.......................................................................................................... 5

Chapter 2 Properties of Components.................................................................................................... 7

Chapter 3 Preload HTML file................................................................................................................. 9

3.1 Preload Codes............................................................................................................................. 9

3.2 Custom Codes........................................................................................................................... 10

3.2.1 in the scope of ................................................................................................. 10

3.2.2 in the scope of ................................................................................................. 10

Chapter 4 Custom events.................................................................................................................... 11

4.1 Function Naming....................................................................................................................... 11

4.2 Engine Interfaces....................................................................................................................... 12

 

Chapter 1 A GUIXML file

In this section, you can understand how to create a correct GUIXML file, which is supported by current JS Engine Beta Version.

Note: JS Engine Current Version only supports WELL-FORMED GUIXML File now.

1.1 Structure of GUIXML

Here is to introduce the basic structure of a GUIXML file.

1.1.1 Main Body Containers

All the GUIXML file start with the tag and end with . In the body of , there are three tags: , and . GUIXML file similar to the one shown below appear (Code 1.1):

Code 1.1 the sample of simple structure of GUIXML file.

 

1.1.2 DataModel and Flavor In Solution

The engine currently version only support two tags of Solution: Datamodel and Flavor.

You can define some data model by add a tag with its value of id as a DOM table identity, and add the tag with its source xml file, in the container , sample code as the Code 1.2. Then you can use these data model by referencing.

 

Code 1.2 Structure of Datamodel:

     

          src="guixml file path"/>

     

 

The container is similar to the Class in Java. It defines default component styles and values. It means that if you don’t configure your component styles or values in the custom way, the styles and values will be replaced by these default styles and values you defined in . contains tag , which define the name or the identity of default styles and values set, as Class Name in Java, you can set the attribute type of to define the name of this set. contains one tag or more, tag will define every styles and values according to your definition. Each has an attribute name, which is the name of this attribute, and the value of is the value of this attribute. Attribute name can be two types: one is text, another is CSS Style. Type text defines the default value and type CSS Style defines the default style of the component. The sample code shows below as Code 1.3.

 

Code 1.3 Structure of Flavor

     

        Default Label

        red

        5

     

 

       This sample shows that, it defines an attribute set named labeltype and it contains three attributes in two types: the default value and style, which is the text Default Label and the style “color = red; size = 5”.

 

1.1.3 Forms in Solution

       All components are defined in the scope of the container . Please follow the instructions below to create a frame with components, or controllers:

-          Create a frame

All components except frame need a parent component. A frame should be defined like this:

 

Code 1.4 Structure of Component Frame

       

            Frame

            (Optional) frameName

       

                           

                                     …..

                           

        

 

       Note: Frame needs at least one component.

      

-          Add components

Component should be defined like this:

 

Code 1.5 Structure of General Component

       

              Component Type

              (Optional) type text value

               (Optional) type style value

           

                

 

Every component contains an attribute named rendering, engine current version supports: Label, TextField, TextArea, Button, Submit, Reset, DataPanel, Password, Image, RadioButton, CheckBox, ComboBox, List and Link. Component has its own default or custom text value, which is the required property and it help the engine defined the shown-out text. If there is a RadioButton, CheckBox, ComboBox or List, you can define the options split by “|”. There is an RadioButton example shown below:

Code 1.6 Example of a RadioButton

      

           

              RadioButton

option1|option2|option3|option4

           

   

 

-          Link Data if need

In the Solution, if you defined a datamodel, then you would have a datamodelid as a identity name of a path of a xml file.

Note: the xml file should be well-formed, otherwise, error(s) will be caused.

       If you really have a datamodel now, you can reference data from the xml file.

 

       Code 1.7 Link data Demo

datamodelid="datamodelid" idref="xpath">

      

You can insert a reference similar to Code 1.7 to tag .

       And if you define a DataPanel, you can show all data in the xml file with a configuration        schema.

       There is a example shows that how to define a DataPanel with referenced Data.

 

       Code 1.8 Example of a well-formed Data XML file: “Stduent.xml”

Mike

Computer Science

21

Jane

Computer Science

22

Jack

Computer Engineering

20

Daniel

Computer Engineering

21

Juliet

Information Science

21

 

       And if we want to use this xml file, we should have a definition in <solution>.

 

       Code 1.9 DataModel Definitions in Solution

     

          src=" Student.xml"/>

     

   

      

       Then add a component in <forms>.

      

       Code 1.10 DataPanel Example

             

           

              DataPanel

              name="datamodelid">showstudent

              name="xmldatastructure">student|@no,name,dept,age

                                        

         

          

       Now, you have a DataPanel with the data from “Student.xml”.

 

1.1.4 Reaction in Solution

    Reaction is the scope that defines buttons behaviors. The Engine currently supports only the Button with behaviors. The structure of <Reaction> shows as below:

 

Code 1.11 Structure of Reaction

       

           

                <trigger class="action" idref="Component (button) Name"/>                

           

           

                <adapter name="actionName" class="JavaScript Function"/>              

           

               

   

 

The attribute idref of trigger is the name of the button or other component support further, and the attribute class of adapter is the JavaScript Function which defined in Custom events (incident.js). You can define a 1 to 1, 1 to N, N to N action here. It means that you can define one or more components to one function, or one component to more than one function.

 1.2 A well-formed GUIXML file

The engine now cannot parse a broken or incomplete GUIXML file, so a well-formed GUIXML file is need to create a application by using this engine. A well-formed GUIXML file should contain similar tags as the follow example (Code 1.12):

 

Code 1.12 A well-formed GUIXML File

<guixml>

  <solution>

    <datamodel>

      <model id="showstudent">

          <instance src="data_test.xml"/>

      model>

     

         …………

    datamodel>

    <flavor>

      <attributes type="labeltype">

        <attribute name="text">Default Labelattribute>

        <attribute name="color">red

        …………

      attributes>

     

     …………

      flavor>

    <forms>

    <component class="frametype" id="frame1">

        <flavor>

            <attribute name="rendering">Frameattribute>

            <attribute name="text">Instruction

        flavor>

        <component class="labeltype" id="ilabel1">

            <flavor>

              <attribute name="rendering">Labelattribute>

              <attribute name="text">

                  <reference type="xml" datamodelid="instruction" idref="/instruction/title/text()">

                  reference>

             

              <attribute name="color">blue

              <attribute name="font-size">18

            flavor>

          component>

          <component class="labeltype" id="ilabel2">

            …………

本文来源：http://www.gdgbn.com/wangyezhizuo/13290/