SPV201 Лабораторная работа

Введение в разработку приложений SharePoint 2013 и

Office 2013 с помощью NAPAтехнологии

2

Содержание

Введение..........................................................................................................................................................3

Упражнение 1: Получение Office 365 Online Preview и настройка среды разработки................................4

Задание 1: Зарегистрируйтесь и получите доступ к своей среде для работы в Office 365.....................4

Задание 2: Создайте коллекцию сайтов разработки................................................................................6

Задание 3: Установите Napa на сайте разработки.....................................................................................8

Упражнение 2: Создание простого приложения для SharePoint 2013 с помощью средств разработки Napa Office 365...............................................................................................................................................10

Задание 1: Создайте приложение для SharePoint...................................................................................10

Задание 2: Добавьте элементы управления на домашнюю страницу..................................................10

Задание 3: Добавьте код для создания и удаления списков..................................................................11

Задание 4: Запустите приложение для SharePoint..................................................................................16

Задание 5: Добавьте код для создания и удаления элементов списков...............................................17

Задание 6: Запустите обновленное приложение для SharePoint...........................................................21

Задание 7: Дальнейшие действия............................................................................................................22

Упражнение 3: Создание простого приложения с контентом для Excel с помощью средств разработки Napa Office 365...............................................................................................................................................24

Задание 1: Создайте новое приложение для Office................................................................................24

Задание 2: Запустите приложение для Office..........................................................................................25

Задание 3: Добавьте в проект HTML файл...............................................................................................26

Задание 4: Изменение свойств приложения...........................................................................................28

Задание 5: Получение данных из ячейки листа Excel.............................................................................29

Задание 6: Запустите приложение для Office..........................................................................................31

Задание 7: Помещение данных в ячейку листа Excel..............................................................................31

Задание 8: Запустите приложение для Office..........................................................................................32

Задание 9: Обработка события на листе..................................................................................................33

Задание 10: Запустите приложение для Office........................................................................................34

Задание 11: Привязка к ячейкам на листе Excel......................................................................................34

Задание 12: Запустите приложение для Office........................................................................................36

Задание 13: Дальнейшие действия..........................................................................................................36

Выводы...........................................................................................................................................................38

3

Введение

Примерное время выполнения лабораторной работы: 30 минут

Цели

1. Познакомиться с новой онлайн технологией разработки приложений для Office 365 Preview под названием Napa;

2. Познакомиться с некоторыми основными концепциями разработки для SharePoint 2013 Preview: SharePoint App и Office App. После завершения данной лабораторной работы Вы сможете:

Устанавливать Napa на сайте SharePoint 2013 Preview; Создать простое приложение для SharePoint; Создать простое приложение для Office.

Сценарий

Данная лабораторная работа является коротким обзором, который познакомит Вас с новыми возможностями онлайн разработки для SharePoint 2013 с помощью технологии NAPA, а также возможностями создания простых приложений для SharePoint 2013 и Office 2013.

Подключение к среде лабораторной работы:

Зайдите в виртуальную машину с помощью следующих учетных данных

Имя пользователя Admin

Пароль P@ssw0rd

ПРИМЕЧАНИЕ: В пароле используется цифра 0.

ПРИМЕЧАНИЕ: В процессе лабораторной работы Вам могут быть выданы учетные данные Office 365 Preview либо Вы можете зарегистрироваться прямо в ходе лабораторной. Пожалуйста, уточните режим входа у у инструктора или координатора лабораторной работы.

Условия выполнения

Наличие аккаунтов: Office 365 Preview, Live ID

Инструктор

Бакиров Марат Фазылович, MCPD, MVP

https://mvp.support.microsoft.com/profile/Marat.Bakirov

4

1: Упражнение Получение Office 365 Online Preview инастройка средыразработки

Примерное время выполнения задания: 10 минут

Обзор

Napa – это новая онлайн технология разработки для Office 365 Preview. Napa устанавливается как приложение SharePoint 2013 и доступна для загрузки в Marketplace. Данное упражнение поможет создать и настроить среду разработки для SharePoint 2013 в Office 365 Online Preview и установить Napa.

1: Задание Зарегистрируйтесь и получите доступ к своей среде для работыв Office 365

1. Перейдите на сайт http://dev.office.com/. Откроется страница Build apps for Office and SharePoint

2. Нажмите плитку Build

Откроется страница описанием шагов работе со средой Office 365 Preview

5

3. Для перехода к процедуре регистрации нажмите Sign Up

