Home > Developer > JavaScript

JAVASCRIPT ENGINE for Guixml USERS ' GUIDE

Source: Internet
Author: User
Tags custom name
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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 be to introduce the "use" this JavaScript Engine Beta Version for guixml correctly to create a BAS IC Web application.

CONTENTS

-->Chapter 1 A guixml file..................................................................................................................... .... -->2 -->

1.1 Structure of Guixml .................................................................................................................. 2

1.1.1 Main body containers .................................................................................................... !--[If Supportfields]> PAGEREF _ Toc196815618 h 2 !--[if GTE mso 9]> 08d0c9ea79f9bace118c8200aa004ba90b02000000080000000e0000005f0054006f00630031003900360038 00310035003600310038000000 !--[if Supportfields]> -

1.1.2 Solution ......................................................................................................................... . !--[if Supportfields]> PAGEREF _toc196815619 H 08d0c9ea79f9bace118c8200aa004ba90b02000000080000000e0000005f0054006f0063003100390036003800310035003600310039000000 !--[if Supportfields]>

1.1.3 Forms ......................................................................................................................... .... !--[If Supportfields]> PAGEREF _ Toc196815620 h 3 !--[if GTE mso 9]> 08d0c9ea79f9bace118c8200aa004ba90b02000000080000000e0000005f0054006f00630031003900360038 00310035003600320030000000 !--[if Supportfields]> -

1.1.4 reaction ......................................................................................................................... !--[if Supportfields]> PAGEREF _toc196815621 H 08d0c9ea79f9bace118c8200aa004ba90b02000000080000000e0000005f0054006f0063003100390036003800310035003600320031000000 !--[if Supportfields]>

1.2 A well-formed Guixml file .......................................................................................................... !--[If Supportfields]> PAGEREF _toc196815622 H 5 "!--[ If GTE mso 9]> 08d0c9ea79f9bace118c8200aa004ba90b02000000080000000e0000005f0054006f0063003100390036003800310035003600320032000000 !--[if Supportfields]>

chapter 2 Properties of components .................................................................................................... !--[If Supportfields]> PAGEREF _ Toc196815623 h 7 !--[if GTE mso 9]> 08d0c9ea79f9bace118c8200aa004ba90b02000000080000000e0000005f0054006f00630031003900360038 00310035003600320033000000 !--[if Supportfields]> -

chapter 3 preload HTML file ................................................................................................................. !--[if Supportfields]> PAGEREF _toc196815624 H 08d0c9ea79f9bace118c8200aa004ba90b02000000080000000e0000005f0054006f0063003100390036003800310035003600320034000000 !--[if Supportfields]>

3.1 preload ......................................................................................................................... .... !--[If Supportfields]> PAGEREF _ Toc196815625 h 9 !--[if GTE mso 9]> 08d0c9ea79f9bace118c8200aa004ba90b02000000080000000e0000005f0054006f00630031003900360038 00310035003600320035000000 !--[if Supportfields]> -

3.2 Custom codes ......................................................................................................................... .. !--[if Supportfields]> PAGEREF _toc196815626 H 08d0c9ea79f9bace118c8200aa004ba90b02000000080000000e0000005f0054006f0063003100390036003800310035003600320036000000 !--[if Supportfields]>

3.2.1 in the scope of ................................................................................................. !--[If Supportfields]> PAGEREF _ Toc196815627 h 10 !--[if GTE mso 9]> 08d0c9ea79f9bace118c8200aa004ba90b02000000080000000e0000005f0054006f00630031003900360038 00310035003600320037000000 !--[if Supportfields]> -

3.2.2 in the scope of <body> ................................................................................................. !--[If Supportfields]> PAGEREF _ Toc196815628 h 10 !--[if GTE mso 9]> 08d0c9ea79f9bace118c8200aa004ba90b02000000080000000e0000005f0054006f00630031003900360038 00310035003600320038000000 !--[if Supportfields]> -

chapter 4 Custom events .................................................................................................................... !--[if Supportfields]> PAGEREF _toc196815629 H 08d0c9ea79f9bace118c8200aa004ba90b02000000080000000e0000005f0054006f0063003100390036003800310035003600320039000000 !--[if Supportfields]>

