IE页面中调用实时数据库画面组件.doc

资源描述

IE页面中调用实时数据库画面组件关键字：紫金桥实时数据库 web 两化融合背景当前一个web横行的时代，无论办公还是个人事务处理，无处不有Web的渗透。对于企业级的信息平台也早已被web霸占。对于大型的企业信息平台，生产数据部分是必不可少的。如何在系统中集成生产数据管理，全部重新开发？包括流程图绘制、实时\历史报表、报警处理、趋势分析、统计数据等，对于任何一种开发平台来说，即使有现成的组件，工作量也是巨大的。有没有一种更合理的解决方案，做到既节省工作量、又使功能模块更加合理，下面提供这样一种方案。实现思路生产数据管理是实时数据库的优势，各种功能组件都已集成，并且针对于生产。紫金桥实时数据库提供“瘦客户端”，可以在web页面中嵌入具有授权签名的ActiveX，实现在IE浏览器中浏览服务器中的画面信息和数据信息。浏览灵活，并且与实际服务器中所有的内容一致。既然如此，何不将生产数据部分交给实时数据库？如何将两个系统集成一体？有三种方式可供参考： 1. 直接通过链接方式，打开指定的紫金桥实时数据库web页面。 2. 通过Frame框架方式，做到紫金桥实时数据库web页面嵌入到网页中。 3. 通过iFrame框架方式，能过在网页的任意表格内显示实时数据库web页面。具体实现 1. 直接链接紫金桥实时数据库发布的页面可以实现每个画面对应一个web浏览的URL。只需将工程目录下的default.htm（或者index.htm）文件复制一份，命名，比如report.htm。修改如下网页源代码： <param name="ViewName" value="DRAW1"> 将其中的DRAW1改为需要浏览的窗口名。比如： <param name="ViewName" value="报表"> 这样就可以通过打开http://服务器IP地址/虚拟目录/report.htm直接浏览报表窗口。这里要求服务器IP地址必须使用自指定方式。以防止多个实时数据库系统浏览时出现冲突。网页中直接调用该URL就可以，比如： <a href=http://服务器IP地址/虚拟目录/report.htm>生产报表</a> 2. 利用Frame Frame是一种网页切分技术，能够实现在一个页面框架中，同时打开多个子页面。下面是一个简单的使用Frame框架的示例。 <html> <frameset rows="10%,50%"> <frame src="/example/html/frame_a.html"> <frameset cols="20%,75%"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/ http://192.168.1.16/ RealforIE " name="showframe"> </frameset> </frameset> </html> 每个Frame框架内都可以调用单独的网页，同一个主框架内的页面可以操作其他子框架内打开的网页，比如上例中frame_b.html的源码如下： <html> <body> <a href ="http://192.168.1.16/RealforIE/realReport.htm" target ="showframe">报表</a><br /> <a href =" http://192.168.1.16/RealforIE/curve.htm" target ="showframe">趋势</a> <a href ="http://192.168.1.16/RealforIE/alarm.htm " target ="showframe">报警</a> </body> </html> 这样就能够实现在frame_b.html点击【报表】、【趋势】、【报警】三个链接，控制在 Showframe子框架内调用对应的紫金桥实时数据库web页面。效果如下： 3. 利用iFrame iFrame是一种内联框架（即行内框架）。相比Frame框架，iFrame要更灵活些，可以在网页内的任意表格内嵌入。 a.网页中建立内嵌的iFrame，比如： <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="650" height="552" align="left" valign="top"><iframe src="show.htm" name="showframe" style="height: 91%; width: 99%" id="I1"></iframe></td> </tr> </table> 这样就在网页中嵌入了名为“showframe”的iFrame。 b.控制iFrame中显示的网页，比如：直接打开：修改上述代码中的src="show.htm"，改为： src=" http://192.168.1.16/RealforIE/lct.htm " 这样就可以在页面打开时，直接加载。通过链接控制： <a href="http://192.168.1.16/RealforIE/lct.htm" target ="showframe" onclick="showTxt('流程画面')">流程画面</a> 效果如下：其中左下角的直方图和饼图部分也是iFrame调用，页面打开时直接加载。右侧部分的访问内容，可以通过导航来切换。 iFrame方式虽然灵活，但对于一些老的浏览器，并不能支持iFrame框架，这个在使用时需要注意。总结上述三种调用方式实现的根本是紫金桥实时数据库web发布可以实现每个画面的单独浏览，每个画面提供对应的URL，其他系统调用时非常简单，并且不区分系统开发的平台，.Net开发或者Java等，实现方式都是一样。生产数据部分有紫金桥实时数据库实现，发挥了实时数据库平台的优势，降低了开发难度和成本。整个信息化系统内部划分清晰明确，易于维护；整体集成度高，功能丰富全面，既有管理，又有生产，是两化融合的典型实现。使用HTML5和CSS3构建基于webkit的Web Page/App 现在在ios/android上的web网站变的越来越多，智能机中ios和android系统的设备市场份额也是与日俱增，相信未来会是一个趋势，那么如何构建基于webkit的网站呢？这里有一篇文章介绍了如何用html5创建一个iphone的app，这是一个基于web的本地离线应用，相对于native应用来说基于web的应用开发和测试都非常快捷，基于webkit浏览器支持大部分的html5，也支持大部分的css3，而且开发语言也是大多数web工程师所熟悉的，最重要的一点是基于web的应用是完全跨平台的，不需要多平台的开发和测试。开发基于webkit的web app/page时需要注意的有： HTML特性： <input type=”file” />在iphone上不work <a href=”13888888888″>Call Me</a>可以调用打电话应用 google maps, iTunes和youtube的链接会在iphone上打开相应的组件 app/web page设置： <link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> 在设置书签的时候可以显示好看的图标 <meta name=”apple-mobile-web-app-capable” content=”yes” /> 离线应用的另一个技巧 <meta name=”apple-mobile-web-app-status-bar-style” content=”black” /> 隐藏状态栏 <link rel=”apple-touch-startup-image” href=”startup.png” /> 设置开始页面图片 <meta name=”viewport” content=”width=device-width, user-scalable=no” /> 指定mobile，并且不可缩放 <meta name=”viewport” content=”width=device-width, minimum-scale=1.0, maximum-scale=1.0″ /> 同上 CSS相关配置： @media screen and (max-device-width: 480px){ /* 小屏幕的css样式 */ } @media screen and (max-width: 320px){ /* 纵向的css样式 */ } @media screen and (max-width:480px){ /* 横向的css样式 */ } @media screen and (orientation: portrait){ /* iPad 纵向的css样式 */ } @media screen and (orientation:landscape){ /* iPad 横向的css样式 */ } display: -webkit-box; -webkit-box-orient:vertical/horizontal; -webkit-box-flex: value 水平垂直布局box rounded corner/text shadow/box shadow/rgba/font-face/transform/transition/animation/border-image/gradients/ 充分利用这些css3的特性做出丰富的UI 脚本特性：可以选用开源的javascript库，如yui, jquery, mootools, dojo … 垂直的js库，如canvas游戏库有LimeJs, GameJs等，Mobile UI库如jquery mobile, sencha touch, iui等，以及其它各种库隐藏标题栏 – addEventListener(“load”, function() { setTimeout(function (){ window.scrollTo(0,1);}, 0); }, false); webkitTransitionEnd/webkitAnimationStart/webkitAnimationIteration/webkitAnimationEnd transition/animation事件 localstorage/manifest 离线应用模拟iphone的scroll效果，解决Mobile Safari下不支持position:fixed的问题：touch scroll, demo 调试： safari上可以设置user agent为iphone上的safari（preference->advaced->developer tool)，还可以手动添加android的user agent{ Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 –Nexus } iphone的safari上有debug调试关注Mobile性能问题，可以采用firebuglite等书签脚本来调试文章的标题说的是web app/page，其实用html5和css3构建的app和page没啥区别，web page也很容易转换成native的app，通过phoneGap就可以了，phoneGap所做的就是在一个native的app内嵌入了一个类似chrome的浏览器，并且创建了一个桥接，从而直接去写web app就可以了，就像这个slide的标题写的一样“HTML5 is the Future of Mobile, PhoneGap Takes You There Today”，你的app可以在5个以上的平台上运行，使用的技术是你所熟悉的html/js/css，还等什么，赶快看看它的文档实践一下吧。

展开阅读全文