Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Mobile Web Apps
Code

Выкарыстанне JQuery Mobile для стварэння натыўнага навінавага прыкладання на Android: частка 3

by
Difficulty:AdvancedLength:LongLanguages:
This post is part of a series called Use jQuery Mobile to Build a Native Android News Reader App.
Use jQuery Mobile to Build a Native Android News Reader App: Part 2

Belarusian (беларуская мова) translation by Alex Grigorovich (you can also view the original English article)

У 1 часткі гэтай серыі ўрокаў мы прадставілі наш дадатак, апісалі макет старонкі і абмеркавалі, як ствараць старонкі ў дадатку з дапамогай JQuery Mobile. У 2 частцы мы завяршылі ўкараненне нашага вэб-прыкладання. У гэтай заключнай частцы мы перанясем вэб-прыкладанне ў натыўны дадатак для Android.


Перанос у натыўны дадатак для Android

Вэб-дадатак, завершаны ў 2 часткі будзе ператворан ў натыўны дадатак для Android. Абмеркаванне ніжэй ставіцца да АС Android версіі 2.2 і 2.3.

Прыкладанне Android будзе выкарыстоўваць файл index.html ў якасці кампанента карыстацкага інтэрфейсу. Мы створым клас android.app.Activity для вызначэння пункту інтэграцыі паміж index.html і дадаткам. Таксама мы створым клас android.webkit.WebViewClient, каб пераканацца, што старонка Навіна адлюстроўваецца ў зыходным экзэмпляры android.webkit.WebView, дзе запусьціць прылажэньне Навіны.

Змены ў index.html

Абновіць пераменная NEWS_URI наступным чынам:

Нам не патрэбны файл bridge.php для Android, каб перанакіроўваць AJAX-запыты на сервер Yahoo! Гэта звязана з тым, што тут не ўжываецца абмежаванне на крыніцы запыту. Калі ён рэалізаваны як частка прыкладання, файл index.html не адлюструецца з вэб-сервера. Такім чынам, ён можа выконваць выклікі AJAX для выдаленай URL-адрасы.

Акрамя таго, мы дадаем наступную функцыю:

Функцыя changeLocation() выконваецца з файла android.webkit.WebViewClient, які будзе адлюстроўвацца імгненна. Мэта гэтай функцыі - паказаць старонку прагрэсу падчас пераходу з старонкі навін на старонку навіны.

  • Першы крок у changeLocation() - адлюстраванне старонкі прагрэсу.
  • Памятаеце, што функцыя JQuery get() з'яўляецца спецыяльнай функцыя JQuery ajax(). Мы выклікаем функцыю get(), перадаючы яму пусты URL-адрас і апрацоўшчык зваротнага выкліку, які ўсталёўвае зменную window.location як ўваходны аргумент. Аргумент ўвода - гэта URL-адрас у атрыбуце, <a href='...'> зняволены ў тэг для навінавага элемента a, апісаны ў частцы 2 «Пераход на старонцы навіны». Калі URL загружаецца, старонка прагрэса замяняецца змесціва гэтага URL-адраса.
  • Як мы паказвалі ніжэй, функцыя changeLocation() не з'яўляецца важнай часткай пераносу вэб-прыкладання. Гэта неабходна толькі для адлюстравання старонкі прагрэсу пры пераходзе са старонкі навін на старонку навіны ў дадатку.
  • Старонка пераходу не патрабуецца ў вэб-дадатку пры пераходзе са старонкі спісу навін на старонку навіны. Гэта звязана з тым, што падчас пераходу сам вэб-браўзэр адлюстроўвае індыкатар прагрэсу для карыстальніка. Напрыклад, у Android, як у натыўных, так і ў Дэльфін-браўзэрах адлюстроўваецца кола і індыкатар выканання на панэлі навігацыі. У IOS Safari браўзэр адлюстроўвае аналагічны індыкатар прагрэсу.

Клас Activity

Пачатак нашага класа Activity, названы NewsActivity, паказаны ніжэй:

  • У метадзе onCreate() мы спачатку выклікаем рэалізацыю па змаўчанні з суперкласса, а затым выклікаем setContentView() для загрузкі файла макета для гэтага дзеяння. Аргумент для setContentView() будзе R.layout.main, які спасылаецца на файл main.xml у тэчцы res/layout.
  • Мы атрымліваем зварот да WebView праз findViewById(R.id.webview). Мы ўсталёўваем карыстацкі WebViewClient ў WebView з імем NewsClient (які будзе разгледжаны ў бліжэйшы час). Затым мы наладжваем WebView, каб дазволіць выкананне JavaScript і API сховішчы DOM (апошні неабходны для выкарыстання HTML5 localStorage).
  • Нарэшце, мы просім WebView загрузіць старонку index.html з кодам карыстацкага інтэрфейсу.

