Создание и интеграция с SharePoint мобильных приложений для различных устройств

Тодд Багински (todd@toddbaginski.com)- шестикратный обладатель звания SharePoint MVP и вице-президент компании Canviz, создающей решения на базе технологий SharePoint, Office, мобильных и «облачных» приложений

Сегодня компании чаще, чем когда-либо раньше, проектируют мобильные приложения с целью расширить свои бизнес-системы, охватив штатных сотрудников, деловых партнеров и клиентов. .

Собственные приложения или приложения HTML5

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

Другой подход — разработать приложение с помощью HTML5 и JavaScript, а затем разместить его в оболочке, использующей браузер мобильного устройства для показа и запуска приложения. При таком подходе требуется сформировать и обслуживать единственный вариант программного кода. Для реализации этого решения можно задействовать открытую технологию PhoneGap (размещенную на серверах Adobe Systems).

Приложения PhoneGap

PhoneGap позволяет быстро создавать приложения-оболочки, в которых размещаются приложения HTML5 и JavaScript. PhoneGap предоставляет библиотеку JavaScript для обращений к интерфейсам программирования (API) каждой телефонной платформы. Таким образом можно разработать приложения один раз и настроить их для работы на нескольких мобильных платформах. В настоящее время PhoneGap в различной степени совместима с 10 мобильными платформами.

Допустим, требуется извлекать изображения из мобильного устройства. Если составить исходный текст на собственном языке устройства, то придется готовить отдельный код для каждой платформы. Как отмечалось выше, этот подход связан с дополнительными расходами и отнимает много времени. Но благодаря библиотеке PhoneGap JavaScript задачу можно решить в рамках одного согласованного подхода.

В приведенном ниже образце исходного текста функция captureImage вызывается событием кнопки Click. В функции captureImage используется библиотека PhoneGap JavaScript для обращения к соответствующим интерфейсам API каждого устройства и запуска нужной функциональности. В данном примере после съемки изображения камерой мобильного устройства данные передаются функции косвенного вызова success, после чего их можно обработать.

function captureImage() {
navigator.camera.getPicture(captureSuccess,
captureError,
{ sourceType: Camera.PictureSourceType.CAMERA });
}
function captureSuccess(pictureData) {
navigator.notification.alert(«Изображение введено!»);
}
function captureError(error) {
var msg = 'Ошибка при вводе: ' + error.code;
navigator.notification.alert(msg, null, 'Изображение Не введено!');
}

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

Например, в приложениях для Windows Phone 7 библиотека PhoneGap JavaScript вызывает сборку WP7CordovaClassLib.dll. На экране 1 видно, что эта сборка добавлена как ссылка в обозревателе решений Visual Studio (VS) 2010. На экране 2 показан Java-архив phonegap-1.5.0.jar, вызываемый библиотекой PhoneGap JavaScript в приложении Android PhoneGap.

Экран 1. Сборка WP7Cordova ClassLib.dll в VS

Экран 2. Java-архив phonegap-1.5.0.jar в ?Android PhoneGap

Достоинства и недостатки

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

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

Интеграция собственного кода мобильных устройств с SharePoint

Подготовка собственного исходного текста для нескольких аппаратных платформ — нелегкая задача, и невозможно показать все образцы кода для каждого подхода в рамках этой статьи. Однако можно загрузить учебный курс SharePoint 2010 and Windows Phone 7 Training Course из сети MSDN и быстро освоить подход для проектирования собственного приложения Windows Phone 7, проходящего проверку подлинности в SharePoint и взаимодействующего с API-интерфейсами SharePoint.

Текущая версия Microsoft Silverlight не поддерживает NTLM, поэтому в Windows Phone 7 проверка подлинности для SharePoint может быть выполнена одним из двух способов. Можно задействовать веб-службу Authentication SharePoint для проверки подлинности на основе форм (FBA) в среде SharePoint или разместить перед сервером SharePoint сервер Unified Access Gateway (UAG) и ввести учетные данные в заголовки для запросов. В лабораторной работе 1 модуля 6 упомянутого учебного курса объясняется, как организовать подход FBA; в лабораторной работе 2 показан подход UAG. Дополнительные сведения по настройке сервера UAG и направлению в него вызовов из приложений Windows Phone 7 приведены в документе «Building Windows Phone 7 Applications with SharePoint 2010 Products and Unified Access Gateway (UAG)».

