среда, 11 марта 2015 г.

Создание простого MAF ( ADF Mobile) приложения в JDeveloper 12c

Итак, у вас есть навык в  работе с 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.
    После перезапуска, 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", можно переходить к окну эмулятора.  Ваше приложению будет находиться на экране и вы его можете запустить : )