Откроется страница с анкетой регистрации в Office 365 Preview

4. Заполните необходимые поля анкеты и нажмите кнопку Create my account внизу страницы. 5. Дождитесь окончания процедуры регистрации, после чего откроется центр

администрирования Office 365 Preview.

6

Дождитесь окончания резервирования сред Office 365, включая SharePoint. Это может занять 1-3 минуты

После окончания резервирования обновите страницу и перейдите к выполнению следующего задания.

2: Задание Создайте коллекциюсайтов разработки

Данное упражнение поможет Вам создать коллекцию сайтов разработки, которая необходима для разработки с помощью Napa.

1. Зайдите в Office 365, используя параметры, приведенные в разделе Подключение к среде лабораторной работы.

2. В правом верхнем углу (рядом с Вашим именем), нажмите ссылку Admin, и затем SharePoint.

7

3. Во вкладке Site Collections нажмите New -> Private Site Collection.

4. Откроется страница создания новой коллекции сайтов. Укажите имя сайта, URL-адрес и выберите шаблон сайта Developer Site.

a. Добавьте свой аккаунт в поле Administrator.b. Вам не понадобится много дискового пространства, так как Вы будете создавать

список и несколько элементов. 100MB будет более, чем достаточно.c. Другие поля заполняются опционально.

Нажмите OK. Дождитесь создания нового сайта. Это может занять 1-2 минуты.

8

3: Задание Установите Napa на сайте разработки

В данном задании Вам необходимо перейти в магазин SharePoint и установить приложение Napa на Вашем сайте разработки.

1. Перейдите в новую коллекцию сайтов. a. Нажмите на ссылку в списке коллекций сайтов Site Collections, затем нажмите на

ссылку в появившемся диалогом окне.2. В левой колонке нажмите на ссылку Site Contents, чтобы просмотреть содержимое сайта.3. Нажмите add an app в списке содержимого сайта.

4. В левой колонке нажмите на ссылку SharePoint Store

5. Выберите “Napa” Office 365 Development Tools в списке доступных приложений.

9

6. На странице описания Napa нажмите ADD IT, чтобы установить приложение на своем сайте.

7. Подтвердите, что Вы хотите добавить приложение, нажав Continuea. На данном шаге необходимо ввести свои учетные данные. Для того чтобы установить

приложение, используйте свой Live ID. 8. Нажмите Return to Site9. В открывшемся окне нажмите Trust It.10. После этого Вы будете перенаправлены на свой сайт разработки. Дождитесь, пока

приложение Napa будет установлено. Это может занять 1-2 минуты.11. После этого запустите приложение Napa, нажав на его имя. Теперь приложение установлено,

и Вы можете использовать его на сайте, так же как и любое другое приложение SharePoint.

10

2: Упражнение Создание простого приложения дляSharePoint 2013 с помощьюсредств разработки Napa Office 365

Примерное время выполнения задания: 15 минут

Обзор

Вы научитесь создавать простые приложения для SharePoint, используя приложения Napa для Office 365 Development Tools. Приложение, которое Вы создадите, включает элементы управления и код для управления списками и элементами списка, однако, приложения для SharePoint могут быть более сложными. Например, Вы можете создать приложение для SharePoint, которое помогает пользователям отслеживать расходы и планировать мероприятия. Используя приложение Napa, Вы можете создавать свои приложения для SharePoint прямо в браузере без использования Visual Studio. Вы, также, можете создать свой проект с помощью Napa и открыть его в Visual Studio, для создания более сложных сценариев.

1: Задание Создайте приложение для SharePoint

1. Перейдите на страницу приложения Napa и создайте новый проект, нажав App for SharePoint.

2. Назовите свой проект и нажмите кнопку Create. Откроется страница редактора кода по умолчанию, на которой уже содержится определенный код, который Вы можете запустить без каких-либо изменений.

2: Задание Добавьте элементыуправления на домашнююстраницу

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

1. В левой части страницы под папкой Pages выберите страницу Default.aspx, если она еще не выбрана.

В редакторе кода откроется страница Default.aspx.

2. Добавьте приведенный ниже код в раздел PlaceHolderMain под уже имеющимся кодом:

11

<br /><div>

<button id="getListCount">Get count of lists in web</button></div><br /><div id="starter"> <input type="text" value="List name here" id="createlistbox"/><button

id="createlistbutton">Create List</button> <p> Lists <br /> <select id="selectlistbox" ></select><button id="deletelistbutton">Delete Selected

List</button> </p></div>

