当前页面: 开发资料首页 → Javascript 专题 → 对WebUI技术感兴趣的说

对WebUI技术感兴趣的说

摘要: 对WebUI技术感兴趣的说

Not(Not pleased by external gains, Not saddened by personnal losses.)
MSN：notking@hotmail.com

你想知道Web的UI可以做到哪种境界？
你想不想试试用脚本开发Web程序(就像开发Windows的程序那样)？
如果你的回答是肯定的，那么我告诉你一个好东西：Bindows！<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

什么是Bindows：
Bindows™ is a Graphical User Interface Toolkit for writing rich client side web applications with the look, feel and behavior of modern Windows™ applications. Bindows applications are lightweight applications with zero footprint which means no installation required.

To view Bindows™ in action view one of the samples or try out the forum.

获取Bindows：
http://www.i-see.net/bindows

看看用Bindows开发出来的东西：
http://www.i-see.net/bindows/documentation/samples/

如何使用Bindows？
As is often common, we start of with the classic Hello World example. This example application shows how to create and add a text label.

The application code

var label = new BiLabel("Hello World");
label.setPadding(5);
application.getWindow().add(label);

The first thing we do is to create a new label object with the text "Hello World". Then we set the padding to 5 (default is 0). Finally we get the BiApplicationWindow object and adds the label to that.

The Application Description File

All applications in Bindows™ are defined by an XML file. This XML file is often referred to as the Application Description File or ADF for short. The ADF can be seen as the entry point to the application. There is a naming convention for the application class name and the XML file name. If the application class name is HelloWorld then the XML file name must be HelloWorld.xml (or HelloWorld.extension).

Creating the Application Class

Once the file HelloWorld.xml is loaded the static method HelloWorld.main is called. Therefore we create a class with a static method called main. The main method just creates a new instance of the HelloWorld application.

// define constructor

function HelloWorld() {

var label = new BiLabel("Hello World");

label.setPadding(5);

application.getWindow().add(label);

}

// define static main method

HelloWorld.main = function () {

new HelloWorld();

};

Creating the XML

The above JavaScript code needs to be located inside a script block in the Application Description File.

<?xml version="1.0"?>

// define constructor

function HelloWorld() {

var label = new BiLabel("Hello World");

label.setPadding(5);

application.getWindow().add(label);

}

// define static main method

HelloWorld.main = function () {

new HelloWorld();

};

]]></script>

View this XML file in your browser

The XML above contains two sections, the window element, which describes how large the window should be and the resources element which contains the application code inside a script element.

Launching the Application

We have now defined everything that is needed for a simple application but there is one more thing to do and that is to tell the web browser how to launch the application. This can be done in basically two different ways.

Using the Launcher Script

The easiest way to do this is most likely to use the bilauncher.js file provided in the html/js/ directory. This file provides a function called biExec which executes the application. First include the js file:

src="../../html/js/bilauncher.js"></script>

Then you can call the biExec function like this:

biExec('../../html', 'HelloWorld.xml');

The first argument points to the root directory of the Bindows™ toolkit (relative URI) and the second argument is the relative URI to the Application Description File.

To create a link that calls this use the following:

return false;">Launch HelloWorld.xml

Launch HelloWorld.xml

Troubleshooting

The location and the relative paths are important. If you get an error message saying that "Object expected" then make sure that the bilauncher.js file is found from the current page.

If you get an error message saying "File not found" then the path to the ADF is not correct. The path to the ADF is relative to the current page. You can also use an absolute URL for this.

If a new window is opened but saying "The page cannot be displayed" the path to the Bindows system root is incorrect. The path to the Bindows system root is relative to the current page. You can also use an absolute path if you find these more convenient.

The paths given in the examples on this page are set up so that if you download the Bindows framework you'll be able to run the samples given in the samples/helloworld/ directory inside the zip file.

Create a new HTML file

When you are using the launcher described above the browser will navigate to html/bimain.html and then load the ADF. You can also create a new HTML page and start your ADF from that. The main reason to do it this way is that allows you to have an HTML page as the entry point to the application. To do this you can copy the content of bimain.html and modify it accordingly:

<head>

Hello World

src="../../html/js/application.js"></script>

</head>

<body>

"HelloWorld.xml");</script>

</body>

View this HTML file in your browser

The first argument to application.start is the URI to the Bindows™ toolkit root directory and the second is the URI to the ADF.

Troubleshooting

Once again the paths are important. If you get an error saying "appliction is undefined" then the application.js file was not correctly included. Make sure that the path from the current page to the application.js file is correct. The path to the js file is relative to the HTML file. You can also use an absolute path if you find these more convenient.

If you get several errors saying "Error loading file" and then the file names make sure that the first argument to application.start is the relative path to the Bindows system directory. You can also use an absolute path if you find these more convenient.

If you get an error saying "Error loading ADF" then the ADF XML file could not be found using the path relative the current page. Make sure that the path to the XML is correct (giving the location of the current page, or use an absolute URL).

如果你也和我一样对此激动不已，那我再告诉你一个网址：http://webfx.eae.net，爱好DHTML技术的朋友别告诉我你不知道它！

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: JScript中正则表达函数的说明与应用
后一篇: Dhtml:用ondrag事件简单的实现鼠标拖动物件.