Что делать с другими устройствами, такими как Apple iPhone, iPad и Android? Ни в одном официальном учебном пособии Microsoft не объясняется, как использовать собственный исходный текст для интеграции этих аппаратных платформ с SharePoint, но можно позаимствовать подход SharePoint 2010 и учебного курса Windows Phone 7 Training Course. Нужно лишь поместить вызовы службы в специальную оболочку для целевого устройства.

Помните, что можно разместить служебный уровень между SharePoint и мобильными приложениями. Служебный уровень может потребоваться, чтобы преодолеть ограничения проверки подлинности или обеспечить удаленный вызов функций, недоступных в службах, изначально предоставляемых SharePoint.

Интеграция PhoneGap и SharePoint

Проектируя приложения PhoneGap, интегрированные с SharePoint, я почерпнул полезную информацию и освоил несколько приемов. Прежде всего, между эмуляторами существуют большие различия в распознавании хост-имен. При обращении к серверу SharePoint из эмулятора Windows Phone 7 эмулятор использует настройки DNS и файл HOSTS на хост-компьютере для разрешения адресов. Но эмулятор Android не использует файл HOSTS на хост-компьютере. В Интернете можно найти несколько публикаций, в которых описано, какие изменения необходимо внести в файл HOSTS на эмуляторе Android, чтобы разрешить узлы, не зарегистрированные в DNS. Мне не удалось применить эти методы к эмулятору Android на хост-компьютере Windows. Чтобы эмулятор Android распознал сервер разработки SharePoint, я зарегистрировал имя сервера в DNS и воспользовался параметром командной строки, дабы передать имя DNS-сервера эмулятору при запуске.

По моему опыту, эмулятор Android гораздо медленнее и значительно уступает в надежности эмулятору Windows Phone 7. Например, начальный процесс загрузки эмулятора Android и развертывания приложения для тестирования может занять несколько минут. Кроме того, в эмуляторе Android часто не удается развернуть приложения с первой попытки. Нередко приходится закрыть Android Debug Bridge (adb.exe) и среду разработки Eclipse, убедиться, что они не функционируют, в диспетчере задач, а затем перезапустить их. Судя по публикациям в Интернете, такое поведение типично. С другой стороны, эмулятор Windows Phone 7 запускается и развертывает новые приложения менее чем за минуту и не подвержен перемежающимся сбоям при развертывании, свойственным эмулятору Android. Помните, обе среды разработки были размещены на компьютерах Windows? Возможно, описанные изъяны эмулятора Android не будут проявляться на компьютерах Unix. По этой причине быстрее развернуть VS 2010, а затем скопировать код HTML5 и JavaScript в другие проекты, когда придет время тестирования на других платформах.

Следует также учитывать, что в библиотеке PhoneGap JavaScript есть ошибки, проявляющиеся на разных аппаратных платформах. Например, в версиях PhoneGap, предшествующих 1.5, заголовки запросов неверно устанавливаются при передаче вызовов AJAX из jQuery в устройство Windows Phone 7. В устройствах Android и Apple iOS заголовки были установлены верно. Из-за новизны PhoneGap такие проблемы неизбежны, но со временем библиотека будет совершенствоваться. Приятно, что при публикации подобных вопросов на форуме поддержки PhoneGap разработчики быстро исследуют проблему и незамедлительно вносят исправления. Упомянутая ошибка была устранена в течение двух недель после того, как о ней сообщили несколько человек.

Образцовое приложение

В следующем примере показано, как использовать PhoneGap, jQuery, jQuery Mobile, JavaScript и HTML5 для создания простого мобильного приложения, выполняющего проверку подлинности пользователя на FBA-совместимом сайте SharePoint и производящего операции создания, чтения, обновления и удаления (CRUD) с данными списков SharePoint. Пример ориентирован на устройства Windows Phone 7 и Android, но исходный текст можно задействовать и для iPhone, iPad и других устройств.

Сначала на хост-компьютере Windows 7 была подготовлена среда разработки PhoneGap для Windows Phone 7 и Android. Чтобы начать разработку с помощью PhoneGap, познакомьтесь с руководством для начинающих на веб-узле PhoneGap. В руководстве описаны требования к оборудованию и способы установки различных инструментов и комплексов разработки (SDK) для приложений PhoneGap. После того, как среда разработки была готова, я создал простое Hello world для каждого целевого устройства.

