Ozone Widget Framework Tutorial for OpenShift

Last month, we were excited to release our OpenShift cartridge that provides the Ozone Widget Framework (OWF) on both Openshift.com and Openshift Enterprise. OWF is an OpenSource, customizable web application framework that allows developers to create and easily access tools and widgets within an internet location. Over the past year our Government team has been hosting Openshift / Cloud Enablement workshops and they were hearing cries from our DoD counterparts on a number of DoD specific frameworks that should be integrated into OpenShift. Overwhelmingly we heard that integration of the Ozone Widget Framework on OpenShift would be well received. Further proof of this is the recent decision by the DISA Mission Assurance Office to adopt OWF as their default presentation layer.

Now, we are proud to present a complete walkthrough tutorial, leveraging both our cartridges for general consumption on OpenShift.com!

There are two cartridges available:

 

  1. OWF cartridge: installable on an OpenShift platform with the ability to deploy OWF as an “Instant App”, and with no additional libraries/frameworks/data outside of core OWF
  2. OWF Widget cartridge: demonstrating the ability to instantiate an iFrame widget within an OWF instance based on the OWF Cartridge; with widget content served from a separate application container instance hosted within OpenShift Enterprise and Openshift.com.

 

You can find the Open Source cartridges and documentation in our public Git Hub Repository:  https://github.com/Shadow-Soft

To follow the tutorial directly, see the Walkthrough document in the https://github.com/Shadow-Soft/owf-cartridge respository!

 

All of the Open Source goodness is licensed under the Apache Public License (V2), just like the Ozone Widget Framework.  We encourage pull requests to enhance the cartridges and documentation.  We believe that the power of the Open Source community is key.

 

If you don’t have an OpenShift Online account already, please create one and install our cartridge, try it out, and give us feedback.  Just follow the steps on the walkthrough, either below or directly on the owf-cartridge repository. For questions or help with Openshift and the OWF cartridges please contact us.

 

Complete Walkthrough

 

Step 1: Deploy the Ozone Widget Framework

OWF can be deployed to your private on-premise OpenShift, or to OpenShift Online provided by RedHat. This guide will use OpenShift Online.

* the cartridge can also be packaged as an RPM and deployed to an on-premise OpenShift Enterprise instance using standard Yum commands. See the README for details.

OpenShift Online

Using the OpenShift Online management console

* Note the use of a single cloud based configuration management repository from which the cartridge is being deployed. The ability to deploy directly from a source-code configuration management repository to multiple PaaS environments is a benefit to the Software Development Lifecycle (dev, integrate, test)

* OWF can take a few minutes to start up, especially if running in a “small” gear. Make a note of the URL and move on to the next step to give the framework enough time to spin up.

Step 2: Deploy the First Widget

The procedure for deploying a Widget is similar to deploying the Framework itself, only this time we point to a different SCM URL to get the Widget instead of the Framework.

OpenShift Online

Using the OpenShift Online management console

* Once the Widget is created, there will be a “Widget Descriptor URL” like “https://widget1-shadowsoft.rhcloud.com/widget.html”. Copy this URL into your paste buffer (ctrl-c)

Step 3: Configure the OWF desktop (optional)

* This step is optional, but recommended. OWF comes out of the box with a tabbed layout, which can be a little difficult to use. Re-configuring it to use the “Desktop” layout makes things a little easier.

  • Using a browser, log into the OWF desktop (the application deployed in Step 1)
    • username is jimi, password is password
  • Click the “Switcher” button
switcher
  • Click “Manage”
manage
  • Click “Edit” on the current desktop
edit
  • Click “OK”
  • Select the “Desktop” layout icon and drag it to workspace on the left
desktop
  • Once set, click “Save”

Step 4: Register the first widget

