Adobe Flash: From The Web Into A Nokia's Qt

By Author: Developer Machines
Total Articles: 2
Comment this article

In this section, we explain the benefits of using Qtitan components for the Qt framework and provide valuable usage tips. A component package called Qtitan Multimedia enables Qt developers to tightly integrate various multimedia components, such as Adobe Flash, Microsoft Silverlight movies or Adobe Reader documents, into their Qt applications.

Last time, we integrated a Silverlight banner into a Qt application. Not only did we make the banner show up in a desktop application, but also integrated it on a fairly low level:

we managed to call a function defined in the banner and pass our name to it.
as well as to make the interactive banner call a function defined in the program to process voting results.

More details can be found in our previous post here: Integrating Silverlight into Qt applications. Today, we'll talk about setting up a "working relationship" with Flash movies.
Adobe Flash
We hope there is no need to explain what Flash is. Some associate it with ubiquitous annoying banners, some with browser games, some with Flash videos on various "tube" sites. One fact is obvious - Flash ...
... is everywhere, it has conquered the Internet.
Macromedia happened to be in the right place on the right time with their new technology called Flash and this "flash" instantly filled the entire Internet, appearing on virtually every site.
Simplicity of animation, compact size, powerful development tools - all of these factors made the popularity of this technology go up. A number of alternative Flash editors (working with SWF files) appeared on the market, many featuring ready sets of special effects, which made complex explosions and object morphing a piece of cake.
For more complex logic - for instance, game logic - developers can use a built-in programming language called ActionScript.
Adobe was also in the right place on the right time and added its name to the name "Flash", so the technology was renamed into Adobe Flash. It was under Adobe's brand that the company released Adobe Flex, a new technology for creating Rich Internet Applications (RIA). This technology allows developers to adapt any desktop application for online use. A number of applications are already available only online, such as the Google Docs text editor. This makes it unnecessary for users to install several versions of many applications on their computers.
It's still hard to tell what benefits this migration of offline apps to the web may bring us. One thing is clear, though - desktop apps are alive and will be around for a good while. So while the industry giants are busy making regular apps go online, we'll do the exact opposite - we'll apply the most advanced Internet technologies in our small and modest desktop Qt application.
Creating an example
Here what we'll need for a sample integration of a Flash movie into a Qt application:

We'll need an Adobe Flash editor to create our movie. Let's use Adobe Flash Builder - its trial version can be downloaded here: http://www.adobe.com/products/flashbuilder
To create a Qt application, we'll need Visual Studio C++ 2008 SP1 and a Qt framework version 4.6.x and above built in it.
Finally, we will need Qtitan Multimedia components that can be obtained here: http://www.devmachines.com/downloads/free-demo-version.html

What are we going to do today? We'll create a user interface entirely built in Flash that will interact with a Qt application. The second part of our example will deal with a reverse task - sending data from a Qt application to a Flash movie.
Creating a Flash movie
Adobe Flash Builder provides everything necessary for creating Flash applications using the Flex technology. Flex is a large set of classes (Flex SDK) containing many components that were not originally included in Flash. The cool thing about Flex is its declarative MXML interface description language that is structurally very similar to XML. If we compare it with Microsoft Silverlight, we'll see that MXML and Silverlight have an almost identical purpose. We work with XAML last time and now we'll spend some time with MXML.
So, Adobe Flash Builder has been downloaded and installed, it's high time we started. Let's create a new project in Adobe Flash Builder using the File -> New -> Flex Project command. We'll enter the name of the project - FlashForm - in the new window. This concludes the project configuration stage, so you can press the Finish button.

As the result, we have a project ready to be worked on. On the left hand side, in the Package Explorer window, is the project tree. Below the project tree is the Components window with a selection of available interface elements. The center of the window is a work area where our Rich Internet Application will be created.

Creating an interface is very easy - just drag the elements from the Components tab to the work area and align them on the layout.
Let's create something like that:

Here we applied the Zen style to our application.
Form components have the following names (IDs):

Switches (RadioButton): "mr" and "ms"
Input fields (TextInput): "txtFirstName", "txtLastName", "txtEmail", txtLastName
Text area (TextArea): txtComments
Button (Button): "btnSubmit"

Our next step is the creation of a click handler. Let's pick a button in the designer and select the Generate Event Handler option in the On Click field on the Properties tab. We'll create the following button click handler:

