UDN-企业互联网技术人气社区

板块导航

浏览  : 9449
回复  : 41

[技术平台] [分享]uapweb平台嵌入HTML的3种方法(v63)

[复制链接]
dingrf的头像 楼主
发表于 2014-9-2 21:03:46 | 显示全部楼层 |阅读模式
本帖最后由 dingrf 于 2014-9-2 21:15 编辑

uapweb平台嵌入HTML主要有以下3种方法:

1. 使用jsp页面


准确的讲,这种方法是将平台控件嵌入到jsp页面中。可参考63版本中的portal登录页面。目录结构如下:


QQ图片20140902194149.jpg

注意,目录中不再有uimeta.um文件,取而代之的是umeta.jsp文件。该jsp文件与正常的jsp文件无差别。只要引用平台的标签库:

  1. <%@ taglib uri="http://www.ufida.com/lfw" prefix="lfw" %>
  2. <%@ taglib uri="http://www.ufida.com/ra" prefix="ra" %>
复制代码
便可在jsp文件中引入当前window中的view,以及view中的控件。页面示例:
  1. <%@ page contentType="text/html;charset=UTF-8" %>
  2. <%@ taglib uri="http://www.ufida.com/lfw" prefix="lfw" %>
  3. <%@ taglib uri="http://www.ufida.com/ra" prefix="ra" %>
  4. <html>
  5.         <head>
  6.                 <lfw:base/>               
  7.                 <lfw:head/>               
  8.                 <lfw:pageImport/>
  9.         </head>
  10.         <body>        
  11.         <lfw:pageModel>                        
  12.                 <lfw:widget id="main">
  13.                                  <div style="width:50px;overflow:hidden;">
  14.                                         <ra:label id="tiplabel" widgetId='main'></ra:label>
  15.                                  </div>
  16.                                  <div style="width:50px;overflow:hidden;">
  17.                                          <ra:textcomp id="randimg" widgetId='main'/>
  18.                                  </div>
  19.                                  <div style="width:50px;overflow:hidden;">
  20.                                         <ra:button id="submitBtn"  widgetId='main' className="login_button_div" ></ra:button>
  21.                                  </div></p><p>                                <div>
  22.                                  <!-- 其他html内容 -->
  23.                                </div>
  24.                 </lfw:widget>
  25.         </lfw:pageModel>
  26.         </body>
  27. </html>
复制代码




2. 使用WebPartComp控件

该控件主要有两个属性可加入HTML片段,最简单的是直接设置控件的"innerHTML"属性,该属性支持在事件中动态修改属性值。示例如下:

  1.                 String html = "<div>......</div>";
  2.                 WebPartComp webpartComponent = (WebPartComp) mainView.getViewComponents().getComponent("testWebPart");
  3.                 webpartComponent.setInnerHTML(html);
复制代码

另一个属性为"contentFetcher",属性值为某一个实现了"nc.uap.lfw.core.comp.IWebPartContentFetcher" 接口的fetcher类的类名称(含包名)。fetcher类主要有两个方法:

  1. //获取html片段
  2. public String fetchHtml(UIMeta um, LfwWindow pm, LfwView view);
  3. //获取脚本
  4. public String fetchBodyScript(UIMeta um, LfwWindow pm, LfwView view);
复制代码

在fetcher类的这两个方法中分别设置要加入到页面中的html片段以及javascript脚本。



3.页面布局中使用html模板

正常的页面布局的容器中,可以不放入平台控件,而是指向当前view目录下的某个html文件,如下:

a.png

uimeta.um文件:

  1.     <FlowvLayout id="flowv_1">
  2.         <FlowvPanel id="flowv_1_p1" template="mainForm.html">
  3.         </FlowvPanel>
  4.     </FlowvLayout>
复制代码

这样,在这个panel中就会嵌入对应html文件中的内容。
如果想在html中使用平台控件,也是可以的,只要在某个div上增加两个属性"compType"以及 "compAttr"。
"compType"为控件类型,可设置如下:

类型 描述
TextField文本输入框
FormComp表单
FormElement表单元素
GridComp表格
TreeViewComp
Menubar菜单
Button按钮
IFrameIFrame
Label标签
Image图片
LinkComp链接
ChartComp 图表
ListViewComp列表控件


"compAttr"为控件属性,可设置如下:
类型 描述 是否必须
id控件id
width 控件宽度
height 控件高度
align 锚定
left 左边距
top 上边距
position 定位
maxWidth 最大宽度
className 样式
autoExpand 自动扩展列宽(Grid专用)
label_position 标签位置(Form专用)
type 输入框类型(TextField专用)
textAlign 文本位置(Label专用)
family 文字字体(Label专用)
size 文字大小(Label专用)
form_id FormElement所在的form的id(FormElement专用)
eleWidth FormElement宽度(FormElement专用)


示例:

  1. <DIV>
  2.         html模板测试
  3. </DIV>
  4. <DIV style="height:50px;border:1px red solid;padding-top:20px" compType="FormElement" compAttr="form_id:editForm;id:contents;"></DIV>
复制代码


.



发表于 2014-9-3 15:13:58 | 显示全部楼层
UP
使用道具 举报

回复

发表于 2014-9-3 19:13:44 | 显示全部楼层
顶起


使用道具 举报

回复

发表于 2014-9-15 13:27:21 | 显示全部楼层
学习了                     
使用道具 举报

回复

发表于 2014-9-23 14:08:38 | 显示全部楼层
学习了
使用道具 举报

回复

发表于 2014-9-23 14:45:08 | 显示全部楼层
学习了
使用道具 举报

回复

发表于 2014-10-24 06:25:49 | 显示全部楼层
顶        
使用道具 举报

回复

发表于 2014-10-24 09:29:12 | 显示全部楼层
学习了,谢谢楼主分享!
使用道具 举报

回复

发表于 2014-10-24 16:07:51 | 显示全部楼层
不懂开发所以还不知这个如何使用,不过支持了,文档排版很Cool~
使用道具 举报

回复

发表于 2014-10-27 10:55:47 | 显示全部楼层
先看看了
点评 ( 5 ) 收起 / 展开点评

晨运 2015年08月21日 09:55 详情 回复

不好意思,怎么发出来那么多问题呢

晨运 2015年08月18日 10:45 详情 回复

问下楼主,在编辑页面,如何触发编辑前和编辑后相应的事件,比如,我想编辑一个卡片中的经办人和经办部门之间的关系,需要处理编辑前后事件,编辑经办部门后,需要设置经办人为空,这样的情况,求解。。。

晨运 2015年08月18日 10:45 详情 回复

问下楼主,在编辑页面,如何触发编辑前和编辑后相应的事件,比如,我想编辑一个卡片中的经办人和经办部门之间的关系,需要处理编辑前后事件,编辑经办部门后,需要设置经办人为空,这样的情况,求解。。。

晨运 2015年08月18日 10:45 详情 回复

问下楼主,在编辑页面,如何触发编辑前和编辑后相应的事件,比如,我想编辑一个卡片中的经办人和经办部门之间的关系,需要处理编辑前后事件,编辑经办部门后,需要设置经办人为空,这样的情况,求解。。。

晨运 2015年08月18日 10:45 详情 回复

问下楼主,在编辑页面,如何触发编辑前和编辑后相应的事件,比如,我想编辑一个卡片中的经办人和经办部门之间的关系,需要处理编辑前后事件,编辑经办部门后,需要设置经办人为空,这样的情况,求解。。。

使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部