對WebUI技術感興趣的說 (轉)

對WebUI技術感興趣的說 (轉)[@more@]

Not(Not pleased by external gains, Not saddened by personnal losses.)
：to:notking@.com">notking@hotmail.com

你想知道的UI可以做到哪種境界？
你想不想試試用指令碼開發Web(就像開發的程式那樣)？
如果你的回答是肯定的，那麼我告訴你一個好東西：Bindows！:namespace prefix = o ns = "urn:schemas--com::office" />

什麼是Bindows：
Bindows™ is a Graphical User Interface Toolkit for writing rich client s 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 /bindows/documentation/samples/">samples or try out the . 

獲取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 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 script code needs to be located inside a script block in the Application Description File.

 

 

 

 

 

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.file provided in the html/js/ directory. This file provides a function called biExec which executes the application. First include the js file:

Then you can call the biExec function like this:

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

The first argument points to the 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:

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 the Bindows you'll be able to run the samples given in the samples/helloworld/ directory inside the zfile.

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 --&gt

 

 

 

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).

 

如果你也和我一樣對此激動不已，那我再告訴你一個網址：，愛好技術的朋友別告訴我你不知道它！