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

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

成品组件用例

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

// 08-01Index: {
    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-01Index: {
    css: "#index { width: 640px; height: 480px; box-sizing: border-box; border: 1px solid blue; }\          #top, #bottom { width: 100%; height: 100%; bac
        
		

        		
网友评论
     		
				

			
			
			
		
		
		
    	
    	
        	

        		
更多精彩分享
        		

        			
        		
        			
	        		
	        		学习是年轻人改变自己的最好方式