среда, 7 ноября 2012 г.

phonegap android ChildBrowser или как открывать дочерние окна браузера

Проблема возникла у меня, когда понадобилось авторизовываться в нашем мобильном приложении через vk.com. Вот здесь описано, что для авторизации через vk.com нужно открыть страница по адресу:
https://oauth.vk.com/authorize
 client_id=APP_ID
 scope=SETTINGS
 redirect_uri=REDIRECT_URI
 display=DISPLAY
 response_type=token 
после чего в браузере произойдёт несколько редиректов и финальный URL будет содержать персональные параметры авторизации.
Посоветовавшись с гуглом я узнал, что работая с phonegap для этих целей можно использовать плагин ChildBrowser. Процесс добавление плагина для iPhone и для android разный. Здесь будет описан процесс для android.

Англоязычный источник статьи здесь.


Step one - создать структуру папок для файла ChildBrowser.java. Кликаем на папке src, затем кликаем правой кнопкой мыши, и из контектсного меню выбираем New и Package.


В появившемся диалоговом окне печатаем com.phonegap.plugins.childBrowser и кликаем Finish. Пожалуйста, обратите внимание, что имя пакета чувствительно к регистру, так что удостоверьтесть что оно соответствует вышанаписанному в точности.



Step two - это добавление класса ChildBrowser.java в наш проект.  Скачиваем файл и сохраняем его в директории проекта src/com/phonegap/plugins/childBrowser. Потом кликаем на имени проекта правой кнопкой и выбираем Refresh.  Теперь наш project explorer должен выглядеть примерно так:

В этом месте не должно быть никаких красных точек, предупреждающих об ошибках. Если они есть, наверняка вы назвали свой преокт некорректно.

Step three - это добавить файл childbrowser.js в наш проект. Несмотря на то, что его имя не содержит никакого упоминания о системе, на которой он должен работать, нужно использовать файл для системы андроид. Если использовать например файл для iOS, то ничего работать не будет. Загрузите архив по этому линку и сохраните нужный скрипт оттуда в папке проекта assets/www. Сделайте проекту Refresh. Теперь ваш project explorer должен выглядеть примерно так:

В step four нам нужно поправить файл AndroidManifest.xml и добавить intent filter для ChildBrowser.  Вставляем следующие строки внутри тэга <application/>:

<activity android:name="com.phonegap.DroidGap" android:label="@string/app_name">
<intent-filter>
</intent-filter>
</activity>

Здесть пример файла AndroidManifest.xml.


В step five нам нужно поправить файл index.html, чтобы сослаться на childbrowser.js и вызвать ChildBrowser.  В тэге <head/> после ссылки на phonegap.0.9.5.js (или cordova) добавляем следующую строку:

<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>

и где-нибудь внутри тэга <body/> добавляем строку примерно такого содержания:

<a href="#" onclick="window.plugins.childBrowser.showWebPage('http://www.google.com');">Open Google.com in child browser</a>

Вообще-то нужен ещё step six, который почему-то забыт в оригинале статьи. В конфиг-файле res/xml/config.xml нужно зарегистрировать используемый плагин, для этого внутри тега <plugins/> добавляем строку:

    <plugin name="ChildBrowser" value="com.phonegap.plugins.childBrowser.ChildBrowser"/>


И мы получим приложение, которое покажет нам следующее:

и открывает Google в ChildBrowser когда мы кликаем по ссылке.

Полный текст index.html также доступен.

Надеюсь пост окажется полезным!


Комментариев нет:

Отправить комментарий