Затем я начал готовить программный код для проверки подлинности на FBA-совместимом сервере SharePoint. В нем определяется страница HTML5 для загрузки всех необходимых скриптов и CSS-файлов. Обратите внимание, что в исходный текст страницы включен файл phonegap-1.5.0.js, jQuery, jQuery Mobile и два файла JavaScript, которые я подготовил и использовал для настройки страницы.

Можно заметить, что библиотека PhoneGap JavaScript входит в каждую HTML-страницу, чтобы подготовить приложения для взаимодействия с API-интерфейсами для конкретных устройств. Ради простоты демонстрационного приложения и ясности исходного текста удалена функциональность PhoneGap. Обратите внимание, что библиотека PhoneGap JavaScript для связи с сервером SharePoint не требуется. Но, как отмечалось ранее, она необходима для взаимодействия с собственными API-интерфейсами на мобильном устройстве через JavaScript. В этом образцовом приложении используется приложение-оболочка PhoneGap для устройств Windows Phone 7 и Android. Это приложение загружает браузер, который отображает HTML-страницы, составляющие приложение.

Может возникнуть вопрос, почему не используется объектная модель на стороне клиента (CSOM) SharePoint ECMA (JavaScript) для запроса данных на сайте SharePoint. SharePoint ECMA CSOM не поддерживается и не работает в этом контексте, так как для CSOM необходим элемент управления FormsDigest . Данный элемент недоступен вне страницы SharePoint. Дополнительные сведения можно найти в статье «Differences Between Managed and JavaScript ObjectModels» в сети MSDN. Некоторые умельцы встраивают эти элементы управления в отличные от SharePoint веб-страницы в веб-узлах ASP.NET, но такой элемент будет слабым местом в вашей программе.

Кроме того, в версию приложения для Windows Phone 7 необходимо добавить код для обработки событий Click нажатия аппаратной кнопки возврата, чтобы приложение не завершало работу, а переходило к предыдущей веб-странице в мобильном приложении. Способ реализовать этот код приведен на сайте Scott Logic.

Phonegap SharePoint List Data Editor

Когда приложение загружается, в первую очередь следующий файл init.js регистрирует событие, которое следит за событием DeviceReady. Библиотека PhoneGap JavaScript выдает это событие, когда библиотека PhoneGap инициализирована и готова к использованию.

$(document).ready(function () {
document.addEventListener(«deviceready», onDeviceReady, false);
});

Если нужно провести отладку приложения вне браузера, можно заменить предыдущую функцию следующей. Эта функция позволяет присоединить отладчик JavaScript непосредственно к веб-странице.

$(window).load(function () {
setTimeout(onDeviceReady, 100);
});

Когда происходит событие onDeviceReady, support.cors и mobile.allowCrossDomainPages получают значение true, чтобы обеспечить связь приложения с веб-службами SharePoint. Затем jQuery используется, чтобы дополнить страницу кнопкой Authenticate. Я решил добавить кнопку после инициализации PhoneGap, чтобы исключить временное рассогласование при нажатии кнопки. Обратите внимание, что функция Authenticate зарегистрирована для события onClick для кнопки Authenticate.

