框架机制

目录

• §. CBlueUI工作原理
  • 基础内容
  • 资源文件语法格式
  • UI文件语法格式

§. CBlueUI工作原理

了解CBlueUI是如何运作的。能帮助开发者快速入门。现代浏览器以html协议文件作为媒介，浏览器负责构建画面和渲染。CBlueUI也是如此。唯一不同的是协议语法不同。一个是html协议。一个是自定义协议。

基础内容

• CBlueUI如何构建UI
  • 第一种：手动创建控件方式。费时耗力。不建议使用
  • 第二种： 类似浏览器解析HTML机制。CBlueUI解析符合自身语法格式的xml文件。程序将自动生成这些控件。原理如下图。
    加载过程示意图

    
• 控件之间层级关系
  • 每个控件拥有5个指针对象。分别代表
    

    CControlUI * m_parent;       // 父节点
    CControlUI * m_first_child;   // 第一个孩子节点
    CControlUI * m_last_child;    // 最后的孩子节点
    CControlUI * m_next_sibling;  // 下一个兄弟节点
    CControlUI * m_prev_sibling;  // 上一个兄弟节点

    控件数据结构图

    
    控件布局结构图

    
• 坐标系
  
• 完全自研控件布局
  • 控件可能会被遮盖，被隐藏，也会被恶意的创建N多个。依赖传统的遍历，不再能满足性能要求。
    • 位置优先匹配算法：根据鼠标的行为，总是在附近区域活动。当之前已经定位到某一控件A时，下一次还在A的概率，大于其它控件。优先匹配A和A附近的控件,提高命中率。
    • 增加分治节点算法：控件定位的遍历方法是树的中序遍历。先匹配自己，然后匹配子节点。基于这样的规则。当子节点过多时，适当增加经过合理规划后的父节点，可以减少匹配次数。从而提高速度。打个比方，在学校里老师需要找张三同学，老师会先找年级，班级，第几排几号。为控件增加父节点实际就是在通过位置信息。对控件进行分组，分治。避免不必要的匹配开销。
  • 布局类型
    
    • 容器类
      

      enum LayoutBoxType 
      {
        HORIZONTAL, // 水平分布(x轴方向)
        VERTICAL,   // 垂直分布(y轴方向)
        LAYERED     // 层叠分布(z轴方向)
      };

    • 元素布局类型
      

      enum SizeMode
      {
          AdaptSelf,  // 元素自适应
          AdaptFill,  // 剩余填充自适应
          FixedValue, // 固定值
          Percentage  // 百分比
      };

      • FixedValue:固定的像素宽度
      • Percentage:宽度等于在父容器中宽度（高度）的百分比。比如父容器的高度是 W，百分比为30。宽度计算公式等于
      • AdaptFill:等长自适应填充.事先统计fill类型的个数Count。
        
      • AdaptSelf :由布局对象根据属性来确定大小。比如文本宽度，图标大小
  • 示例代码
    

    <!-- 水平布局对象 30%代表高度为父容器的30%-->
    <hLayout Layout="fill, 30%" Align="vcenter|top|bottom" layout-revers="false" padding="0,0,0,0">
    </hLayout>
    <!-- 垂直布局对象 adapt:5 表示容器的宽度等于自适应的宽度+5-->
    <vLayout Layout="adapt:5, 300" Align="center|left|right" layout-revers="false" padding="0,0,0,0">
    </vLayout>
    <!-- 层叠布局对象-->
    <LayeredLayout Layout="fill, 300" Align="vcenter" layout-revers="false" padding="0,0,0,0">
    </LayeredLayout>

资源文件语法格式

