Working with modal windows in App Cloud

app cloud dev
 
Adam Mark's picture
Adam Mark on July 3, 2012

Sometimes it's necessary or even desirable to present content in a modal web window above the main content in your app. There are two ways to do it:

First, you can use our old friend, the <a> tag, to pop open a web page:

<p>Look mom! I can make a <a href="http://example.com/mom.html">
modal web window!</a></p>

This technique even works with video files and PDF documents:

<p>Watch <a href="http://example.com/video.mp4">this video!</a></p>

Second, you can use the device method bc.device.openURI() to accomplish the same thing in a programmatic way. Say you're showing a list of documents:

<ul>
    <li data-doc-id="123">Lions.pdf</li>
    <li data-doc-id="456">Tigers.pdf</li>
    <li data-doc-id="789">Bears.pdf</li>
</ul>

Instead of embedding links in your markup, you can listen for "tap" events and decide how to handle them:

$("li").on("tap", function (evt) {
    var docId = this.getAttribute("data-doc-id");
    var url = "http://www.example.com/docs/" + docId + ".pdf";
    var successCallback = function () {};
    var errorCallback = function () {};
    var options = { modalWebBrowser: true };

    bc.device.openURI(url, successCallback, errorCallback, options);
});

Note you must specify modalWebBrowser: true in the options argument in order to open a modal window. Otherwise, the given URL will open in an external browser (e.g. Safari) or other program (e.g. Maps).

Finally, you can use either of the above techniques to open a file that you "baked" into your template ...

<p>Read the <a href="terms.html">Terms and Conditions</a>.</p>

... or a file that was previously downloaded with the File Download API and now resides on disk.

Modal windows are a handy tool to keep in your tool kit. But use them sparingly and appropriately—remember, you're building apps, not web sites.

p.s. Get more tips and tricks (and share your own) by joining the Brightcove App Cloud discussion group on Google.

Post new comment

The content of this field is kept private and will not be shown publicly.
0

Comments