function onDeviceReady() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$(«#topnavcontent»).append(«Authenticate");
$(«#topnavcontent»).trigger(«create»);
}

На экране 3 показано, как выглядит загруженная страница.

Экран 3. Страница проверки подлинности

После нажатия кнопки Authenticate вызывается функция Authenticate. Эта функция определена в файле spauth.js, который включен в исходный текст страницы. Внутри функции, показанной ниже, собран конверт Simple Object Access Protocol (SOAP) и используется jQuery AJAX для вызова веб-службы SharePoint Authentication. Учетные данные пользователя передаются в конверте SOAP.

function Authenticate() {
$(«#topnavcontent»).append(«Creating SOAP envelope...
»);
var soapEnv = «" +
«» +
«» +
«имя_пользователя» +
«пароль» +
«» +
«» +
«»;
$(«#topnavcontent»).append(«Calling authenticate.asmx...
»);
$.ajax({
url: «http://ski.canviz.com/_vti_bin/authentication.asmx»,
type: «POST»,
dataType: «xml»,
data: soapEnv,
complete: authenticationResultSuccess,
contentType: «text/xml; charset=\"utf-8\"»,
error: authenticationResultError
});
}

Следующие функции применяются для обработки косвенного вызова из запроса AJAX к веб-службе SharePoint Authentication. После успешного завершения запроса в браузере сохраняется cookie. Этот cookie используется, чтобы отслеживать пользователей, выполняющих регистрацию, и проверять подлинность последующих запросов к серверу SharePoint. Такой процесс проверки подлинности гораздо проще, чем подход на основе собственного кода, поскольку не нужно отслеживать cookie и привязывать его к последующим запросам, направляемым к серверу SharePoint. Функция authenticationResultSuccess перенаправляет пользователя на веб-страницу main.html в браузере на мобильном устройстве.

function authenticationResultSuccess(xData, status) {
if (status! = «error») {
$(«#topnavcontent»).append(«Authentication Result:» + status + «
»);
window.location = «main.html»;
}
else {
$(«#errorContent»).empty();
$(«#errorContent»).append(«Authentication Result:» + status + «
»);
$(«#errorContent»).trigger(«create»);
}
}

Функция authenticationResultError используется для обработки ошибок и вывода ошибки на экран.

function authenticationResultError(xData, status) {
$(«#errorContent»).empty();
$(«#errorContent»).append(«Authentication Result:» + status + «
»);
$(«#errorContent»).trigger(«create»);
}

После успешной проверки подлинности страница main.html запрашивает сервер SharePoint и возвращает все элементы в созданном мною списке Ski Resorts. Этот список основан на готовом шаблоне списка и содержит только столбец Title. Пример упрощен, чтобы сократить количество программного кода в статье.

На экране 4 показан вид данных в списке Ski Resorts. На экране 5 показана главная страница в эмуляторе Windows Phone 7, отображающая эти данные. На экране 6 показана главная страница в эмуляторе Android, отображающая данные. Обратите внимание на одинаковый стиль оформления двух приложений с инфраструктурой jQuery Mobile.

Экран 4. Данные в списке Ski Resorts

Экран 5. Главная страница в эмуляторе Windows Phone 7, отображающая данные из Ski Resorts

Экран 6. Главная страница в?эмуляторе Android

В файле mainpage.html можно увидеть, что два файла JavaScript загружаются для поддержки действий, выполняемых на этой странице. Элемент просмотра списка jQuery Mobile размещается на странице для показа элементов списка SharePoint, а две кнопки служат для обновления списка и создания в нем нового элемента.

Phonegap SharePoint List Data Editor
Ski Resorts


Refresh
Add New Resort






Файл maininit.js запускает функцию GetItems, определенную в файле spqueries.js.
$(window).load(function () {
setTimeout(init, 100);
});
function init() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
GetItems();
}

Функция GetItems работает очень похоже на функцию Authenticate. GetItems собирает конверт SOAP и вызывает веб-службу SharePoint Lists для извлечения элементов из списка Ski Resorts.

function GetItems() {
var soapEnv =
«» +
«» +
«» +
«Ski Resorts» +
«» +
«» +
«" +
«» +
«» +
«» +
«» +
«»;
$.ajax({
url: «http://ski.canviz.com/_vti_bin/lists.asmx»,
type: «POST»,
dataType: «xml»,
data: soapEnv,
complete: processGetItemsResultSuccess,
contentType: «text/xml; charset=\"utf-8\"»,
error: processGetItemsResultError
});
}
function processGetItemsResultError(xData, status) {
$(«#errorContent»).empty();
$(«#errorContent»).append(«Get Items Result:» + status + «
»);
$(«#errorContent»).trigger(«create»);

После завершения запроса к веб-службе Lists функция processGetItemsResultSuccess выполняет цикл обработки результатов и добавляет их в представление списка jQuery Mobile. Функция ShowDetails в файле maininit.js зарегистрирована с событием onClick для каждого элемента, добавленного в представление списка.

function processGetItemsResultSuccess(xData, status) {
$(«#listview»).empty();
$(xData.responseXML).find(«z\\:row, row»).each(function () {
var output = «
» +
«» +
$(this).attr(«ows_Title») +
«» +
«
»;
$(«#listview»).append(output);
});
$(«#listview»).listview(«refresh»);
}

Когда пользователь щелкает элемент в представлении списка, следующая функция ShowDetails использует localStorage HTML5 для хранения идентификатора (ID) и заголовка (Title) для текущего элемента списка, а затем перенаправляет пользователя на страницу itemdetail.html. Сохранение значений в localStorage и их извлечение из других страниц в приложении — отличный способ передать данные из одной страницы в другую. Если попытаться использовать строку запроса (как я поступил сначала), возникнут ошибки JavaScript.

function ShowDetails(ID, Title) {
localStorage.setItem(«currentItemID», ID);
localStorage.setItem(«currentItemTitle», Title);
window.location = «itemdetail.html»;
}

Страница itemdetail.html отображает заголовок (Title) для выбранного элемента списка и позволяет пользователю изменить значение. На экране 7 показана страница сведений об элементе в эмуляторе Windows Phone 7. Обратите внимание на эффект свечения, применяемый jQuery Mobile вокруг текстового поля, выбранного для ввода.

Экран 7. Страница сведений об элементах в?эмуляторе Windows Phone 7

На экране 8 показана страница сведений об элементе в эмуляторе Android. На этой иллюстрации текстовое поле для вывода не выбрано, поэтому эффект свечения отсутствует.

Экран 8. Страница сведений об элементах в?эмуляторе Android

Следующая страница itemdetail.html загружает itemdetailinit.js и определяет текстовое поле для отображения и редактирования столбца Title.

Phonegap SharePoint List Data Editor
Resort Details

Name:

В следующем файле itemdetailinit.js идентификатор (ID) и заголовок (Title), выбранные на предшествующей странице, извлекаются из localStorage. jQuery используется для показа Title в текстовом поле, а ID применяется для назначения события Click кнопке Delete («Удалить»).

$(window).load(function () {
setTimeout(init, 100);
});
function init() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
$(«#ItemTitle»).val(«");
$("#ItemTitle»).trigger(«create»);
var ID = localStorage.getItem(«currentItemID»);
var Title = localStorage.getItem(«currentItemTitle»);
$(«#ItemTitle»).val(Title);
$(«#footercontent»).append(«" + «Save»);
$(«#footercontent»).append(«» +"Delete");
$(«#footercontent»).trigger(«create»);
}

При нажатии кнопки Save («Сохранить») запускается функция Update. Эта функция использует ID, полученный из localStorage, и значение в текстовом поле для обновления элемента списка путем вызова функции UpdateItem, определенной в файле spqueries.js.

function Update() {
UpdateItem(localStorage.getItem(«currentItemID»), $(«#ItemTitle»).val());
}

Как мы видим, программный код похож на другие вызовы веб-службы Lists. Обратите внимание на значения beforeSend, назначаемые по запросу jQuery AJAX. Если эти значения заданы неправильно, то сервер выдает ошибку 500, что затрудняет отладку.

function UpdateItem(ID, Title) {
var soapEnv =
«» +
«» +
«» +
«Ski Resorts» +
«» +
«» +
«" +
«» + ID + «» +
«» + Title + «» +
«» +
«» +
«» +
«» +
«» +
«»;
$.ajax({
url: «http://ski.canviz.com/_vti_bin/lists.asmx»,
type: «POST»,
dataType: «xml»,
data: soapEnv,
beforeSend: function (xhr) {
xhr.setRequestHeader(«SOAPAction», «http://schemas.microsoft.com/sharepoint/soap/UpdateListItems»);
},
complete: processUpdateItemResultSuccess,
contentType: «text/xml; charset=\"utf-8\"»,
error: processUpdateItemResultError
});
}
function processUpdateItemResultError(xData, status) {
$(«#errorContent»).empty();
$(«#errorContent»).append(«Update Item Result:» + status + «
»);
$(«#errorContent»).trigger(«create»);
}

После успешного обновления функция processUpdateItemResultSuccess возвращает пользователя на основную страницу.

function processUpdateItemResultSuccess(xData, status) {
window.location = «main.html»;
}

При нажатии кнопки Delete запускается функция Delete в файле spqueries.js. Эта функция использует веб-службу Lists для удаления элемента из списка SharePoint. Функция Delete задействует идентификатор элемента для его обнаружения в списке SharePoint.

function DeleteItem(ID) {
var soapEnv =
«» +
«» +
«» +
«Ski Resorts» +
«» +
«» +
«" +
«» + ID + «» +
«» +
«» +
«» +
«» +
«» +
«»;
$.ajax({
url: «http://ski.canviz.com/_vti_bin/lists.asmx»,
type: «POST»,
dataType: «xml»,
data: soapEnv,
beforeSend: function (xhr) {
xhr.setRequestHeader(«SOAPAction», «http://schemas.microsoft.com/sharepoint/soap/UpdateListItems»);
},
complete: processDeleteResultSuccess,
contentType: «text/xml; charset=\"utf-8\"»,
error: processDeleteResultError
});
}
function processDeleteResultError(xData, status) {
$(«#errorContent»).empty();
$(«#errorContent»).append(«Delete Item Result:» + status + «
»);
$(«#errorContent»).trigger(«create»);
}

После успешного удаления элемента функция processDeleteResultSuccess удаляет значения из localStorage и возвращает пользователя на главную страницу.

function processDeleteResultSuccess(xData, status) {
localStorage.removeItem(«currentItemID»);
localStorage.removeItem(«currentItemTitle»);
window.location = «main.html»;
}

Как показано в следующем фрагменте исходного текста, кнопка Add New Resort («Добавить новый курорт») на главной странице вызывает функцию ShowCreate, определенную файл maininit.js. Эта функция перенаправляет пользователя на страницу creatitem.html.

function ShowCreate() {
window.location = «createitem.html»;
}

На экране 9 показана страница createitem.html в эмуляторе Windows Phone 7. На экране 10 мы видим страницу createitem.html в эмуляторе Android.

Экран 9. Страница создания элемента в?эмуляторе Windows Phone 7

Экран 10. Страница создания элемента в?эмуляторе Android

Следующая страница createitem.html создает текстовое поле для приема значения для столбца Title для нового элемента списка SharePoint. Обратите внимание, что файл createitem.js и файл spqueries.js тоже включены для упрощения взаимодействия с SharePoint.

Phonegap SharePoint List Data Editor
Add A New Resort

Name:



Add





The following createitem init.js file ensures that the localStorage values are removed and resets the form.
$(window).load(function () {
setTimeout(init, 100);
});
function init() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
localStorage.removeItem(«currentItemID»);
localStorage.removeItem(«currentItemTitle»);
$(«#ItemTitle»).val(«");
}
function Create() {
CreateItem($("#ItemTitle»).val());
}

При нажатии кнопки Add («Добавить») на странице createitem.html срабатывает функция Create. Она вызывает функцию CreateItem в файле spqueries.js и использует jQuery, чтобы получить значение из текстового поля, которое затем может быть передано в качестве параметра.

Следующая функция CreateItem использует веб-службу Lists, чтобы создать новый элемент в списке Ski Resorts.

function CreateItem(Title) {
var soapEnv =
«» +
«» +
«» +
«Ski Resorts» +
«» +
«» +
«" +
«New» +
«» + Title + «» +
«» +
«» +
«» +
«» +
«» +
«»;
$.ajax({
url: «http://ski.canviz.com/_vti_bin/lists.asmx»,
type: «POST»,
dataType: «xml»,
data: soapEnv,
beforeSend: function (xhr) {
xhr.setRequestHeader(«SOAPAction»,
«http://schemas.microsoft.com/sharepoint/soap/UpdateListItems»);
},
complete: processCreateResultSuccess,
contentType: «text/xml; charset=\"utf-8\"»,
error: processCreateResultError
});
}
function processCreateResultError(xData, status) {
$(«#errorContent»).empty();
$(«#errorContent»).append(«Create Item Result:» + status + «
»);
$(«#errorContent»).trigger(«create»);
}

Когда элемент создан, функция косвенного вызова success возвращает пользователя на главную страницу.

function processCreateResultSuccess(xData, status) {
window.location = «main.html»;
}

Для этого приложения выбраны самые простые образцы исходного текста, чтобы проиллюстрировать концепции, рассматриваемые в статье. С помощью вызовов многочисленных веб-служб ASMX можно выполнять разнообразные задачи в SharePoint. Кроме того, можно задействовать RSS-каналы из списков SharePoint или использовать API-интерфейсы Open Data Protocol (OData).

Среди других способов создания страниц с применением jQuery Mobile — размещение всех страниц в файле single. html, а также другие методы создания кнопок и ссылок в приложениях HTML5. Дополнительные сведения об этих вариантах можно найти на сайте jQuery Mobile Framework. Также существует много вспомогательных библиотек JavaScript, с помощью которых можно упростить программный код JavaScript и привязать данные к шаблонному HTML-коду. Уделите время изучению этих библиотек, чтобы узнать, будут ли они полезны в ваших мобильных приложениях.

Оптимальный подход

Как мы видим, существует несколько способов построения мобильных приложения, интегрируемых с SharePoint. Понимание доступных вариантов и их достоинств и недостатков поможет определить правильный подход для конкретной компании. PhoneGap — новая технология, которая ускоряет проектирование приложений для разнообразных целевых мобильных платформ и позволяет сократить затраты на обслуживание, связанные с приложениями.