een lange titel

Een eerste Wt voorbeeld in C++

Wt is een klein C++ webframework dat veel gelijkenissen vertoont met Qt.

Door de gelijkenis met Qt is het relatief eenvoudig om een Qt programma te herwerken tot een Wt webapplicatie. Wanneer je die start, kan je het programma weergeven door in de browser localhost:8080 als adres in te typen.

Hier is een eerste voorbeeld. Dit voorbeeld toont een driehoek in het browservenster. Met dit voorbeeld wordt aangetoond dat het mogelijk is om met Wt grafische output weer te geven. Wt voorziet 3 mogelijkheden om grafische output weer te geven.

  • inline SVG/InlineSvgVml
  • HTML canvas
  • Png

In het eerste geval wordt inline SVG gegenereerd. Dit betekent dat de SVG elementen rechtstreeks in het HTML bestand geplaatst worden. In het tweede geval wordt er getekend in een HTML canvas. Nu gebeurt het tekenwerk met gegenereerde Javascript. In het derde geval wordt de tekening als een png gegenereerd aan de serverzijde, in het C++ programma. De belangrijkste factor die de keuze zal bepalen, is de rekentijd. Alleen bij png is dat serverzijde, bij SVG en canvas is dat clientzijde. Hierbij zal SVG trager zijn dan canvas.

Dit is het voorbeeld.

Broncode: veelhoek.cpp

#include <Wt/WApplication>
#include <Wt/WContainerWidget>
#include <Wt/WPaintDevice>
#include <Wt/WPaintedWidget>
#include <Wt/WPainter>

#include <Wt/WBrush>
#include <Wt/WColor>
#include <Wt/WPen>
#include <Wt/WPointF>

class VeelhoekWidget : public Wt::WPaintedWidget
{
public:
   VeelhoekWidget(Wt::WContainerWidget *parent = 0)
	   : Wt::WPaintedWidget(parent)
   {
      resize(600, 100);   // Provide a default size.

      /*
         Kies voor SVG, canvas of een png afbeelding
       */
      //setPreferredMethod(InlineSvgVml);
      //setPreferredMethod(HtmlCanvas);
      setPreferredMethod(PngImage);
   }

protected:
   void paintEvent(Wt::WPaintDevice *paintDevice)
   {
      Wt::WPainter painter(paintDevice);
      painter.setBrush(Wt::WBrush(Wt::WBrush(Wt::blue)));
      painter.setPen(Wt::red);

      // Teken een driehoek.
      const Wt::WPointF points[] =  
      {
         Wt::WPointF(10, 10), 
         Wt::WPointF(100, 10),
         Wt::WPointF(100, 100) 
      };
      painter.drawPolygon(points, 3);
   }

private:
};


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

private:
};

VeelhoekApplication::VeelhoekApplication(const Wt::WEnvironment& env)
  : Wt::WApplication(env)
{
   setTitle("Veelhoek");

   Wt::WContainerWidget *container = new Wt::WContainerWidget();
   VeelhoekWidget *painting = new VeelhoekWidget(container);
   
   root()->addWidget(container);
}

Wt::WApplication *createApplication(const Wt::WEnvironment& env)
{
   return new VeelhoekApplication(env);
}

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

In dit minimale voorbeeld zie je de volgend klassen:

  • VeelhoekApplication: deze klasse stelt de applicatie voor.
  • VeelhoekWidget: dit is een vensterklasse.

Voor de compilatie zorgt de volgende Makefile

veelhoek: veelhoek.cpp
	g++ -std=c++11 -o veelhoek veelhoek.cpp -lwt -lwthttp

run: veelhoek
	./veelhoek -c wt_config.xml --docroot . --http-address=0.0.0.0 --http-port=8080

clean:
	rm veelhoek