Unigui Web结合html+js+css

一、前言

      前面文章介绍了Delphi的web框架unigui相关知识内容，开发者借助拖拽方式能实现产品业务的基础开发(类似于传统VCL开发内容），其Web相关高级组件（轮播、相册、视频播放带插件、Pdf相关预览签名等功能）实现需要自己去实现。由于unigui基于extjs框架实现，其天然对于web相关（html、js、css）实现兼容性比较好；

二、unigui工程结构

 1、servermoudle

  顾名思义，其为工程相关配置信息（端口、运行时路径、浏览相关配置、键盘控制信息等），工程启动运行时候创建，可理解为启动创建一次；

 2、Mainmodule

  客户端浏览器访问创建相关session内容，浏览器访问一次创建一次，可以理解为客户端链接（初始化连接创立）；

3、Login登录

   web并非一定要有登录，根据业务需要创建Loginform内容；

二、Javascript引用

       unigui开发web内容与其它语言开发web内容相同，浏览器访问各个组件相关元素DOM清晰可见（F12可查看相关组件的DOM结构），笔者认为unigui部分组件DOM结构层次结构比较深（可能希望兼容更多属性或者效果内容），开发者可以自行体验其某一个组件的dom层次结构内容；

  1、静态引用

   UniServerModuleCustomFiles.add（文件路径），工程运行自动加载相关js，类似于html内的页面script 引用文件（.css文件同理）；

 举例：

  UniServerModule.CustomFiles.Add(UniServerModule.UrlPath+'/files/qrcode.js');;

  UniServerModule.CustomFiles.Add(UniServerModule.UrlPath+'/files/echarts.min.js');

  2、动态引用

      客户端连接时候加载相关js内容；

   主页面显示或者创建时候动态加载js或css文件内容

三、Html片段

    框架封装相关组件，最终也是解析到元素DOM，因此组件的相关内容(caption、text、title等)是兼容html片段；例如<div><span>测试</span></div>，系统会自动解析为相关dom元素节点内容；

Unipanel组件内容

四、Css使用

1、unigui自带方法

  Upsfz.JSInterface.JSCall('addCls', ['btnnew']);

2、js方法处理

   jquery：$("#组件id").css（{"display":"flex"}）等方式

Js相关语法在unigui中均可用；