通过导入HTML模板定义应用程序UI
可以使用rhstudio显示模板设计一个表单或显示组件，现在可以使用您最喜爱的HTML编辑器创建一个HTML文档，并将其导入到模型中。您可以根据需要格式化页面，
添加图像和设置颜色，从而将HTML页面转换为应用程序。
我们将通过首先把已经制作完成的HTML表单导入到rhstudio应用程序中，然后演示如何使用输入该表单的数据来模拟一个rhstudio进程来演示此功能。
我们将导入的表单基于一般的“表单布局”模板。
关于演示文件
为了简化这个演示，我们准备了一个压缩文件（html-templates.zip），其中包含从HTML和CSS文件，并放在一个文件夹层次结构中，这样就可以轻松导入rhstudio应用程序，如下所示：
models/
HTML文件/
Columnar.html（基于columnar.htm 1）
Horizontal.html（基于horizontal.htm 1）
Margin.html（基于margin.htm 1）
Un-styled.html（基于index.htm 1）
Vertical.html（基于vertical.htm 1）
web/
CSS /
forms.css（forms.css的副本）
info.css（info.css的副本）
main.css（main.css的副本）
stylesheet.css 2
1 对原始文件执行了以下更改：
为了集中讨论我们的演示，已经删除了实际表单元素之前的所有内容，即从<DIV id ='experimenting'>到<FORM id = ...之前的</ P>标记的所有标记。
我们已经将<input class ='submit' value ='提交我的详细信息' type ='submit'>中的（最后一个表单元素）type ='submit' 更改为type ='button'类型。这样做是为了覆盖HTML表单行为，
因此单击提交按钮会导致页面的重新加载。
2 stylesheet.css是由rhstudio创建。唯一的目的是在css子文件夹中导入三个CSS文件，以便在显示其中一个模板时，rhstudio平台可以访问在这些文件中定义并由模板引用的样式。
创建演示rhstudio应用程序并向其添加HTML模板文件
我们希望演示的导入HTML模板功能需要HTML模板文件显示在项目的模型存储库中。存储库资源管理器显示项目模型子文件夹的内容，因此必须将模板添加到模型文件夹的子文件夹中。
这可以通过文件系统手动完成，也可以使用eclipse提供的导入机制 - 这是下一步使用的方法。
将html-templates.zip下载到您的计算机。
启动rhstudio。
创建一个新的rhstudio应用程序 - 称为IMPORT HTML演示。
将html-templates.zip导入到新应用程序中：
选择文件 - >导入...以打开文件导入向导
选择Zip文件，然后单击下一步>
在"从归档文件："中，输入html-templates.zip的完整路径 - 您可以使用“浏览...”按钮找到它
在"至文件夹："中，指向导入HTML演示（您刚创建的应用程序）的根目录 - 您可以使用浏览...按钮找到它
单击完成以完成将HTML模板文件导入应用程序。
要验证导入是否成功，请切换到“资源管理器”视图，并检查“导入HTML演示”应用程序是否现在包含HTML文件包 - 它应与以下截图类似：
导入HTML模板
我们现在可以演示导入HTML模板，它读取一个HTML文件并创建相应的rhstudio模型。它将创建一组显示模型，以支持rhstudio中显示和控制导入的模板中包含的HTML元素。
在资源库资源管理器中，右键单击其中一个模板 - 例如Columnar.html - 并从上下文菜单中选择导入HTML模板，如以下屏幕截图所示：
从上下文菜单中选择导入HTML模板
将显示一条通知消息，当您确认时，将包含名为Columnar的新包名称（也称为Columnar）将包含一个名为Columnar的HTML显示元素，如以下截图所示：
在rhstudio应用程序中显示模板
现在我们有一个HTML显示模型，我们可以在rhstudio视图中显示模板，如下所示：
将一个新的Display / View元素从调色板拖到“模型编辑器”中的“导入HTML演示”根系统中。
将Columnar模型从存储库拖动到编辑器中的View元素中。您的模型应与以下截图类似：
保存你的工作 现在可以通过从Application Server视图启动应用程序来查看应用程序。它应该看起来类似于以下截图：
编辑模板以识别交互点
到目前为止，我们已经展示了在rhstudio中显示外部设计的html表单的能力。
当然，为了真正有用，我们的rhstudio应用程序应该能够与表单进行交互 - 这是以表单形式显示的读/写数据，并对诸如按下的按钮等事件做出反应。
为了允许rhstudio和html表单之间的交互，我们将rhstudio特定的标记属性element_name添加到原始模板中，以确定要与之交互的表单元素。
例如，我们将通过将rhstudio特定的属性element_name添加到表单中的相关标签来识别名字和姓氏输入字段以及“提交我的详细信息”按钮，如下所示：
在资源管理器中，右键单击Columnar.html模板，然后选择打开方式 - >文本编辑器。这将在rhstudio的文本编辑器中打开模板。
找到标签<input id =“firstName1”name =“firstName1”value =“First name”type =“text”>，并添加一个element_name属性，
如下所示：<input id =“firstName1”name =“firstName1”value =“名字”type =“text”element_name =“First”>。
找到标签<input id =“lastName1”name =“lastName1”value =“Last name”type =“text”>并添加一个element_name属性，
如下所示：<input id =“lastName1”name =“lastName1”value =“姓氏”type =“text”element_name =“Last”>。
找到标签<input class =“submit”value =“提交我的详细信息”type =“button”>并添加一个element_name属性，
如下所示：<input class =“submit”value =“提交我的详细信息”type =“按钮“element_name =”提交“>。
将您的更改保存到Columnar.html。
使用rhstudio将更改同步到模板
接下来，我们将使更改与rhstudio应用程序同步，以便应用程序识别我们希望交互的表单元素。同步意味着更新rhstudio模型以反映导入的HTML文件的更改：
在存储库中找到Columnal HTML显示元素，右键单击它以打开上下文菜单，然后选择与HTML模板同步，如以下屏幕截图所示：
此同步的结果将是创建3个额外的显示元素，对应于我们在模板中标识和命名的3个元素，并提供元素名称。这些新创建的模型显示在以下截图中：
保存你的工作,如果您在浏览器中查看应用程序，您应该注意到虽然表单的部分现在与rhstudio显示元素相关联，但是窗体的视觉外观没有变化。
创建与导入的表单交互的流程模型
要完成我们的演示，我们将模拟一个业务处理，当提交我的详细信息按钮被按下时，检查是否输入了标题和姓名，如果其中缺少某一个输入项就提示用户，
在模型编辑器中，放大<提交按钮>模型。
添加一个先祖参照Columnar html元素（通过右键单击上下文菜单）。
将集合/存在模板从模型面板拖到按钮模型中。命名它首先存在删除我们不会使用的<是>退出。
创建一个将Columnar / First / <Value>连接到First Exists / Item的流程。
将另一个Collections / Exists模板从调色板拖到按钮中。命名它最后存在。删除我们不会使用的<是>退出。
创建一个将Columnar / Last / <Value>链接到Last Exists / Item的流程。
将调色板中的常量/文本模板拖到按钮中。命名请输入您的名字和姓氏。
创建一个将First Exists / <No>链接到刚才添加的常量的流程。
创建另一个将Last Exists / <No>链接到同一个常量的流程。
将显示操作/警报模板从调色板拖到按钮中。
创建一个将常量链接到Alert / <Message>的流程。
您的模型应与以下截图类似：
我们来测试刚完成的模型：
保存您的工作并在浏览器中查看您的应用程序。
留下标题或姓氏为空，然后按提交我的详细信息。
你应该收到提示。
附加信息
同步不是一次性过程，您可以重复同步过程，因为您在html文件中标识可能需要与之进行交互的其他元素。
目前，导入/同步过程支持以下html标签的标识（通过添加element_name属性）：
<Input ... Type =“Text”...> - 映射到rhstudio文本输入字段。
<Span> ... </ Span> - 映射到rhstudio文本显示。
<Input ... Type =“Button”...> - 映射到rhstudio按钮。
一旦html元素至少包含一个已识别的子元素，就会在资源库资源管理器的html元素的上下文菜单中显示“创建相应数据结构”操作（在“与HTML模板同步”操作下）。
此操作将创建一个数据结构，一个Extract ...进程和一个Populate ...进程，
该进程可用于在单个操作中从表单中检索数据或将数据存储在表单中。
它们有助于与表单进行交互的建模 - 特别是当表单包含大量已标识的元素时，
但不是为了访问表单中的数据而需要。
您可以选择不使用此选项，而是建立自己的交互。
