创建HTML视图

创建HTML视图

• 描述
• 定义新的HTML视图的步骤
  • 插入HTML和Deluge任务
    
  • 嵌入表单/视图
  • 嵌入小工具
    
• 关于HTML视图标签
  
• 示例HTML视图
  

描述

 百会Creator 3.0新增的一个强大功能就是支持创建HTML视图。HTML视图允许您通过结合HTML代码和Deluge脚本来创建定制的视图。 您可以创建一个静态的HTML页面作为视图，并使用此页面通过Deluge脚本来传输您数据库中的动态数据。HTML构件器提供了灵活的拖拽界面，从而方便的创建您所需要的HTML视图。要使用此功能，并不需要您拥有HTML的专业知识，您也可以得心应手的使用HTML视图的强大功能。

•  创建包含报表列表的仪表板页面，从而使用户可以快速方便地访问他们所需要的信息。例如：在页面的左边显示所需要的报表，而在页面的右边显示包含应用信息的表格。
  
• 根据存储在您应用中的数据来创建自定义的结算单和发货单。
  
• 向HTML视图嵌入表单、视图以及第三方插件，并可以将表单数据作为参数传递给视图，从而生成功能强大的动态视图。
  

定义新的HTML视图的步骤

1. 在编辑模式下选择视图 -> 新建视图。
2. 指定视图名称，选择视图源表单，选择视图将要放置的单元，然后点击完成来创建HTML视图。
   
3. 显示HTML构件器，其中HTML、嵌入和Deluge任务等显示在左边面板，而文本编辑器则显示在右边面板。如下图所示：
   
4. 您可以通过点击选择模板按钮，基于某个模板创建您的视图；或者通过插入HTML/Deluge任务、嵌入表单/视图和嵌入小工具的方式从头创建视图。
5. 点击保存脚本来保存视图。
6. 使用显示预览页签来预览创建的视图。
7. 如果您精通HTML和Deluge脚本的使用，您可以使用自由脚本页面书写HTML代码来从头创建视图。

插入HTML和Deluge任务

1. 拖拽插入Html任务到编辑区域，以插入HTML标签到您的视图。
2. 点击编辑按钮，并且从插入HTML对话窗口中选择复杂文本模式或者简单文本模式编辑器，从而为视图添加所需要的HTML代码。
3. 使用Deluge表达式构件器中的插入表达式按钮添加表达式到您的视图。
   

   

4. 拖拽Deluge任务到编辑器区域，来获取并显示视图中指定位置的记录。例如：如下图所示，Deluge声明for each就放置在表格行的头部。对于添加新的收入表单的每次重复，就会创建一个新行来显示存储在每个记录中的日期和数量。
   

嵌入表单/视图

嵌入表单/视图任务的功能允许您嵌入百会Creator表单和视图到您的HTML视图中。请通过如下步骤执行此操作：

1. 拖拽嵌入 -> 表单/视图任务到编辑器区域，从而可以嵌入您的百会Creator表单和视图到HTML视图中。
   
2. 嵌入对话框页面列出了您帐号中创建的所有应用。在选择应用列表中，选择所需要的应用。
   
3. 选择表单组件来嵌入一个表单，或选择视图组件来嵌入一个视图。
4. 选择要嵌入到HTML视图中的表单/视图。
   
5. 表单嵌入属性允许您指定表单名称（如果需要的话），允许您指定提交表单时所转向的URL地址，允许您自定义表单提交成功时的提示信息，还允许您自定义提交/重置按钮的显示名称。
6. 点击完成，将配置好的嵌入代码加入HTML构件器中。
   

    

7. 表单嵌入代码将被插入到HTML视图的<div>标记之间，如下图所示：

    

   htmlpage Sample_HTML_View() displayname = "Sample HTML View" content <%{%> <div elName='zc-component' formLinkName='Monthly_Report_Pie_Chart' params='zc_Header=true&zc_SuccMsg=Data Added Sucessfully!&zc_SubmitVal=Submit&zc_ResetVal=Reset'>Loading Form...</div> <%}%>

    

    