4.1 Function naming ....................................................................................................................... !--[if Supportfields]> PAGEREF _toc196815630 H 08d0c9ea79f9bace118c8200aa004ba90b02000000080000000e0000005f0054006f0063003100390036003800310035003600330030000000 !--[if Supportfields]>

4.2 Engine Interfaces ....................................................................................................................... of

Chapter 1 A guixml file

In this section, you can understand how to create a correct guixml file, which are supported by the current JS Engine Beta vers Ion.

Note : JS Engine current Version of supports well-formed guixml File now.

1.1 Structure of Guixml

This is to introduce the basic structure of a guixml file.

1.1.1 Main Body Containers

All the Guixml file "start with" tag <guixml> with </guixml>. In the body of <guixml>, there are three tags: <solution>, <forms> and <reaction>. Guixml file similar to the one shown below appear (Code 1.1):

Code 1.1 The sample of simple structure of guixml file.

<guixml>

<solution>

<datamodel>

</datamodel>

<flavor>

</flavor>

<forms>

</forms>

<reaction>

</reaction>

</solution>

</guixml>

1.1.2 Datamodel and flavor in Solution

The engine currently version only support two tags of solution:datamodel and flavor.

Can define some data model by add a tag <model> with its value of ID as a DOM table identity, and add the tag &L T;instance> with it source XML file, in the container <datamodel>, sample code as the code 1.2. Then can use this data model by referencing.

Code 1.2 Structure of Datamodel:

<datamodel>

<model id= "ModelID" >

<instance src= "guixml file path"/>

</model>

</datamodel>

The container &lt;flavor&gt; 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 would be REPL aced by this default styles and values you defined in &LT;FLAVOR&GT;. &lt;flavor&gt; contains tag &lt;attributes&gt;, which define the name or the identity of the default styles and values set, as Class Name in Java, and you can set the attributetypeof &lt;attributes&gt; to define the name of this set. &lt;attributes&gt; contains one tag &lt;attribute&gt; or more, tag &lt;attribute&gt; 'll define every styles and values a Ccording to your definition. Each &lt;attribute&gt; has an attributename, which is the name of this attribute, and the value of &lt;attribute&gt; are the value of this attribute. AttributenameCan be two types:one aretext, another isCSS Style. TypetextDefines the default value and typeCSS StyleDefines the default style of the component. The sample code shows below as code 1.3.

Code 1.3 Structure of flavor

<flavor>

<attributes type= "Labeltype" >

<attribute name= "text" >default label</attribute>

<attribute name= "color " >red</attribute>

<attribute name= "Size" >5</attribute>

</attributes>

</flavor>

This is sample shows that, it defines set named Labeltype and it contains three Attribu TES in two types:the default value and style, which is the text default Label and the stylecolor = red; Size = 5 ".

1.1.3 Forms In Solution

All components are defined in the scope of the container <forms>. 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

<component class= "Frametype" id= "FrameName" >

<flavor>

<attribute name= "Rendering" >Frame</attribute>

<attribute name= "text" > (Optional) framename</attribute>

</flavor>

<component>

....

</component>

</component>

Note: Frame needs at least one component.

-          ADD Components

Component should be defined as this:

Code 1.5 Structure of General Component

<component class= "component Type" id= "Component Name" >

<flavor>

<attribute name= "rendering" >component type</attribute>

<attribute name= "text" > (Optional) type text value</attribute>

<attribute name= "style name" > (Optional) Type style value</attribute>

</flavor>

</component>    

Every component contains a attribute named rendering, engine current version supports: Label, Tex Tfield, TextArea, Button, Submit, Reset, Datapanel, Password, Image, RadioButton, CheckBox, ComboBox, list and Link. Component has its own default or custom text value, which be the required property and it help the engine N-out text. If there is a RadioButton, CheckBox, ComboBox or List, can define the Opti ONS split by "|". There is a RadioButton example shown below:




Code 1.6 Example of a RadioButton

<component class= "Combotype" id= "Radiodemo1" >

<flavor>

<attribute name= "Rendering" >RadioButton</attribute>

<attribute name= "Text" >option1|option2|option3|option4</attribute>

</flavor>

</component>

