Escaping the Sandbox Denver HTML5 2013-05-13

Escaping the SandboxEscaping the Sandbox

Michael MalakMichael Malak

technicaltidbit.comtechnicaltidbit.com

Cross-platformCross-platform

• Java (WORA)Java (WORA)• FlashFlash• SilverlightSilverlight

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 22

HTML5 for Desktop apps?HTML5 for Desktop apps?

• CanvasCanvas• WebGLWebGL• AudioAudio• VideoVideo• Local storageLocal storage• Session storageSession storage


The HTML 3.2 solutionThe HTML 3.2 solution

<input type="file" name="file1" size="40"><input type="file" name="file1" size="40">


Qt: Heavyweight Cross-PlatformQt: Heavyweight Cross-Platform


Mac

Linux

Windows

QtWebKitQtWebKit


Tiny subset of Qt (drop-down menus)

Single component: A full HTML5 QtWebKit

DemoDemo


Step by StepStep by Step1.1. Download and install Visual Studio 2010 C++Download and install Visual Studio 2010 C++

1.1. ““All-in-one”All-in-one”2.2. SP1SP1

2.2. Download and install Qt 4.8.4Download and install Qt 4.8.41.1. BuildBuild

3.3. Download and install Qt Creator 5.0Download and install Qt Creator 5.04.4. In Qt Creator 5.0:In Qt Creator 5.0:

1.1. Add Qt 4.8.4 as additional versionAdd Qt 4.8.4 as additional version2.2. Create new projectCreate new project

1.1. GUIGUI2.2. Utilizing Qt 4.8.4Utilizing Qt 4.8.43.3. Subclassing QWidgetSubclassing QWidget

3.3. Add “webkit” to project fileAdd “webkit” to project file4.4. Add boilerplate for drop-down menusAdd boilerplate for drop-down menus

1.1. mainwindow.hmainwindow.h2.2. mainwindow.cppmainwindow.cpp

5.5. Add HTML filesAdd HTML files1.1. Optional: Download your favorite Javascript frameworks & toolkits (e.g. YUI)Optional: Download your favorite Javascript frameworks & toolkits (e.g. YUI)

6.6. Set Debug directorySet Debug directory7.7. Add menu handler codeAdd menu handler code

1.1. mainwindow.hmainwindow.h2.2. mainwindow.cppmainwindow.cpp


1.1: Visual Studio 2010 C++1.1: Visual Studio 2010 C++


“All-in-One ISO”

1.1: Select Visual C++ 2010 Express1.1: Select Visual C++ 2010 Express


1.2: Install Visual Studio 2010 SP11.2: Install Visual Studio 2010 SP1

• Google “download vs2010 sp1 iso”Google “download vs2010 sp1 iso”• InstallInstall• Run Windows UpdatesRun Windows Updates


2.: Download Qt 4.8.42.: Download Qt 4.8.4

• Qt libraries 4.8.4 for Windows (VS 2010)Qt libraries 4.8.4 for Windows (VS 2010)


2.1: Build Qt 4.8.42.1: Build Qt 4.8.4

1.1. Start -> All Programs ->Start -> All Programs ->Microsoft Visual Studio 2010 Express -> Microsoft Visual Studio 2010 Express -> Visual Studio Command Prompt (2010)Visual Studio Command Prompt (2010)

2.2. cd \qt\4.8.4cd \qt\4.8.43.3. configureconfigure4.4. nmake (takes 3 hours)nmake (takes 3 hours)


3.: Install Qt Creator 5.03.: Install Qt Creator 5.0

• Qt 5.0.2 for Windows 32-bit (VS 2010)Qt 5.0.2 for Windows 32-bit (VS 2010)


4.1: Add Qt 4.8.4 as additional 4.1: Add Qt 4.8.4 as additional versionversion

• From the Qt Creator 5.0 drop-down menu:From the Qt Creator 5.0 drop-down menu:Tools->Options->Build & Run->Qt Versions->AddTools->Options->Build & Run->Qt Versions->Add

• C:\Qt\4.8.4\qmake\qmake.exeC:\Qt\4.8.4\qmake\qmake.exe


4.2.1: Create new GUI project4.2.1: Create new GUI project

• From the Qt Creator 5.0 drop-down menu:From the Qt Creator 5.0 drop-down menu:File->New File or Project->Applications->Qt Gui ApplicationFile->New File or Project->Applications->Qt Gui Application


4.2.2: Utilizing Qt 4.8.44.2.2: Utilizing Qt 4.8.4


Uncheck Qt 5.0.2Uncheck Qt 5.0.2

4.2.3: Subclass QWidget4.2.3: Subclass QWidget

• Base class: QwidgetBase class: Qwidget• Class name: MainWindowClass name: MainWindow


4.3: Add “webkit” to project file4.3: Add “webkit” to project file


4.4.1: Add drop-down menus: 4.4.1: Add drop-down menus: mainwindow.hmainwindow.h

#ifndef MAINWINDOW_H#ifndef MAINWINDOW_H

#define MAINWINDOW_H#define MAINWINDOW_H

#include <QWidget>#include <QWidget>

#include <QVBoxLayout>#include <QVBoxLayout>

#include <QMenuBar>#include <QMenuBar>

#include <QtWebKit/QWebView>#include <QtWebKit/QWebView>

class MainWindow : public QWidgetclass MainWindow : public QWidget

{{

Q_OBJECTQ_OBJECT

public:public:

MainWindow(QWidget *parent = 0);MainWindow(QWidget *parent = 0);

~MainWindow();~MainWindow();

private:private:

QVBoxLayout m_layout;QVBoxLayout m_layout;

QMenuBar m_menuBar;QMenuBar m_menuBar;

QWebView m_webView;QWebView m_webView;

};};

#endif // MAINWINDOW_H#endif // MAINWINDOW_H


4.4.2: Add drop-down menus: 4.4.2: Add drop-down menus: mainwindow.cppmainwindow.cpp

#include <QtWebKit/QWebFrame>#include <QtWebKit/QWebFrame>

#include "mainwindow.h"#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)MainWindow::MainWindow(QWidget *parent)

: QWidget(parent): QWidget(parent)

{{

m_layout.setMenuBar(&m_menuBar);m_layout.setMenuBar(&m_menuBar);

m_layout.addWidget(&m_webView);m_layout.addWidget(&m_webView);

setLayout(&m_layout);setLayout(&m_layout);

QMenu* menuFile = m_menuBar.addMenu("&File");QMenu* menuFile = m_menuBar.addMenu("&File");

m_webView.load(QUrl("test.html"));m_webView.load(QUrl("test.html"));

}}

MainWindow::~MainWindow()MainWindow::~MainWindow()

{{

}}


4.5: Add HTML files4.5: Add HTML files

• Right-click project tree root -> Add New -> Right-click project tree root -> Add New -> General -> Text File General -> Text File


4.5: Add HTML files4.5: Add HTML files


<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <script src="yui/build/yui/yui-min.js"></script> <script src="test.js"></script></head><body>Denver HTML5 Meetup Qt Demo<div id="example" style="width:600px;height:400px" class="yui3-skin-sam"></div></body></html>

function loaddata(msg) { YUI().use('charts', function (Y) { var chart = new Y.Chart({ dataProvider: eval(msg), render: "#example" }); });}

test.html

test.js

4.5.1: Download Toolkits4.5.1: Download Toolkits


4.6: Set Debug Directory4.6: Set Debug Directory


4.7.1: Menu handler 4.7.1: Menu handler (mainwindow.h)(mainwindow.h)

#ifndef MAINWINDOW_H#ifndef MAINWINDOW_H

#define MAINWINDOW_H#define MAINWINDOW_H

#include <QWidget>#include <QWidget>

#include <QVBoxLayout>#include <QVBoxLayout>

#include <QMenuBar>#include <QMenuBar>

#include <QtWebKit/QWebView>#include <QtWebKit/QWebView>

class MainWindow : public QWidgetclass MainWindow : public QWidget

{{

Q_OBJECTQ_OBJECT

public:public:

MainWindow(QWidget *parent = 0);MainWindow(QWidget *parent = 0);

~MainWindow();~MainWindow();

private:private:

QVBoxLayout m_layout;QVBoxLayout m_layout;

QMenuBar m_menuBar;QMenuBar m_menuBar;

QWebView m_webView;QWebView m_webView;

private slots:private slots:

void openfile();void openfile();

};};


4.7.2 Menu handler 4.7.2 Menu handler (mainwindow.cpp)(mainwindow.cpp)

#include <QFile>#include <QFile>

#include <QFileDialog>#include <QFileDialog>

#include <QTextStream>#include <QTextStream>

#include <QtWebKit/QWebFrame>#include <QtWebKit/QWebFrame>

#include "mainwindow.h"#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent) : QWidget(parent) {MainWindow::MainWindow(QWidget *parent) : QWidget(parent) {

m_layout.setMenuBar(&m_menuBar);m_layout.setMenuBar(&m_menuBar);

m_layout.addWidget(&m_webView);m_layout.addWidget(&m_webView);

setLayout(&m_layout);setLayout(&m_layout);

QMenu* menuFile = m_menuBar.addMenu("&File");QMenu* menuFile = m_menuBar.addMenu("&File");

connect(menuFile->addAction("&Open"), SIGNAL(triggered()), this, SLOT(openfile()));connect(menuFile->addAction("&Open"), SIGNAL(triggered()), this, SLOT(openfile()));

m_webView.load(QUrl("test.html"));m_webView.load(QUrl("test.html"));

}}

MainWindow::~MainWindow() {}MainWindow::~MainWindow() {}

void MainWindow::openfile() {void MainWindow::openfile() {

QFile file(QFileDialog(this).getOpenFileName());QFile file(QFileDialog(this).getOpenFileName());

if (file.open(QIODevice::ReadOnly | QIODevice::Text))if (file.open(QIODevice::ReadOnly | QIODevice::Text))

m_webView.page()->mainFrame()->evaluateJavaScript("loaddata('" +m_webView.page()->mainFrame()->evaluateJavaScript("loaddata('" +

QTextStream(&file).readAll().replace("\n"," ") + "');");QTextStream(&file).readAll().replace("\n"," ") + "');");

}}



technicaltidbit.comtechnicaltidbit.com

Technology

Escaping the Sandbox Denver HTML5 2013-05-13