Введенный HTML создаст на странице следующие элементы управления:

Кнопку, при нажатии на которую должно отобразиться количество списков в текущем веб-сайте SharePoint.

Кнопку для создания списка SharePoint и еще одну кнопку для удаления списка. Перечень списков, доступных в текущем веб-сайте SharePoint.

3: Задание Добавьте код для созданияи удаления списков

1. Перейдите в папку Scripts, и нажмите ссылку App.js.

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

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

Название функции Описание

12

getWebProperties() Подключена к элементу управления getListCount, который получает число списков веб-сайта SharePoint .

createlist() Подключена к элементу управления createListButton, который создает общий список SharePoint.

deletelist() Подключена к элементу управления deletelistbutton, который удаляет список, выбранный пользователем из перечня доступных списков.

Вы также научитесь вызывать функции welcome() и displayLists(), которые будут описаны ниже.

2. В файле App.js измените код исходной функции sharePointReady() на следующий:

function sharePointReady() { context = new SP.ClientContext.get_current(); web = context.get_web();

getUserName();

$("#getListCount").click(function (event) { getWebProperties(); event.preventDefault(); }); $("#createlistbutton").click(function (event) { createlist(); event.preventDefault(); }); $("#deletelistbutton").click(function (event) { deletelist(); event.preventDefault(); });

welcome(); displayLists();}

ПРИМЕЧАНИЕ: В коде могут появиться значки ошибок. Они исчезнут в последующих шагах.

В следующем шаге Вы добавите функции JavaScript. Каждая функция в коде выполняется путем вызова executeQueryAsync(), который асинхронно выполняет текущий запрос на сервере, используя объектную модель на стороне пользователя (CSOM или Client Side Object Model) для SharePoint. При асинхронном выполнении функции, Ваш скрипт продолжает работать без ожидания ответа от сервера. Каждый вызов executeQueryAsync()включает два обработчика событий. Один обработчик вызывается, если функция выполняется успешно, другой – если происходит ошибка. Функции описаны в следующей таблице:

13

Название функции Описание

welcome()Получает текущий клиентский контекст, а затем использует его для вставки в контекст информации по текущему пользователю.

getWebProperties() Получает коллекцию списков в текущем веб-сайта SharePoint.

displaylists()Данная функция получает списки текущего веб-сайта SharePoint. Если это происходит успешно, то она добавляет имена списков текущего веб-сайта SharePoint в выпадающий списке Lists.

createlist()

Создает настраиваемый список SharePoint (шаблон списка типа genericList) и присваивает имя, которое пользователь указывает в элементе управления createlistbox. Вы можете создавать другие типы списков. Подробная информация о типах списков представлена по ссылке SPListTemplateType Enumeration .

deletelist()Удаляет список, который пользователь выбрал из перечня доступных списков.

3. Добавьте данный код в конце файла App.js:

