分隔框（DividedBox）是一種布局類組件，可以分為兩種，其中一種叫水平分隔框（HDividedBox），另一種叫垂直分隔框（VDividedBox）。水平分隔框會(huì)將其子級(jí)分為兩列，而垂直分隔框則會(huì)將其子級(jí)分為兩行。列與列之間以及行與行之間一般都會(huì)有一條可以拖動(dòng)的用以改變子級(jí)組件大小的分隔條。下面僅以垂直分隔框?yàn)槔齺?lái)介紹此類組件是如何設(shè)計(jì)以及實(shí)現(xiàn)的。
成品組件用例
按照以往的設(shè)計(jì)經(jīng)驗(yàn)，我們可以先寫出想像中的成品組件用例，這將有助于我們后續(xù)的進(jìn)一步的設(shè)計(jì)與實(shí)現(xiàn)。垂直分隔框既然是布局類的組件，那么它也一定是一個(gè)容器，該容器包含了上述我們提到的三種子級(jí)組件。為了使用方便，我們不應(yīng)該把分隔框也寫進(jìn)去，分隔框應(yīng)該由組件內(nèi)部實(shí)現(xiàn)的。經(jīng)過(guò)分析，我們得到下面的一個(gè)應(yīng)用示例：
// 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>"}該示例由一垂直分隔框組件包裹著兩個(gè) div 元素。這里分別設(shè)置兩個(gè) div 元素的寬高為父級(jí)的 100%，同時(shí)設(shè)置它們的背景色為灰色，這只是為了方便測(cè)試。另外，我們還需要考慮一個(gè)子框的初始比例分配問(wèn)題。我們可以設(shè)置默認(rèn)比例為 50:50，比例最好可以在組件實(shí)例化時(shí)靜態(tài)指定，同時(shí)提供比例設(shè)置的動(dòng)態(tài)接口。于是我們就有了下面的改進(jìn)用例。
// 08-01Index: {
css: "#index { width: 640px; height: 480px; box-sizing: border-box; border: 1px solid blue; }\ #top, #bottom { width: 100%; height: 100%; bac
