Мы могли бы идти вперед и вперед по пути демонстрации простого в использовании прикладного интерфейса библиотеки Base, но давай те оставим это для последующих глав и рассмотрим короткий пример, показывающий как легко добавить в страницу некоторые из диджитов, не написав ни строчки программного кода.
Пример 1.4. Пример примитивной формы
<html>
<head>
<title>Fun with Dijit!</title>
</head>
(body)
Just Use the form below to sign-up for our great offers:(br /)(br /)
<form id="registration_form">
First Name: <input type="text" maxlength=25 name="first"/>(br /)
Last Name: <input type="text" maxlength=25 name="last"/>(br /)
Your Email: <input type="text" maxlength=25 name="email"/>
(br /)(br /)
(button onclick="alert('Boo!')")Sign Up!(/button)
</form>
(/body)
</html>
Возможно, в 92 году такая форма вполне сгодилась бы, но она совершенно неприемлема для наших дней. Остановимся на минутку и посмотрим, что вы обычно делаете в таких случаях: определяете несколько классов, применяете классы, пишете программный код JavaScript с целью обеспечить проверку правильности вводимых данных и т. д.
Чтобы дать вам почувствовать, как могла бы выглядеть страница после внедрения в нее возможностей инструментария Dojo, взгляните на пример 1.5. Не надо сейчас пытаться вникать во все мелочи – впереди нас ждет еще множество страниц, при исследовании которых мы будем заглядывать во все углы и закоулки. А пока просто ознакомьтесь с общей структурой страницы и с некоторыми диджитами, внедренными в нее.
Пример 1.5. Форма, которая (благодаря Dojo) перестала быть примитивной
<html>
<head>
<title>Fun with Dijit!</title>
<!-- Некоторые стили взяты из встроенной темы tundra, которая предлагается инструментальным набором Dojo для стилизации страниц, что дает вам возможность использовать профессиональный стиль без приложения дополнительных усилий. -->
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
<!-- Дополнительные стили CSS для выравнивания элементов формы -->
<style type="text/css">
h3 {
margin : 10px;
}
label,input {
display: block;
float: left;
margin-bottom: 5px;
}
label {
text-align: right;
width: 70px;
padding-right: 20px;
}
br {
clear: left;
}
.grouping {
width:300px;
border:solid 1px rgb(230,230,230);
padding:5px;
margin:10px;
}
</style>
<!-- Загрузить Base и указать, что после загрузки страницы требуется
выполнить парсинг диджитов -->
<script
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"
djConfig="parseOnLoad: true" >
</script>
<!-- Загрузить некоторые диджиты с помощью dojo.require так же, как если бы вы подключали с помощью директивы #include файлы в языке C или выполняли импортирование модулей в языке Java -->
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.ValidationTextBox");
dojo.require("dijit.form.Button");
</script>
</head>
<!-- Указать, что встроенная тема tundra должна применяться ко всему, что находится в теле страницы. (Библиотека Dijit в значительной степени опирается на CSS, поэтому включение соответствующей темы имеет очень важное значение.)-->
(body class="tundra")
<h3>Sign-up for our great offers:</h3>
<form id="registration_form">
<!-- Мы внедрили несколько виджетов в страницу, вставив теги и включив в них атрибут dojoType, чтобы парсер мог обнаружить и загрузить их -->
<div class="grouping">
<label>First Name:</label>
<input type="text"
maxlength=25
name="first"
dojoType="dijit.form.TextBox"
trim="true"
propercase="true"/>(br)
<label>Last Name:</label>
<input type="text"
maxlength=25
name="last"
dojoType="dijit.form.TextBox"
trim="true"
propercase="true"/>(br)
<label>Your Email:</label>
<input type="text"
maxlength=25
name="email"
dojoType="dijit.form.ValidationTextBox"
trim="true"
lowercase="true"
regExp="[a-z0-9._%+-]+@[a-z0-9-]+\.[a-z]{2,4}"
required="true"
invalidMessage="Please enter a valid e-mail address"/>(br)
(button dojoType="dijit.form.Button"
onClick="alert('Boo!')")Sign Up!(/button)
</div>
</form>
(/body)
</html>