Skip to main content

WeatherApp with MAF using MCS

Pre-requisites/Assumptions :
  1. MAF version : 2.1.3
  2. mafmcsutility.jar exists in the classpath of the application.
  3. Two REST API build and exposed from Oracle Mobile Cloud Service(MCS).
    • This application is available on GitHub and can be downloaded and run from your own machine.
    • This application uses 2 APIs created and exposed in MCS
      • /mobile/custom/WeatherAPI/getweather?country=<CCC>&city=<AAA>
      • /mobile/custom/WeatherAPI/getCities?country=<CCC>
  4. Part 1 : talks about creating the Mobile Backend on MCS : http://adfjava.blogspot.in/2015/10/weatherapp-with-maf-using-mcs-part-1.html
GitHub application can be found on :


 Following sections, I will talk a bit about

  • maf-application.xml
  • Datacontrol 
  • Taskflow
  • Javascript to enable device back button
You can download the Github project and check the whole source code in JDeveloper 12.1.3

maf-application.xml:

I have defined the MCS connection details in this xml.


Datacontrol : WeatherAppDC.java


getMobileBackend() : Reads the preferences declared in maf-application.xml and prepares an MBE object to communicate with MCS.
MBE object comes from mafmcsutility.jar. It is a single point entry for all MCS communication.

anonymousLogin() :  Logs the mobile app user to the MCS backend, so that the app can call the API defined/exposed via MCS.
Uses MBE object and the MBE Anonymous Key defined in the maf-application.xml.

invokeGetCitiesAPI() : This is the first method invoked from the app, so this one does the "anonymousLogin" first. Then it invokes "getCities" MCS API in a thread.
The JSON response of the API contains XML data as well, so it also uses a SAX Parser to parse the XML content and populate the "citiesForCountry" List.

invokeGetWeatherAPI() : This invokes "getWeather" MCS API in a thread. The JSON response from API contains the information in XML, so it uses a SAX Parser to parse and populate the "currentWeather" object.

TaskFlow : cities-task-flow

 

First taskFlow of the app. SearchCities is an AMX page to search for cities for a country.
The filter button on the below image calls "invokeGetCitiesAPI()".



ShowWeather : is a taskFlow call. It looks like :



invokeGetWeatherAPI : Is a method call activity and it calls  "invokeGetWeatherAPI()".
showCurrentWeather : Is an AMX page to display the current weather details.



Javascript to enable device back button :

I have also added a custom JS to make use to Android device's back button. It has been added as a file to the taskflow defined in maf-feature.xml


That's it. Please feel free to comment if you have any questions.

A small video on how the app works runtime :







Comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. Hi,
    I wanted to consume a dummy rest service created in MCS admin console in MAF app . For that i am trying to create rest client and proxy from new wizard in JDEV.
    I gave the WADL url but it is giving error that 'The specified WADL URL doesn't return a WADL for either a GET or an OPTIONS.'

    Thanks in advance.

    ReplyDelete
    Replies
    1. I am not sure what you mean by "new wizard in JDev". The only way I know to consume MCS published rest api is to use "mafmcsutility.jar". You need 4 details, e.g. backend id, anonymous key etc and you can connect to the rest api you want on MCS.

      Delete
  3. Hello,
    I tried to build the app available in GitHub but had errors because all the imports of the mafmcsutility library were on error. I checked that the mafmcsutility.jar exists in the projet properties classpath.
    Is there anything that I should do before building the app that might help jdeveloper recognize the library ?

    Thanks in advance.

    ReplyDelete
    Replies
    1. Hi Yosra,

      Not sure why, but the imports and usages of classes from mafmcsutility shows error in Jdev, I have updated the sources and references to the latest MAF version. Please do a fresh check out from Github. And change the path of mafmcsutility in jws/jpr.

      - Soham

      Delete
    2. Hi,
      Thanks for your answer. I updated the path to all the libraries used in the project according to where they are on my jdev home.
      The weather app works fine. This will help me work on my own application.
      Thanks for your help again.

      Yosra

      Delete
  4. This comment has been removed by the author.

    ReplyDelete

Post a Comment

Popular posts from this blog

Rich Text Editor - Oracle JET

Oracle JET has a lot of excellent UI components, but according to Murphy's law, client always comes up with something which you don't have at your disposal. So, driven by one of my client's requirements, I created a Rich Text Editor or WYSIWYG editor for Oracle JET. This is based on Quill JS and fully customizable. Github project download: https://github.com/sohamda/JET-Web-Components/tree/master/rich-text-editor I will explain in this blog, on how to integrate it in your own Oracle JET project. 1. Create and initialize your JET application and then put the downloaded web component inside "src\js\jet-composites" folder. 2. Once copied update your viewModel first. Add a snippet for passing the default content to be displayed by the editor after load. 3. Update view to load this editor Above you can see the "toolbar-options" property, that controls which options you should display to user on the editor. Those are basically the forma

Create Micro CRUD services for Oracle Database Cloud using NodeJS

I will try to explain, how you can use NodeJS to create mirco services for the tables in your Oracle Database Cloud or on-premise Database. Complete Github project : https://github.com/sohamda/LeasifyAPIs You need to do "npm install" to download the node_modules. Step by Step guide : 1. NodeJS : either 32 or 64 bit. If you already have NodeJS installed, please check whether it is 64 or 32. Use below command to figure that out : C:\>node > require('os').arch() If you get : 'ia32' , then it is 32 bit installation. 2. Install oracle-db node module .  This was a lengthy and time consuming installation for me, because for Windows, it has a lot of pre-requisites. If you are a Mac user, you are lucky. :) I followed : https://community.oracle.com/docs/DOC-931127 There is also a detailed one in github : https://github.com/oracle/node-oracledb/blob/master/INSTALL.md 3. Config your DB Cloud Create a user and couple of tables on which we'

Layout Management & CSS Classes with Oracle JET

Oracle JET provides automatic responsive layout using CSS classes. So that, from large screens to small screens the application fits itself the best possible way. JET’s layout management are based on 2 types of CSS classes “Responsive Grid” and “Flex”. Responsive grid classes which deals with size, number of columns and functions of a particular <div>. Naming convention of these classes are oj- size - function - columns sizes can be: sm, md, lg, xl functions can be: hide, only-hide columns can be: any number between 1 to 12.   Just like Bootstrap, JET also divides the width of the available space into 12 columns, so for example, if you want a section of your page should take up atleast 5 columns if you divide the available screen into 12 columns, you need use : oj- size -5. Now comes the size part, you need to define that for each size of the screen, from hand-held mobile devices to large or extra large desktop screens. With combination with theses grid c