Обновление пользовательского интерфейса AppFuse с помощью Twitter Bootstrap

В последний раз AppFuse обновлял свой внешний вид еще в 2006 году. С тех пор я провел множество консультаций, которые включали в себя немало оптимизации скорости страницы, разработку HTML5 и интеграцию более умного CSS. Это было в далеком 05 году, когда мы впервые начали смотреть на добавление CSS Framework в AppFuse. Именно CSS Framework Майка Стенхауса послужил источником вдохновения, а мой Конкурс дизайна CSS Framework — его текущие темы ( головоломки с стилем , andreas01 и простота ).

С тех пор было изобретено много фреймворков CSS, в том числе Blueprint в 2007 году и Compass в 2008 году. Однако ни один из них не захватил мир штурмом, как Twitter Bootstrap . Из создания Twitter Bootstrap :

Полтора года назад небольшая группа сотрудников Twitter намеревалась улучшить внутренние аналитические и административные инструменты нашей команды. После нескольких ранних встреч, посвященных этому продукту, мы стремились создать инструментарий для любого, кто будет использовать его в Твиттере и за его пределами. Таким образом, мы решили создать систему, которая бы помогала людям, подобным нам, создавать новые проекты на ее основе, и Bootstrap был задуман.
…
Сегодня он вырос до десятков компонентов и стал самым популярным проектом на GitHub с более чем 13 000 наблюдателей и 2000 вилок.

Тот факт, что Bootstrap стал самым популярным проектом на GitHub, говорит о многом. Что касается AppFuse.next , я хотел бы интегрировать многие из моих знаний за последние несколько лет, а также поддерживать HTML5 и современные браузеры как можно лучше. Это означает оптимизацию скорости страницы , избавление от Prototype и Scriptaculous в пользу jQuery, добавление wro4j для оптимизации ресурсов и интеграцию HTML5 Boilerplate . Я использовал Twitter Bootstrap для своей Play More! приложение , а также некоторые последние клиентские проекты. Его отличная документация сделала его простым в использовании, и мне нравится, как вы можете просто добавлять классы к элементам, чтобы они превращались в нечто прекрасное.

На прошлой неделе я провел несколько поздних ночей, интегрируя Twitter Bootstrap 2.0 в версии AppFuse для Struts 2 и Spring MVC. Расположение было довольно простым благодаря Scaffolding . Создание шаблона Struts Menu Velocity для создания выпадающих меню не было слишком сложным. Я добавил class = «table table-уплотняется» к таблицам экрана списка, class = «well form-horizontal» к формам и class = «btn primary» к кнопкам.

Я также добавил ошибки проверки с помощью класса help-inline. Это также, где вещи стали хитрыми со Struts и Spring MVC. Для элементов формы в Bootstrap они рекомендуют использовать элемент «control-group», содержащий вашу метку, и элемент «controls». Элемент управления содержит input / select / textarea, а также сообщение об ошибке, если оно есть. Вот пример элемента, ожидающего данных:

<div class="control-group">
    <label for="name" class="control-label">Name</label>
    <div class="controls">
        <input type="text" id="name" name="name">
    </div>
</div>

Ниже показано, как должен выглядеть этот элемент для отображения ошибки проверки:

<div class="control-group error">
    <label for="name" class="control-label">Name</label>
    <div class="controls">
        <input type="text" id="name" name="name" value="">
        <span class="help-inline">Please enter your name.</span>
    </div>
</div>

Вы можете видеть, что эта разметка довольно проста, вам просто нужно добавить класс «error» в control-group и span, чтобы показать сообщение об ошибке. Со Struts 2 это было довольно легко благодаря настраиваемым шаблонам для его тегов . Все, что мне нужно было сделать, это создать каталог «template / css_xhtml» в src / main / webapp и изменить checkbox.ftl, controlfooter.ftl, controlheader-core.ftl и controlheader.ftl в соответствии с соглашениями Bootstrap.

Весна MVC была немного хитрее. Поскольку у его тегов нет концепции написания целого элемента управления (метки и поля), мне пришлось немного подумать, чтобы заставить вещи работать. В текущей реализации формы Struts 2 имеют одну строку для группы элементов управления, ее метки элемента управления и элементов управления .

<s:textfield key="user.firstName" required="true"/>

С Spring MVC все немного сложнее:

<spring:bind path="user.firstName">
<fieldset class="control-group${(not empty status.errorMessage) ? ' error' : ''}">
</spring:bind>
    <appfuse:label styleClass="control-label" key="user.firstName"/>
    <div class="controls">
        <form:input path="firstName" id="firstName" maxlength="50"/>
        <form:errors path="firstName" cssClass="help-inline"/>
    </div>
</fieldset>

Вы могли бы, вероятно, преодолеть это многословие с помощью файлов тегов .

Выяснить, нужна ли контрольной группе класс ошибок перед визуализацией входного тега, было, вероятно, самой сложной частью этого упражнения. В основном это было связано с отличной документацией Bootstrap и полезными примерами (просмотр которых проводился путем проверки разметки). Ниже приведены скриншоты старых и новых экранов.

Проверьте полный набор на Flickr, если вы хотите поближе.

Хотя мне нравится внешний вид старого пользовательского интерфейса, я не могу не думать, что многие темы предназначены для блогов и сайтов с контентом, а не для веб-приложений. Старые формы Wufoo выглядели намного лучше. И если вы собираетесь разрабатывать офигенные веб-приложения , вам нужно, чтобы они выглядели хорошо. Bootstrap проделывает большой путь в этом, но он, конечно, не заменит хорошего UX Designer. Bootstap просто помогает вам войти в HTML5-страну, начать использовать CSS3, и это избавляет от необходимости заставлять вещи работать кросс-браузерно. Его гибкие макеты и адаптивный веб-дизайн отлично подходят для бизнес-приложений, которые, я полагаю, чаще всего используются в AppFuse.

Я не могу поблагодарить разработчиков Bootstrap за то, что они помогли мне сделать все это хорошо. С выходом Bootstrap 2 на этой неделе я могу видеть, что использую это все больше и больше в проектах. В ближайшее время я помогу интегрировать Bootstrap в версии AppFuse Tapestry 5 и JSF .

Что вы думаете об этом изменении CSS? Изменили ли вы свой CSS и верстку при запуске с архетипами AppFuse? Что мы можем сделать, чтобы приложения AppFuse выглядели лучше из коробки?

От http://raibledesigns.com/rd/entry/refreshing_appfuse_s_ui_with