На старонцы навін націск кнопкі «Назад» на прыладе верне карыстальніка на старонку «Катэгорыi». Каб пераканацца ў гэтым, нам спачатку трэба апрацаваць падзею onKeyDown ў нашым NewsActivity. Гэта дзеянне паказана ніжэй:

Калі падзея клавішы адпавядае кнопцы «Назад» і WebView ўтрымлівае некаторую гісторыю, каб вярнуцца да яе, мы папросім WebView вярнуцца на адзін крок у сваёй гісторыі. На старонцы Навіны гэта будзе адпавядаць файлу index.html. Калі гісторыя вяртаецца на адзін крок назад, старонка катэгорый будзе адлюстроўвацца ў адпаведнасці з крокамі, апісанымі ў частцы 2 «Запуск прыкладання».

Нарэшце, давайце паглядзім на карыстацкі WebViewClient, які рэалізаваны як унутраны клас NewsActivity.

Адзіная аперацыя, якую мы перавызначаем з бацькоўскага класа, з'яўляецца shouldOverrideUrlLoading(), дзе мы праграмуем WebView на выклік функцыі JavaScript changeLocation() у index.html.

  • Калі мы не вызначым карыстацкі WebViewClient, старонка навін будзе адлюстроўвацца ў асобным дадатку браўзэра па-за нашага прыкладання. Таму азначэнне WebViewClient мае важнае значэнне для адлюстравання старонкі навіны як часткі прыкладання (т. е. у тым жа WebView, на якім размяшчаецца файл index.html).
  • Мы можам напісаць функцию shouldOverrideUrlLoading() больш простым спосабам:

    Гэтага было б дастаткова, каб адлюстраваць старонку навін у тым жа WebView, на якім размяшчаецца index.html. Аднак пераход з старонкай навін на старонцы «Звесткі аб навінах» не ўключае паказ старонкі прогресса.

Аглдедзiу клас Activity, разгледзім іншыя кампаненты нашага дадатку.

AndroidManifest.xml

Чтобы зразумець як працуе файл AndroidManifest.xml звярніцеся да афіцыйнай дакументацыі. У гэтым файле ёсць два асобныя аб'ект, годныя ўвагі.

  • Як апісаны ў дакументацыі android.app.Activity, па змаўчанні змены канфігурацыі, у тым ліку змяненне арыентацыі прылады або даступнасць клавіятуры, прыводзіць да закрыцця бягучай актыўнасці. Каб прадухіліць такія паводзіны па змаўчанні, мы наладжваю прыкладанне, паказваючы такія змены канфігурацыі, якія будуць апрацоўвацца само прыкладанне. Гэта вызначаецца ў атрыбуце configChanges, дзе orientation прылады адпавядае яе змене, а keyboardHidden адпавядае змене статусу клавіятуры (напрыклад, карыстальнік адкрыў клавіятура прылады). Мы наладжваем дадатак такім чынам, каб пры ўзнікненні любога з гэтых падзей бягучая актыўнасць не была зачынена.
  • Элемент <uses-permission android:name="android.permission.INTERNET" /> дазваляе з дадаткам атрымліваць доступ да Інтэрнэту.

strings.xml

Гэты файл вызначае канстанту з імем app_name, якая выкарыстоўваецца для ідэнтыфікацыі прыкладання «Навіны». Значэнне гэтага атрыбуту адлюстроўваецца ў розных месцах нашаi Android-прылады, як відаць ніжэй. Злева направа: пад значком запуску прыкладання, панэль загалоўка, «Настройкі» - «Упраўленне праграмамі».

Application name

Малюнак 11. Як адлюстроўваецца імя прыкладання ў Android.

Інтэграцыя HTML-інтэрфейс з дапамогай android.app.Activity

Мы рэалізуюем карыстацкі інтэрфейс у нашым Android-дадатаку, выкарыстоўваючы файл index.html і бібліятэкi JavaScript і css. Кропка інтэграцыі паміж index.html і карыстацкім класам android.app.Activity ўяўляе сабой наступны радок:

