xmlplus 组件设计系列之八 - 分隔框（DividedBox）

最新推荐文章于 2019-06-29 19:13:18 发布
最新推荐文章于 2019-06-29 19:13:18 发布
阅读量96 收藏
点赞数
原文链接：http://www.cnblogs.com/qudou/p/6788875.html
版权

分隔框（DividedBox）是一种布局类组件，可以分为两种，其中一种叫水平分隔框（HDividedBox），另一种叫垂直分隔框（VDividedBox）。水平分隔框会将其子级分为两列，而垂直分隔框则会将其子级分为两行。列与列之间以及行与行之间一般都会有一条可以拖动的用以改变子级组件大小的分隔条。下面仅以垂直分隔框为例来介绍此类组件是如何设计以及实现的。

dividedbox.png

成品组件用例

按照以往的设计经验，我们可以先写出想像中的成品组件用例，这将有助于我们后续的进一步的设计与实现。垂直分隔框既然是布局类的组件，那么它也一定是一个容器，该容器包含了上述我们提到的三种子级组件。为了使用方便，我们不应该把分隔框也写进去，分隔框应该由组件内部实现的。经过分析，我们得到下面的一个应用示例：

// 08-01
Index: {
    css: "#index { width: 640px; height: 480px; box-sizing: border-box; border: 1px solid blue; }\
          #top, #bottom { width: 100%; height: 100%; background: #AAA; }",
    xml: "<VDividedBox id='index'>\
             <div id='top'/>\
             <div id='bottom'/>\
          </VDividedBox>"
}

该示例由一垂直分隔框组件包裹着两个 div 元素。这里分别设置两个 div 元素的宽高为父级的 100%，同时设置它们的背景色为灰色，这只是为了方便测试。另外，我们还需要考虑一个子框的初始比例分配问题。我们可以设置默认比例为 50:50，比例最好可以在组件实例化时静态指定，同时提供比例设置的动态接口。于是我们就有了下面的改进用例。

// 08-01
Index: {
    css: "#index { width: 640px; height: 480px; box-sizing: border-box; border: 1px solid blue; }\
          #top, #bottom { width: 100%; height: 100%; background: #AAA; }",
    xml: "<VDividedBox id='index' percent='30'>\
             <div id='top'/>\
             <div id='bottom'/>\
          </VDividedBox>",
    fun: function (sys, items, opts) {
        sys.top.on("click", e => sys.index.percent = 50);
    }
}

这个用例在垂直分隔框初始化时设置子框的初始比例分配为 30:70，当用户点击第一子框时，比例分配重新恢复为 50:50。不过要注意，这些比例分配指的是对排除分隔条所占用空间后剩余空间的比例分配。

设计与实现

现在让我们把注意力转移到组件的内部。我们先大致地确定组件基本的组成。直观地看，垂直分隔框显示包含三个组件部分：上子框部分、分隔条以及下子框部分。于是我们暂时可以得到下面的视图项部分：

// 08-01
<div id='hbox'>
    <div id='top'/>
    <div id='handle'/>
    <div id='bottom'/>
</div>`

下一步，确保垂直分隔框组件实例的子级部分被正确地映射到上子框 top 以及下子框 bottom。方法是先让所有的子级元素对象全部被添加到上子框 top 中，然后在函数项中将下子级元素添加到下子框 bottom 中。

// 08-01
VDividedBox: {
    xml: `<div id='hbox'>
            <div id='top'/>
            <div id='handle'/>
            <div id='bottom'/>
          </div>`,
    map: {appendTo: "top" },
    fun: function (sys, items, opts) {
        sys.bottom.elem().appendChild(this.last().elem());
    }
}

现在让我们来考虑下视图项的样式，对于顶层 div 元素，我们设置其定位方式为相对定位。对于子级的三个元素则设置为绝对定位。另外，把分隔条高度设置为 5px。

// 08-01
VDividedBox: {
    css: `#vbox { position:relative; width:100%; height:100%; box-sizing: border-box; }
          #top { top: 0; height: 30%; } #bottom { bottom: 0; height: calc(70% - 5px); }
          #top,#bottom { left: 0; right: 0; position: absolute; }
          #handle { height: 5px; width: 100%; position:absolute; left:0; top: 30%; z-index:11; cursor:row-resize; }`,
    xml: `<div id='vbox'>
            <div id='top'/>
            <div id='handle'/>
            <div id='bottom'/>
          </div>`,
    map: { appendTo: "top" },
    fun: function (sys, items, opts) {
        sys.bottom.elem().appendChild(this.last().elem());
    }
}