* “Registering” the Widget just gives the Framework a little information about it (URL, icons, name, etc…). The “Widget Descriptor” (URL should be in your paste buffer from Step 2) is an HTML file that contains the Widget’s information so the admin doesn’t need to input it. Creating this file is something the Widget Cartridge does for you.

  • While logged into the OWF desktop, click “Administration”
admin
  • Click “Widgets” in the Admin tools
admin
  • Click “Create” in the Widgets window
  • Paste the Descriptor URL from Step 2 into the “Import Widget from Descriptor URL” box
  • Click “Load” then “Apply”

* After clicking “Apply” the “Users” and “Groups” button become available

  • Click the “Groups” button, then “Add” and give both groups access to the widget (Administrators and Users)

* The widget is now registered, close all the administration windows that are open.

Step 4.1: Launch the first widget

  • Click the “Launcher” button
launcher

* in the launcher you will see your new Widget, Hooray!! Double click the widget icon and you’ll see a slightly modified version of the standard OpenShift Tomcat Cartridge template application.

* The difference in the Widget Cartridge template is that is has the OWF JavaScript API bundled. In the application there are two sections that exercise the JavaScript API. However, the big deal about Ozone is the ability for Widgets to communicate with each other using a process called “Inter-Widget Communication”. This gives the widgets the ability to control other widgets, pass data to other widgets, and receive instructions and data from other Widgets.

* If you’ve seen the standard OpenShift Tomcat cartridge demonstration, this may be a good time to re-visit some of those core principles of OpenShift. You may want to clone the repository for the Widget, make a small change, and push the changes. Then reload the frame in OWF containing your widget and show the live result of the change.

* But, we only have one Widget. So we’ll remedy that by spinning up another Widget.

Step 5: Deploy the Second Widget

  • Repeat Step 2 using a different name for this Widget
  • Repeat Step 4 to register the Second Widget

Step 6: Exercise Ozone “Intents”

* Ozone “Intents” are a form of “Inter-Widget Communication” supported by the Ozone Framework. When registered (see Step 4), Widgets can assert that they send and receive “Intents”. Intents are basically a data payload delivered over a named channel. When a Widget broadcasts a payload using the Intent API, the framework will discover all other Widgets that can receive the payload and ask the user which Widget should be used to satisfy the Intent.

* A full tutorial on the Ozone API is outside the scope of this walkthrough. But you can find plenty of resources on the internet to make full use of the API to provide a rich application experience.

* The Ozone Widget Cartridge provides a simple “Hello World” example to get developers started

  • The First Widget should still be up (if it isn’t, repeat Step 4.1)
  • In the First Widget, scroll the “Intents” demo section and click “Send Hello Intent”
intent1
  • The framework will present you with options to choose the Widget that should be used to handle the intent and data payload. You may choose a Widget that is already running, or to launch a new Widget to handle the data. In this case, choose to launch a new instance of your Second Widget.
intent2
  • Once the Second Widget is launched, it will receive and handle the data payload delivered with the Intent.
intent3

Step 7: Exercise Ozone “Inter-Widget Communication”

* Inter-Widget Communication is a more traditional publish/subscribe mechanism. Widgets can “Shout” and “Listen” to named “Channels”. Any time a message or payload is “shouted” on a channel, and Widget that is “listening” will receive the message.

* Similar to the Intents exercise in Step 6, Inter-Widget Communication is demonstrated between the First and Second Widgets using the “Publish Hello Message” button

iwc1

Here’s the complete picture:

 

Interwidget communication demo

Interwidget communication demo

Some closing thoughts.

* If we step back and look at what we’ve done through the course of this walkthrough, it’s actually pretty amazing. Using the OpenShift PaaS, we deployed the Ozone Widget Framework, two working Widgets, and are able to start developing capability within a matter of minutes.

  • There are a few significant things here.
    • the speed at which we are able to reach a point where we are productively building a Widget
    • that we were able to extend the OpenShift PaaS itself by adding a cartridge that has a more domain specific framework (Ozone for the DoD).

Filled under: Uncategorized