The interfaces in pimshell are implemented in the form of web pages. The website architecture used by pimshell generally contains three files,. Htm/. xml/. js.. The HTM file defines the DOM elements in the interface. The. xml file is the behavior required for Dom element appending (behavior), and The. js file implements JavaScript code. For example, you need to create three files: list.htm/list.htm. xml/list.htm. js. The Code is as follows:
1、list.htm File
- <HTML xmlns = "http://www.w3.org/1999/xhtml">
- <Head>
- <Title> User List </title>
- <Link type = "text/CSS" rel = "stylesheet" href = "/CSS/main.css"/>
- <XML src = "list.htm. xml"> </XML>
- <SCRIPT type = "text/JavaScript" src = "list.htm. js" Language = "JavaScript"> </SCRIPT>
- </Head>
- <Body>
- <Div id = "list1"> </div>
- </Body>
- </Html>
- Row 4: defines the page style. InMain.cssThe following style is set for the body in the file:
- Body
- {
- Behavior: URL (# default # pimshell );
- }
This style adds a default behavior called pimshell to the body element. This action is responsible for parsing the subsequent XML file and initiating the onpageload event to execute the code in the JS file.
Row 5: defines the XML file and attaches a behavior to the DOM element on the page.
Row 6: defines the JS file and contains the required JavaScript code.
Row 9: defines a div element named list1 to display list information.
22.16list.htm. xml file
- <? XML version = "1.0" encoding = "UTF-16"?>
- <Page>
- <Root enableframe = "false" enablecontextmenu = "false">
- <Controls>
- <Control ID = "list1">
- <Behaviors>
- <Listview autofitrows = "false" allowpage = "false">
- <Header>
- <Cols>
- <Col name = "name" text = "name" width = "60">
- <Bind>
- <Text> [# name #] </text>
- </Bind>
- </COL>
- <Col name = "sex" text = "gender" width = "40">
- <Bind>
- <Text> [# Sex #] </text>
- </Bind>
- </COL>
- <Col name = "email" text = "email" width = "80">
- <Bind>
- <A href = "mailto: [* Email *]"> </a>
- </Bind>
- </COL>
- </Cols>
- </Header>
- </Listview>
- </Behaviors>
- </Control>
- </Controls>
- <Events>
- <Onpageload handler = "onpageload"/>
- </Events>
- </Root>
- </Page>
- Row 5: Define element list1 as a part
- Row 7: Add behavior listview for list1
- Row 8-26: Define the attribute columns used in the list
- Row 32: bind the event onpageload
32.16list.htm. JS File
- // Event: onpageload
- Function onpageload ()
- {
- // Prepare the record set
- VaR oentityset =__ prepareentityset ();
- // Bind
- $ ("List1"). datasource = oentityset;
- $ ("List1"). databind ();
- }
- // Prepare the record set
- VaR g_susers = "Zhang San, male, zhangsan@msn.com; Li Si, male, lisi@msn.com; Wang Xia, female, wangxia@msn.com ";
- Function _ prepareentityset ()
- {
- //
- VaR oentityset = SYS. entityset;
- //
- VaR ouserarray = g_susers.split (";");
- For (VAR I = 0; I <ouserarray. length; I ++)
- {
- // Add a new record
- Oentityset. addnew ();
- //
- VaR oproparray = ouserarray [I]. Split (",");
- Oentityset ("name") = oproparray [0];
- Oentityset ("sex") = oproparray [1];
- Oentityset ("email") = oproparray [2];
- }
- // Move to the header
- Oentityset. movefirst ();
- Return oentityset;
- }
- Row 2: RESPONSE event onpageload
- Row 5: Construct an oentityset for testing.
- Line 8-9: bind the record set oentityset to the element list1 to display the list.
4. webpage Running Effect
