Статьи

PhoneGap на WP7 Совет № 2: взаимодействие сценариев

Декабрь 7, 2018

Вот ссылка на
часть 1 этой серии.

Когда вы создаете точки интеграции между вашим приложением PhoneGap HTML5 и хостинговым приложением Silverlight, есть несколько способов преодоления
разрыва (каламбур). Этот совет является примером одного из этих методов. Он очень гибкий и обычно используется, когда с обеих сторон пишется один и тот же тип кода. Мы можем сделать это, потому что пользовательский элемент управления PhoneGap фактически оборачивает элемент управления Windows Phone WebBrowser, и мы можем получить доступ к этому внутреннему WebBrowser и использовать
метод InvokeScript и
ScriptNotify.событие, чтобы делать то, что мы хотим здесь. Если вам интересно узнать все подробности об элементе управления WebBrowser и если вы можете сделать что-то еще в контексте приложения PhoneGap, вы можете
прочитать об этом на сайте MSDN .

В качестве примечания: если вы попробуете приведенные ниже примеры, и ваша версия PGView , похоже, не имеет члена Browser, вы, вероятно, работаете со старой версией пользовательского элемента управления PhoneGap. Чтобы получить последнюю версию, вам нужно скачать инфраструктуру для элемента управления, собрать этот проект, а затем добавить его вывод в свой проект. Чтобы сделать это, откройте решение WP7GapClassLib в рамочном папке WP7GapBuild проекта. Постройте это решение. Затем, когда вы создаете проект из шаблона GapAppStarter, просто щелкните правой кнопкой мыши папку GapLib , выберите «Добавить существующий элемент», а затем найдите место, где хранится проект WP7GapClassLib. Затем разверните доПапка bin \ debug и выберите там файл WP7GapClassLib.dll . Ваши ссылки на него должны обновляться автоматически.

Этот метод интеграции сценариев является двунаправленным. Вы можете использовать код вызова страницы хостинга в сценарии в приложении PhoneGap, а код JavaScript в коде вызова приложения PhoneGap на странице хостинга Silverlight.

Давайте начнем с простой кнопки на странице хоста Silverlight для запуска кода, который мы хотим запустить. В файле MainPage.xaml перейдите в представление дизайнера, а затем освободите место в нижней части страницы для элементов управления, которые мы собираемся добавить, изменив немного элемент управления PhoneGap. Используйте ручку захвата внизу элемента управления, это треугольник, обращенный вниз. Откройте панель инструментов в левой части Visual Studio, если она еще не открыта. Там вы увидите множество основных элементов управления Silverlight, которые можно добавить на страницу. Найдите элемент управления Button и перетащите его на страницу под элементом управления PhoneGap. Затем установите для его свойства Content значение «To PhoneGap». Вы можете использовать окно свойств справа или просто изменить его в коде XAML.

Чтобы создать обработчик событий, дважды нажмите кнопку. Это откроет окно кода и поместит курсор в только что созданный обработчик события button1_Click. Вот где мы вызываем скрипт в PhoneGap. Введите PGView.Browser.InvokeScript («button1_Click»); Ваше окно кода должно выглядеть так:

private void button1_Click(object sender, RoutedEventArgs e)
 {
     PGView.Browser.InvokeScript("button1_Click",textBox1.Text.ToString());
 }

Теперь нам нужно создать функцию JavaScript с именем button1_Click и поместить в нее наш код. В разделе <script> в верхней части index.html в каталоге WWW проекта вставьте следующий скрипт:

function button1_Click() {
           document.getElementById("welcomeMsg").innerHTML = "You clicked!";
       }

Вы можете вызывать функцию как угодно, но для согласованности в демонстрации я настроил ее следующим образом. Запустите проект, нажмите кнопку, и вы увидите изменение HTML на «Вы нажали».

Вы также можете передать параметры в скрипт. Вернитесь на страницу Silverlight и добавьте текстовое поле справа от кнопки. Ваш экран должен выглядеть примерно так:

образ

Установите для свойства Text текстового поля пустое значение. Измените код в обработчике события нажатия кнопки, чтобы включить отправку текста текстового поля в обработчик сценария.

private void button1_Click(object sender, RoutedEventArgs e)
{
    PGView.Browser.InvokeScript("button1_Click",textBox1.Text.ToString());
}

Затем нам нужно обновить функцию JavaScript button1_Click для принятия параметра:

function button1_Click(textbox) {
    document.getElementById("welcomeMsg").innerHTML = "The TextBox says: " + textbox;
}

Этот параметр также может быть коллекцией / массивом, если вам это нужно.

(Кстати, когда вы запустите этот образец и нажмете в текстовом поле для ввода, вы увидите экранную клавиатуру эмулятора. Первое, на что нужно обратить внимание, это то, что он сдвигает экран PhoneGap вверх и за пределы экрана. обратитесь к этому в следующей статье. Во-вторых, если вы хотите печатать с клавиатуры вашего компьютера, а не нажимать буквы на экране, просто нажмите Pause или Page Up / Page Down, чтобы переключить это.)

Перейти в другом направлении немного сложнее, так как вам нужно указать странице Silverlight хоста ожидать «вверх» вызова от элемента управления WebBrowser внутри элемента управления PhoneGap. Добавьте кнопку на HTML-страницу следующим образом:

<button onclick="window.external.Notify('clearTextBox');">clear textbox</button>

В отличие от вызова в браузер сценария двигатель PhoneGap, называя из него на странице хоста всегда вызывает одно событие — Browser_ScriptNotify . Мы создадим обработчик события для этого в методе конструктора главной страницы. Конструктор — это метод с тем же именем, что и у главной страницы. В нашем примере это публичная MainPage () . Найдите этот метод в верхней части файла MainPage.xaml.cs. В конце этого метода введите PGView.Browser.ScriptNotify. Затем введите пробел , плюс и равно . Следуйте этому с двумя нажатиями на вкладкеключ. Поздравляем, вы только что узнали, как создать и подключить обработчик событий в XAML! Это будет удобный набор нажатий клавиш в будущем.

В недавно созданном методе Browser_ScriptNotify удалите строку, которая выдает исключение NotImplemented, так как мы реализуем функцию. Посмотрите на параметры метода. Второй е имеет NotifyEventArgs типа. Все, что вам действительно нужно знать, это то, что e.Value будет содержать строку, отправленную из вызова window.external.Notify из элемента управления PhoneGap. Итак, давайте напишем код для его обработки.

void Browser_ScriptNotify(object sender, NotifyEventArgs e)
{
    string commandStr = e.Value;

    if (commandStr == "clearTextBox")
    {
        textBox1.Text = "";

    }
}

Запустите проект, введите текст в текстовое поле и нажмите кнопку «Очистить текстовое поле». Текст в текстовом поле должен быть очищен.

Если вы добавите больше мест, где ваш JavaScript-код внутри вашего приложения PhoneGap должен общаться со страницей хостинга, вы просто добавите новые операторы if в этот обработчик событий. Вы можете проявить творческий подход и передать массив, сериализованный в json, возможно, с именем «действия» перед строкой в ​​начале.

Дайте мне знать ваши вопросы или комментарии об этой технике ниже!

Источник: http://blogs.msdn.com/b/glengordon/archive/2011/11/21/phonegap-on-wp7-tip-2-script-interaction.aspx

35
Share: