页面效果预览

基本功能：打开这个页面的时候显示一个按钮，按钮单击可以出现一个"Hello World!"的信息提示框

说明

该范例较为简单，但是我们可以学习到几个知识点:

• 可以没有JSP--通过dorado的视图文件(View)我们不仅可以定义控件也可以定义布局;
• 页面访问URL与视图文件View的对应关系
• 视图中view节点的title属性的含义
• 按钮对象的基本使用
• 了解MessageBox的基本用法

无JSP开发

我们注意到这个范例是没有JSP的,它的全部信息都定义在一个com/bstek/dorado/sample/basic/HelloWorld.view.xml的xml文件中，在dorado开发中我们称它为视图配置文件，也叫View。在dorado的视图配置文件中我们不仅可以定义页面中所包含的控件，也可以方便的定义控件之间的布局(dorado提供了专门的布局管理器以及控件本身也可以是容器，控件之间可以有父子关系，因此较容易定义布局)。----当然了在必要的情况下我们也可以引入JSP和HTML这一类的技术来完成和定义自己的页面。这个不在本例讨论范围内。
我们看范例的xml文件的定义：

<?xml version="1.0" encoding="UTF-8"?>
<ViewConfig>
  <Arguments/>
  <Context/>
  <Model/>
  <View layout="padding:20">
    <Property name="title">HelloWorld</Property>
    <Button id="button1">
      <Property name="caption">Greeting from Dorado ...</Property>
    </Button>
  </View>
</ViewConfig>

可能这样直接看原始代码比较费劲，我们可以利用dorado的IDE查看和编辑这个XML文件,找到sample-center中com/bstek/dorado/sample/basic目录下的HelloWorld.view.xml文件,并用Dorado View Editor模式打开,可以看到:

其中仅包含了一个标题为"Greeting from Dorado ..."的按钮,我们当前目录下的HelloWorld.js控制器，在其中可以看到button1绑定的onClick事件：
代码非常简单：

// @Bind #button1.onClick
!function() {
    dorado.MessageBox.alert("Hello World!");
}

该处利用dorado的MessageBox弹出一个Hello World!的提示。

您一定很奇怪这样的js写法，这里采用的是Javascript Controller技术。

URL与View的关系

HelloWorld.view.xml文件的资源路径为com/bstek/dorado/sample/basic/HelloWorld.view.xml。相应的，我访问该视图时使用的URI是/com.bstek.dorado.sample.basic.HelloWorld.d。相信您不难找出两者之间的映射规律，这里有两点值得注意：

• 视图配置文件和访问URI之间的映射关系并不仅限于此一种，事实上您可以利用Dorado的配置文件非常灵活的定义它们之间的映射方式。
• 如果您有兴趣，也可以尝试以/com/bstek.dorado.sample.basic.HelloWorld.d、/com/bstek.dorado.sample/basic.HelloWorld.d等形式的URI来访问同一个视图。这表示您可以自行确定HelloWorld页面的根路径。通常，我们建议您保持所有页面的路径位于应用的根路径中，这将在页面需要引入CSS、图片等外部资源时给您带来N多的便利。

dorado中的视图配置文件与Java存放在一起，默认与class一起部署到web应用的classes目录中。