-          Link Data If need

In the Solution, if you are 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) would be caused.

If You are really have a datamodel now, you can reference data from the XML file.

Code 1.7 Link Data Demo

<reference type= "xml" datamodelid= "Datamodelid" idref= "XPath" ></reference>

You can insert a reference similar to the Code 1.7 to tag <attribute name= "text" ></ATTIBUTE>.

And if you are define a datapanel, you can show all data in the XML file with a configuration Schema.

There is a example shows the how to define a Datapanel with referenced Data.

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

<students>

<student no= "1" >

<name>Mike</name>

<dept>computer science</dept>

<age>21</age>

</student>

<student no= "2" >

<name>Jane</name>

<dept>computer science</dept>

<age>22</age>

</student>

<student no= "3" >

<name>Jack</name>

<dept>computer engineering</dept>

<age>20</age>

</student>

<student no= "4" >

<name>Daniel</name>

<dept>computer engineering</dept>

<age>21</age>

</student>

<student no= "5" >

<name>Juliet</name>

<dept>information science</dept>

<age>21</age>

</student>

</students>

and if we want to use this XML file, we should have a definition in <solution.

Code 1.9 datamodel definitions in Solution

<datamodel>

<model id= "Showstudent" >

<instance src= " student.xmL"/>

</model>

</datamodel>

Then Add a component in <forms.

Code 1.10 datapanel Example

<component class= "Datapaneltype" id= "Datapanelname" >

<flavor>

<attribute name= "Rendering" >DataPanel</attribute>

<attribute name= "datamodelid" >showstudent</attribute>

<attribute name= "xmldatastructure" >student| @no, name,dept,age</attribute& Gt

</flavor>

</component>

Now, your have a datapanel with the data from "Student.xml".

1.1.4 reaction In Solution

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

Code 1.11 Structure of reaction

<reaction>

<if>

<condition>

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

</condition>

<callback>

<adapter Name= "ActionName" class= "JavaScript Function"/>

</callback>

</if>

</reaction>

The attribute idref of Trigger is the name of the button or other component support further, and the ATT Ribute class of adapter is the JavaScript Function which defined in Custom events (incident.js). Can define a 1 to 1, 1 to N, N to n action here. It means can define one or more components to a 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 are need to create a Applicati On 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>

<model id= "Showstudent_2" >

.......

</datamodel>

<flavor>

<attributes type= "Labeltype" >

< attribute name= "text" >default label</attribute>

<attribute name= "COLOR" >red</attribute>

.......

</attributes>

<attributes type= "Frametype" >

.......

</Flavor>

<forms>

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

< flavor >

<attribute name= "rendering" >frame</attribute>

<attribute name= "text" >Instruction</attribute>

</Flavor>

<component class= "Labeltype" id= "Ilabel1" >

<flavor>

<attribute name= "rendering" >label</attribute>

<attribute name= "text" >

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

</Reference>

</attribute>

<attribute name= "COLOR" >blue</attribute>

<attribute name= "Font-size" >18</attribute>

</Flavor>

</component>

<component class= "Labeltype" id= "Ilabel2" >

.......

</component>

<component class= "Frametype" id= "frame2" >

.......

</Forms>

<reaction>

< if >

<condition>

<trigger class= "DoClick" idref= "Button1exit"/>

<trigger class= "DoClick" idref= "Button2exit"/>

...........              

</condition>

<callback>

<adapter name= "Closeme" class= "Hideuponelevel (this.parentnode)"/>  

...........             

</callback>

</if>

<if>

............

</reaction>

</Solution>

</Guixml>

Exception or broken XML error rising May is supported in the Engine further.


Chapter 2 Properties of components

There are 2 types of properties. One is type Text, another is type Styles. The property Text is required for every component. It configures components ' shown text. Properties Type Styles are optional, and it configures components ' shown Styles. It means that if you define a component, there must is one attribute at least in your <attributes> scope: <at Tribute name = "Text" ... </attribute>.

all Styles properties are referred from CSS Styles. All styles are supposed to is supported in the engine of the The "the" version shows in the table below (Table 2.1):

Table 2.1 CSS Styles ' table

Text Properties

Text-indent

Text-autospace

Text-overflow

