продолжаем разговор о HTML5, CSS3 для SharePoint, начатый в статье “Размышляйте и пробуйте: HTML5, CSS3 для SharePoint. часть 1″ и “часть 2″ .
Динамичная графика.
На стороне клиента стало значительно проще работать с графикой. В HTML5 присутствует тег canvas со специальным яваскриптовым API. Также в HTML5 официально включен тег svg – это уже векторная графика. Canvas и SVG — это две независимые технологии, не зависящие друг от друга, но при этом прекрасно дополняющие друг друга, хотя у них различное происхождение и природа.
Canvas это очень круто!
Canvas – это скорость – он быстр! Canvas – это понятность – он простой! Canvas – это интегрируемость – его можно вставить в любое место страницы!
Canvas работает как растр, работает быстро и применим для рисования, например, диаграмм, рисования произвольных фигур, манипуляций с пикселями, в него можно вставлять изображения, градиенты и прочую красоту.
Элемент Canvas и SharePoint.
Нет нужды говорить о том, что роль пользовательского интерфейса велика, как важно, что бы с ним было удобно работать. Учеными замечено, что он оказывает влияние даже на чувства, эмоции, настроение пользователя. Возможно использовать HTML5 в SharePoint в CEWP (Content Editor Web Part – Редактор контента), Master Pages, Custom WebParts и т.д. Создайте новый JS файл и добавьте код.:
<canvas id="SharepointCanvas" width="800" height="600"></canvas> <script type="text/javascript"> var SharepointCanvas=document.getElementById("SharepointCanvas"); var pcdsText=SharepointCanvas.getContext("2d"); // Задаем свойства стиля оформления. pcdsText.fillStyle = '#00f'; pcdsText.strokeStyle = '#f00'; pcdsText.lineWidth = 4; pcdsText.beginPath(); // Начинаем с верхней левой точки. pcdsText.moveTo(0, 0); // задаем координаты (x,y) pcdsText.lineTo(150, 0); pcdsText.lineTo(0, 75); pcdsText.lineTo(0, 0); // Готово! Теперь заполните фигуру, и начертите штрихи. // Примечание: фигура будет невидимой, пока не будет вызван // любой из этих трех методов. pcdsText.fill(); pcdsText.stroke(); pcdsText.closePath(); </script>
<canvas id="SharepointCanvas" width="800" height="600"></canvas>
<script type="text/javascript">
var SharepointCanvas=document.getElementById("SharepointCanvas");
var pcdsText=SharepointCanvas.getContext("2d");
// Задаем свойства стиля оформления.
pcdsText.fillStyle = '#00f';
pcdsText.strokeStyle = '#f00';
pcdsText.lineWidth = 4;
pcdsText.beginPath();
// Начинаем с верхней левой точки.
pcdsText.moveTo(0, 0); // задаем координаты (x,y)
pcdsText.lineTo(150, 0);
pcdsText.lineTo(0, 75);
pcdsText.lineTo(0, 0);
// Готово! Теперь заполните фигуру, и начертите штрихи.
// Примечание: фигура будет невидимой, пока не будет вызван
// любой из этих трех методов.
pcdsText.fill();
pcdsText.stroke();
pcdsText.closePath();
</script>Поместите js-файл в библиотекe документов SharePoint, создайте новую страницу Content Editor Web Part, Content Link прописываем полный путь к файлу JavaScript, жмем ОК, сохраняем страницу.
Могучие возможности других новых API.
- API-интерфейс кеш-приложений для поддержки офлайновых Web-приложений.
- API-интерфейс касающийся истории просмотров – доступ к ней и добавления страниц к ней.
- API-интерфейс типа drag-and-drop для использования с атрибутом draggable.
Об использовании этого интерфейса в SharePoint читайте в статье Андрея Маркеева “Добавление HTML5-поддержки операций «drag and drop» в списки SharePoint” http://msdn.microsoft.com/ru-ru/magazine/hh852596.aspx
- API-интерфейс редактирования для использования с атрибутом contenteditable.
- Хранилище на клиентской стороне с API-интерфейсами JavaScript для пар типа «ключ/значение», а также встроенные базы данных на основе SQL.
Рубрика: 
Комментарии