8. 当插入一个视图时，视图属性将提供启用/禁用显示视图页头、页脚和添加/编辑记录链接的功能，如下图所示：

    

9. 基于配置好的选项，视图嵌入代码将被插入到HTML视图的<div>标记之间，如下图所示：  

    

   htmlpage Sample_HTML_View() displayname = "Sample HTML View" content <%{%> <div elName='zc-component' viewLinkName='Expense_Report_By_Category' params='zc_Header=true'>Loading View...</div> <%}%>

    

嵌入小工具

小工具指的是可以嵌入到HTML页面中的大块代码段。例如：来自第三方站点的广告、链接和图片等。一般来说，小工具都来自第三方，并且以模块、片段和插件的方式嵌入到HTML页面中。要嵌入小工具到HTML视图：

1. 从页面左边面板的树状菜单中拖拽嵌入-> 小工具任务选项到编辑器区域。 
2. 在小工具对话框页面，指定小工具的宽度、高度、是否滚动、框架宽度以及小工具URL地址。
3. 点击完成，添加小工具代码到HTML构件器中。

4. 基于配置的选项，小工具的嵌入代码将插入到HTML视图中的<iframe>标记之间，如下所示： 

添加参数到HTML视图

使用文本编辑器右上角的添加参数按钮，来传送参数到HTML视图。指定的参数将被添加到视图定义中，如下面的格式所示。在下面的代码中，两个名为开始日期和结束日期的参数被传送到“Expense Report By Date”的HTML视图中。

关于HTML视图标签

1.使用在HTML视图中的开始和结束标签将显示为如下的格式。例如：如下面所示的HTML视图，"Sample HTML View"是HTML视图的名称。此视图将会插入一个标题为"Income vs Expenditure"的表格：

2. 能将Deluge任务从HTML代码中分离开的标记是<% 和%>标记。如果Deluge表达式使用在HTML代码之间，则<%=和%>就用来区分Deluge表达式和HTML代码。如下面所示：

- Deluge任务for each插入在HTML任务之间，用来循环每个记录，并且使用r作为add_new_income的表单变量。 
- Deluge任务for each放置在<%和%>标记之间，用来区分任务和HTML代码。 
- 每次循环，都会使用HTML标记<tr></tr>生成一个新行。 
- r.Date_field和r.Amount是用来显示行中的每列数据的Deluge表达式。此Deluge表达式放置在<%=和%>标记之间。

提示：	1. 用来区分Deluge任务和HTML代码的是<%和%>标记。  2. 用来区分Deluge表达式和HTML代码的是<%=和%>标记。  3. 在HTML视图中，HTML构件器高亮显示Deluge任务。 在HTML视图中，您可以根据需要使用多个<%和%>标记。但是在每次使用时，一定保证标记成对出现！

示例HTML视图

让我们以一个反馈应用为例回顾一下相关内容，此应用用于提交和分配与软件相关的错误和问题。如下所示的提交反馈表单用来提交和分配问题给与某个模块相关的团队成员。模块名称是模块表单的一个查找字段，而分配给是团队成员表单的一个查找字段。 

列表视图

下面显示的是通过上述表单提交问题以及分配给团队成员的列表视图。

但是，如果假设您想创建一个分配给每个模块的问题总计摘要视图，或想创建一个分配给每个团队成员的问题总计摘要视图，那么使用百会Creator提供的默认视图如列表视图、网格视图或摘要视图是不可能实现的。这时候，HTML视图就派上用场了。使用HTML代码和Deluge脚本结合来生成定制的HTML视图，就能轻而易举的实现您想要的功能了。

HTML视图

现在，让我们学习如何创建一个简单的HTML视图，来显示分配给某个特定模块/成员的问题摘要。如下面所示： 

HTML视图代码

下面显示了上述HTML视图的代码。HTML任务（绿色标记）和Deluge任务（蓝色标记）结合创建了所需要的视图。<%和%>标记用来识别Deluge任务。如果Deluge脚本使用在HTML代码之间，则需要使用<%=和%>标记。