最后让我们看看如何响应分隔条的拖动事件，从而更改子框的分配比例。我们需要定义一个改变子框比例的函数，同时侦听分隔条的拖拽事件。下面是我们的一个实现。

// 08-01
VDividedBox: {
    // 视图项同上
    map: { format: {"int": "percent"}, appendTo: "top" }, 
    fun: function (sys, items, opts) {
        var percent = 50;
        sys.handle.on("dragstart", function (e) {
            sys.hbox.on("dragover", dragover);
        });
        sys.hbox.on("dragend", function (e) {
            e.stopPropagation();
            sys.hbox.off("dragover", dragover);
        });
        function dragover(e) {
            e.preventDefault();
            setPercent((e.pageY - sys.hbox.offset().top) / sys.hbox.height() * 100);
        }
        function setPercent(value) {
            sys.handle.css("top", value + "%");
            sys.top.css("height", value + "%");
            sys.bottom.css("height", "calc(" + (100 - value) + "% - 5px)");
        }
        setPercent(opts.percent || percent);
        sys.bottom.elem().appendChild(this.last().elem());
        return Object.defineProperty({}, "percent", {get: () => {return percent}, set: setPercent});
    }
}

上述代码的映射项中有一项关于 percent 格式的设置，该设置确保了 percent 为整型数。另外函数项中对子框的比例设定用到了 CSS3 的 calc 计算函数，该函数在浏览器窗体改变大小时仍然能够起作用。如果你希望兼容更多的浏览器，你需要做更多的工作。另外注意，为了让组件有好的性能表现，只有当用户开始拖拽时，才对事件 dragover 实施侦听。

进一步改进

上述组件在大部分情况下运作良好，但当我将 CodeMirror 组件整合进去时，出了点小问题。让我们现在做个小测试，写一个包含两个 CodeMirror 组件作为子级的垂直分隔框的应用实例。拖动分隔条，看会出现什么结果。

// 08-02
Index: {
    css: "#index { width: 640px; height: 480px; box-sizing: border-box; border: 1px solid #AAA; }",
    xml: "<VDividedBox id='index'>\
             <Editor id='top'/>\
             <Editor id='bottom'/>\
          </VDividedBox>"
},
Editor: {
    css: `.CodeMirror { height:100%; height: 100%; font-size: 14px; }
          .CodeMirror-gutters { border-right: 1px solid %border-color; background: linear-gradient...}
          #editor { position: relative; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #AAA; }`,
    map: { nofragment: true },
    opt: { lineNumbers: true, indentUnit: 4, mode: "text/html" }, 
    xml: "<div id='editor'/>",
    fun: function (sys, items, opts) {
        return CodeMirror(sys.editor.elem(), opts);
    }
}

如果你运行此示例，会发现分隔条失灵了，拖动分隔条子框比例不再出现变化。问题出在 CodeMirror 组件对象对拖拽事件进行了劫持，导致我们我组件内部收不到响应的事件。我们需要做些补丁才行，下面是改进后的组件：

