作为一个常用的演示,我们用经典的 Hello World 例子作为开始。这个范例程序向你演示如何添加一个 label。
var label = new BiLabel("Hello World"); label.setPadding(5); application.getWindow().add(label);
我们要做的第一件事是创建一个带有 Hello World 文本的 label 对象。然后设置 padding 为 5(默认是 0)。最后我们获取 BiApplicationWindows 对象并把 label 加进去。
Bindows™ 中所有的应用程序定义为 XML 文件。这个 XML 文件常被称为应用程序描述文件(Application Description File),缩写为 ADF 。这个 ADF 被视为应用程序的入口。这里有个应用程序类名和 XML 文件的命名规则,如果类名是 HelloWorld 那么 XML 文件必须被命名为 HelloWorld.xml (或者 HelloWorld.扩展名)。
这已经不在是必须的,更多信息请看下面部分。
一旦 HelloWorld.xml 被载入,静态方法 HelloWorld.main 将被调用。因此我们要创建一个类,它带有一个名为 main 的静态函数。main 方法仅仅创建一个 HelloWorld 应用程序的实例。
// 定义构造器 function HelloWorld() { var label = new BiLabel("Hello World"); label.setPadding(5); application.getWindow().add(label); } // 定义静态 main 方法 HelloWorld.main = function () { new HelloWorld(); };
从 bindows0.97 开始你可以如类一样省略 main 方法。然而,仍建议你使用 main 方法作为入口点,因为当其它一切载入后它会被调用(除非是在内联代码的情况下)。
上面的 JavaScript 代码要放置在应用程序描述文件的脚本块中。
<?xml version="1.0"?> <Application> <Window caption="Hello World" width="300" height="200"/> <Resources> <Script><![CDATA[
// 定义构造器 function HelloWorld() { var label = new BiLabel("Hello World"); label.setPadding(5); application.getWindow().add(label); } // 定义静态 main 方法 HelloWorld.main = function () { new HelloWorld(); };
]]></Script> </Resources> </Application>
上面的 XML 文件包含两个段,Windows 元素,它描述了窗口大小,Resources 元素,它包含了 Script 元素中的代码。
最简单的方法是使用 html/js 目录下的 bilauncher.js。这个文件提供了 biExec 函数。首先包含此js文件:
<script type="text/javascript" src="../../html/js/bilauncher.js"></script>
然后你可以这样启动应用程序:
biExec('../../html', 'HelloWorld.xml');
第一个参数指明了 Bindows™ 工具包的根目录(相对路径),第二个参数指定 ADF 的相对路径。
创建一个调用的链接使用如下代码:
<a href="#" onclick="biExec(`../../html`, `HelloWorld.xml`); return false;">Launch HelloWorld.xml</a>
文件位置和相对路径是很重要的。如果你获得“Object expected”的信息,请确定 bilauncher.js 的位置是否正确。
如果你得到“File not found”的错误信息,说明 ADF 的路径错误。ADF 的路径是相对于当前页的,你也可以使用绝对路径。
如果弹出“The page cannot be displayed”的新窗口,说明 Bindows 系统路径错误。ADF 的路径是相对于当前页的,如果你觉得方便也可以使用绝对路径。
本页中范例的路径已经设置好了,所以一旦你下载了 Bindows 你就可以运行 samples/helloworld/ 中的例子。
当你用上面的描述来启动时,浏览器将被导航到 html/bimain.html,之后便载入 ADF。你也可以创建一个新的 HTML 页面,从它来启动 ADF 文件。这样做的主要原因是你可以有一个作为应用程序入口点的 HTML 页面。要完成这步,你可以复制 bimain.html 的内容并按下面这样修改:
<!-- Back Compat --> <html xmlns:v="urn:schemas-microsoft-com:vml"> <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>
application.start 的第一个参数指明了 Bindows™ 工具包根目录的 URI,第二个参数是 ADF 的 URI。
再次强调路径是很重要的。如果你得到一个“application is undefined”的错误信息,那就是 application.js 没有被正确包含。请确保当前页面到 application.js 的路径是正确的。js 文件的路径是相对于 HTML 文件的,如果你觉得方便也可以使用绝对路径。
如果你得到几个“Error loading file”跟着文件名的错误,请确认 application.start 的第一个参数是个正确的指向 bindows 系统的相对路径,如果方便你也可以使用绝对路径。
如果你得到“Error loading ADF”的错误信息,说明没有找到 ADF 文件。请确认到 XML 文件的路径是正确的(给出当前页面的位置,或者绝对路径)。