- PVSM.RU - https://www.pvsm.ru -
Разрабатывая и дорабатывая решения на основе SharePoint, я всё больше стал сталкиваться с повышенными ожиданиями пользователей от стандартных форм создания и редактирования элементов. Всех окружают такие удобные и привычные Яндекс, Gmail, Facebook, VK и другие. Симпатичные, быстрые и понятные интерфейсы стали нормой. Многие ожидают интерфейсы подобного уровня и в корпоративных системах.
Оставлю в стороне сравнение бюджетов на разработку интерфейсов среднего интегратора, или небольшого отдела разработки в крупной компании с одной стороны и софтверных и веб-гигантов с другой, однако, отмечу, что пользователю и заказчику эти тонкости обычно не интересны. Интересен сам результат. У разработчиков, которые используют front-end фреймворки, обычно этот результат заказчиков удовлетворяет. Однако остается вопрос, почему именно Bootstrap? Для этого рассмотрим типичные «хотелки»:
Если перевести эти желания на технический язык, получится следующее:
Для решения этих задач я провел небольшое исследование текущих front-end фреймворков. Выбор пал на Twitter Boostrap по нескольким причинам. Отмечу только те, которые применительны к ситуации:
Конкретно по задачам:
И самое главное, что нужно понимать. Используя бутстрап вы получаете мощный, апробированный многотысячным комьюнити фронт-энд разработчиков инструмент, благодаря которому вы упростите жизнь себе, заказчику и своему начальнику. Заказчик будет пользоваться современным и удобным интерфейсом, вы будете быстро получать достойный результат, а начальник сокращать издержки не в ущерб качеству.
Необходимо за короткий промежуток времени реализовать форму в виде визарда с кастомной валидацией. Заполнять её будут пользователи, в т.ч. с мобильных устройств. В организации встречаются все виды браузеров, IE8+ и т.д. Одно из главных требований — «чтобы выглядело современно».
Изучив примеры, решил попробовать реализовать. Результат отличный:
Но если присмотреться, видны проблемы:
Изучив вопрос, выяснилось, что Bootstrap использует стиль — box-sizing: border-box, применяет его ко всему документу и, таким образом, ломает верстку SharePoint, где значение box-sizing:content-box. В первом варианте при расчете положения элемента граница считается внутри элемента, а во втором — снаружи. Рекомендую ознакомиться: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp [5]
В бутстрапе применяется именно border-box, т.к. это упрощает расчет конечной ширины блоков системы адаптивной верстки.
В полный рост встал вопрос: и как? Отказаться от bootstrap? Нет! Одно из первых решений — это использовать кастомный Masterpage (под 2013 [6], под 2010 [7]). У этого решения есть как плюсы, так и минусы:
[+] Бутстрап работает без всяких ухищрений;
[+] Любые темы и сниппеты взятые из сети встают быстро и хорошо выглядят;
[-] Это кастомный мастерпейдж, не всегда есть возможность его установить;
[-] Если применяется кастомный мастерпедж — придется дорабатывать и этот.
В моем случае реализация с кастомным мастепейджем не работала. Для того, чтобы Boostrap не ломал верстку SharePoint, я решил использовать обходное решение, а именно:
<div class='bootstrap-scope'>
<div class='bootstrap-html'>
<div class='bootstrap-body'>
[Тут работаем как с обычным бутстрапом]
</div>
</div>
</div>
Подключил этот файл в свой проект, стало ок, но не совсем! Так как данный визард для примера я брал с bootsnipp [9], там используются дополнительные стили, которые тоже необходимо «заскоупить» на наши стили бутстрапа. Результат оказался очень даже неплохой:
Исходник этого приложения доступен по ссылке: https://github.com/dimkk/sharepoint.app.bootstrap [11]
К сожалению, этот способ тоже не панацея. Имеет свои плюсы и минусы:
[+] Лёгкость реализации — подключил, добавил разметку, и работай в любом месте SP без риска поломать остальную верстку;
[-] Если копировать готовые решения, придется дорабатывать верстку под специфичный «scope», однако, надо сказать, что, порой встречаются готовые решения которые удовлетворят самых взыскательных заказчиков, тогда, в случаях, когда masterpage использовать не удасться — этот способ будет реальным решением проблем.
Для разворачивания примера необходимо:
P.S. В ближайшее время планирую рассказать о том, как собрать логику к этой форме, используя Angular, а так же о способах тестирования кода Angular под Visual Studio. Более подробно остановлюсь на деплое Аппа.
Автор: freeaces
Источник [14]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/81674
Ссылки в тексте:
[1] http://www.youtube.com/watch?v=5wMk4iXnpG0#t=75: http://www.youtube.com/watch?v=5wMk4iXnpG0#t=75
[2] http://ironsummitmedia.github.io/startbootstrap-sb-admin/index.html: http://ironsummitmedia.github.io/startbootstrap-sb-admin/index.html
[3] Image: http://habrastorage.org/files/9ef/ba8/c47/9efba8c475ef46e28f9ff50e465f594d.png
[4] Image: http://habrastorage.org/files/3db/3c7/538/3db3c7538fd343208be4e07c3999fb76.png
[5] http://www.w3schools.com/cssref/css3_pr_box-sizing.asp: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
[6] под 2013: http://www.topsharepoint.com/shareboot-responsive-sharepoint-2013-theme
[7] под 2010: https://responsivesharepoint.codeplex.com/
[8] https://github.com/dimkk/bootstrap/tree/bootstrap-scoped: https://github.com/dimkk/bootstrap/tree/bootstrap-scoped
[9] с bootsnipp: http://bootsnipp.com/snippets/featured/form-wizard-and-validation
[10] Image: http://habrastorage.org/files/68f/751/41b/68f75141bd5a4e93bd705b5372598049.png
[11] https://github.com/dimkk/sharepoint.app.bootstrap: https://github.com/dimkk/sharepoint.app.bootstrap
[12] Текстом: http://blogs.msdn.com/b/how24/archive/2013/06/14/prepare-your-sharepoint-2013-farm-for-app-development-and-debugging.aspx
[13] Видео: http://channel9.msdn.com/Events/TechEd/NewZealand/2013/SES202
[14] Источник: http://habrahabr.ru/post/249739/
Нажмите здесь для печати.