Сегодняшний совет PhoneGap для Windows Phone 7 включает обработку изменений ориентации. Это означает, что когда пользователь поворачивает свой телефон из портретной в альбомную ориентацию, контент также должен вращаться. Мало того, что в некоторых сценариях элементы на экране должны переформатироваться для удобства чтения и простоты взаимодействия.
Как я упоминал во вступительном посте , вы можете многое сделать в своем приложении, просто работая с HTML / JS / CSS внутри элемента управления PhoneGap. Но вы получите совершенно новый набор суперспособностей приложений, если выйдете за пределы этого. Сегодня мы начинаем с чего-то небольшого — как правильно повернуть часть приложения PhoneGap, когда телефон меняет ориентацию.
Чтобы подготовиться к сегодняшнему совету, давайте создадим новый проект в Visual Studio, используя шаблон PhoneGap, который описан во введении к серии советов .
Это подлый, потому что вам нужно нажать на раздел Visual C # на левой панели окна, чтобы отобразить весь список шаблонов.
После того, как вы создадите проект, у вас будет проект Silverlight для Windows Phone. PhoneGap работает на главной странице Silverlight XAML. По умолчанию приложения Silverlight для Windows Phone не работают в ландшафтном режиме. Вы можете наблюдать это, запустив приложение (нажмите F5) и нажав одну из кнопок поворота экрана на эмуляторе телефона.
Вы увидите, что эмулятор вращается, а текст — нет.
Это характерно для основного приложения Silverlight, а также для визуализации HTML внутри элемента управления PhoneGap.
Разрешить хост-приложению поддерживать ландшафтный режим довольно просто. В обозревателе решений дважды щелкните файл MainPage.xaml. В окне свойств найдите SupportedOrientations и измените его на PortraitOrLandscape . Обратите внимание, что вы можете сделать это непосредственно в XAML, если вы чувствуете себя предприимчивым. Также обратите внимание, что есть свойство Orientation, которое контролирует начальную ориентацию, поэтому, если вы хотите, чтобы ваше приложение запускалось в горизонтальной ориентации, это то, как вы бы это контролировали.
Запустите приложение еще раз и поверните эмулятор.
Успех! Теперь у нас есть страница хоста и элемент управления PhoneGap.
В этот момент вы также можете добавить код JS, чтобы реагировать при повороте устройств, настраивать пользовательский интерфейс, выгружая div или используя CSS для управления им. Вот простой пример, основанный на шаблонной странице index.html, включенной в шаблон.
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
5: <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
6:
7: <title>PhoneGap WP7</title>
8:
9: <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
10:
11: <script type="text/javascript">
1:
2: // provide our own console if it does not exist, huge dev aid!
3: if(typeof window.console == "undefined")
4: {
5: window.console = {log:function(str){window.external.Notify(str);}};
6: }
7:
8: // output any errors to console log, created above.
9: window.onerror=function(e)
10: {
11: console.log("window.onerror ::" + JSON.stringify(e));
12: };
13:
14: console.log("Installed console ! ");
15:
</script>
1:
2:
3: <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js">
1: </script>
2:
3: <script type="text/javascript">
4:
5: document.addEventListener("deviceready",onDeviceReady,false);
6:
7: // once the device ready event fires, you can safely do your thing! -jm
8: function onDeviceReady()
9: {
10: document.getElementById("welcomeMsg").innerHTML += "PhoneGap is ready! version=" + window.device.phonegap;
11: window.addEventListener("orientationchange", orientationChange, true);
12:
13: }
14: function orientationChange(e) {
15: var orientation = "portrait";
16: if (window.orientation == -90 || window.orientation == 90) orientation = "landscape";
17: document.getElementById("orientation").innerHTML = orientation;
18: }
19:
</script>
12:
13:
14:
15:
16: </head>
17: <body>
18: <h1>Hello PhoneGap</h1>
19: <div id="welcomeMsg"></div>
20: <div id="orientation">portrait</div>
21: </body>
22: </html>
Обратите внимание на новый DIV для хранения текста, идентифицирующего текущее состояние ориентации, и функцию Ориентация изменения, связанную с событием в функции onDeviceReady . Именно поворот страницы хоста вызывает это событие внутри пользовательского элемента управления PhoneGap. Без свойства, позволяющего использовать обе ориентации, это событие никогда не сработает.
Если вы хотите обрабатывать ориентацию, измененную вне части PhoneGap вашего приложения, вы также можете подключить обработчик событий C # на уровне страницы. Для этого вернитесь в окна свойств MainPage.xaml и переключитесь на События в верхней части окна. Найдите событие OrientationChanged . Мы создадим обработчик события, дважды щелкнув по имени события.
Откроется окно MainPage.xaml.cs, готовое для ввода нашего кода.
Предоставление пользователю возможности работать с приложением как в книжной, так и в альбомной ориентации делает его более гибким. В следующих статьях я расскажу, как существуют даже аспекты разработки Windows Phone, которые автоматически реагируют на изменение ориентации.
Дайте мне знать ваши отзывы в комментариях и поищите еще много советов по PhoneGap для Windows Phone, которые появятся в последующие недели, с повышением уровня сложности. 🙂