Quick Tip: Invoking the Media Preview "Card" [updated 12-31-2013]

The Invocation framework is one of the hallmarks and great strengths of the BlackBerry 10 operating system, and can allow us developers to easily integrate with core and third-party applications. To make the process easier, in this tutorial I will show you how to implement an Invocation Manager that you can can call at will from inside your QML to invoke just about any card or app available.

As usual, we will be starting with a standard empty Cascades project and working from there, so in Momentics, start a new empty project and name it whatever you wish (I will be using 'InvokeMediaCard'), and I will be using an API level of 10.2. 

 

 To get things started, we will need to open up the applicationui.cpp file from the 'src' directory.  First we need to add

using namespace bb::system;

...just under using namespace bb::cascades; near the top of the cpp document.

Also, amend your code as follows  (added code in bold)

ApplicationUI::ApplicationUI(bb::cascades::Application *app) :
        QObject(app)
{
  
    m_invokeManager = new InvokeManager(this);

 

A little further down the document you will see some code that looks like the code below, and you will need to add the code that is in bold below:

QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);
qml->setContextProperty("_app", this);

At the bottom of this file, add the following code:

void ApplicationUI::invoke(const QString &target, const QString &action,
		const QString &mimetype, const QByteArray &data, const QString &uri) {
	// Create a new invocation request
	InvokeRequest request;
	request.setTarget(target);
	request.setAction(action);
	request.setMimeType(mimetype);
	request.setData(data);
	if (target == QLatin1String("com.rim.bb.app.facebook")) {
		QVariantMap payload;
		if (!uri.isEmpty()) {
			payload["object_type"] = mimetype;
			payload["object_id"] = uri;
		} else {
			// Open the BlackBerry North America page by default
			payload["object_type"] = "page";
			payload["object_id"] = "328506290597521";
		}
		request.setMetadata(payload);
	} else {
		if (uri.startsWith('/')) {
			request.setUri("file://" + uri);
		} else {
			request.setUri(uri);
		}
	}
	m_invokeManager->invoke(request);
}

Now, open the applicationui.hpp file and make it look as follows ( I have bolded the new additions):

#ifndef ApplicationUI_HPP_
#define ApplicationUI_HPP_
#include <qobject>
#include <bb/system/InvokeManager> namespace bb { namespace cascades { class Application; class LocaleHandler; }
namespace system { class InvokeManager; } } class QTranslator; class ApplicationUI: public QObject { Q_OBJECT public: ApplicationUI(bb::cascades::Application *app); virtual ~ApplicationUI() { }
public Q_SLOTS: void invoke(const QString &target, const QString &action, const QString &mimetype, const QByteArray &data, const QString &uri); private slots: void onSystemLanguageChanged(); private: QTranslator* m_pTranslator; bb::cascades::LocaleHandler* m_pLocaleHandler;
bb::system::InvokeManager* m_invokeManager; }; #endif /* ApplicationUI_HPP_ */

Once accomplished, you can close both files and open the project's .PRO file and make it look as follows (new changes in bold):

APP_NAME = InvocationManager
LIBS += -lbbsystem CONFIG += qt warn_on cascades10 include(config.pri)

On to the QML! Below is some sample QML. The media files I linked to are here on the OSBB servers (see code).

import bb.cascades 1.2
Page {
    Container {
        layout: DockLayout {
        }
        verticalAlignment: VerticalAlignment.Fill
        horizontalAlignment: HorizontalAlignment.Fill
        Container {
            horizontalAlignment: HorizontalAlignment.Fill
            verticalAlignment: VerticalAlignment.Center
            //Todo: fill me with QML
            Label {
                horizontalAlignment: HorizontalAlignment.Center
                // Localized text with the dynamic translation and locale updates support
                text: qsTr("Invoking the Media Card") + Retranslate.onLocaleOrLanguageChanged
                textStyle.base: SystemDefaults.TextStyles.BigText
               
            }
            Divider {
                
            }
            Button {
                text: "Open Video"
                horizontalAlignment: HorizontalAlignment.Center
                onClicked: {
                    _app.invoke("sys.mediaplayer.previewer", "bb.action.VIEW", "", "", "http://opensourcebb.com/uploads/bb10.mp4")
                }
               
            }
            Divider {
                
            }
            Button {
                text: "Open Audio"
                horizontalAlignment: HorizontalAlignment.Center
                onClicked: {
                    _app.invoke("sys.mediaplayer.previewer", "bb.action.VIEW", "", "", "http://opensourcebb.com/uploads/belabar_Orient6-160.mp3")
                }
            
            }
        }
    }
}

IMG 00000001 

So there we have it! Not too bad, right? Source and pre-signed .bar file are attached.

Happy Coding!

Leave your comments

Post comment as a guest

0
  • No comments found
Subscribe to the official OSBB BBM Channel!

osbbchannelQR

C00013E89

Back to top