function welcome() { // Get the user information, and try to load it into the current // context. this.web = context.get_web(); this.user = web.get_currentUser(); this.context.load(user); this.context.executeQueryAsync(onUserReqSuccess, onUserReqFail);}

function onUserReqSuccess() { // The current user information is loaded into the context – continue.}

function onUserReqFail(sender, args) { // The current user information couldn’t be loaded into the context - display an // error. alert('Failed to find current user. ' + args.get_message());}

function getWebProperties() { // Get the number of lists in the current web. this.web = context.get_web(); this.lists = this.web.get_lists(); this.context.load(this.lists); this.context.executeQueryAsync(Function.createDelegate(this, this.onWebPropsSuccess), Function.createDelegate(this, this.onWebPropsFail));}

14

function onWebPropsSuccess(sender, args) { alert('Number of lists in web: ' + this.lists.get_count());}

function onWebPropsFail(sender, args) { alert('failed to get list. Error:' + args.get_message());}

function displayLists() { // Get the available SharePoint lists, and then set them into // the context. this.web = context.get_web(); this.lists = this.web.get_lists(); this.context.load(this.lists); this.context.executeQueryAsync(Function.createDelegate(this, this.onGetListsSuccess), Function.createDelegate(this, this.onGetListsFail));}

function onGetListsSuccess(sender, args) { // Success getting the lists. Set references to the list // elements and the list of available lists. var listEnumerator = this.lists.getEnumerator(); var selectListBox = document.getElementById("selectlistbox"); if (selectListBox.hasChildNodes()) { while (selectListBox.childNodes.length >= 1) { selectListBox.removeChild(selectListBox.firstChild); } } // Traverse the elements of the collection, and load the name of // each list into the dropdown list box. while (listEnumerator.moveNext()) { var selectOption = document.createElement("option"); selectOption.value = listEnumerator.get_current().get_title(); selectOption.innerText = listEnumerator.get_current().get_title(); selectListBox.appendChild(selectOption); }}

function onGetListsFail(sender, args) { // Lists couldn’t be loaded - display error. alert('failed to get list. Error:' + args.get_message());}

15

function createlist() { // Create a generic SharePoint list with the name that the user specifies. this.web = context.get_web(); var listCreationInfo = new SP.ListCreationInformation(); var listTitle = document.getElementById("createlistbox").value; listCreationInfo.set_title(listTitle); listCreationInfo.set_templateType(SP.ListTemplateType.genericList); this.lists = web.get_lists(); var newList = this.lists.add(listCreationInfo); context.load(newList); context.executeQueryAsync(onListCreationSuccess, onListCreationFail);}

function onListCreationSuccess() { displayLists();}

function onListCreationFail(sender, args) { alert('Failed to create the list.' + args.get_message());}

function deletelist() { // Delete the list that the user specifies. this.web = context.get_web(); var selectListBox = document.getElementById("selectlistbox"); var selectedListTitle = selectListBox.value; var selectedList = web.get_lists().getByTitle(selectedListTitle); selectedList.deleteObject(); context.executeQueryAsync(onDeleteListSuccess, onDeleteListFail);}

function onDeleteListSuccess() { displayLists();}

function onDeleteListFail(sender, args) { alert('Failed to delete the list.' + args.get_message());}

4: Задание Запустите приложение для SharePoint

1. Нажмите кнопку запуска ( ), расположенную внизу страницы.

16

После этого произойдет сборка пакета приложения, его развертывание и установка созданного приложения на Вашем сайте разработки.

После инсталляции приложение SharePoint запустится автоматически.

ПРИМЕЧАНИЕ: Если приложение не запускается автоматически, то это может быть из-за включенной блокировки всплывающих окон браузера.

a. Нажмите на ссылку приложения, чтобы запустить его.b. Выберите команду Click here для запуска Вашего приложения в новом окне. Откроется

окно приложения SharePoint.

2. Нажмите кнопку Get count of lists in web.

Откроется диалоговое окно, в котором видно, что текущий веб-сайт SharePoint, где развернуто Ваше приложения для SharePoint содержит 2 списка (по умолчанию это списки Design Gallery и Master Page Gallery).

17

3. В поле List name here введите название нового списка, а затем нажмите на кнопку Create List.4. Откройте меню выбора списка, чтобы удостовериться, что новый список там появился.

5. Снова нажмите кнопку Get count of lists in web.

Теперь веб-сайт SharePointсодержит три списка, включая и тот, что Вы только что создали.

6. В выпадающем списке Lists выберите только что созданный список, нажмите кнопку Delete Selected List.

Данный список будет удален из списка Lists.

После окончания работы закройте окно браузера и вернитесь в проект приложения, который Вы редактировали.

Задание 5: Добавьте код для создания и удаления элементов списков

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

1. Снова откройте страницу Default.aspx для редактирования.2. В разделе PlaceHolderMain измените элемент selectlistbox, включив событие OnChange(), как

показано в примере.

<select id="selectlistbox" onchange="getitems()"></select> <button id="deletelistbutton">Delete Selected List</button>

18

Событие OnChange() вызывает функцию getItems(), которую Вы добавите позже, для обновления списка, когда пользователь выбирает какой-либо другой список.

3. В элементе selectlistbox добавьте код.

<p>Items<br /><input type="text" value="item name here" id="createitembox"/><button id="createitembutton">Create Item</button></p><p><select id="selectitembox"></select> <button id="deleteitembutton">Delete Selected Item</button></p>

Данный код добавляет строку ввода, где пользователи могу указать имя элемента, кнопку для добавления элемента в список и кнопку для удаления элемента из списка.

4. Перейдите в App.js для редактирования.5. В функции SharePointReady() добавьте определения для функций, которые вызываются, когда

пользователь нажимает кнопки Create Item и Delete Selected Item.

$("#createitembutton").click(function (event) { createitem(); event.preventDefault();});

$("#deleteitembutton").click(function (event) { deleteitem(); event.preventDefault();});

В следующем шаге Вы добавите определения функций JavaScript, которые приведены в таблице ниже:

Название функции Описание

createItem()Добавляет элемент в список, который выбрал пользователь, и присваивает этому элементу имя, которое пользователь указывает в строке.

deleteItem() Удаляет элемент, который пользователь выбирает в списке.getItems() Получает элементы из выбранного пользователем списка

6. Добавьте приведенный ниже код внизу файла App.js.

19

function createitem() { // Retrieve the list that the user chose, and add an item to it. this.web = context.get_web(); var selectListBox = document.getElementById("selectlistbox"); var selectedListTitle = selectListBox.value; var selectedList = web.get_lists().getByTitle(selectedListTitle);

var listItemCreationInfo = new SP.ListItemCreationInformation(); var newItem = selectedList.addItem(listItemCreationInfo); var listItemTitle = document.getElementById("createitembox").value; newItem.set_item('Title', listItemTitle); newItem.update(); context.load(newItem); context.executeQueryAsync(onItemCreationSuccess, onItemCreationFail);}

function onItemCreationSuccess() { // Refresh the list of items. getitems();}

function onItemCreationFail(sender, args) { // The item couldn’t be created – display an error message. alert('Failed to create the item.' + args.get_message());}

function deleteitem() { // Delete the item that the user chose. this.web = context.get_web(); var selectListBox = document.getElementById("selectlistbox"); var selectedListTitle = selectListBox.value; var selectedList = web.get_lists().getByTitle(selectedListTitle);

var selectItemBox = document.getElementById("selectitembox"); var selectedItemID = selectItemBox.value; var selectedItem = selectedList.getItemById(selectedItemID); selectedItem.deleteObject(); selectedList.update(); context.load(selectedList); context.executeQueryAsync(onDeleteItemSuccess, onDeleteItemFail);

}

20

function onDeleteItemSuccess() { // Refresh the list of items. getitems();}

function onDeleteItemFail(sender, args) { // The item couldn’t be deleted – display an error message. alert('Failed to delete the item.' + args.get_message());}

function getitems() { // Using a CAML query, get the items in the list that the user chose, and // set the context to the collection of list items. this.web = context.get_web(); var selectListBox = document.getElementById("selectlistbox"); var selectedList = selectListBox.value; var selectedListTitle = web.get_lists().getByTitle(selectedList); var camlQuery = new SP.CamlQuery(); camlQuery.set_viewXml("<View><ViewFields>" + "<FieldRef Name='ID' />" + "<FieldRef Name='Title' />" + "</ViewFields></View>')"); this.listItemCollection = selectedListTitle.getItems(camlQuery); context.load(this.listItemCollection, "Include(Title, ID)"); context.executeQueryAsync(Function.createDelegate(this, this.onGetItemsSuccess), Function.createDelegate(this, this.onGetItemsFail));}

function onGetItemsSuccess(sender, args) { // The list items were retrieved. // Show all child nodes. var listItemEnumerator = this.listItemCollection.getEnumerator(); var selectItemBox = document.getElementById("selectitembox"); if (selectItemBox.hasChildNodes()) { while (selectItemBox.childNodes.length >= 1) { selectItemBox.removeChild(selectItemBox.firstChild); } } while (listItemEnumerator.moveNext()) { var selectOption = document.createElement("option"); selectOption.value = listItemEnumerator.get_current().get_item('ID'); selectOption.innerText = listItemEnumerator.get_current().get_item('Title'); selectItemBox.appendChild(selectOption);

21

}}

function onGetItemsFail(sender, args) { // The list items couldn’t be retrieved - display an error message. alert('failed to get items. Error:' + args.get_message());}

6: Задание Запустите обновленное приложение для SharePoint

1. Снова нажмите кнопку запуска ( ), расположенную внизу страницы

После этого произойдет развертывание обновленного пакета приложения на Вашем сайте разработки.

После инсталляции приложение SharePoint запустится автоматически.

2. В поле List name here введите название нового списка, а затем нажмите на кнопку Create List.

Новый список будет добавлен в перечень списков.

3. Откройте меню выбора списка, чтобы удостовериться, что новый список там появился.

22

4. В меню списков выберите свой новый список.5. В строке Item name here введите название элемента и нажмите кнопку Create Item.

6. Новый элемент списка появится в списке элементов.7. Повторите предыдущий шаг, чтобы добавить элемент 2 и элемент 3.8. В списке элементов выберите элемент 2, нажмите кнопку Delete Selected Item.

9. Элемент 2 будет удален из списка элементов.10. После окончания работы, закройте окно браузера.

7: Задание Дальнейшие действия

После того, как Вы создали простое приложение для SharePoint 2013, самостоятельно исследуйте следующие пути работы с ним:

1. Откройте проект в Visual Studio. Приложение Napa Office 365 Development Tools автоматически установит необходимые инструменты и откроет проект в Visual Studio 2012.

Вы также можете загрузить и установить данные инструменты непосредственно со страницы Downloads в центре Apps for Office and SharePoint Dev.

23

2. Создайте приложение для SharePoint, используя Visual Studio. Дополнительные сведения см. в статье: Get started developing apps for SharePoint

24

3: Упражнение Создание простого приложения с контентом для Excel с помощьюсредств разработки Napa

Office 365

Примерное время выполнения задания: 20 минут

Обзор

В этом упражнении Вы узнаете, как создать простое приложение для Office с помощью приложения Средства разработки Office 365 «Napa». Приложение, которое Вы создадите, будет получать данные из листа Excel и записывать их обратно на лист, но большинство приложений для Office имеют гораздо более широкие возможности. Например, Вы можете отобразить карту Bing, помогающую пользователям находить предприятия, указанные в документе, или показать заголовки финансовых публикаций, связанные с выбранным на листе элементом.

1: Задание Создайте новое приложение для Office

1. Перейдите на главную страницу Вашей коллекции сайтов разработки. Нажмите кнопку Build an app.

2. На открывшейся странице нажмите Add New Project.

ПРИМЕЧАНИЕ: Кнопка Add New Project отображается только в том случае, если вы уже создали другие проекты. Если это ваш первый проект, перейдите к шагу 3.

3. Выберите плитку Content app for Excel (Контентное приложение для Excel), введите название проекта и нажмите Create.

25

Откроется страница редактора кода по умолчанию, на которой уже содержится определенный код, который Вы можете запустить без каких-либо изменений.

2: Задание Запустите приложение для Office

7. Нажмите кнопку запуска ( ),расположенную внизу страницы.

После этого произойдет сборка пакета приложения, его развертывание и установка созданного приложения на Вашем сайте разработки.

После инсталляции откроется страница Excel Web App, на которой будет доступно созданное приложение:

26

8. Когда вы будете готовы продолжить, закройте страницу Excel Web App, вернувшись к окну редактирования проекта.

3: Задание Добавьте в проект HTML файл

Как и для любого другого веб-сайта SharePoint, Вы можете добавлять в проект HTML-страницы, файлы JavaScript и таблицы стилей.

1. В левой части страницы наведите указатель на папку Pages, нажмите стрелку вниз и затем кнопку Add New item.

Откроется диалоговое окно New file.

2. Выберите плитку Html Page, введите имея файла и нажмите кнопку Create.

27

Откроется редактор html созданной Вами страницы.

3. В левой части страницы разверните папку Scripts и выберите App.js.

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

4. Удалите весь код из функции Office.initialize, чтобы страница, отображенная при запуске приложение для Office, больше не появлялась.

JavaScript

Office.initialize = function (reason) {// code removed. };

ПРИМЕЧАНИЕ: Вы можете использовать метод Office.initialize, чтобы определить другие операции, выполняемые при запуске приложения для Office. Например, если вы хотите, чтобы код осуществлял доступ к объектной модели Office, то такой код лучше всего поместить в эту

28

функцию. Если добавить код в событие Onload HTML-файла по умолчанию, оно может возникнуть до инициализации объектной модели Office и привести к ошибке

После этого мы изменим внешний вид и удобство использования приложения приложение для Office и создадим в нем ссылку на созданную HTML-страницу.

4: Задание Изменение свойств приложения

1. Нажмите кнопку свойств ( )в нижней части страницы.

Откроются свойства приложения для Office.

2. Задайте для свойств Name, StartPage, Description, Initial width и Initial height следующие значения:

Свойства Name и Description помогают пользователям понять назначение приложений при выборе из списка доступных приложений для Office. Свойства Initial width и Initial height указывает на размеры приложения. Свойство StartPage указывает на страницу, которая отображается в приложении при запуске проекта.

3. Закройте диалоговое окно.

ПРИМЕЧАНИЕ: В редакторе Свойства отображаются не все, а только наиболее часто используемые параметры приложений. Если потребуется изменить дополнительные

29

параметры, которых нет в окне Properties , Вы можете создать или изменить файл манифеста приложения с помощью Visual Studio или текстового редактора.

5: Задание Получение данныхиз ячейки листа Excel

Ваше приложение может получать значение отдельной ячейки или значения набора ячеек. Текущее задание позволит получить значения отдельной ячейки, выбираемой пользователем на листе в строку приложения.

1. В левой части страницы выберите свою страницу.

Откроется редактор исходного кода страницы.

2. Замените код, входящий в тег <head> на приведенный ниже:

<head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <title>MyFirstApp</title>

<link rel="stylesheet" type="text/css" href="../Content/Office.css" />

<!-- Add your CSS styles to the following file --> <link rel="stylesheet" type="text/css" href="../Content/App.css" />

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script> <script src="https://az88874.vo.msecnd.net/api/1.0/office.js "></script>

<!-- Add your JavaScript to the following file --> <script src="../Scripts/App.js"></script></head>

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

Название файла Описание

30

App.css, Office.cssФайлы CSS по умолчанию для проекта. Вы можете использовать эти страницы, чтобы задать определенные аспекты отображения веб-страницы.

jquery-1.6.2.min.jsСодержит библиотеку JavaScript, которая упрощает просмотр HTML-документов, обработку событий, анимацию и взаимодействия Ajax для ускорения разработки приложений.

Office.js API JavaScript для Office. Этот файл предоставляет код с точкой входа для документов и элементов Office.

App.js Файл JavaScript по умолчанию для проекта.

1. Добавьте приведенный ниже код в тег <body>:

<body> <input id="output" /> <br /> <button onclick="getTextFromDocument()">Get symbol</button> <br />

</body>

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

2. Откройте файл App.js и добавьте следующий код:

function getTextFromDocument() {

Office.context.document.getSelectedDataAsync(Office.CoercionType.Text, { valueFormat: "unformatted", filterType: "all" },

function (asyncResult) { var dataValue = asyncResult.value; var e = document.getElementById("output"); e.value = dataValue; });}

Этот код получает значение выбранной пользователем ячейки и помещает его в текстовое поле в приложении приложение для Office.

ПРИМЕЧАНИЕ: Как и другие методы в API JavaScript для Office, этот метод является асинхронным, то есть его выполнение не мешает приложению выполнять другие операции.

Вызов getSelectedDataAsync передает асинхронную функцию с параметром asyncResult в качестве аргумента обратного вызова. При запуске данная функция использует параметр asyncResult для доступа к свойству значения объекта AsyncResult, чтобы отобразить данные в выбранной пользователем ячейке.

31

6: Задание Запустите приложение для Office

1. Нажмите кнопку запуска ( ),расположенную внизу страницы.

После этого произойдет сборка пакета приложения, его развертывание и установка созданного приложения на Вашем сайте разработки.

После инсталляции откроется страница Excel Web App, на которой будет доступно обновленное приложение.

2. Введите любое значение в одну из ячеек Excel Web App.3. В приложении нажмите кнопку Get symbol.

В текстовом поле над кнопкой отобразится текст из ячейки.

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

4. Закройте Excel Web App.

7: Задание Помещение данных в ячейку листа Excel

В этом задании Вы поместите данные, введенные пользователем в строку приложения, в ячейку на листе.

Ваше приложение может поместить данные в любую ячейку или набор ячеек. Текущая задача заключается в помещении данных в ячейку, выбираемую пользователем на листе. После выполнения этих действий вы сможете добавить текст в ячейку на листе, нажав кнопку в приложении.

1. В левой части страницы выберите свою страницу.

32

Откроется редактор кода страницы.

2. Замените код, входящий в тег <head> на приведенный ниже:

<body> <input id="input"/> <br /> <button onclick="addTextToDocument()">Add symbol</button> <br /> <input id="output" /><br /> <button onclick="getTextFromDocument()">Get symbol</button> <br /></body>

3. Откройте файл App.js в редакторе кода и добавьте следующий код:

function addTextToDocument() {

var e = document.getElementById("input"); var text = e.value;

Office.context.document.setSelectedDataAsync(text, function (asyncResult) {});}

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

8: Задание Запустите приложение для Office

1. Нажмите кнопку запуска ( ),расположенную внизу страницы.

После этого произойдет сборка пакета приложения, его развертывание и установка созданного приложения на Вашем сайте разработки.

После инсталляции откроется страница Excel Web App, на которой будет доступно обновленное приложение.

2. Выберите любую ячейку в Excel Web App.3. В текстовом поле приложения введите любое значение, а затем нажмите кнопку Add symbol.

33

В выбранной Вами ячейке отобразится введенный Вами текст.

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

4. Закройте Excel Web App.

9: Задание Обработка событияна листе

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

1. Откройте файл App.js в редакторе кода и замените функцию Office.initialize на следующий код.

Office.initialize = function (reason) { Office.context.document.addHandlerAsync (Office.EventType.DocumentSelectionChanged, updateApp);}

В этом коде содержится метод, вызываемый при выборе ячейки пользователем.

2. Добавьте в файл App.js следующий код.

function updateApp(){ getTextFromDocument();}

Этот метод вызывается при выборе ячейки пользователем. Данный код вызывает метод, введенный Вами ранее в рамках данной задачи, который получает значение выбранной ячейки и помещает его в текстовое поле.

34

10: Задание Запустите приложение для Office

1. Нажмите кнопку запуска ( ),расположенную внизу страницы.

После этого произойдет сборка пакета приложения, его развертывание и установка созданного приложения на Вашем сайте разработки.

После инсталляции откроется страница Excel Web App, на которой будет доступно обновленное приложение.

2. В приложении введите любое значение в текстовом поле над кнопкой Add Symbol, а затем нажмите кнопку Add symbol.

3. Выберите другую ячейку и затем вернитесь в ячейку со значением.

В текстовом поле над кнопкой Get symbol текст обновляется автоматически.

4. Закройте Excel Web App.

11: Задание Привязка кячейкамна листе Excel

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

35

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

1. В левой части страницы выберите свою страницу.

Откроется редактор кода страницы.

2. Замените код, входящий в тег <body> на приведенный ниже:

<body> <input id="input"/> <br /> <button onclick="addTextToDocument()">Add symbol</button> <br /> <input id="output" /><br /> <button onclick="getTextFromDocument()">Get symbol</button> <br /> <button onclick="addBindingFromSelection()">Bind to cell</button> <br /></body>

3. Откройте файл App.js в редакторе кода и добавьте следующий код:

function addBindingFromSelection() { Office.context.document.bindings.addFromSelectionAsync(Office.BindingType.Text, { id: 'MyBinding' }, function (asyncResult) { Office.select("bindings#MyBinding").addHandlerAsync (Office.EventType.BindingDataChanged, onBindingSelectionChanged); } );}

function onBindingSelectionChanged(eventArgs) {

Office.select("bindings#MyBinding").getDataAsync (function (asyncResult) {

if (asyncResult.value != "") { var dataValue = asyncResult.value; var e = document.getElementById("output"); e.value = dataValue;

36

}

});}

Этот код устанавливает привязку к ячейке, выбираемой пользователем, а также определяет метод, вызываемый при изменении данных в привязанной ячейке.

12: Задание Запустите приложение для Office

1. Нажмите кнопку запуска ( ),расположенную внизу страницы.

После этого произойдет сборка пакета приложения, его развертывание и установка созданного приложения на Вашем сайте разработки.

После инсталляции откроется страница Excel Web App, на которой будет доступно обновленное приложение.

2. Выберите любую ячейку в Excel, а затем нажмите кнопку Bind to cell в приложении.3. В текстовом поле приложения над кнопкой Add Symbol введите любое значение, а затем

нажмите кнопку Add symbol.

Введенный Вами текст отобразится в выбранной ячейке. Поскольку значение ячейки изменилось, расположенное над кнопкой Get symbol текстовое поле теперь содержит данный текст.

4. Закройте Excel Web App.

13: Задание Дальнейшие действия

После того, как Вы создали простое приложение для SharePoint 2013, самостоятельно исследуйте следующие пути работы с ним:

37

3. Откройте проект в Visual Studio. Приложение Napa Office 365 Development Tools автоматически установит необходимые инструменты и откроет проект в Visual Studio 2012.

Вы также можете загрузить и установить данные инструменты непосредственно со страницы Downloads в центре Apps for Office and SharePoint Dev.

4. Создайте приложение области задач для Excel, используя Visual Studio. Дополнительные сведения см. в статье: Инструкции: создание первого приложения области задач или контентного приложения для Word и Excel с помощью Visual Studio .

38

Выводы

В рамках данной лабораторной работы мы смогли познакомится с новой онлайн технологией разработки приложений для Office 365 Preview под названием Napa.

С помощью данной технологии мы, не выходя из браузера, смогли создать два приложения. Эти приложения не просто работают в сайте Sharepoint или Office Web Apps, но и позволяют работать с данными. Кроме того, приложения для Office смогут также работать в клиентских программах Office 2013 без дополнительной модификации.

39