Статьи

Приложения для Windows 8 для разработчика PhoneGap

Январь 10, 2019

Аннотация: приложения для Windows 8 могут разрабатываться и кодироваться с использованием HTML / CSS / JS, как и приложения PhoneGap. И с очень небольшими усилиями вы можете использовать свои навыки и имеющиеся ресурсы, чтобы в кратчайшие сроки создать изящное современное приложение в стиле Windows 8.

Разработка PhoneGap и Windows 8 — больше похоже, чем вы думаете

PhoneGap — интересное животное. Хотя наиболее важным аспектом является кроссплатформенность приложений, которые вы можете создавать с его помощью, также интересно то, что вы используете HTML и JavaScript для создания приложений. Так как это зависит от базовой технологии мобильного браузера на каждой платформе, есть (время от времени) несколько небольших недостатков. Но в целом, это действительно обеспечивает хороший уровень абстракции. Вы можете использовать свои веб-навыки в игре, и все, что вам нужно сделать, это изучить некоторые особенности создания и публикации приложения на конкретной платформе, разработать пользовательский интерфейс с использованием HTML и CSS, кодировать его с помощью стандартного JavaScript, изучить несколько новых API, которые предлагает PhoneGap, и все готово. На самом деле, для некоторых команд кроссплатформенная природа является вторичной.Они приступили к разработке PhoneGap, потому что это позволило их командам повторно использовать свои навыки веб-разработки, свои любимые библиотеки, инструменты дизайна и многое другое.

Что это значит в контексте разработки Windows 8? Один из подходов к созданию новых приложений для Windows 8 — это использование HTML / CSS / CS. Если вы еще этого не сделали, я предлагаю вам прочитать о создании приложений в стиле Metro для Windows 8 с помощью JavaScript . Вот результат для разработчиков PhoneGap:

  • Ваши навыки, ресурсы и, возможно, большая часть вашего чистого HTML / CSS и JavaScript-кода будут работать только в приложении для Windows 8.
  • Вы можете без особых усилий обновить внешний вид своих приложений, используя встроенные стили для базовых элементов HTML, таких как <h1> и <button>, а также расширенные элементы управления Windows 8, такие как панель приложений , средство выбора даты , флип-просмотр , и более.
  • Ваш код, взаимодействующий с PhoneGap API (для обработки таких вещей, как доступ к файлам, датчики и события жизненного цикла приложения), можно обновить, чтобы использовать библиотеку WinJS для выполнения тех же действий, которые вы выполняли в PhoneGap.
  • Сценарии, в которых вам приходилось писать плагины PhoneGap, могут быть решены путем поиска функциональности в обширной библиотеке WinJS или путем включения собственного кода в приложение JavaScript для Windows 8.

Эта серия постов в блоге посвящена третьему пункту выше — выяснению того, как делать вещи в разработке приложений для Windows 8, которые вы знаете, как делать в PhoneGap. Мы начнем с простого примера, а затем углубимся в последующие недели.

Простой пример PhoneGap

Вот очень простое приложение PhoneGap, которое использует API геолокации PhoneGap для получения информации о местоположении устройства. Независимо от того, на какой платформе выполняется этот код PhoneGap, это будет работать. Это потому, что вызов getCurrentPosition в строке 28 вызывает API базовой платформы. Но для вашего кода он представлен как функция JavaScript.

<!DOCTYPE html>

<html>
  <head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

    <title>Cordova WP7</title>

      <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>

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

Элемент DOCTYPE

Поскольку мы работаем не в браузере по выбору пользователя, а в конкретной среде выполнения, мы можем использовать стандартный тип документа HTML5, который просто «HTML». Это идентично в Windows 8.

Метатег, управляющий «окном просмотра»

Поскольку в PhoneGap хост-контейнер по сути является веб-браузером, этот тег говорит о том, что он ведет себя не так, как веб-браузер. То есть не позволяйте пользователю панорамировать и сжимать для увеличения, как если бы это была веб- страница . Нам не нужно это для приложений Windows 8, потому что нет прокрутки, панорамирования или масштабирования, как на веб- странице, так как это приложение .