• 资源包括：字体，画刷，全局风格。每个元素都有id属性。id是资源唯一标识符。在UI文件中可以通过id找到资源对象。 比如设置控件的字体 font="title"
• 图标资源，可由脚本自动生成资源文件。无需手动输入。
• 示例文件内容share-res.xml
  

  <?xml version="1.0" encoding="utf-8" standalone="no" ?>
  <ui>
      <!-- 字体对象资源-->
      <Font shared="true" id="title" font-family="宋体" font-Weight="11" default="true"/>
      <!-- 多状态的颜色集合-->
      <Color id="colors_white" normal="0xffffff" highlight="0xFF8613" selected="0xFF8613" disable="0xffffff"/>
      <!-- 渐变颜色表插值器-->
      <linearColors id="nodeedit_colors" size="1024" model="hsv" c1="hsv(201,100,79)" c2= "hsv(201,63,98)"/>
      <!-- 渐变颜色表-->
      <StopColors id="blue123" size="512">
        <stop offset="0%" color="hsv(0,100,96)" opacity="1"/>
        <stop offset="30%" color="hsv(108,100,96)" opacity="1"/>
        <stop offset="60%" color="hsv(220,100,96)" opacity="1"/>
        <stop offset="90%" color="hsv(320,100,96)" opacity="1"/>
        <stop offset="100%" color="hsv(360,100,96)" opacity="1"/>
      </StopColors>
   
      <!-- 线性渐变画刷：由渐变方式和渐变颜色表组成-->
      <linearGradient id="bru_nodeedit_nor" x1="0%" y1="0%" x2="0" y2="100%" color="nodeedit_colors"/>
      <!-- 放射渐变画刷：由渐变方式和渐变颜色表组成-->
      <radialGradient id="radial_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%" color="blue"/>
      <!-- 圆周渐变画刷：由渐变方式和渐变颜色表组成-->
      <conicGradient id="conic_blue" cx="50%" cy="50%" angle-start="-20" color="blue"/>
   
      <!-- 渐变画刷状态集合：普通，高亮，选中，禁用-->
      <Brush id="gstyle_btnblue" normal="bru_btnblue_nor" highlight="bru_btnblue_hot" selected="bru_btnblue_hot" disable="bru_btnblue_nor"/>
   
      <!-- 图标资源-->
      <GImage id="5" url=".././res/Image/分割入位.png"/>
   
      <!-- 美工切图有时会切横排，竖排，有时分开单个文件，完美支持不同场景，不依赖美工-->
      <!-- 多帧图标状态集合：普通，高亮，选中，禁用在同一个图片文件中 frames图片总帧数 layout横排还是竖排 source-list为四种状态的帧索引-->
      <GImageIconSingle id="0" url=".././res/Image/IMG_0118.JPG" frames="1" layout="vertical" source-list="0,0,0,0"/>
      <!-- 图标状态集合：普通，高亮，选中，禁用分别为单个一帧图片-->
      <GImageIconMulti id="button:add" normal=".././res/Image/favourite_normal.png" 
          highlight=".././res/Image/favourite_normal.png" 
          selected=".././res/Image/favourite_normal.png" 
          disable=".././res/Image/favourite_disable.png"/>
    </ui>

UI文件语法格式

• class属性：控件类名。只有正确的类名才能被识别
• layout: 布局属性
• position：控件的位置信息。若layout属性存在，此属性则无效。
• name: 控件绑定唯一标识符。若为空。代码生成助手，不会生成此控件对象相应代码。匿名控件通常不被关心
• 更多属性请在文档中搜索ShellAttribute关键字。已整理好
• 示例内容
  

  <?xml version="1.0" encoding="utf-8" standalone="no" ?>
  <!-- size 窗口大小 -->
  <UI size="1200,700">
    <!-- 垂直布局对象，布局对象不是控件，把布局对象当控件处理，会造成控件的资源浪费，当需要对控件分组时，才使用容器布局控件 CContainLayoutUI -->
    <vLayout Layout="fill,fill">
      <!--弹簧布局 -->
      <Spacer Layout="fill,4"/>
      <!--水平布局对象 -->
      <Hlayout Layout="fill,30">
        <!-- 控件元素 class 为类名全称, Layout布局参数, name 标识控件标识符, 其余参数是控件自身属性，属性值参考ShellAttribute虚函数 -->
        <Control Class="CLabelUI" position="{0,0,100,100}" Name="title" Layout="fill,fill" Font="3" text="UMLView 类图" textstyle="normal:#fcfcfc" labeltype="label"/>
        <Spacer Layout="30,fill"/>
        <Control Class="CButtonSysUI" Name="minbtn" Layout="30,fill:25" sysType="min"/>
        <Control Class="CButtonSysUI" Name="maxbtn" Layout="30,fill:25" sysType="Max"/>
        <Control Class="CButtonSysUI" Name="closebtn" Layout="30,fill:25" sysType="close"/>
      </Hlayout>
   
      <Spacer Layout="fill,25"/>
      <Hlayout Layout="fill,fill">
        <Control Class="CListBoxUI" Name="macdeskui" Layout="250,fill:40" colCount="2" width_item="100" height_item="100" interval='5' scroll-autohide="true"/>
        <Control Class="CContainerUI" Name="uml_container" Layout="fill,fill" style="notitle" drag="none" back-show="always"/>
      </Hlayout>
    </vLayout>
  </UI>

• 用设计器预览效果