protected function btnSubmit_clickHandler(event:MouseEvent):void
{
var mrMs:String;
if (mr.selected == true)
mrMs = "Mr.";
if (ms.selected == true)
mrMs = "Ms.";
var fn:String = txtFirstName.text;
var ln:String = txtLastName.text;
var em:String = txtEmail.text;
var cm:String = txtComments.text;
ExternalInterface.call("Submit", mrMs, fn, ln, em, cm);
}

Here we collect the input field values from the form and pass them to the call function of the ExternalInterface object. The first parameter of the call function will be the name of a JavaScript function called "Submit". It is followed by the function arguments. In fact, the "Submit" function will be simulated by our Qt application, but everything will look like regular work with regular JavaScript functions on the side of the Flash movie.
The ExternalInterface class is used to link the movie with a Flash player container - for instance, a web page or, in our case, the Qtitan::FlashPlayer widget.
We could actually start integrating the movie into our Qt application at this point. However, just to make sure we don't need to go back to the Flash Builder again, we'll fulfill the reverse task - that of passing data from the application to the movie.
Let's open the source code of the movie and add an extra function to the CDATA section.
private function init():void
{
ExternalInterface.addCallback("Submit", submit);
}
We'll add an external container callback function that will enable us to call this function from our Qt application.
Let's create this callback function.
private function submit(arg1:String, arg2:String, arg3:String, arg4:String, arg5:String):void
{
if (arg1 == "Mr.")
mr.selected = true;
else
ms.selected = true;
txtFirstName.text = arg2;
txtLastName.text = arg3;
txtEmail.text = arg4;
txtComments.text = arg5;
}

This function accepts 5 arguments and uses them to fill out the fields in the Flash movie. In order for this callback to be set each time the movie is loaded, we need to define it in the xmlns:mx section.
xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init();"

Therefore, when the movie is loaded, the Flash Player will call the init() function, which will set the necessary callback.
For now, we are done working with the Flash move, so let's export the results and proceed to creating a Qt application and integrating the Flash movie into it. You can export the result of your work from Adobe Flash Builder using the Project -> Export Release Build command.
Creating a Qt application

Let's start our project by creating a project file:
TEMPLATE = app
DESTDIR = bin
HEADERS = mainwindow.h
SOURCES = main.cpp \
mainwindow.cpp
RESOURCES = flash.qrc
include($$(QTITANDIR)/src/shared/shared.pri)
Let's add our movie called FlashForm.swf to the resource file:
<!DOCTYPE RCC><RCC version="1.0">
<qresource>
<file>res/FlashForm.swf</file>
</qresource>
</RCC>

Run the qmake -tp vc to generate a .vcproj file for Visual Studio. Then open the project and the mainwindow.h file. Let's define the MainWindow class:
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow(QWidget *parent = 0);
static QScriptValue submitFromFlash(QScriptContext *, QScriptEngine *);
protected slots:
void submit();
void getUrl(NPluginStreamArgs& args);
protected:
Qtitan::FlashPlayer * m_flashPlayer;
QRadioButton* mr;
QRadioButton* ms;
QLineEdit* txtFirstName;
QLineEdit* txtLastName;
QLineEdit* txtEmail;
QTextEdit* txtComments;
QWidget * makeWidget();
};

We use this class to define a static function called submitFromFlash intended for fetching data from the Flash movie. We define a submit() slot, that will send data from the Qt application to the Flash movie. We'll also need a getUrl() slot for interacting with the movie.
Let's take a look at the class constructor:

MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
{
setWindowTitle("Flash Qt Exchanger");
// Create a Flash Player
m_flashPlayer = new Qtitan::FlashPlayer();
m_flashPlayer->setSource(":/res/FlashForm.swf");
connect(m_flashPlayer, SIGNAL(getUrl(NPluginStreamArgs&)),
this, SLOT(getUrl(NPluginStreamArgs&)));
m_flashPlayer->setMinimumSize(450, 300);
// Register a function
m_flashPlayer->registrScriptableFunction("Submit", SubmitFromFlash);
// Create a central object
QTabWidget * widget = new QTabWidget(this);
setCentralWidget(widget);
// Add FlashForm
widget->addTab(m_flashPlayer, "Flash App");
// Add a Qt form
widget->addTab(makeWidget(), "Qt App");
// Activate the movie
m_flashPlayer->setActive(true);
// Check the activation result
if (!m_flashPlayer->isActive())
{
// If the movie is inactive, send a notification
QMessageBox::about(this, tr("Adobe Flash Demo"),
tr("The <b>Adobe Flash</b> is not installed at your PC."));
}
}

