分享
 
 
 

对WebUI技术感兴趣的说

王朝html/css/js·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

Not(Not pleased by external gains, Not saddened by personnal losses.)

MSN:notking@hotmail.com

你想知道Web的UI可以做到哪种境界?

你想不想试试用脚本开发Web程序(就像开发Windows的程序那样)?

如果你的回答是肯定的,那么我告诉你一个好东西:Bindows!

什么是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"?>

<application>

<window caption="Hello World" width="300" height="200"/>

<resources>

<script><![CDATA[

// 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>

</resources>

</application>

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:

<script type="text/javascript"

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:

<a href="#" onclick="biExec('../../html', 'HelloWorld.xml');

return false;">Launch HelloWorld.xml</a>

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:

<!-- Back Compat -->

<html xmlns:v>

<head>

<title>Hello World</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta http-equiv="MsThemeCompatible" content="yes">

<link type="text/css" rel="StyleSheet" href="../../html/css/bimain.css">

<script type="text/javascript"

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

</head>

<body>

<script type="text/javascript">application.start("../../html",

"HelloWorld.xml");</script>

</body>

</html>

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技术的朋友别告诉我你不知道它!

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有