Итак, у вас есть навык в работе с ADF и вы решили написать для портала мобильное приложение. В этом может помочь горячо любимый JDeveloper(в дальнейшем Jdev). В этой статье я хочу описать создание простого мобильного приложения на Oracle MAF. Oracle MAF - это гибридный фреймворк для мобильной разработки. Он обеспечивает создание приложений как для IOS, так и для Android устройств.
Приложение будет очень простым. Оно будет выводить местоположение на карте по введенным вами координаты(исходники приложения можно скачать на github: https://github.com/JealousyM/begin-maf ) . Начнем : )
Откройте JDeveloper 12c (в данный момент самая актуальная версия 12.1.3) . Если у вас ее нет, скачайте бесплатно отсюда : http://www.oracle.com/technetwork/developer-tools/jdev/downloads/index.html
Зайдите в центр обновления JDeveloper(Help->Check for Updates) и установитe Mobile Applicatione Framework
После перезапуска, Jdev попросит путь к JDK 8( MAF 2.1 использует Java 8). Укажите путь к JDK 8, а если он не установлен, то вы можете его скачать отсюда : http://www.oracle.com/technetwork/java/javase/downloads/index.html
Создайте новое приложение "Mobile Application Framework Application". Для этого нажмите Ctrl+N(или File->New) и на вкладке Applications выберите Mobile Application Framework Application.
Выберите имя для вашего приложения, путь, префикс для пакетов и нажмите Finish(следующие этапы сейчас не важны)
После завершения работы мастера, Jdev создал два проекта и файлы необходимые для работы приложения. Для нас самыми важными сейчас являются: maf-application.xml и maf-feature.xml
Файл maf-application.xml находится в Application Resources->Descriptors->ADF META-INF. В нем мы может прописывать характеристики нашего приложения.А именно
На вкладке Application :
- Имя
- ID
- Версию
- Свойства навигации
На вкладке Plugins можно добавить устройства телефона которые вы будете использовать в приложении(gps,camera и т.д) и сторонние плагины(plugins)
На вкладке Feature References конфигурируется то, что в будет отображаться в панели навигации и springboard(эквивалент домашней страницы на смартфонах) приложения.
Вкладка Preferences, используется для создания пользовательских свойств мобильного приложения
Вкладка Security используется для работы с безопасностью приложения.
Любое мобильное приложение должно иметь как минимум один компонент (feature). В файле maf-feature.xml вы создаете эти компоненты. Каждый компонент может быть независим от другого.
Нам нужно создать всего один компонент, который будет выводить координаты. Для этого нажмите "+" в таблице Features
Появится окно создания компонента. Введите его название,id и путь.
Компонент создан, теперь нужно привязать к нему или создать данные. Для этого перейдите на вкладку Contents. Там нажмите на + (Insert Contents). В таблице Contents появится строка. В ней нужно выбрать тип будущего контента.
Можно выбрать 4 типа:
- MAF AMX Page (AMX страница)- MAF Task Flow (bounded task flow)
- Local HTML (простая html страница)
- Remote URL (удаленная страница по URL)
Так как нам нужна всего одна страница, выбираем MAF AMX Page.
У поля File нажимаем " + ", и в появившемся окне вводим название страницы и жмем "ок".
В созданной странице на вкладке Source замените текст, кодом ниже
<?xml version="1.0" encoding="UTF-8" ?>
<amx:view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:amx="http://xmlns.oracle.com/adf/mf/amx"
xmlns:dvtm="http://xmlns.oracle.com/adf/mf/amx/dvt">
<amx:panelPage id="pp1">
<amx:facet name="header">
<amx:outputText value="SuperApp" id="ot1"/>
</amx:facet>
<amx:inputText label="Enter X" id="it1" inputType="number" value="#{pageFlowScope.x}"/>
<amx:inputText label="Enter Y" id="it2" inputType="number" value="#{pageFlowScope.y}"/>
<amx:commandButton text="Show place" id="cb3"/>
<dvtm:geographicMap id="geomp1" centerX="#{pageFlowScope.x}" centerY="#{pageFlowScope.y}">
<dvtm:pointDataLayer id="pdl1" animationOnDataChange="alphaFade"/>
</dvtm:geographicMap>
</amx:panelPage>
</amx:view>
AMX страница не сильно отличается от JSF,JSFF или JSPX страницы. Это обычный xml документ, где :
- <?xml version="1.0" encoding="UTF-8" ?> - объявление XML документа и его кодировки.
- <amx:view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:amx="http://xmlns.oracle.com/adf/mf/amx"
xmlns:dvtm="http://xmlns.oracle.com/adf/mf/amx/dvt"> - объявления пространства имен xsi,amx,dvtm для работы с amx и dvtm компонентами.В нашем случае это :
- amx:view - корневой элемент AMX страницы
- amx:panelPage - компонент для компоновки элементов на странице.Имеет таки фасеты(facet) как : header,footer,primary,secondary. Компоненты в amx:panelPage находящиеся не в фасетах, будут отображаться в центральной области.
- amx:inputText - компонент для ввода данных
- dvtm:geographicMap - компонент для вывода карты
- amx:commandButton - компонент для выполнения бизнес - логики(у нас кнопка как бутафория)
Готово. Теперь нам нужно запустить наш проект. Для этого нам нужно запустить эмулятор мобильного устройства и настроить Jdev под него. Если у вас нет эмулятора, выполните следующую инструкцию:
Скачайте и установите Android SDK по этой ссылке: http://developer.android.com/sdk/index.html
-
Запустите Android SDK Manager и установите:
- Android SDK Tools
- Android SDK Platform-tools
- Android SDK Build-tools(для той версии с которой будете работать)
- Android(ту версию которая вам нужна).
Зайдите в Tools-Manage AVDs и создайте эмулятор нужного вам устройства
Нажмите Start.
Эмулятор запущен. Теперь нужно настроить Jdev. Для этого нужно зайти в Tools->Preferences и открыть вкладку Mobile Application Framework->Android Platform. Там нужно указать путь к ранее установленному Android SDK, Andriod Platform и Android Buid tools.
Так же нужно указать путь к keystore, пароль к keystore, имя key Alias и пароль к нему. Если вы раньше не создавали keystore, тогда нужно выполнить команду в директории JDK\bin который использует ваш JDeveloper ( какой JDK используется можно посмотреть в Help > About > Properties > java.home ) :
keytool –genkey –v –keystore <Keystore Name>.keystore –alias <Alias Name> -keyalg RSA –keysize 2048 –validity 10000,
где <Keystore Name> имя будущего keystore, а Alias Name имя будущего alias
Теперь можно приступить к деплою.
После того, как вы увидите сообщение "Deployment finished", можно переходить к окну эмулятора. Ваше приложению будет находиться на экране и вы его можете запустить : )
Комментариев нет:
Отправить комментарий