Документ описывает использование PhoneGap и Sencha Touch 2.0 для создания мобильных веб-приложений на HTML5. Основное внимание уделяется архитектуре PhoneGap, возможным командам и паттернам, а также сравнению преимуществ и недостатков веб-приложений и нативных приложений. Также упоминается простота разработки и кросс-платформенная совместимость, хотя отмечаются и ограничения в использовании API платформ и производительности.

1. When HTML5
becomes native
Sencha Touch 2.0 + PhoneGap 1.4

2. Showcase
Немного о PhoneGap
Sencha Touch framework
Mobile Web App
Deploy with Heroku
Compile with xCode

3. PhoneGap это open source framework.
Создаетль Nitobi
Это HTML5 платформа, для разработки
под 7 мобильных платформ.

4. PhoneGap

5. PhoneGap

6. PhoneGap Build
https://build.phonegap.com/

7. Архитектура
1. PhoneGapDelegate расширяет возможности UIApplicationDelegate и
реалезует UIWebViewDelegate протокол.
2. PhoneGapViewController расширяет UIViewController класса,
перехватывая события View.
3. PhoneGapCommand - базовый класс для всех PhoneGap API plugins
(таких как Camera, GPS и Contacts) и так же является связующим
классом, для доступа к appDelegate, appViewController и webView. Этот
класс может быть расширен написанием своих собственных плагинов.

8. Архитектура

9. Архитектура

10. Архитектура
PhoneGap !"#"$%&'(%&"' )&!#*+( URL
UIWebView, ,*'*#&- )&.#/0"11& %* View.
PhoneGapAppDelegate #"&23)/"'
UIWebViewDelegate !#*'*,*2 !"#$%&'& +*4('35
% document.location UIWebView. 6*+2" !"#"$%&'&
+*4('3-, PhoneGap #"7&"' 8'* 0 '"!"#9-'*
:"2&'9 + ;'3< +*4('3"<.

11. Паттерны
1. gap:// command
— для обработки PhoneGap комманд, используется запрос в виде
“PhoneGap.exec(‘SomePlugin.someMethod’, someArg1, someArg2);”
написанных на javascript, которые преобразовуются в URL запрос
gap://SomePlugin.someMethod?arg1Name=someArg1&arg2Name=someArg2
2. file://www/someurl.html
—загрузка локального файла (например из папки ‘www’) во webView
3. http://someweburl.html
— загрузка файла во webview извне
4. mailto: sms: tel: etc
– эти протоколы уже реализованы в стандартном UIWebView для обработки таких событий как
отправка email, совершение звонка и прочего.
5. Custom
— возможность обработки PhoneGapAppDelegate webView:shouldStartLoadWithRequest метода для
своего URL хэндлера.

12. PhoneGap Plugins

14. PhoneGap Tools
Фрейморков много всяких-разных

15. Структура проекта

16. Оды о Sencha Touch
The Best HTML5 Mobile
Web App Framework
Неоспроимым приимуществом есть, и остается, схожость с родными
интетрфейсами iOS, Android и BlackBerry устройств с тачскрином*
MVC Based
*не все так сладко;D

17. Немного о Web App
Перевоплощение веба в приложения.
Никаких App Store.
Прямая веб ссылка is loading... и вуаля.
Add shortcut to home.
Никаких updates.
Возмонжость кеширование приложения через CasheManifest.

18. Минусы:
- невысокая скорость работы на Android;
- невозможно использовать API платформ;
- нет доступа к адресной книге;
- невозможно полностью перевести приложение в оффлайн
- непривычная установка приложения, в виду отсутствия его в
appstore и android market.

19. Плюсы:
- пишешь одно приложение — работает и на iOS, и на Android и на
всем остальном, что поддерживает JS и HTML5
- высокая скорость разработки
- простота разработки
- наличие готовых фреймворков
- не требует никаких аккаунтов в appstore и android market

20. Создаем
Ext.regApplication {}
Ext.setup ({
onReady: function() {
new Ext.Panel({
fullscreen : true,
html: ‘aaa’
});
};
});

21. ! "#$#%& some practical approach...

22. Fin.