在Java Web 应用程序上放入YUI Face

　　关于应用程序

　　该程序为储存秘密数据如银行账号和网站登陆证书提供了一个网络接口。还可以是生日和约会追踪的选择。这个方法是解释如何执行银行和网站证书的存储。另外两个功能是留给你自己去完成的。Figure 1 和 Figure 2 提供了一个程序运行时的样子。

　　点击左上方的bank按钮会出现管理银行数据的界面(参见Figure 1)。点击已列出的银行标志让用户可以在选定的银行上查看和修改具体细节。

　　在该页右侧的内嵌控制板显示了日志信息。

　　设计：平衡JavaScript和HTML

　　用JavaScript 开发一个rich user interface (RUI)出现了一个挑战那就是到底使用多少HTML和多少JavaScript。任何事情都使用JavaScript和AJAX(从下载UI元素开始)但是没有HTML是会在服务器上强加很多要求的。最好的策略就是让每一个功能或是模块保证有一页HTML并且还要有JavaScript页用于RUI行为，例如动画，拖放，发送服务器请求和处理来自UI元素的事件。这个策略就是本文中的应用程序所要使用的。

　　布局

　　程序的屏幕区被分成以下四个部分(参加Figure 1)以此来达到理想的功能：

　　· Action Area:　这个容器包含了按钮("Bank, " "Web, " "Birthdays," 和 "Appointments")，让用户可以选择管理哪一个条目。

　　· Listing:　这个容器里有银行，网络等等的登陆列表，这取决于选择的内容。

　　· Work area:　这个容器占据了页面的大部分。它显示了在列表面板上已选择的条目的完整细节。

　　· Console: 这个容器显示状态信息。

　　为了获得理想的布局，HTML标记需要第一个被定义。本程序下载的源代码中的file/index.html显示如下：

      < body class="yui-skin-sam">

　　< div id="actionDiv">

　　< /div>

　　< div id="optionsDiv">

　　< /div>

　　< div id="workspaceDiv">

　　< /div>

　　< div id="consoleDiv">

　　< /div>

　　< /body>