MOVI API - Mash-up Oryx Models

The MOVI API is a JavaScript library for viewing Oryx models in a read-only mode. Thus it is a lightweight alternative to the full Oryx Editor for easy embedding of models in web pages when editing functionality is not required.

The MOVI API facilitates enrichment of process diagrams for mash-ups, e.g., displaying model documentation, or visualization of process execution states.

Features

• Viewing of models from remote Oryx installations (in all browsers)
• Easy navigation in large-sized process diagrams
• Access to shape and stencil properties
• Shape marking and annotations
• Shape selection and registration of callbacks for mouse events on single shapes

The development of the MOVI API is ongoing work. Look forward to heaps of new features in the near future!

Examples

Check out the MOVI live demo page demonstrating all basic features. Or have a look at applications others have build.

Getting Started

Just check out the Oryx trunk and find the MOVI API at poem-jvm/src/javascript/movi. You will also find the documentation and some examples in the movi directory.

MOVI depends on YUI 2.7.0 (other versions might work as well, but are not tested). We recommend to include the YUI scripts directly from Yahoo! servers as this is probably the most performant option - however, you may also download YUI and deploy it on your own server. MOVI requires at least the following YUI modules: "yahoo", "dom", "element", "get", "event", "logger", "slider", "container"

Compressed API

In most cases you would like to import the full compressed API in the embedding HTML page. Run the 'build' ANT task to build the compressed API:

cd poem-jvm/src/javascript/movi/
ant build

A new directory named 'build' will be created in the MOVI base directory. Next, you'll have to import the resources in the embedding page:

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/utilities/utilities.js&2.7.0/build/container/container-min.js&2.7.0/build/logger/logger-min.js&2.7.0/build/slider/slider-min.js" />
<script type="text/javascript" src="movi/build/movi-min.js" />

That's it.

Dynamic Loading

This section describes how you could load the MOVI resources dynamically. Thus you only import small scripts in the head section of the embedding document. All other resources are loaded when calling the MOVI.init() function. For most users this is not recommended due to performance loss. Instead, follow the steps described in the section above. However, there are cases in which dynamic loading could save page loading time if MOVI is not required at the time the page is loaded or only if special conditions are met.

Include the JavaScript sources of MOVI and the YUI Loader in the embedding page: (You won't need to build MOVI.)

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yuiloader/yuiloader.js" />
<script type="text/javascript" src="movi/src/movi.js" />

Initialize YUI and MOVI (loads all required resources):

<script type="text/javascript">
    MOVI.init(
        moviReadyCallback,
        "../api", // path to MOVI scripts directory
        yuiReadyCallback,
        ["resize"] // additional YUI modules to load
    );
</script>

In the specified moviReadyCallback function you can start to use MOVI. With the last (optional) parameter you can specify any additional YUI modules your page depends on.

If you want to deploy YUI on your own server you will have to change the _YUI_BASE_DIR in the movi.js file (line 100).