Акрамя таго, звярніце ўвагу на «Класс актыўнасці», у якім мы падлучальны JavaScript і DOMStorage у аб'екце android.webkit.WebView бо ў index.html JavaScript неабходна запусціць і атрымаць доступ да HTML5 localStorage.

Нарэшце, у файле AndroidManifest.xml мы дазваляем падлучэнне да інтэрнэту з нашага дадатку з дапамогай кода:

Скрыншоты дадатку Android

На малюнках 1 - 4 ў першай частцы гэтай серыі скрыншоты прыкладання для Android.


Малюнак для дадатку

Чтобы стварыць малюнак для дадатку Навіны, мы прытрымліваемся рэкамендацый для дызайну дадаткаў Android. У гэтым рэсурсе даступны розныя шаблоны ў фармаце Adobe PSD. Мы загрузілі icon_templates-v2.0.zip і дастаем файл Launcher-icon-template.psd. У гэтым файле мы абралі два шаблону для стварэння малюнка дадатку:

icon 1icon 2

Мы размясцілі гэтыя шаблоны ў двух асобных пластах ў Adobe Photoshop і дадалі графічны тэкст, News , на дадатковы пласт уверсе, каб зрабіць малюнак. У адпаведнасці з кіраўніцтвам мы стварылі тры версіі малюнку для экранаў з нізкім, сярэднім і высокім дазволам з памерамі 36 х 36, 48 х 48 і 72 х 72 пікселяў адпаведна. Кожны з гэтых значкоў называецца icon.png, і яны змяшчаюцца ў папкі праектаў Android у адпаведнасці з наступнага табліцай:

Имя папки Назва файлу Размер у пикселях
res\drawable-ldpi icon.png 36 x 36
res\drawable-mdpi icon.png 48 x 48
res\drawable-hdpi icon.png 72 x 72

У прыкладзе паказаны малюнак памерам 36 х 36:

icon ldpi


Натыўнае асяроддзе распрацоўкі прыкладанняў для Android

У гэтым уроку мы падрыхтавалі неабходныя файлы праекта для імпарту прыкладання для Android -новостей ў сераду распрацоўкі Eclipse. Патрабаваннями для праекта з'яўляецца:

Праект быў паспяхова пратэставаны як для платформы Android 2,2 API 8 ўзроўню так і для API 2,3 ўзроўню 9.

Імпарт проекта

Перед імпартам праекта ў сераду Eclipse, пераканайцеся, што ўбудова Eclipse, ADT паказвае на правільнае размяшчэнне Android SDK ў вашай лакальнай сістэме. Каб праверыць гэта, у меню Eclipse, перайдзіце ў Window -> Preferences -> Android. Акно месцазнаходжаньня SDK павінна паказваць на месцазнаходжанне Android SDK. Пасля правільнай налады вы павінны ўбачыць нешта падобнае на тое што ёсць на малюнку ніжэй:

Preferences

Рисунок 12. Налады Eclipse.

Файлы праекта размяшчаюцца ў архіве з імем news.zip. Каб імпартаваць праект у меню Eclipse, перайдзіце ў меню File -> Import, а затым ў майстру імпарту файлаў выберыце General -> Existing Projects into Workspace (гл Ніжэй.).

Import

Малюнак 13. Імпарт праекта.

На наступнаi старонцы майстра націсніце Select archive file і знайдзіце, дзе знаходзіцца news.zip ў вашай файлавай сістэме. Акно Projects будзе аўтаматычна запоўнена, калі праект News ужо абраны. Як паказана ніжэй.  Націсніце кнопку Finish, каб завяршыць импорт.

Project File Selection

Малюнак 14. Выбар файла проекта.

Eclipse аўтаматычна створыць дадатак пасля імпарту. Цяпер вы павінны ўбачыць праект Навіны ў правадыру праекта, як паказана ніжэй:

Project Explorer

Малюнак 15. Правадар проекта.

Для стварэння / адладкi вашага праекта вы можаце выбраць платформу Android OS 2,3 і 2,2 у якасці зборкі. Для гэтага абярыце праект News ў правадыру праекта і ў кантэкстным меню абярыце Properties. У левай частцы спісу уласцівасцяў выберыце Android у якасці ўласцівасці. Даступныя мэты зборкі адлюстровываюцца справа, як паказана ніжэй:

Android Build Target

Малюнак 16. Зборка Android.

Спіс файлов

Спiс файлаў у праекце прыведзены ніжэй.