Ссылка на таблицу стилей

Одним из замечательных аспектов разработки веб-страницы является гибкость и мощь CSS. Поскольку приложение также имеет дизайн, CSS можно использовать для разработки интерфейса приложения таким же образом. Здесь «master.css» взят из шаблона для создания приложений Windows Phone с PhoneGap. Когда вы разрабатываете приложение PhoneGap, вы захотите придать ему разный вид на каждой платформе. А замена файлов CSS при создании окончательного приложения для каждой платформы — это один из способов сделать это. Используемый вами CSS и общий дизайн должны быть адаптированы к платформе.

Приложения JavaScript для Windows 8 используют CSS для разработки пользовательского интерфейса, как браузер или приложение PhoneGap. При переносе этого кода в Windows 8 эта строка нам не понадобится, поскольку для каждого элемента управления есть стиль Windows 8 по умолчанию. Вам нужно только указать стили, если вы хотите настроить внешний вид. Позже в этой статье я покажу это в действии.

Сценарий ссылки на «Кордову»

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

В Windows 8 у нас есть нечто похожее в виде WinJS. Так что это просто вопрос изучения того, что в WinJS API, как вы делали, когда вы впервые изучили PhoneGap.

Код приложения

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

Windows 8 эквивалент

Теперь, когда мы рассмотрели анатомию базовой страницы приложения PhoneGap, давайте рассмотрим эквивалент в Windows 8. Когда вы настраиваете компьютер (физический или виртуальный) с помощью Windows 8 Release Preview и Visual Studio 2012 Release Candidate, вы уметь создавать приложения для Windows 8 с помощью JavaScript и HTML. Чтобы узнать, как это работает, ознакомьтесь с этим введением .

При создании нового проекта JavaScript для Windows 8 вы получите следующий базовый HTML-код:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SimpleLocation</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>

 1:  

 2:     <script src="//Microsoft.WinJS.1.0.RC/js/ui.js">

 1: </script>

 2:  

 3:     <!-- SimpleLocation references -->

 4:     <link href="/css/default.css" rel="stylesheet" />

 5:     <script src="/js/default.js">

</script>

</head>
<body>
    <p>Content goes here</p>
</body>
</html>

Очень похоже на PhoneGap, а? Там тот же DOCTYPE, некоторые ссылки CSS и JS на внутренние ресурсы, а некоторые на стили и код для проекта. Итак, давайте приведем фрагменты из примера PhoneGap выше и внесем необходимые изменения, чтобы запустить его на Windows 8!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SimpleLocation</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>

 1:  

 2:     <script src="//Microsoft.WinJS.1.0.RC/js/ui.js">

 1: </script>

 2:  

 3:     <!-- SimpleLocation references -->

 4:     <link href="/css/default.css" rel="stylesheet" />

 5:     <script src="/js/default.js">

 1: </script>

 2:  

 3:         <script type="text/javascript">

 4:  

 5:             var getLocation = function () {

 6:  

 7:                 // Success callback

 8:  

 9:                 var success = function (p) {

 10:  

 11:                     document.getElementById('latitude').innerHTML = p.coordinate.latitude;

 12:                     document.getElementById('longitude').innerHTML = p.coordinate.longitude;

 13:                     document.getElementById('tdAlt').innerHTML = p.coordinate.altitude;

 14:                     document.getElementById('tdAcc').innerHTML = p.coordinate.accuracy;

 15:                     document.getElementById('tdAltAcc').innerHTML = p.coordinate.altitudeAccuracy;

 16:                     document.getElementById('tdHeading').innerHTML = p.coordinate.heading;

 17:                     document.getElementById('tdSpeed').innerHTML = p.coordinate.speed;

 18:  

 19:                     setLocationStatus("Done");

 20:                 };

 21:  

 22:                 // Fail callback

 23:  

 24:                 var fail = function (e) {

 25:  

 26:                     //setLocationStatus("Error: " + e.code);

 27:                     setLocationStatus("Error: " + e.message);

 28:                 };

 29:  

 30:  

 31:  

 32:                 // Get location

 33:  

 34:                 //navigator.geolocation.getCurrentPosition(success, fail, { enableHighAccuracy: true }); //, {timeout: 10000});

 35:            

 36:                 var geolocator = Windows.Devices.Geolocation.Geolocator();

 37:                 geolocator.desiredAccuracy = Windows.Devices.Geolocation.PositionAccuracy.high; //or default

 38:                 geolocator.getGeopositionAsync().then(success, fail);

 39:  

 40:  

 41:                 setLocationStatus("Retrieving location...");

 42:  

 43:  

 44:  

 45:             };

 46:  

 47:             /**

 48:  

 49:  * Set location status

 50:  

 51:  */

 52:  

 53:             var setLocationStatus = function (status) {

 54:  

 55:                 document.getElementById('location_status').innerHTML = status;

 56:  

 57:             };

 58:  

 59:       

