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 :

https://github.com/sohamda/WeatherApp/

 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 :







Labels:

Comments

  1. AnonymousOctober 15, 2015 at 7:47 PM

    Excellente!

    ReplyDelete
  2. UnknownOctober 20, 2015 at 2:15 PM

    This comment has been removed by the author.

    ReplyDelete
  3. UnknownOctober 20, 2015 at 2:17 PM

    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. Soham DasguptaOctober 21, 2015 at 5:28 PM

      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
  4. AnonymousFebruary 28, 2016 at 9:02 PM

    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. Soham DasguptaFebruary 29, 2016 at 12:41 PM

      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. AnonymousFebruary 29, 2016 at 5:58 PM

      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
  5. Soham DasguptaFebruary 29, 2016 at 11:17 AM

    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...
3 comments
Read more

Exception Handling in ADF

This blog will give you an overview on how you can successfully deal with unhandled Runtime exceptions in an ADF application. This will give you an idea of: How to catch the unhandled exceptions. Write a separate log file with stacktrace and thread dumps. Redirect the user to an static error page #1. Catch unhandled exceptions :  Create a class "MyExceptionHandler" which extends : oracle.adf.view.rich.context.ExceptionHandler. Override handleException() method.     public void handleException(FacesContext facesContext, Throwable throwable, PhaseId phaseId) throws Throwable {         // this method is going to create a separate file with stacktrace and thread dumps         writeException(throwable);         // redirect to error page         redirectToErrorPage(facesContext);     }  Create a fo...
7 comments
Read more

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 gr...
2 comments
Read more