escaping the sandbox denver html5 2013-05-13
TRANSCRIPT
![Page 1: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/1.jpg)
Escaping the SandboxEscaping the Sandbox
Michael MalakMichael Malak
technicaltidbit.comtechnicaltidbit.com
![Page 2: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/2.jpg)
Cross-platformCross-platform
• Java (WORA)Java (WORA)• FlashFlash• SilverlightSilverlight
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 22
![Page 3: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/3.jpg)
HTML5 for Desktop apps?HTML5 for Desktop apps?
• CanvasCanvas• WebGLWebGL• AudioAudio• VideoVideo• Local storageLocal storage• Session storageSession storage
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 33
![Page 4: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/4.jpg)
The HTML 3.2 solutionThe HTML 3.2 solution
<input type="file" name="file1" size="40"><input type="file" name="file1" size="40">
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 44
![Page 5: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/5.jpg)
Qt: Heavyweight Cross-PlatformQt: Heavyweight Cross-Platform
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 55
Mac
Linux
Windows
![Page 6: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/6.jpg)
QtWebKitQtWebKit
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 66
Tiny subset of Qt (drop-down menus)
Single component: A full HTML5 QtWebKit
![Page 7: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/7.jpg)
DemoDemo
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 77
![Page 8: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/8.jpg)
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
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 88
![Page 9: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/9.jpg)
1.1: Visual Studio 2010 C++1.1: Visual Studio 2010 C++
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 99
“All-in-One ISO”
![Page 10: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/10.jpg)
1.1: Select Visual C++ 2010 Express1.1: Select Visual C++ 2010 Express
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1010
![Page 11: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/11.jpg)
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
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1111
![Page 12: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/12.jpg)
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)
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1212
![Page 13: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/13.jpg)
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)
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1313
![Page 14: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/14.jpg)
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)
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1414
![Page 15: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/15.jpg)
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
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1515
![Page 16: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/16.jpg)
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
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1616
![Page 17: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/17.jpg)
4.2.2: Utilizing Qt 4.8.44.2.2: Utilizing Qt 4.8.4
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1717
Uncheck Qt 5.0.2Uncheck Qt 5.0.2
![Page 18: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/18.jpg)
4.2.3: Subclass QWidget4.2.3: Subclass QWidget
• Base class: QwidgetBase class: Qwidget• Class name: MainWindowClass name: MainWindow
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1818
![Page 19: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/19.jpg)
4.3: Add “webkit” to project file4.3: Add “webkit” to project file
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1919
![Page 20: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/20.jpg)
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
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2020
![Page 21: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/21.jpg)
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()
{{
}}
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2121
![Page 22: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/22.jpg)
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
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2222
![Page 23: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/23.jpg)
4.5: Add HTML files4.5: Add HTML files
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2323
<!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
![Page 24: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/24.jpg)
4.5.1: Download Toolkits4.5.1: Download Toolkits
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2424
![Page 25: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/25.jpg)
4.6: Set Debug Directory4.6: Set Debug Directory
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2525
![Page 26: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/26.jpg)
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();
};};
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2626
![Page 27: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/27.jpg)
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"," ") + "');");
}}
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2727
![Page 28: Escaping the Sandbox Denver HTML5 2013-05-13](https://reader036.vdocument.in/reader036/viewer/2022070316/5560b65fd8b42af93b8b4af5/html5/thumbnails/28.jpg)
Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2828
technicaltidbit.comtechnicaltidbit.com