Test-kashida-space

Vertical-align

Text-justify

Text-align

Ruby-align

Layout-flow

Ruby-position

Writing-mode

Ruby-overhang

Direction

Ime-mode

Unicode-bidi

Layout-grid

Word-break

Layout-grid-char

Line-break

Layout-grid-char-spacing

White-space

Layout-grid-line

Word-wrap

Table Properties

Border-collapse

Empty-cells

Border-spacing

Table-layout

Caption-side

Speak-header

Paddings Properties

Padding

Padding-bottom

Padding-top

Padding-left

Padding-right

Outlines Properties

Outline

Outline-style

Outline-color

Outline-width

Margins Properties

Margin

Margin-bottom

Margin-top

Margin-left

Margin-right

Lists Properties

List-style

List-style-type

List-style-image

Marker-offset

List-style-position

Layout Properties

Clear

Overflow-x

Float

Overflow-y

Clip

Display

Overflow

Visibility

Font Properties

Font

Text-underline-position

Color

Text-shadow

Font-family

Font-variant

Font-size

Text-transform

Font-size-adjust

Line-weight

Font-stretch

Letter-spacing

Font-style

Word-spacing

Font-weight

Text-decoration

Dimensions Properties

Height

Width

Max-height

Max-width

Min-height

Min-width

Borders Properties

Border

Border-style

Border-color

Border-bottom

Border-width

Border-bottom-color

Border-top

Border-bottom-style

Border-top-color

Border-bottom-width

Border-top-style

Border-left

Border-top-width

Border-left-color

Border-right

Border-left-style

Border-right-color

Border-left-width

Border-right-style

Border-right-width

Background Properties

Background

Background-position-x

Background-attachment

Background-position-y

Background-color

Background-repeat

Background-image

Layer-background-color

Background-position

Layer-background-image


How to add attributes please 1.1.2 and 1.1.3.


Chapter 3 preload HTML file

The sample code below (Code 3.1):

Code 3.1 preload HTML File sample

<meta name= "Guixmlfile" content= "Test_frame1.xml"/>

<script language= "javascript" type= "Text/javascript" src= "Xml_parser_v2.js" ></script>

<script language= "javascript" type= "Text/javascript" src= "Basic_comp.js" ></script>

<script language= "javascript" type= "Text/javascript" src= "Preload.js" ></script>

<script language= "javascript" type= "Text/javascript" src= "Incident.js" ></script>

<script language= "javascript" type= "Text/javascript" src= "Hidendisplay.js" ></script>

<script language= "javascript" type= "Text/javascript" src= "Dragndrop.js" ></script>

<script language= "javascript" type= "Text/javascript" src= "Xml.js" ></script>

<link rel= "stylesheet" type= "Text/css" href= "Div-css.css"/>

<body onload= "preload (DIV1);" >

<div id= "Div2" >

<br/>

<b>click the Link below to run the test.</b>

</div>

<div id= "Div1" ></div>

</body>

3.1 Preload Codes

There are some codes in this HTML file, should not is removed (Code 3.2):

Code 3.2 Kernel Codes

<script language= "javascript" type= "Text/javascript" src= "Xml_parser_v2.js" ></script>

<script language= "javascript" type= "Text/javascript" src= "Basic_comp.js" ></script>

<script language= "javascript" type= "Text/javascript" src= "Preload.js" ></script>

<script language= "javascript" type= "Text/javascript" src= "Incident.js" ></script>

<script language= "javascript" type= "Text/javascript" src= "Hidendisplay.js" ></script>

<script language= "javascript" type= "Text/javascript" src= "Dragndrop.js" ></script>

<script language= "javascript" type= "Text/javascript" src= "Xml.js" ></script>

<link rel= "stylesheet" type= "Text/css" href= "Div-css.css"/>

These are codes contain parser, loading scripts, static behaviors, data process and translator, also a CSS style for the Defau Lt style value. If there are any of them missing or removed, engine may cause errors because browser cannot a understand code broken En in JavaScript, such as undefined errors and missing object errors. Keep its process integrity so this engine can run without any unexpected errors.

3.2 Custom Codes

can edit codes in the scope of

3.2.1 In the scope of

