起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 4718|回复: 8

嵌入外部组件

  [复制链接]

88

主题

9396

帖子

4928

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4928
QQ
发表于 2011-12-27 14:13:05 | 显示全部楼层 |阅读模式
外部组件根据实现的方法不同,大致分为两类,OCX组件和JS组件。在html中可以嵌入的组件在X5中都可以嵌入。在X5中嵌入外部组件时,不能使用设计器,需要直接编辑w文件的源码,和编辑html编码类似。

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

88

主题

9396

帖子

4928

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4928
QQ
 楼主| 发表于 2011-12-27 14:14:34 | 显示全部楼层

嵌入OCX组件

在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文件代码

88

主题

9396

帖子

4928

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4928
QQ
 楼主| 发表于 2011-12-27 14:23:42 | 显示全部楼层
三点区别

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

88

主题

9396

帖子

4928

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4928
QQ
 楼主| 发表于 2011-12-27 14:24:32 | 显示全部楼层
运行效果

ocx.png

6.31 KB, 下载次数: 2701

88

主题

9396

帖子

4928

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4928
QQ
 楼主| 发表于 2011-12-27 14:28:24 | 显示全部楼层

嵌入JS组件

在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文件代码

88

主题

9396

帖子

4928

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4928
QQ
 楼主| 发表于 2011-12-27 14:36:19 | 显示全部楼层
三点区别

jsdiff.png

5.05 KB, 下载次数: 2233

88

主题

9396

帖子

4928

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4928
QQ
 楼主| 发表于 2011-12-27 14:36:48 | 显示全部楼层
运行效果

js.png

9.67 KB, 下载次数: 2245

4

主题

11

帖子

31

积分

新手上路

Rank: 1

积分
31
QQ
发表于 2018-1-15 11:09:02 | 显示全部楼层
zhaixin 发表于 2011-12-27 14:14
在w文件中嵌入OCX组件,和在html文件中嵌入差不多,下面以嵌入webOffice组件为例。

示例一

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

26

主题

94

帖子

385

积分

中级会员

Rank: 3Rank: 3

积分
385
QQ
发表于 2018-11-30 13:59:46 | 显示全部楼层

我问下,加载完OCX组件,怎么在js中调用组件中的方法
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2019-2-18 05:57 , Processed in 0.144772 second(s), 28 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表