Вот ссылка на
часть 1 этой серии.
Windows Phone имеет уникальный и очень удобный способ предоставления нескольких точек входа в ваше приложение. Это делается с помощью одной или нескольких живых плиток. Стартовый экран на Windows Phone состоит из плиток, которые представляют множество вещей: приложения, людей, веб-сайты, музыку, местоположения на карте и многое другое.
Есть отличный способ почувствовать эту метафору пользовательского интерфейса, даже если у вас не установлен Windows Phone или эмулятор. Направьте ваше устройство iOS или Android на
http://m.microsoft.com/windowsphone/en-us/demo/, и вы сможете увидеть плитки в действии.
Если у вас есть приложение на Windows Phone, одно из лучших дополнений, которое пользователь может дать вашему приложению, — это прикрепить его к своему стартовому экрану. И чем круче плитка вашего приложения, тем больше ваши пользователи будут любить и использовать ваше приложение. В Windows Phone 7.5 теперь вы можете иметь несколько плиток, представляющих несколько точек входа для вашего приложения, закрепленных на стартовом экране пользователя. Проверьте это в этом коротком видео FourSquare на Windows Phone. FourSquare позволяет закреплять местоположения и людей на стартовом экране для быстрого доступа.
Типичным примером использования нескольких живых плиток является приложение погоды. Стартовый экран пользователя может иметь плитку для каждого местоположения, для которого он хочет получить быстрый доступ к погоде. Каждая плитка представляет свое местоположение, и когда пользователь запускает приложение из каждой плитки, приложение отвечает, переходя прямо на страницу сведений для этого города. Это огромная экономия времени для пользователя.
Мало того, что плитки могут представлять несколько точек входа в ваше приложение, но каждая плитка может отображать небольшой объем данных для конечного пользователя из вашего приложения с различными изображениями и текстом, отображаемыми на каждой плитке. В случае приложения погоды на плитке каждого города могут отображаться текущие условия или прогноз, карты и многое другое для этого города. У живых плиток также есть этот крутой эффект перелистывания, так что вы можете даже размещать вещи на обратной стороне каждой плитки, как второстепенные изображения или текст. Плитка будет случайным образом переворачиваться, создавая динамический стартовый экран, с которого пользователи действительно получают удовольствие.
Вы можете управлять Live Tiles вашего приложения из кода приложения. А поскольку приложение PhoneGap выполняется в приложении Silverlight, вы можете написать код на C # или Visual Basic для создания, изменения или удаления плиток. Но есть еще более простой способ. Проверьте плагин Live Tile на странице плагинов Джесси МакФадьена . Он предоставляет простой способ создания и обновления плиток из JavaScript приложения PhoneGap.
Вот пример кода со страницы примера, который показывает, как создать вторичную плитку:
function createSecondaryTile() {
console.log('Create secondary tile');
var success = function (res) {
console.log('secondary tile was created');
document.getElementById('res').innerHTML = res;
};
var fail = function (e) {
console.log("Error occurred: " + e);
document.getElementById('res').innerHTML = "Error occurred: " + e;
};
navigator.plugins.liveTiles.createSecondaryTile(success, fail,
{ title: document.getElementById('title').value,
image: 'Images/appbar.save.rest.png',
count: document.getElementById('count').value,
secondaryTileUri: secondaryTile,
backTitle: 'back'
});
};
Ключевым вызовом здесь является navigator.plugins.liveTiles.createSecondaryTile . Этот код устанавливает изображение, количество и заголовок, чтобы управлять тем, как выглядит плитка, что полезно. Но ключ к тому, чтобы сделать вторичную плитку глубокой ссылкой на какое-то место в вашем приложении, находится в параметре SecondaryTileUri .
Обычно этот URI содержит две вещи, которые заботятся о приложении Windows Phone — страница, на которую нужно перейти (страница XAML в проекте) и некоторый параметрчтобы быть отправлены на страницу, как почтовый индекс города, чья погода для отображения. Они сформированы как веб-HTTP-запрос. В приложении Windows Phone к XAML-части URI автоматически перемещаются, и вы можете написать код на C # или VB, чтобы получить параметры строки запроса и получить то, что вам нужно.
Теперь в нашем случае мы хотим каждый раз заходить на одну и ту же страницу XAML (на которой размещено приложение PhoneGap) и переходить на другую страницу HTML в структуре файла PhoneGap. Поэтому нам просто нужно предоставить правильный URI для этой HTML-страницы в качестве параметра строки запроса в конце имени страницы XAML в URI, который мы назначаем этой плитке. К счастью, плагин обрабатывает часть страницы XAML, и вы просто указываете HTML-страницу для перехода. В коде выше вторичной плитки переменная установлена ранее в коде.
var secondaryTile = 'www/liveTiles.html';
Это добавляется в конец URI для плитки.
Хотя плагин полезен, в нем отсутствует одна ключевая часть. В частности, в приложении PhoneGap отсутствует способ перехода к нужной HTML-странице, когда она активируется из тайла с URI глубокой ссылки. Таким образом, вам нужно будет поместить небольшой код на страницу XAML хостинга и на самом деле настроить переменную secondTile в образце, чтобы он заработал.
Если вы создали проект из шаблона PhoneGap, откройте MainPage.xaml.cs. Внутри метода конструктора (который начинается с общедоступной MainPage ) введите Loaded + =, а затем дважды нажмите клавишу Tab. Это создаст обработчик события MainPage_Loaded. Измените это следующим образом:
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
try
{
string pgUri = this.NavigationContext.QueryString["Uri"];
PGView.Browser.Navigate(new Uri(pgUri, UriKind.RelativeOrAbsolute));
}
catch { };
}
Этот код удалит HTML-страницу с конца URI и отправит браузер элемента управления PhoneGap на эту страницу. Мы заключаем его в попытку / отлов на случай, если URI отсутствует или навигация завершится неудачно.
Последнее, что нужно сделать, это изменить URI HTML-страницы, чтобы он имел правильный URI для нужной HTML-страницы. Пересмотреть страницу liveTilesExample.html и изменить secondaryTile переменного быть таким:
var secondaryTile = 'app/www/liveTilesExample.html';
Теперь запустите проект, нажмите на страницу Live Tiles и создайте дополнительную плитку. Это должно вернуть вас на стартовый экран и показать вторичную плитку. Если вы нажмете на плитку, она должна запустить приложение и перейти на страницу Live Tiles вместо главной страницы. Нажмите клавишу Windows внизу, проведите вправо, и вы увидите основной значок приложения. После запуска приложения вы перейдете на страницу index.html, а не на страницу живых плиток. Если вы нажмете и удержите этот значок, вы можете закрепить его, чтобы начать, и теперь у вас будет основная плитка для приложения, а также дополнительная плитка.
Одна проблема, с которой я сталкиваюсь, — это передача параметра на страницу HTML. Поэтому, если ваша страница была showWeather.html и вы хотели отправить ее по почтовому индексу, я обнаружил, что вы не можете просто добавить? Zipcode = 90210 в конце страницы HTML — это не будет работать, хотя вы можете по-прежнему сделать его частью URI плитки. Я работаю над советом по этому вопросу, так что поищите в будущем пост в блоге об этом.
Я призываю вас изучить все, что вы можете делать с Live Tiles, теперь, когда у вас есть возможность легко использовать их из PhoneGap. Вот полезная статья на MSDN о том, что вы можете с ними сделать. Веселитесь с Live Tiles!