Исследование Dijit

Мы могли бы идти вперед и вперед по пути демонстрации простого в использовании прикладного интерфейса библиотеки Base, но давай те оставим это для последующих глав и рассмотрим короткий пример, показывающий как легко добавить в страницу некоторые из диджитов, не написав ни строчки программного кода.

Пример 1.4. Пример примитивной формы


Fun with Dijit!

(body)
Just Use the form below to sign-up for our great offers:(br /)(br /)
First Name: (br /)
Last Name: (br /)
Your Email:
(br /)(br /)
(button onclick="alert('Boo!')")Sign Up!(/button)

(/body)


Возможно, в 92 году такая форма вполне сгодилась бы, но она совершенно неприемлема для наших дней. Остановимся на минутку и посмотрим, что вы обычно делаете в таких случаях: определяете несколько классов, применяете классы, пишете программный код JavaScript с целью обеспечить проверку правильности вводимых данных и т.


д.

Чтобы дать вам почувствовать, как могла бы выглядеть страница после внедрения в нее возможностей инструментария Dojo, взгляните на пример 1.5. Не надо сейчас пытаться вникать во все мелочи – впереди нас ждет еще множество страниц, при исследовании которых мы будем заглядывать во все углы и закоулки. А пока просто ознакомьтесь с общей структурой страницы и с некоторыми диджитами, внедренными в нее.

Пример 1.5. Форма, которая (благодаря Dojo) перестала быть примитивной


Fun with Dijit!

href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />
href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />



type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"
djConfig="parseOnLoad: true" >





(Библиотека Dijit в значительной степени опирается на CSS, поэтому включение соответствующей темы имеет очень важное значение.)-->
(body class="tundra")

Sign-up for our great offers:




maxlength=25
name="first"
dojoType="dijit.form.TextBox"
trim="true"
propercase="true"/>(br)

maxlength=25
name="last"
dojoType="dijit.form.TextBox"
trim="true"
propercase="true"/>(br)

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)


(/body)
.



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
dojo.addOnLoad
dojo.byId
dojo.connect
Исследование Dojo с помощью Firebug
Исследование библиотеки Base