Диджит BorderContainer предоставляет удобную возможность определить одну из следующих схем размещения, состоящих из нескольких более простых неперекрывающихся элементов: сверху/снизу/слева/справа/в центре, сверху/снизу/в центре или слева/справа/в центре страницы. Можно разрешить изменение размеров этих элементов. BorderContainer является особенно ценным виджетом, т. к. он позволяет легко и просто превратить то, что в противном случае могло бы превратиться в изнурительную работу, в действительно простое решение на языке виджетов. Как вы уже наверняка догадались, он получил название контейнера (container) с «границами» (border), потому что по его границам располагаются четыре неперекрывающихся элемента, окружающие то, что заполняет центр.
При работе с диджитом BorderContainer можно использовать дополнительные атрибуты, доступные через ContentPane, на которые он опирается.
Схема размещения, при которой верхняя и нижняя границы растягиваются на всю ширину контейнера, называется схемой заголовка (headline), а схема размещения, при которой левая и правая границы растягиваются на всю высоту контейнера, называется схемой врезки (sidebar). В любом из этих двух случаев компоновка может включать дополнительные элементы, что увеличивает число областей от трех до пяти. Но при любой схеме компоновки оставшееся пространство в центре занимает центральный элемент. Давайте рассмотрим простой пример реализации схемы заголовка в разметке, как показано в примере 14.2. Вверху будет располагаться панель красного цвета, внизу – синего, а в середине – белого. Верхняя панель имеет минимальную высоту 10 пикселей и максимальную – 100 пикселей (это ее высота по умолчанию).
Пример 14.2. Создание диджита BorderContainer в разметке
<html>
<head><title>Fun with BorderContainer!</title>
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />
<script
djConfig="parseOnLoad:true",
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dojo.parser");
</script>
</head>
(body class="tundra")
<div dojoType="dijit.layout.BorderContainer" design="headline"
style="height:500px;width:500px;border:solid 3px;">
<div dojoType="dijit.layout.ContentPane" region="top"
style="backgroundcolor:blue;height:100px;" splitter="true"
minSize=10 maxSize=100>top</div>
<div dojoType="dijit.layout.ContentPane"
region="center">center</div>
<div dojoType="dijit.layout.ContentPane" region="bottom"
style="backgroundcolor:red;height:100px;"
splitter="true">bottom</div>
</div>
(/body)
</html>
Чтобы добавить два элемента, заполняющие левую и правую области, достаточно вставить два дополнительных диджита ContentPane, как показано в следующей ниже версии тега BODY.
(body class="tundra")
<div dojoType="dijit.layout.BorderContainer"
design="headline" style="height:500px;width:500px;border:solid 3px;">
<div dojoType="dijit.layout.ContentPane" region="top"
style="background-color:blue;height:100px;" splitter="true"
minSize=10 maxSize=100>top</div>
<div dojoType="dijit.layout.ContentPane" region="center">center</div>
<div dojoType="dijit.layout.ContentPane" region="bottom"
style="background-color:red;height:100px;"
splitter="true">bottom</div>
<div dojoType="dijit.layout.ContentPane" region="left"
style="backgroundYcolor:yellow;width:100px;"
splitter="true">left</div>
<div dojoType="dijit.layout.ContentPane" region="right"
style="backgroundYcolor:green;width:100px;"
splitter="true">right</div>
</div>
(/body)
Как и для всех других диджитов, создание диджита BorderContainer программным способом связано с вызовом того же самого базового конструктора, которому передаются список свойств и ссылка на исходный узел. Также и добавление дочерних диджитов ContentPane состоит в поочередном их создании, одного за другим. Хотя программный способ более утомителен, чем создание диджитов в разметке, тем не менее порядок создания остается одним и тем же. В примере 14.3 показано, как реализовать пример 14.2 программным способом.
Пример 14.3. Создание BorderContainer программным способом
<html>
<head><title>Fun with BorderContainer!</title>
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />
<script
djConfig="parseOnLoad:true",
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojo.parser");
dojo.addOnLoad(function() {
//BorderContainer
var bc = new dijit.layout.BorderContainer(
{
design: "headline",
style: "height:500px;width:500px;border:solid 3px"
},
"bc"
);
var topContentPane = new dijit.layout.ContentPane(
{
region: "top",
style: "background-color:blue;height:100px;",
splitter: true,
minSize : 10,
maxSize : 100
},
document.createElement("div")
);
var centerContentPane = new dijit.layout.ContentPane(
{
region: "center"
},
document.createElement("div")
);
var bottomContentPane = new dijit.layout.ContentPane(
{
region: "bottom",
style: "background-color:red;height:100px;",
splitter: true
},
document.createElement("div")
);
bc.startup(); // выполнить начальное размещение
//(несмотря на отсутствие дочерних виджетов)
//Теперь добавить дочерний виджет.
bc.addChild(topContentPane);
bc.addChild(centerContentPane);
bc.addChild(bottomContentPane);
});
</script>
</head>
(body class="tundra")
<div id="bc"></div>
(/body)
</html>
Диджиты BorderContainer обладают высокой гибкостью и могут вкладываться друг в друга произвольным образом, если ситуация требует этого. Они также предоставляют превосходный способ оформления компоновки в стиле заголовка или в стиле врезки практически без каких либо усилий, но, с другой стороны, в случаях, когда применение виджетов не дает дополнительной выгоды, вы всегда можете вернуться к старым добрым таблицам стилей CSS.