Project Contents

Малюнак 17. Змест праекта.

Мы ўжо абмяркоўвалі некаторыя з гэтых файлаў. Ніжэй прыведзены кароткі агляд:

  • Тэчка src змяшчае зыходны код для класа NewsActivity.
  • Тэчка gen змяшчае файлы, аўтаматычна створанае Зацьменне ADT.
  • У тэчцы assets\www і яе падтэчкi утрымліваюцца ўсе файлы, неабходныя для карыстацкага інтэрфейсу, уключаючы index.html; assets\www\css-js змяшчае файлы css і JavaScript, якія выкарыстоўваюцца index.html. У прыватнасці:
    • jquery-1.4.4.min.js, jquery.mobile-1.0a2.min.js, jquery.mobile-1.0a2.min.css - гэта бібліятэкі фреймворка JQuery Mobile.
    • jquery.ba-dotimeout.js з'яўляецца бібліятэкамi jquery-dotimeout-plugin.
    • jquery.dst.js з'яўляецца убудова DST.js.
    • assets\www\css-js\images\icons-18-white.png з'яўляецца файламi малюнка, на якія спасылаюцца JQuery Mobile.
  • assets\www\img\wait.gif - гэта малюнак, якi выкарыстоўваецца на старонцы прагрэсу.
  • Тэчкі res\drawable* захоўваюць абразкі прыкладання, якія апісаны ў раздзеле «Абразок прыкладання» ў гэтым кіраўніцтве.
  • Файл res\layout\main.xml з'яўляецца файл макет Android XML. Паколькі карыстацкі інтэрфейс у нашым дадатку вызначаны ў файле index.html з выкарыстаннем фреймворка JQuery Mobile, гэты файл зразумелы і не мае патрэбу ў далейшых каментарах.
  • Мы ўжо разгледзелі тэчкі res\values\strings.xml і файл AndroidManifest.xml.
  • Файл default.properties вызначае аб'ект зборкі і з'яўляецца часткай архіва news.zip. Ён будзе перазапісаны Eclipse ADT у залежнасці ад выбару аб'екта зборкі.

Высновы

Акрамя распрацоўкі крос-платформенных мабільных вэб-прыкладанняў, платформа JQuery Mobile можа выкарыстоўвацца для рэлизацыи натыўных дадаткау для Android. У гэтай серыі ўрокаў мы распрацавалі вэб-дадатак выкарыстоўваючы JQuery Mobile, а затым перанясем яго ў натыўны дадатак для Android з невялікімi зменамі. Асноўная ідэя складаецца ў тым, каб выкарыстоўваць аб'ект android.webkit.WebView ў якасці кантэйнера для запуску HTML-файл вэб-дадатак і змяшчаецца ў ім JQuery Мабільны JavaScript-кодзе. Некаторыя заключныя заўвагі прыводзяцца ніжэй:

  • Пры зборцы натыўнага прыкладання для Android старонка html, якая працуе ў android.webkit.WebView, не падвяргаецца абмежаванням аднаго і таго ж крыніцы запыту пры выкананні AJAX.
  • Убудова jQuery-dotimeout і убудова DST.js, хоць і першапачаткова распрацаваны для рамкі jQuery, добра працуе ў jQuery Mobile. Існуе велізарная колькасць убудоў, напісаных для JQuery, і, хоць неабходна разглядаць кожны выпадак асобна, яны могуць быць лёгка даступныя ў JQuery Mobile. Гэта велізарная перавага для гэтага фреймворка!
  • Мы пратэставалі вэб-дадатак на Android OS 2.2 і IPod Touch IOS 4.1 і 4.2. Натыўны дадатак для Android был пратэставана з дапамогай эмулятараў Android OS 2.2 і 2.3 і тэлефона Android OS 2.2. Ва ўсіх выпадках знешні выгляд і функцыянальныя атрыбуты вельмі падобныя.
  • На платформе Android існуюць вядомыя прыёмы для стварэння выклікаў JavaScript-to-Java і Java-to-JavaScript. Фактычна, мы прадэманстравалі, як выклікаць функцыю JQuery Mobile JavaScript з кода Java ў нашым дадатку.  Можна было б распрацаваць убудовы JQuery Mobile для доступу да ўласных API-інтэрфейсам Android. Гэта сведчыць аб магчымасцях платформы JQuery Mobile для распрацоўкі натыўных прыкладанняў для Android.
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.