// 08-03
VDividedBox: {
    css: `#vbox { position:relative; width:100%; height:100%; box-sizing: border-box; }
          #top { top: 0; height: 30%; } #bottom { bottom: 0; height: calc(70% - 5px); }
          #top,#bottom { left: 0; right: 0; position: absolute; }
          #handle { height: 5px; width: 100%; position:absolute; left:0; top: 30%; z-index:11; cursor:row-resize; }
          #mask { width: 100%; height: 100%; position: absolute; display: none; z-index: 10; }`,
    xml: "<div id='vbox'>\
            <div id='top'/>\
            <div id='handle' draggable='true'/>\
            <div id='bottom'/>\
            <div id='mask'/>\
          </div>",
    map: { format: {"int": "percent"}, appendTo: "top" }, 
    fun: function (sys, items, opts) {
        var percent = 50;
        sys.handle.on("dragstart", function (e) {
            sys.mask.show();
            sys.vbox.on("dragover", dragover);
        });
        sys.vbox.on("dragend", function (e) {
            sys.mask.hide();
            e.stopPropagation();
            sys.vbox.off("dragover", dragover);
        });
        function dragover(e) {
            e.preventDefault();
            setPercent((e.pageY - sys.vbox.offset().top) / sys.vbox.height() * 100);
        }
        function setPercent(value) {
            sys.handle.css("top", value + "%");
            sys.top.css("height", value + "%");
            sys.bottom.css("height", "calc(" + (100 - value) + "% - 5px)");
        }
        setPercent(opts.percent || percent);
        sys.bottom.elem().appendChild(this.last().elem());
        return Object.defineProperty({}, "percent", {get: () => {return percent}, set: setPercent});
    }
}

为了解决问题，我们在组件中引用了额外的 div 元素对象 mask，此元素默认是不显示的。当拖动开始时，它才显示并覆盖住子框以及分隔条，而拖动一结束，它又隐藏掉。这样就避免了 CodeMirror 组件对象对拖拽事件的劫持。

结合水平分隔框使用

我们有了上述垂直分隔框的设计经验，搞个水平分隔框也就不是什么难事了，这里就不列出来了。这里主要是给出一个综合使用水平分隔框和垂直分隔框的示例。当然，在设计之初，我们并没有想到要这么使用。

// 08-04
Index: {
    css: `#index { width: 640px; height: 480px; box-sizing: border-box; border: 1px solid blue; }
          #left0, #right0, #left1, #right1 { width: 100%; height: 100%; background: #AAA; }`,
    xml: `<HDividedBox id='index'>
              <VDividedBox percent='30'>
                  <div id='left0'/><div id='right0'/>
              </VDividedBox>
              <VDividedBox percent='30'>
                  <div id='left1'/><div id='right1'/>
              </VDividedBox>
          </HDividedBox>`
}

转载于:https://www.cnblogs.com/qudou/p/6788875.html

