eterna框架-view

view在eterna框架中是用于渲染显示页面的，最终会在jsp中显示，回顾一下我们之前写的view.jsp页面

<%@ page session="false" contentType="text/html;charset=UTF-8"%>
<%@ page import="self.micromagic.eterna.view.impl.ViewTool"%>
<%@ taglib prefix="e" uri="http://code.google.com/p/eterna"%>
<% String id = "_" + ViewTool.createEternaId(); %>
<e:init parentElement="eternaShow" divClass="eternaFrame" printHTML="2" suffixId="<%=id%>">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <e:res url="/res/jquery.js" />
    <e:res url="/res/eterna.js" />
</e:init>

在该页面中，我们引用了eterna提供的标签，init就是用于初始化eterna在页面上显示的内容的，该配置最后会生成一个形如

<div id="eternaShow_1" class="eternaFrame"></div>

的DIV元素，而这个DIV的内容就是我们编写的view的内容，对于页面上的共性部分我们可以直接hi俄编写在jsp中，在eterna中引用并展示不同的view即可，今天我们就来看看如何编写view。

在环境搭建中，我们编写了一个非常简单的view，名字为index.view

<view name="index.view">
   <component name="div" type="div" comParam="text:'this is my first eterna application.'" />
</view>

这个view中只包含了div，并且div的文本内容为：this is my first eterna application.，下面我们就在这个基础上进行扩展。

我们就以登录页面为例：

代码如下：

<view name="index.view">
    <component name="table" type="table" comParam="attr:{align:'center'},css:{border:'1px red solid'}">
        <component name="tr" type="tr">
            <component name="td" type="td" comParam="attr:{colspan:2,align:'center'},text:'用户登录'" />
        </component>
        <component name="tr" type="tr">
            <component name="td" type="td" comParam="text:'用户名'" />
            <component name="td" type="td">
                <component name="input" type="input-text" comParam="objName:'userId'" />
            </component>
        </component>
        <component name="tr" type="tr">
            <component name="td" type="td" comParam="text:'密码'" />
            <component name="td" type="td">
                <component name="input" type="input-password" comParam="objName:'password'" />
            </component>
        </component>
        <component name="tr" type="tr">
            <component name="td" type="td" comParam="attr:{colspan:2,align:'center'}">
                <component name="submit" type="input-submit" />
                <component name="reset" type="input-reset" />
            </component>
        </component>
    </component>
</view>

对于刚使用eterna的小伙伴来说，会感觉编写view比直接编写页面要复杂，但是上手之后就会感觉其实还是很方便的，使用eterna的view可以很方便的进行重写，易于扩展，这些后面会提到。

component元素表示页面上的一个标签

属性名	说明
name	“Component”的名称
generator	指定”Component”的实现类, 这个类必须实现 [“self.micromagic.eterna.view.ComponentGenerator”]接口
type	“Component”的类型, 如: “br”, “div”, “input-text”, “select”等
ignoreGlobal	是否忽略全局属性设置, 默认为”false”
beforeInit	作用同before-init子节点
initScript	作用同init-script子节点
comParam	作用同component-param子节点
attributes	“Component”的属性, 格式为: {name}={value}[;{name}={value} …]

这段示例中，我们编写了纯粹静态的view，在view中，我们是可以直接编写js的，下面我们来完善这个登录，为其添加表单是否为空的判断

修改submit按钮对应的component，代码片段如下：

<component name="submit" type="input-submit">
   <events>
      <event name="click"><![CDATA[ if(!_eterna.getWebObj("userId").val()) { alert("用户编号不能为空！"); return false; } if(!_eterna.getWebObj("password").val()) { alert("密码不能为空！"); return false; } ]]></event>
   </events>
</component>

events标签代表事件集合，event代表具体的事件，在这里我们使用了_eterna.getWebObj，表示获取指定id的元素，等价于：jQuery(“#userId”)，_eterna还为我们提供了其它实用的方法，需要使用的时候我们再说，另外，eterna为我们提供了一个webObj对象，该对象就表示当前的component对应的元素，可以方便我们操作。

在component标签下还有一些子标签，大家可以尝试使用一下，体会效果。

附上修改后的index.xml完整代码：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE eterna-config PUBLIC "eterna" "http://eterna.googlecode.com/files/eterna_1_5.dtd">

<eterna-config>
   <factory>
      <objs>
         <export name="index.export" path="/view.jsp" viewName="index.view" />
         <model name="index" modelExportName="index.export" transactionType="notNeed" />
         <view name="index.view">
            <component name="table" type="table" comParam="attr:{align:'center'},css:{border:'1px red solid'}">
               <component name="tr" type="tr">
                  <component name="td" type="td" comParam="attr:{colspan:2,align:'center'},text:'用户登录'" />
               </component>
               <component name="tr" type="tr">
                  <component name="td" type="td" comParam="text:'用户名'" />
                  <component name="td" type="td">
                     <component name="input" type="input-text" comParam="objName:'userId',attr:{id:'userId'}" />
                  </component>
               </component>
               <component name="tr" type="tr">
                  <component name="td" type="td" comParam="text:'密码'" />
                  <component name="td" type="td">
                     <component name="input" type="input-password" comParam="objName:'password',attr:{id:'passeord'}" />
                  </component>
               </component>
               <component name="tr" type="tr">
                  <component name="td" type="td" comParam="attr:{colspan:2,align:'center'}">
                     <component name="submit" type="input-submit">
                        <events>
                           <event name="click"><![CDATA[ if(!_eterna.getWebObj("userId").val()) { alert("用户编号不能为空！"); return false; } if(!_eterna.getWebObj("password").val()) { alert("密码不能为空！"); return false; } ]]></event>
                        </events>
                     </component>
                     <component name="reset" type="input-reset" />
                  </component>
               </component>
            </component>
         </view>
      </objs>
   </factory>
</eterna-config>