How to display video in Oracle MAF

INTRODUCTION

We host a lot of video content on Wistia that is used on our blogs and in the training courses we provide at https://training.fusionapplied.com. Sometime back, we decided to create a simple mobile application to supplement our training site that allows our users to access their courses on the go. The main feature of this app is to display our training videos. The mobile application is built using MAF and here I will document the process of building a custom MAF component that displays our externally hosted videos.

STEPS

The way you display an externally hosted video on an amx page is by using good old html iframe. In MAF, you would use an tag to display an iframe. If you wanted to display a youtube video found at url:
https://youtu.be/bWiH45VOM3o

Code given below should render this video :

Note that you have the escape the usual html characters when you use this tag. So, for example, a quote (“) should be substituted with "
Now, what would be the point of this exercise if we can’t customize various attributes of this code? Let’s say you want to display different video url based on some logic or change the video width or height.
This is where a custom UI component fits perfectly! Custom UI components are basically created using plain javascript. You code an html ui in javascript and describe its behaviour by using the MAF javascript api. Good javascript skills are required if you have a moderately complex UI widget to design. Take a look at the MAF Public Samples CompGallery application to get a feel for what you can do with custom components.
Let’s create a simple MAF UI component to demonstrate. We will create a simple iframe component that takes in two parameters that control the video display. The component will accept a height parameter to control video display height on a maf screen. This can now be changed based on device orientation and device type. The second parameter will a source parameter that accepts the video streaming service url. This will allow us the change the video to display based on some actions on the screen. This is the iframe code that we are looking for:

Create a new javascript file under the WEB-INF folder of the ViewController project. Creating a custom component in this file consists of two basic steps:
Register your unique namespace for your component tag library. This is done using the adf.mf.api.amx.TypeHandler MAF api to register our component in MAF. The api docs link is listed under the reference section below.
Implement a rendering member function for this TypeHandler. The render function describes the component to draw on the screen using html widgets. You add any additional supporting functions to implement the widget behaviour. This widget behaviour will use the MAF javascript API.
You can have multiple components, each having a TypeHandler and render function in the same javascript file.
Now, include this javascript file in any feature that will use the custom component. This is done in the maf-feature.xml under the Contents tab for each feature.

 
registerJSForFeature.PNG
 

Let’s look at the actual code :

The first part of our component code is the registration with the MAF api. The TypeHandler.register does exactly that. It accepts your custom tag namespace and tagName as parameters.

The render function is where all the magic happens. In the function above, we are creating an html div to host our iframe. We change the contents of the div by adding the iframe. This component will accept two parameters from our amx page. These parameters are available via amxNode. We lookup our source and height parameters from the page amxNode and use them in the iframe url construction.
This completes our component code. Now all we have to do is use this on our amx page. You add the namespace to the amx-view component at the top of the page like:

And then add the component like:

That’s it! When you run this application, you should see our video in all it’s youtubi-ness:
 
Screenshot_20170629-155716.png
 

The complete application can be downloaded here:[Download not found]

REFERENCES

Creating Custom UI Components in Oracle MAF.
JSDoc Reference for Oracle Mobile Application Framework

vivek

vivek

Oracle Fusion Middleware Architect at FUSION Applied
Vivek is an Oracle Certified Fusion Middleware architect. He has over 18 years of experience implementing custom software solutions in the Financial, Health, and Government sectors. He is one of the founders of Fusion Applied.
vivek

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz