Перетворюємо 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.  
  3. Відкриваємо проект програми для Windows 8.1:
     
     
    Головне завдання демонстраційного додатки — відображення картинок із заданої директорії на пристрої:
     
     
  4.  
  5. Додаємо в додаток Windows 8.1 додаток Windows Phone 8.1:
     
  6.  
 Отримуємо в оглядачі рішень додатково проект для 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)
    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.