嵌入外部组件

zhaixin · 发表于 2011-12-27 14:13:05

外部组件根据实现的方法不同，大致分为两类，OCX组件和JS组件。在html中可以嵌入的组件在X5中都可以嵌入。在X5中嵌入外部组件时，不能使用设计器，需要直接编辑w文件的源码，和编辑html编码类似。

外部组件的代码可以放到w文件的<xui:layout>标签中，也可以在设计器的指定位置拖放一个div组件，将外部组件的代码放到这个div标签中。

zhaixin · 发表于 2011-12-27 14:14:34

在w文件中嵌入OCX组件，和在html文件中嵌入差不多，下面以嵌入webOffice组件为例。

示例一
[PHP]
<html>
<head>
</head>
<body>
      <object id=WebOffice1 height=400 width='100%' style='LEFT: 0px; TOP: 0px'  classid='clsid:E77E049B-23FC-4DB8-B756-60529A35FAD5' codebase=WebOffice.cab#V6,0,2,0>
         <param name='_ExtentX' value='6350'>
         <param name='_ExtentY' value='6350'>
      </object>
</body>
</html>
[/PHP]

示例二
[PHP]
<xui:window xmlns:xui="http://www.justep.com/xui" xmlns="http://www.justep.com/xui" xmlns:xforms="http://www.justep.com/xforms" xmlns:xhtml="http://www.w3.org/1999/xhtml" component="/UI/system/components/window.xbl.xml#window">
<xforms:model id="model1"/>
<xui:view id="rootView">
      <xui:layout style="height:100%;width:100%" id="rootLayout">
         <xhtml:object id="WebOffice1" height="400" width="100%" style="LEFT: 0px; TOP: 0px" classid="clsid:E77E049B-23FC-4DB8-B756-60529A35FAD5" codebase="WebOffice.cab#V6,0,2,0">
            <param name="_ExtentX" value="6350"/>
            <param name="_ExtentY" value="6350"/>
         </xhtml:object>
      </xui:layout>
</xui:view>
<xui:resource id="resource1"/>
</xui:window>
[/PHP]

示例一为html文件代码
示例二为w文件代码

zhaixin · 发表于 2011-12-27 14:23:42

三点区别

jsdiff.png (5.05 KB, 下载次数: 2597)

zhaixin · 发表于 2011-12-27 14:24:32

运行效果

zhaixin · 发表于 2011-12-27 14:28:24

在w文件中嵌入JS组件，和在html文件中嵌入差不多，下面以嵌入dhtmlxcalendar组件为例。

示例一
[HTML]
<html>
<head>
      <link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxcalendar.css"/>
      <script src="codebase/dhtmlxcommon.js"></script>
      <script src="codebase/dhtmlxcalendar.js"></script>
</head>
<body>
      <input type="text" id="calendar" />
      <script type="text/javascript">
         window.dhx_globalImgPath = "codebase/imgs/";
         window.onload = function() {
            var cal1 = new dhtmlxCalendarObject('calendar');
         }
      </script>
</body>
</html>
[/HTML]

示例二
[HTML]
<xui:window xmlns:xui="http://www.justep.com/xui" xmlns="http://www.justep.com/xui" xmlns:xforms="http://www.justep.com/xforms" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" component="/UI/system/components/window.xbl.xml#window">
<xforms:model id="model1" style="top:118px;left:122px;">
      <xforms:action id="action2" ev:event="xforms-model-construct">
         <xforms:script id="xformsScript2">mainActivity.model1ModelConstruct(event);</xforms:script>
      </xforms:action>
</xforms:model>
<xui:view id="rootView">
      <xui:layout style="height:100%;width:100%" id="rootLayout">
         <input id="calendar" type="text"/>
      </xui:layout>
</xui:view>
<xui:resource id="resource1">
      <xhtml:link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxcalendar.css"/>
      <xhtml:script id="htmlScript1" src="codebase/dhtmlxcommon.js"/>
      <xhtml:script id="htmlScript1" src="codebase/dhtmlxcalendar.js"/>
      <xhtml:script id="htmlScript1" src="mainActivity.js"/>
   </xui:resource>
</xui:window>

mainActivity.js文件中的代码

mainActivity.model1ModelConstruct = function(event){
var cal1 = new dhtmlxCalendarObject('calendar');
};
[/HTML]

示例一为html文件代码
示例二为w文件代码

zhaixin · 发表于 2011-12-27 14:36:19

三点区别

zhaixin · 发表于 2011-12-27 14:36:48

运行效果

jiahao.pan · 发表于 2018-1-15 11:09:02

zhaixin 发表于 2011-12-27 14:14
在w文件中嵌入OCX组件，和在html文件中嵌入差不多，下面以嵌入webOffice组件为例。

示例一

我问下，加载完OCX组件，怎么在js中调用组件中的方法

java1234 · 发表于 2018-11-30 13:59:46

我问下，加载完OCX组件，怎么在js中调用组件中的方法

		自动登录	找回密码
密码			注册