</script>

</head>
<body>
       <h1>Location</h1>

    <div id="info">

        <b>Status:</b> <span id="location_status">Stopped</span>

        <table>
            <tr><td><b>Latitude:</b></td><td id="latitude"> </td></tr>
            <tr><td><b>Longitude:</b></td><td id="longitude"> </td></tr>
            <tr><td><b>Altitude:</b></td><td id="tdAlt"> </td></tr>
            <tr><td><b>Accuracy:</b></td><td id="tdAcc"> </td></tr>
            <tr><td><b>Altitude Accuracy:</b></td><td id="tdAltAcc"> </td></tr>
            <tr><td><b>Heading:</b></td><td id="tdHeading"> </td></tr>
            <tr><td><b>Speed:</b></td><td id="tdSpeed"> </td></tr>
        </table>

    </div>

    <h2>Action</h2>

    <button onclick="getLocation();">Get Location</button>
</body>
</html>

 

HTML-код практически не изменился, за исключением замены специфичного для приложения PhoneGap «master.css» на встроенный в Windows 8, который называется «ui-dark». И да, есть «ui-light», если вы хотите, чтобы у вашего приложения был светлый фон. Код немного отличается, потому что мы используем синтаксис .then объекта WinJS Promise для асинхронного выполнения задач. Параметр успеха стал координатой, а не координатами (но обратите внимание, что свойства имеют одно и то же имя!).

Ниже у меня есть несколько снимков экрана приложения PhoneGap, запущенного в эмуляторе Windows Phone, и приложения Windows 8 JavaScript.

SimpleLocationStopped  screenshot_07062012_151729

SimpleLocationDonescreenshot_07062012_151858

Вывод

Когда вы начали использовать PhoneGap, вам пришлось проектировать для другой среды рендеринга (приложения) вместо браузера. И вам пришлось изучать новый набор API. Но вы все еще использовали свои навыки HTML / CSS / JS при создании приложений для браузера. И так же с Windows 8 HTML / JS разработки. В следующих статьях я расскажу о многих аспектах JavaScript-приложений для Windows 8 с точки зрения разработчиков PhoneGap.

У разработчика Windows 8 есть все основания для волнения. Имеется более 650 миллионов лицензий на Windows 7, впечатляющее новое оборудование от производителей, удобный для разработчиков магазин с отличным подходом к распределению доходов и множество ресурсов (онлайн и локальных), честно говоря, разработчиков PhoneGap, которые не ориентированы на Windows 8 просто скучаю по лодке.

Не забывайте, что у нас есть отличная программа, которая поможет вам перейти от идеи к приложению Windows 8 с нашей программой 30 to Launch, входящей в состав Generation App . Зарегистрироваться Сегодня!

34
Share: