How to display video in Oracle MAF


We host a lot of video content on Wistia that is used on our blogs and in the training courses we provide at 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.


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:

Code given below should render this video :

<amx:panelGroupLayout layout="vertical" halign="center" inlineStyle="width: 100%" id="pgl1">
                <amx:outputText value="Feature 1 - View 1"
                                inlineStyle="color:#999; white-space:normal; font-weight:bold; font-size:20px"
                <amx:commandButton text="commandButton1" id="cb3" action="gof1v2"/>
                <amx:outputHtml id="oh1"
                      value="&lt;iframe src=&quot;; width=&quot;340px&quot; height=&quot;240px;&quot;>&lt;/iframe>"

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:

<iframe frameborder='0' allowfullscreen width='100%' height='"+height+"' src='"+source+"'/>

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 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.


Let’s look at the actual code :

    var favideo ="", "favideo");
    favideo.prototype.render = function(amxNode, id)
      var rootElement = document.createElement("div");
      var source = amxNode.getAttribute("source");
      var height = amxNode.getAttribute("height");
      rootElement.innerHTML = "<iframe frameborder='0' allowfullscreen width='100%' height='"+height+"' src='"+source+"'/>";
      return rootElement;
      alert("Error Displaying Video");

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.

<static> register(theNamespace, tagName, precreatedClass) → {function}
    Register a TypeHandler class with a tag namespace and name.
    Name 	Type 	Argument 	Description
    theNamespace 	string 		the xmlns for the tag
    tagName 	string 		the name of the tag (no namespace)
    precreatedClass 	<optional>
    	optional pre-created class to register

    the registered subclass so that prototype functions can be added


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:

<amx:view xmlns:xsi="" xmlns:amx=""

And then add the component like:

&lt;amx:panelGroupLayout layout="vertical" halign="center" inlineStyle="width: 100%" id="pgl1"&gt;
                &lt;amx:outputText value="Feature 1 - View 1"
                                inlineStyle="color:#999; white-space:normal; font-weight:bold; font-size:20px"
                &lt;amx:commandButton text="commandButton1" id="cb3" action="gof1v2"/&gt;
                &lt;amx:outputHtml id="oh1"
                      value="&amp;lt;iframe src=&amp;quot;;quot; width=&amp;quot;340px&amp;quot; height=&amp;quot;240px;&amp;quot;&gt;&amp;lt;/iframe&gt;"
                &lt;amx:commandButton text="commandButton2" id="cb4"/&gt;
                &lt;fao:favideo id="em1" height="250px" source="#{applicationScope.faglobalbean.PIS}"/&gt;

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

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


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