Microsoft — мировой лидер в области ПО и ИТ-услуг
507,68
рейтинг
18 июля 2014 в 13:54

Разработка → Превращаем Windows Store приложение в универсальное


Сегодня мы поговорим о возможности расширения Windows Store приложения до универсального. В результате работы вы получите не только Windows Store приложение, но и Windows Phone 8.1 приложение, а вместе с этим, новую аудиторию пользователей, которые смогут использовать ваше приложение с различных устройств, заплатив за него один раз и сохраняя данные и состояние между устройствами.

В этой статье описывается процесс расширения Windows Store приложения до Windows Phone, типовые проблемы и их решения.

Введение

Универсальное приложение от Microsoft — это технология разработки приложений, работающих на Windows 8.1 не зависимо от форм фактора устройства: телефон, планшет или ПК.

Чтобы создавать универсальные приложения для Windows 8.1 и Windows Phone 8.1, необходима операционная система Windows 8.1 и Visual Studio 2013 Update 2.

Начиная разработку проекта нового типа «Universal apps», обратим внимание на шаблоны с макетами интерфейса, при выборе которых получаем автоматически сгенерированное решение из следующих проектов:
  • Проект Windows 8.1;
  • Проект Windows Phone 8.1;
  • Проект, содержащее общий код (Shared).

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

Универсальные приложения поддерживаютcя для С++, С# и JavaScript.

Подробнее о новых возможностях универсальных приложений ранее писали в этой статье.

Пример перехода от Windows Store приложения до универсального

Осуществим переход от Windows 8.1 приложения до универсального, путем добавления Windows Phone 8.1 проекта в решение:
  1. Под Windows Phone 8.1 приложением явно имеем ввиду только WinRT XAML приложения, исключая Silverlight 8.1. Приложения на Silverlight не имеют возможности расширения до универсальных.
  2. Открываем проект приложения для Windows 8.1:


    Главная задача демонстрационного приложения — отображение картинок из заданной директории на устройстве:

  3. Добавляем в приложение Windows 8.1 приложение Windows Phone 8.1:

Получаем в обозревателе решений дополнительно проект для Windows Phone 8.1 и проект с общим кодом:


Изначально проект с общим кодом пустой, поэтому из приложения для Windows 8.1 скопируем следующие элементы:
  • Каталоги: Сommon, Models, ViewModel
  • И файлы: ImageViewPage.xaml, MainPage.xaml


Проверим что все элементы корректно скопировались:


Удалим из проекта Windows 8.1, элементы которые дублируются в общем проекте:


Каталоги и файлы:


Из проекта Windows Phone 8.1 так же удалим дублирующие элементы:


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

Протестируем как приложение работает под Windows Phone 8.1

Установим в качестве запускаемого проекта Windows Phone 8.1:


Запустим в эмуляторе:


Приложение запустилось не корректно и мы получили следующие ошибки:


Нажимаем «Break» и пробуем избавиться от проблемы.
Откроем файл MainPage.xaml из общего проекта Shared:


Обратим внимание, что для любого XAML файла из общего проекта можно выбрать режим редактирования, где будет отдельно подсвечиваться активный код для Windows 8.1 или Windows Phone 8.1:


Сравним два режима редактирования:

Windows 8.1


Windows Phone 8.1


Наблюдаем не опознанный компилятором элемент DataContext, который говорит нам о том, что мы забыли добавить в App.xaml проекта Windows Phone 8.1 те же подключения что и в App.xaml файле для Windows 8.1:
<Application.Resources>
        <ResourceDictionary>
            <data:LibraryLoaderViewModel x:Key="LibraryImageSource" />
        </ResourceDictionary>
    </Application.Resources>

Теперь приложение запустилось, но не отображает данные:


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

Но для мобильных устройств хранилище ресурсов следует изменить на хранилище изображений в фотоальбоме устройства.

Откроем файл LibraryLoaderViewModel.xaml:


И поменяем функцию private async Task LoadImages() следующим образом образом:
private async Task LoadImages()
        {
#if WINDOWS_APP
            var folder = Windows.Storage.KnownFolders.PicturesLibrary;
#elif WINDOWS_PHONE_APP

            var folder = Windows.Storage.KnownFolders.CameraRoll;
#endif
            var imageFiles = await folder.GetFilesAsync();

            foreach (var imageFile in imageFiles)
            {
                var image = new ImageItem(imageFile, ImageLocation.CameraRoll);
                _libraryImages.Add(image);
            }

            await Window.Current.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
            {
                OnPropertyChanged("LibraryImages");
            });
        }


Объясняем приложению к какому хранилищу изображений следует обращаться в зависимости от устройства. Для этого используем конструкцию #if. Тем самым разделяя действия, отличные для платформ Windows 8.1 и Windows Phone 8.1:

Windows = WINDOWS_APP
Windows Phone = WINDOWS_PHONE_APP

Настроим доступ к хранилищу, используя свойство Capabilities в Package.appxmanifest для Windows Phone 8.1 проекта:


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

Обратим внимание, что дизайнер мобильного приложения не корректно показывает разметку:


У нас есть возможность проверить как выглядит приложение на экранах различных размеров, используя панель инструментов Device:


Здесь перебираем варианты размеров экрана:


Настраиваем корректное отображение для каждого, если это необходимо, например, в MainPage.xaml файле меняем указанное свойство Height = “125” на Auto в случае с размером 480х800:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto*"/>
            <RowDefinition Height="643*"/>
        </Grid.RowDefinitions>
</Grid>


Теперь приложение готово к использованию на любых устройствах Windows 8.1 и Windows Phone 8.1.

Другие сценарии поддержки распределяемого кода

Существует несколько вариантов хранения и использования общего кода для кроссплатформенных приложений Windows 8.1 и Windows Phone 8.1:
  • Самый новый и простой способ – это проект с общим кодом Shared внутри решения Universal app. Данный подход является самым легким и поддерживает любой вид распределяемых данных: код, XAML файлы, изображения, XML/JSON, RESW. Здесь реализован уже знакомы нам инструмент Visual State Manager, который позволяет увидеть общий и различный код для платформ.
  • Portable Class Library – это библиотеки и WinRT компоненты;
  • Одной из интересных особенностей Portable Class Library является возможность написать библиотеку на любом из языков, например, С++ или JavaScript, а использовать в любом приложении. Например, вы хотите создать повторно используемую библиотеку для разных приложений или в случае кроссплатформенной разработки для Windows, iOS и Android.
  • Добавление ссылок на файлы с общим кодом в проект. Например, когда требуется сделать из Silverlight приложения Windows Store или Windows Phone 8.1 (XAML) приложение.

Заключение

Процесс расширения Windows Store приложения до универсального оказался прост, так как API для телефона и для ПК теперь совпадают на 90%.

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

Полезные ссылки

Новая Windows Phone 8.1. Что делать разработчику приложений?
Обновляем Windows Phone Silverlight 8.0 приложение до Windows Phone Silverlight 8.1
Обновляем Windows Phone 8.0 приложение до Windows Phone 8.1(XAML)
Обучающие курсы виртуальной академии Microsoft (MVA)
Загрузить бесплатную или пробную Visual Studio 2013
Стать разработчиком приложений Windows Phone
Скачать пример приложения из этой статьи
Скачать примеры кода универсальных приложений (c#, c++, javascript)
Автор: @maria_gore
Microsoft
рейтинг 507,68
Microsoft — мировой лидер в области ПО и ИТ-услуг

Комментарии (11)

  • –7
    с различных устройств, заплатив за него один раз

    извините, но мне как разработчику такой case не выгоден.
    • +4
      Это только ваш выбор, вам никто не мешает в сторе при публикации не делать ваше приложение универсальным и пользователи вас будут прокленать что им приходится одно и тоже приложение покупать два раза
      • –4
        на телефоне один набор функций, на планшете эти же функции + новые + другой UI, спроектировать который стоит средств. Я должен из собственного кармана оплачивать дополнительные расходы?
        • +1
          Это так же как и на Google Play и AppStore.
          Вам никто не мешает делать их в сторе как два разных приложения, как это например делают с играми для планшетов добавляя HD.
          • 0
            как правило только игры «универсальные», другой софт — 2 версии.
            • +1
              Это правило работает вне зависимости от того игра это или «другой софт». Некоторые разработчики делают раздельно, а кто-то делает универсально.

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

              Разработчику охотнее приносят деньги довольные пользователи, а не раздражённые.
          • 0
            В Android и iOS у вас один API, который работает и там и там одинаково. Насколько я понимаю, там реально только UI нужно подкрутить.

            В Windows Phone 8.1 и Windows 8.1 — это две разные платформы. Microsoft все пытается всем (пользователям) говорить как они одинаковы, но если попытаешься написать приложение более сложное, чем в Microsoft примерах — то вешайся, никаких Universal Applications написать не получится. Вот и получается, что разработчики попадают под такой гнев — пользователи требуют приложения, говорят, что Microsoft сказал, что Universal приложения — это выход и разработчикам всего лишь нужно его скомпилировать под другую платформу. А я после исследования API понял, что мне минимум месяц (именно 40 часов в неделю или больше) нужно будет сидеть, чтобы переписать его так, чтобы только все функции работали, а потом еще работать над UI.

            Поэтому я пользователя olegi очень понимаю.
            • +1
              Если существующее Silverlight WP приложение портировать на WP 8,1 RT(XAML) это действительно боль.
              Но если например сейчас начинать писать с нуля приложение тогда имеет смысл использовать именно Universal App (Win 8.1/WP 8.1 RT). Там по API оно совместимо в основном. Есть не так много отличий например в работе с мызукой в фоне или открытием OpenFilePicker\Broker (кстати с ним решается очень просто).
              По UI конечно придется делать разный, но ведь и для iOS (iphone, ipad), Android тоже придется делать два разных UI.
              Я пробовал использовать одну View и для W8.1 и WP8.1 в сложных сценариях нужен абсолютно разный подход к построению. Но какие-то не сложные экраны (например у меня это бы LoginView можно размешать в UniversalApp Shared project), а в сложных местах например выносить в разные UserControl. Т.е. в Shared лежит например HomePage и на ней UserListControl, а вот уже UserListControl будет размещаться в Win 8.1 или WP 8,1
              • 0
                Не очень понял, что вы хотели сказать своим комметарием. Вы подтверждаете мои слова или нет.

                Как я сказал — я посмотрел на Universal Apps, именно столкнулся с проигрыванием музыки в Background. Проблема не в том даже, что мне нужно будет переписывать приложение, а поддерживать два разных приложения с разными архитектурами, потому что разные API для Background Tasks. Поэтому я и понимаю olegi, что Microsoft слишком рано назвал эти самые приложения Universal, пользователю уже ждут, а разработчики не могут так вот просто, да еще и бесплатно.
                • 0
                  Я хотел наверное сказать что это хороший и верный шаг вперед, но UniversalApp все еще не совершенны.
                  • 0
                    Согласен. Будем надеяться, что Microsoft будет это развивать в правильном направлении.

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

Самое читаемое Разработка