Here we load our Flash movie in the same manner we did with Silverlight, register the Submit function to fetch data from the movie and create the user interface. The user interface is created in the form of a QTabWidget - one of the tabs will accommodate the Flash movie and the other one will have our Qt application.
The Qt application is identical to the one we created in Flash.

The interface is created by the makeWidget() function of the MainWindow class:
QWidget * MainWindow::makeWidget()
{
// Create the central widget
QWidget * widget = new QWidget(this);
QGridLayout * gLayout = new QGridLayout;
gLayout->setContentsMargins(32, 16, 32, 32);
widget->setLayout(gLayout);
// Create components
QLabel * lbl = new QLabel("<h2>Personal Information</h2>", this);
QLabel * lblFirstName = new QLabel("First Name", this);
QLabel * lblLastName = new QLabel("Last Name", this);
QLabel * lblEmail = new QLabel("Email", this);
QLabel * lblComments = new QLabel("Comments", this);
mr = new QRadioButton("Mr.", widget);
ms = new QRadioButton("Ms.", widget);
txtFirstName = new QLineEdit(widget);
txtLastName = new QLineEdit(widget);
txtEmail = new QLineEdit(widget);
txtComments = new QTextEdit(widget);
// Create a control button
QPushButton * btn = new QPushButton("Submit", widget);
connect(btn, SIGNAL(clicked()), this, SLOT(submit()));
// Put them on the GridLayout
gLayout->addWidget(lbl, 0, 0, 1, 2);
gLayout->addWidget(mr, 1, 0);
gLayout->addWidget(ms, 1, 1);
gLayout->addWidget(lblFirstName, 2, 0);
gLayout->addWidget(txtFirstName, 2, 1);
gLayout->addWidget(lblLastName, 3, 0);
gLayout->addWidget(txtLastName, 3, 1);
gLayout->addWidget(lblEmail, 4, 0);
gLayout->addWidget(txtEmail, 4, 1);
gLayout->addWidget(lblComments, 5, 0);
gLayout->addWidget(txtComments, 5, 1);
gLayout->addWidget(btn, 6, 1, Qt::AlignRight);
return widget;
}

The code of the function responsible for receiving values from the Flash movie and pasting the values into input fields is given below:
QScriptValue MainWindow::submitFromFlash(QScriptContext* context, QScriptEngine *)
{
int count = context->argumentCount();
if (count == 5)
{
QString mrMs = context->argument(0).toString();
QString firstName = context->argument(1).toString();
QString lastName = context->argument(2).toString();
QString email = context->argument(3).toString();
QString cmnts = context->argument(4).toString();

if (mrMs.contains("Mr"))
mr->setChecked(true);
else
ms->setChecked(true);
txtFirstName ->setText(firstName);
txtLastName ->setText(lastName);
txtEmail ->setText(email);
txtComments ->setText(cmnts);
}
Below is the code of the function that passes field values from the Qt app's tab to the Flash movie.
void MainWindow::submit()
{
// Get access to the movie's functions
QScriptValue flashObject = m_flashPlayer->pluginScriptValue();
// Get access to the submit function
QScriptValue func = flashObject.property("Submit");
// Fill the list of arguments
QScriptValueList args;
QString mrMs = mr->isChecked() ? "Mr." : "Ms.";
QString firstName = txtFirstName->text();
QString lastName = txtLastName->text();
QString email = txtEmail->text();
QString cmnts = txtComments->toPlainText();
args << mrMs << firstName << lastName << email << cmnts;
func.call(flashObject, args);
}
The only thing we still have to do is to write the code of the getUrl slot:
void MainWindow::getUrl(NPluginStreamArgs& args)
{
QFile * data = new QFile(":/res/FlashForm.swf");
data->open(QIODevice::ReadOnly);
args.setIODevice(data);
}
We can now pass data from the Flash App tab to the Qt App tab and vice versa.


Conclusion
So what's the bottom line? As you can see, integrating a Flash application into a Qt application is even simpler than doing this with a Silverlight movie. On the Qt app's side, there were almost no modifications - we only changed the object type from Qtitan::Silverlight to Qtitan::FlashPlayer. Therefore, you can develop interactive movies using any platform, Microsoft Silverlight or Adobe Flash - Qtitan Multimedia will work with either of them equally well.