dengkengcong7964
关注
xmlplus组件设计系列之分隔框（DividedBox)（8）
10-19
xmlplus框架中的分隔框（DividedBox）组件是一种用于布局设计的组件，能够将页面分割为多个区域，并允许用户通过拖动分隔条来动态调整各个子区域的大小。分隔框分为水平分隔框（HDividedBox）和垂直分隔框...
DividedBox divider简单实践
05-25
总的来说，“DividedBox divider简单实践”涉及了UI组件设计、MXML界面构建、CSS样式应用、以及可能的自定义代码实现。通过学习这个实践，开发者能够掌握如何在自己的应用程序中创建可调整的、分隔的视图区域，提高...
flex中的分割组件(DividedBox)
FighterLiu的专栏
03-05 1184
Flex中的DividedBox组件也分两种，即VDividedBox（上下分割）和HDividedBox（左右分割）。 <mx:HDividedBox x="10" y="180" width="300" height="100" fontSize="12" borderStyle="solid" borderColor="#2278E1">
每天学一点flex（5）：DividedBox和拖拽监听
夏天的树人的专栏
10-29 1014
有时候经常需要使用FB来开发做一些Air工具提供自己学习使用，个人觉得Flex 的3 的版本比较适合做工具，Flex 4 重构架构后部分组件如DataGrid 这类操作反而更加难掌握，每次只能继续使用mx包组件混搭实现，Flex 有点臃肿设计，过多很多情况下都记不住。现在Flex版本很多年前adobe 已经是交给了开源组织阿帕奇基金维护了，最近看到Flex的维护组也搞了一个一套Flexjs的输出，鉴
Flex里改变DividedBox容器的分割图标
技术交流
09-19 3508
<br />在Flex里HDividedBox与VDividedBox都是DividedBox的子容器，所以我们可以分别自定义设置水平分栏与垂直分栏上的图标(注:鼠标移上去时的图标)，通过horizontalDividerCursor或者verticalDividerCursor属性指定嵌入的图标文件。下面代码中分别以多种方式实现，效果是一样的<br />DividedBox.mxml<?xmlversion="1.0"encoding="utf-8"?><mx:Application xmlns:mx="
xmlplus 组件设计系列之零 - 简介（Introduction）
04-26 100
xmlplus 介绍 xmlplus 是一个设计非常独特 JavaScript 框架，用于快速开发前后端项目。 基于组件设计 在 xmlplus 中，组件是基本的构造块。评价组件设计好坏的一个重要标准是封装度。基于 xmlplus 设计的组件具有极高的封装度。下面是一个简单的组件示例： Wid...
WebUI4Angular是基于angularjs实现的一套UI组件
07-07
WebUI4Angular是基于angularjs实现的一套UI组件，主要包括：datagrid,tree,dialog,progress,tilelist,tabset,dividedbox,imageview等等。组件需要使用angularjs1.3以上版本，其中拍照组件cameraScanner另需安装flash...
WebUI4Angular:一组带有angularjs的组件，其中包括Datagrid，tree，dialog，progress，tilelist，tabset，dividedbox，imageview等
05-29
参照了UI Bootstrap等组件的写法，主要对指令进行了自己的封装，我们希望通过angular的指令编写一套类似flex的声明式UI组件,使得页面代码更加简洁，可读性更强。 #Quickstart #Setup & Install 安装： npm install ...
IOS 学习笔记(7) 控件 分隔栏控件(UISegmentControl)的使用方法
weixin_34223655的博客
06-29 548
分隔栏控件的系统默认式样一共有3种，分别是“普通式样”，"边框式样","条状式样" 分隔栏控件中有一个momentary属性，默认时NO.当开发者配置成YES时，分隔栏控件不再有被选中状态，即使用户点击了任何一个分割选项，选项也会像普通按钮那般只是待到手指离开屏幕时恢复到普通状态。 一般的分割栏数量都不会超过5个，初始化代码如下： UISegmentedControl *aSegment...
Flex中的HDividedBox和VDividedBox的比较
游海东的技术专栏
10-21 1972
1、HDividedBox （1）源码 HVD.mxml： <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"
关于flex布局的小白入门
Arvo's Log
02-06 874
许多朋友苦恼于flex的相关知识，总是能找到相关理论，却很少看见具体实践和实现，这里就将为大家写下大部分的实践小demo 内容: 这是关于flex布局的具体属性值实现的Demo 本文供初学者入门，高学者指教 作者: Arvo email: 250185087@qq.com github: https://github.com/ArvoGuo/blo
python的练习题2
10-16
python的练习题2
行人重识别-用于行人重识别的稀疏标签平滑正则化优化-附项目源码+流程教程-优质项目实战.zip
10-16
行人重识别_用于行人重识别的稀疏标签平滑正则化优化_附项目源码+流程教程_优质项目实战
php语言基础（精编版65页ppt）.pdf
10-16
php语言基础（精编版65页ppt）.pdf
9217968970910743X8.5CM模板 横.psd
最新发布
10-16
9217968970910743X8.5CM模板 横.psd
Datawhale精彩SQL项目复制和学习笔记.zip
10-16
Datawhale精彩SQL项目复制和学习笔记
毕业设计论文SpringBoot+Vue川剧科普平台.docx
10-16
毕业设计论文
AngularJS实现的WebUI4Angular UI组件集
组件库中包含的组件有：datagrid（数据网格）、tree（树形控件）、dialog（对话框）、progress（进度条）、tilelist（瓦片列表）、tabset（标签页集合）、dividedbox（分隔框）、imageview（图片查看器）等。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值