Here are only one tag, you can edit is the properties of tag <meta>:

Code 3.3 Meta code

<meta name= "Guixmlfile" content= "Test_frame1.xml"/>

This Meta contains your guixml file name and so can just edit the Your loading file.

Property content supports absolute and relative path

3.2.2 in the scope of <body>

You can add or edit any of the [codes in the scope of <body> by using HTML codes. Please notice:

-          tag <body onload>

<body> Event onload refers a function called preload (). The parameter of this function is the name of the container <div>. It means can change the parameter to select which container for you want to use.

-          container <div>

Every tag has a property named ID, your should edit tag <div> and set the ID property, then can Run the function correctly.

-          Other codes

You can add other HTML codes in the scope of <BODY>, such as the code shown below (code 3.4):

Code 3.4 Custom code in preload HTML file

<div id= "Div2" >

<br/>

<b>click the Link below to run the test.</b>

</div>

......................................




Chapter 4 Custom Events

Can add new functions to the engine current version; Codes must is added in the JavaScript file incident.js.

4.1 Function naming

JavaScript didn ' t have any Code naming Scope, so functions should have a exclusive name. So user custom name should is begin with: func_, then the description of the function. For example: function func_alert (). Here are the codes of the functions referred from Student Management demo (Code4.1):

Code 4.1 Events of Student Management Demo

function func_clear(obj)

 {

//alert (obj.innerhtml);

obj.innerhtml = "";

 }

function func_show_table(obj, XMLName)

 {

var exDOM2;

//alert (XMLName);

for (var fid1=0;fid1<global_reference_model_name.length;fid1++)

      {

if (global_reference_model_name[fid1] = = XMLName)

          {

exDOM2 = Global_xmldoc_dom[fid1];

break ;

          }

      }

var schema = "student| @no, Name,dept,age";

obj.innerhtml = maketable_v2(exDOM2, schema);

 }

function func_add_a_student_dom(xmlname,no,name,age,dept)

 {

var exDOM2;

var Exid;

//alert (XMLName);

for (var fid1=0;fid1<global_reference_model_name.length;fid1++)

      {

if (global_reference_model_name[fid1] = = XMLName)

          {

exDOM2 = Global_xmldoc_dom[fid1];

exid = fid1;

break;

          }

      }

var root = exdom2.documentelement;

newstudent=exdom2.createelement ("student");

Newstudent.setattribute ("No", no.value);

newname=exdom2.createelement ("name");

Newtext=exdom2.createtextnode (name.value);

Newname.appendchild (NewText);

newage=exdom2.createelement ("Age");

Newtext=exdom2.createtextnode (age.value);

Newage.appendchild (NewText);

newdept=exdom2.createelement ("dept");

Newtext=exdom2.createtextnode (dept.value);

Newdept.appendchild (NewText);

Newstudent.appendchild (newname);

Newstudent.appendchild (newdept);

Newstudent.appendchild (newage);

Root.appendchild (newstudent);

//alert (root.xml);

Global_xmldoc_dom[exid] = exDOM2;

 }

function func_del_a_student_dom_from_top(XMLName)

 {

var exDOM2;

var Exid;

//alert (XMLName);

for (var fid1=0;fid1<global_reference_model_name.length;fid1++)

      {

if (global_reference_model_name[fid1] = = XMLName)

          {

exDOM2 = Global_xmldoc_dom[fid1];

exid = fid1;

break;

          }

      }

var root = exdom2.documentelement;

y=exdom2.getelementsbytagname ("student") [0];

root.removechild (y);

//alert (root.xml);

 }

4.2 Engine Interfaces

Engine also has some interfaces to the users. But in this version, the engine provides one function: maketable_v2 ().

This function maketable_v2 (exDOM2, Schema) provides two parameters (or for can call it interfaces): DOM as a O Bject and schema as a string, and then return an HTML code String, so this to return a table with the data related with the The data XML file and a table structure defined by schema.

This feature May is completed in the further version of engine.

This is the end of Users ' Guide. Engine version:0.97. </

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
tablets for disabled users mongodb for mysql users postgres for mysql users javascript report engine javascript v8 engine tutorial spidermonkey javascript engine embedded javascript engine

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More