Статьи

PhoneGap на WP7 Совет № 4: Панель приложения

Декабрь 27, 2018

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

«Итак, два приложения идут в бар …»

Одной из конструкций пользовательского интерфейса, уникальной для Windows Phone, является панель приложений. Панель приложения (как мы ее ласково называем) предоставляет пользователям стандартное место для поиска кнопок для часто используемых задач в приложении и меню для менее часто используемых, но все же необходимых задач.

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

appbar1

Хотя в PhoneGap можно создать что-то внутри вашего HTML, которое имитирует внешний вид и поведение исходного кода, на мой взгляд, более разумно использовать встроенный вариант Windows Phone, поскольку он уже есть. Использование родной панели приложений дает множество преимуществ:

  • Он не прокручивается с вашим контентом.
  • Он автоматически поворачивает значки, когда пользователь меняет портретную ориентацию на альбомную.
  • Значки будут перекрашены, если пользователь переключается между светлыми и темными темами.
  • Кнопки имеют описания, помогающие пользователю понять, для чего они предназначены.
  • Это сделает ваше приложение похожим на Windows Phone!

Благодаря возможности обмениваться данными между хостинговой страницей Silverlight и содержимым HTML в элементе управления PhoneGap, вы можете выполнять все кодирование функций кнопок или меню в JavaScript и просто вызывать эти функции при нажатии кнопки.

Начните с создания нового проекта с использованием шаблона GapAppStarter, который я описал в совете № 1 . Мы собираемся добавить значок для кнопки в проект. Есть несколько вариантов, которые можно найти в вашей системе после установки инструментов разработчика Windows Phone. Они хранятся в вашей папке Program Files (обычно это C: \ Program Files (x86) \ Microsoft SDKs \ Windows Phone \ v7.1 \ Icons). Создайте в проекте папку с именем «Значки» (щелкните правой кнопкой мыши проект в обозревателе решений и выберите «Добавить», «Новая папка». Давайте назовем ее «Значки». Затем щелкните правой кнопкой мыши папку «Значки» и выберите «Добавить существующий элемент». Откройте темную папку под один из упомянутых выше и выберите свой любимый. Я использую значок обновления. Убедитесь, что вы нажали на png-файл и в окне свойств измените Build Action на Content.

образ

Теперь мы готовы добавить панель приложений на страницу. Откройте mainpage.xaml и прокрутите список до конца в исходном представлении. Добавьте этот XAML ниже тега </ Grid>.

<phone:PhoneApplicationPage.ApplicationBar>

    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Opacity="0.5">

        <shell:ApplicationBarIconButton IconUri="/icons/appbar.refresh.rest.png"

        x:Name="AppbarButtonRefresh"  Text="Refresh"/>

    </shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

В результате панель приложения будет иметь непрозрачность 50% с одной кнопкой. Если вы хотите больше кнопок, просто добавьте больше строк ApplicationBarIconButton. Если вы запустите приложение в эмуляторе, вы увидите кнопку на панели приложений внизу. В дополнение к ApplicationBarIconButtons вы также можете добавить ApplicationBarMenuItems, которые отображаются, когда пользователь расширяет панель приложения, нажимая на эллипсы.

appbar2

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

function appbar_refresh() {

    var currentTime = new Date();

    document.getElementById("welcomeMsg").innerHTML = "You clicked refresh at " + currentTime.toString();

    }

Чтобы вызвать это из нашего кода Silverlight, просто добавьте обработчик событий для кнопки в XAML и вставьте некоторый код. Вернитесь на страницу MainPage.xaml, поместите курсор прямо в закрывающий тег /> для элемента ApplicationBarIconButton, введите Click = и выбрал новый обработчик событий из выпадающего списка. Затем в коде C # просто передайте управление в свой JavaScript, набрав PGView.Browser.InvokeScript («appbar_refresh»);

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

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

appbar3

Стоит отметить, что иногда приложениям необходимо изменить панель приложений, например, скрыть ее, изменить или скрыть или отключить кнопки или меню и т. Д. Вы можете создать обработчик событий для события ScriptNotify, как в совете № 2, и вызывать его из JavaScript для управления Панель приложения. Шаги для манипулирования панелью приложения в коде можно найти в этой статье MSDN .

Теперь давайте посмотрим на несколько отличных приложений PhoneGap с панелями приложений!

Источник: http://blogs.msdn.com/b/glengordon/archive/2011/12/14/phonegap-on-wp7-tip-4-the-application-bar.aspx 

31
Share: