Programming with A ++ library for developing stateful and highly interactive web applications

A RMIN S OBHANI ( ASOBHANI @ SHARCNET. CA)

SHARCNET

U NIVERSITY OF O NTARIO INSTITUTE OF TECHNOLOGY

J UNE 2 4 , 2 0 1 5 Outline • Library Overview • A typical web application developed using Wt • Installation • Hello World! • Signals and Slots • Interactive Hello World • Widget Gallery • Wt Variants

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 2 Library Overview

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 3 What is Wt (‘witty’)  C++ library and application for developing web applications

 Free and open source (http://www.webtoolkit.eu/)

 Widget-centric rather than page-centric web toolkit

 Brings desktop programming model to

 Similar in concept to and wxWindows

 Supports fallback mechanism for maximum browser compatibility

 Mature, robust, feature reach, well documented and well supported

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 4 Core Library

 Supports major browsers (Firefox/Gecko, Internet Explorer, Safari, Chrome, Konqueror, Opera and Wt Features web crawlers)  Develop and deploy on Unix//Mac or at a Glance (Visual Studio) environments . Core Library  Equal behavior with or without support for . Event Handling JavaScript or . Native Painting System  Efficient rendering and (sub-) millisecond latency . Built-in Security . Object Relational  Integrated Unicode support and pervasive Mapping Library localization . Unit Testing  Support for browser history navigation . Deployment (back/forward buttons and bookmarks)

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 5 Event Handling

 Type safe signal/slot API for responding to events

 Listens for keyboard, mouse, focus, scroll or Wt Features drag’n’drop events at a Glance  Automatically synchronizes field data from . Core Library browser to server and tracks server-side changes to be rendered in browser . Event Handling . Native Painting System  Integrate with JavaScript libraries . Built-in Security  Timed events and server-initiated updates . Object Relational ("server push") Mapping Library . Unit Testing  Uses plain HTML CGI, Ajax or . Deployment

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 6 Native Painting System

 Unified 2D painting API which uses the browsers native (vector) graphics support (inline VML, inline SVG, or HTML5 canvas), or renders to Wt Features common image formats (PNG, GIF, ...) or vector at a Glance formats (SVG, PDF) . Core Library  Unified GL-based 3D painting API which uses WebGL in the browser or server-side OpenGL . Event Handling (fallback) . Native Painting System  Rich set of 2D and 3D charting widgets . Built-in Security

. Object Relational Mapping Library

. Unit Testing

. Deployment

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 7 Built-in Security

 Kernel-level memory protection

 Supports encryption and server authentication using Secure Sockets Layer (SSL) or Transport Layer Security (TLS) through Wt Features HTTPS  Enables continuous use of HTTPS through low bandwidth at a Glance requirements (fine-grained Ajax) . Core Library  Built-in Cross-Site Scripting (XSS) prevention

. Event Handling  Not vulnerable to Cross-site Request Forgery (CSRF) . Native Painting System  Not vulnerable to breaking the application logic by skipping to a . Built-in Security particular URL

. Object Relational  Session hijacking mitigation and risk prevention Mapping Library  DoS mitigation . Unit Testing  A built-in authentication module implements best practices for . Deployment authentication, and supports third party identity providers using OAuth 2.0, and (later) OpenID Connect

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 8 Object Relational Mapping Library (Wt::Dbo)

 Maps Many-to-One and Many-to-Many relations to STL- compatible collections

 Provides schema generation (aka DDL: data definition Wt Features language) and CRUD operations (aka DML: data at a Glance manipulation language) . Core Library  Each session tracks dirty objects and provides a first- level cache . Event Handling . Native Painting System  Flexible querying which can query individual fields, objects, or tuples of any of these (using Boost.Tuple) . Built-in Security

. Object Relational  Comes with Sqlite3, Firebird, MariaDB/MySQL and Mapping Library PostgreSQL backends

. Unit Testing

. Deployment

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 9 Unit Testing

 Event handling code constructs and manipulates a widget tree, which can easily be inspected by Wt Features test code  Wt::Test::WTestEnvironment allows application to at a Glance be instantiated and events to be simulated in . Core Library absence of a browser

. Event Handling

. Native Painting System

. Built-in Security

. Object Relational Mapping Library

. Unit Testing

. Deployment

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 10 Deployment

 Built-in httpd (libwthttp) . Simple, high-performance web application server (multi- threaded, asynchronous I/O) based on the C++ asio library Wt Features . Supports the HTTP(S) and WebSocket(S) protocols . Supports response chunking and compression at a Glance . Single process (convenient for development and debugging), . Core Library and embeddable in an existing application . Available for both UNIX and Win32 platforms . Event Handling  . Native Painting System FastCGI (libfcgi) • Integrates with most common web servers (apache, lighttpd) . Built-in Security • Different session-to-process mapping strategies . Object Relational • Available only for UNIX platforms Mapping Library  . Unit Testing ISAPI • Integrates with Microsoft IIS server . Deployment • Uses the ISAPI asynchronous API for maximum performance • Available for the Win32 platform

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 11 Wt Licensing

OPEN SOURCE COMMERCIAL

GNU General Public License (GPL) The source code must be available to anyone who you give the application to install the application on its own server.

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 12 Sample Public Web Application Developed using Wt http://pele.bsc.es

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 13 Installation

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 14 System Requirements (Mandatory)  CMake cross-platform make utility ( >= 2.6 is preferred )

 boost C++ library ( >= 1.41 is preferred)

Installation  Boost.Date_Time

• System Requirements  Boost.Regex . Mandatory . Optional  Boost.Program_options . Connectors  Boost.Signals • Unix

• Windows  Boost.Random

 Boost.System

 Boost.Thread

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 15 System Requirements (Optional)

 OpenSSL For HTTPS protocol by the web (Http::Client) and web server (wthttp connector)

 Libharu Installation Rendering support for PDF documents • System Requirements . Mandatory  GraphicsMagick . Optional For outputs to raster images like PNG or GIF . Connectors

• Unix  Pango For text rendering of TrueType fonts in • Windows WPdfImage and WRasterImage

 PostgreSQL, MySQL, and Firebird For the ORM library (Wt::Dbo)

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 16 System Requirements (Connectors)  FastCGI (Unix only) • Apache 1 or 2, or any web server which supports the FastCGI protocol Installation • Apache mod_fastcgi • System Requirements . Mandatory . Optional  Built-in http deamon, wthttpd . Connectors • libz (for compression-over-HTTP) • Unix • OpenSSL (for HTTPS support) • Windows

 ISAPI (Win32 only)

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 17 Unix

 Ubuntu

$ sudo apt-get install witty witty-dev witty-doc witty-dbg witty-examples Installation  Others (Linux, MacOS) $ git clone git://github.com/kdeforche/wt.git • System Requirements $ cd wt . Mandatory $ mkdir build . Optional $ cd build . Connectors $ cmake ../ $ ccmake . • Unix $ make • Windows $ sudo make install

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 18 Windows

 Binary builds:

http://sourceforge.net/projects/witty/files/wt/ Installation • System Requirements . Mandatory . Optional . Connectors

• Unix

• Windows

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 19 Hello World!

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 20 #include #include

int main(int argc, char **argv) { QApplication app(argc, argv);

QPushButton button("Hello world!"); Qt button.show();

Hello World! return app.exec(); }

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 21 hello.cpp

#include #include

using namespace Wt;

class HelloApplication : public WApplication { public: HelloApplication(const WEnvironment& env); Wt };

• hello.cpp HelloApplication::HelloApplication(const WEnvironment& env) : WApplication(env) • Compiling / Linking { root()->addWidget(new WPushButton("Hello World!")); • Program Options } WApplication* createApplication(const WEnvironment& env) • Running { return new HelloApplication(env); }

int main(int argc, char** argv) { return WRun(argc, argv, &createApplication); }

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 22 Compiling / Linking

$ g++ hello.cpp -o hello -lwt -lwthttp

Wt • hello.cpp

• Compiling / Linking

• Program Options

• Running

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 23 Program Options

$ ./hello --help

Wt • hello.cpp

• Compiling / Linking

• Program Options

• Running

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 24 Running

$ ./hello --docroot . --http-address 0.0.0.0 --http-port 8080

Wt • hello.cpp

• Compiling / Linking

• Program Options

• Running

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 25 Interactive Hello World

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 26 Signals and Slots

SIGNAL SLOT

Message that an object can send Function used to respond to a signal

Some WPushButton signals: It can be a/an: clicked Ordinary function doubleClicked Member function checked C++11’s Lamda unChecked

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 27 Connecting Signals to Slots In order to respond to a signal, a slot must be connected to a signal:

• Simple Wt-way:

button->clicked().connect(this, &HelloApplication::greet); • Using boost::bind(): nameEdit_->enterPressed().connect (boost::bind(&HelloApplication::greet, this)); • Using C++11 Lambda: button->clicked().connect(std::bind( [=] { greeting->setText("Hello there, " + nameEdit->text()); } ));

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 28 #include #include #include #include #include

using namespace Wt;

class HelloApplication : public WApplication Wt { public: Signals/Slots HelloApplication(const WEnvironment& env); private: • hello2.cpp WLineEdit* nameEdit_; . Additional Headers WText* greeting_; void greet(); . New Members }; . Wt Connect WApplication* createApplication(const WEnvironment& env) . boost:bind() { . Compiling / Linking return new HelloApplication(env); }

• hello3.cpp int main(int argc, char** argv) . C++11 Lambda 101 { return WRun(argc, argv, &createApplication); . Additional Headers } . Lambda in Action . Compiling / Linking

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 29 Wt and boost::bind() Version

HelloApplication::HelloApplication(const WEnvironment& env) : WApplication(env) { setTitle("Hello World");

Wt root()->addWidget(new WText("Your name, please ? ")); nameEdit_ = new WLineEdit(root()); Signals/Slots nameEdit_->setFocus(); WPushButton* button = new WPushButton("Greet me.", root()); • hello2.cpp button->setMargin(5, Left); . Additional Headers root()->addWidget(new WBreak()); . New Members greeting_ = new WText(root()); . Wt Connect button->clicked().connect(this, &HelloApplication::greet); . boost:bind() nameEdit_->enterPressed().connect . Compiling / Linking (boost::bind(&HelloApplication::greet, this)); } • hello3.cpp . C++11 Lambda 101 void HelloApplication::greet() { . Additional Headers greeting_->setText("Hello there, " + nameEdit_->text()); . Lambda in Action } . Compiling / Linking

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 30 Compiling / Linking

$ g++ hello2.cpp -o hello2 -lwt –lwthttp -lboost_signals-mt Wt Signals/Slots • hello2.cpp . Additional Headers . New Members . Wt Connect . boost:bind() . Compiling / Linking

• hello3.cpp . C++11 Lambda 101 . Additional Headers . Lambda in Action . Compiling / Linking

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 31 C++11 Lambda 101

. Lambdas allow ad hoc functions to be Wt declared at block scope Signals/Slots . Lambda is a function object (functor) • hello2.cpp . Simplified syntax . Additional Headers [...] (...) ->retType {...} . New Members opt . Wt Connect . Captures . boost:bind() . Compiling / Linking . [=] outer scope is passed by value • hello3.cpp . [&] outer scope is passed by reference . C++11 Lambda 101 . Additional Headers . Examples . Lambda in Action . Compiling / Linking . [] { return 42; } . [] () -> float { return 3.14f; }

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 32 #include #include #include #include #include

using namespace Wt;

class HelloApplication : public WApplication Wt { public: HelloApplication(const WEnvironment& env); Signals/Slots };

• hello2.cpp WApplication* createApplication(const WEnvironment& env) . Additional Headers { return new HelloApplication(env); . New Members } . Wt Connect int main(int argc, char** argv) . boost:bind() { . Compiling / Linking return WRun(argc, argv, &createApplication); } • hello3.cpp . C++11 Lambda 101 . Additional Headers . Lambda in Action . Compiling / Linking

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 33 Lambda Version

HelloApplication::HelloApplication(const WEnvironment& env) : WApplication(env) { setTitle("Hello World");

Wt root()->addWidget(new WText("Your name, please ? ")); WLineEdit* nameEdit = new WLineEdit(root()); Signals/Slots nameEdit->setFocus(); WPushButton* button = new WPushButton("Greet me.", root()); • hello2.cpp button->setMargin(5, Left); . Additional Headers root()->addWidget(new WBreak()); . New Members WText* greeting = new WText(root()); . Wt Connect auto greet = [=] . boost:bind() { greeting->setText("Hello there, " + nameEdit->text()); }; . Compiling / Linking nameEdit->enterPressed().connect(std::bind(greet)); button->clicked().connect(std::bind(greet)); • hello3.cpp } . C++11 Lambda 101 . Additional Headers . Lambda in Action . Compiling / Linking

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 34 Compiling / Linking

$ g++ -std=c++11 hello3.cpp -o hello3 -lwt –lwthttp -lboost_signals-mt Wt Signals/Slots • hello2.cpp . Additional Headers . New Members . Wt Connect . boost:bind() . Compiling / Linking

• hello3.cpp . C++11 Lambda 101 . Additional Headers . Lambda in Action . Compiling / Linking

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 35 Widget Gallery

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 39 Wt Variants

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 40 Native Variants / Bindings

JWt – a native version of Wt WtRuby – Ruby bindings to Wt http://www.webtoolkit.eu/jwt http://github.com/rdale/wtruby/tr ee/master

June 24, 2015 PROGRAMMING WITH WT - ARMIN SOBHANI 41