Это серия учебных пособий Phone Gap, в которой я создам приложение для определения разрыва телефона для каждой из поддерживаемых платформ. Это в основном мое собственное путешествие, за которым вы можете следовать. Я начну с Windows Phone, а затем преобразую его в IPhone, IPad, Android, Blackberry, Symbian. Мы обсудим советы и рекомендации по пути.
В последнем посте Phone Gap Tutorial # 1 мы рассмотрели, как подготовиться к использованию пробела телефона, и мы создали пример проекта. В следующем уроке мы рассмотрим созданные файлы и различия между этим и стандартным приложением Windows.
Если вы посмотрите на файлы в обозревателе решений, вы увидите некоторые папки и файлы, которые не являются частью обычного приложения Windows Phone. Мы будем касаться только тех элементов, которые отличаются от обычных приложений.
Первая папка, которую вы заметите, это папка GapLib. Это содержит телефонный разрыв, который специфичен для Windows Phone. Этот .dll имеет некоторые интересные побочные эффекты, когда дело доходит до отправки на рынок. Мы расскажем об этом в следующем посте.
Следующая папка — папка плагинов. Пока это пусто, но вы можете использовать это для ускорения написания приложений с пробелами в телефоне . Для Windows Phone уже создано несколько плагинов, в том числе:
- Детский браузер
- Живые плитки
- PGMapLauncher
- PGSocialShare
Мы также обсудим это в следующем посте. Если вы хотите узнать больше о том, как создавать плагины, вы можете перейти в вики здесь: http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins или если вы просто хотите использовать текущие плагины, вы можете перейдите сюда: https://github.com/purplecabbage/phonegap-plugins/tree/master/WindowsPhone
Следующая папка (www) — это то место, куда пойдут «кишки» вашего приложения. Прямо сейчас у него есть файл index.html, страница css и js-файл phonegap.
Если мы заглянем в файл index.html, то увидим простой HTML-файл, который добавляет и прослушиватель событий для устройства готов. deviceready — это событие, которое срабатывает, когда PhoneGap полностью загружен.
Затем код добавляет некоторый текст к innerHTML файла welcomeMsg
(<div id = ”welcomeMsg”> {Он вставляет его здесь} <div>
и затем пишет в окно вывода VS. Это полезно знать, чтобы помочь вам отладить позже.
<script type="text/javascript">
document.addEventListener("deviceready",onDeviceReady,false);
// once the device ready event fires, you can safely do your thing! -jm
function onDeviceReady()
{
document.getElementById("welcomeMsg").innerHTML += "PhoneGap is ready! version=" + window.device.phonegap;
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
}
</script>
В файле phonegap- (вставьте версию здесь) .js содержатся полезные комментарии о порядке событий, включая событие deviceready.
/**
* The order of events during page load and PhoneGap startup is as follows:
*
* onDOMContentLoaded Internal event that is received when the web page is loaded and parsed.
* window.onload Body onload event.
* onNativeReady Internal event that indicates the PhoneGap native side is ready.
* onPhoneGapInit Internal event that kicks off creation of all PhoneGap JavaScript objects (runs constructors).
* onPhoneGapReady Internal event fired when all PhoneGap JavaScript objects have been created
* onPhoneGapInfoReady Internal event fired when device properties are available
* onDeviceReady User event fired to indicate that PhoneGap is ready
* onResume User event fired to indicate a start/resume lifecycle event
* onPause User event fired to indicate a pause lifecycle event
* onDestroy Internal event fired when app is being destroyed (User should use window.onunload event, not this one).
*
* The only PhoneGap events that user code should register for are:
* onDeviceReady
* onResume
*
* Listeners can be registered as:
* document.addEventListener("deviceready", myDeviceReadyListener, false);
* document.addEventListener("resume", myResumeListener, false);
* document.addEventListener("pause", myPauseListener, false);
*/
Что касается остальной части файла phonegap- (вставьте версию здесь) .js, мы постараемся углубиться в него, продолжая создавать приложение.
В файле GapSourceDictionary.xml перечислены все ресурсы приложения HTML для этого проекта. При запуске приложения этот XML-файл читается, и каждый файл добавляется в изолированное хранилище, чтобы его можно было обслуживать с помощью элемента управления WebBrowser. (Если вы еще не создали свой проект, это будет пустым). Это формируется файлом ManifestProcessor.js.
<GapSourceDictionary>
<FilePath Value="www\index.html"/>
<FilePath Value="www\master.css"/>
<FilePath Value="www\phonegap-1.4.1.js"/>
</GapSourceDictionary>
Последняя часть, специфичная для PhoneGap, находится в MainPage.xaml. Там вы найдете элемент управления PGView. Этот элемент управления находится в WP7GabClassLib.dll.
<my:PGView HorizontalAlignment="Stretch"
Margin="0,0,0,0"
Name="PGView"
VerticalAlignment="Stretch" />
Если вы хотите узнать, из чего состоит этот элемент управления, вы можете посмотреть его в файлах Phone Gap, которые вы скачали в этой папке callback-phonegap-1.4.1-0-g0d1f305 \ callback-phonegap-0d1f305 \ lib \ windows \ framework
Как видите, это модифицированный элемент управления WebBrowser.
<phone:WebBrowser x:Name="GapBrowser"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsScriptEnabled="True"
Foreground="White"
Navigated="GapBrowser_Navigated"
Loaded="GapBrowser_Loaded"
Unloaded="GapBrowser_Unloaded"
ScriptNotify="GapBrowser_ScriptNotify"
LoadCompleted="GapBrowser_LoadCompleted"
Navigating="GapBrowser_Navigating"
NavigationFailed="GapBrowser_NavigationFailed"
IsGeolocationEnabled="True" />
Вот именно для этого поста. Теперь вы знаете, что создано для вас, когда вы начинаете новый проект.
В следующем уроке мы рассмотрим, как нам нужно изменить наш проект, чтобы соответствовать рынку Windows Phone. (Поверьте мне, мы должны сначала решить эту проблему).
Учебное пособие по пробелам в телефоне № 1 — Начало работы
Учебное пособие по
пробелам в телефоне №3 — Уменьшение нагрузки
источника:
http://thesociablegeek.com/phone-gap-tutorial/phone-gap-tutorial- 2looking вокруг /