MVC-Architektur in Tntnet (Variante III.)

Standard

In der Vergangenheit habe ich bereits zwei Varianten (hier und hier), wie man mit Tntnet ein MVC-Konzept umsetzen kann, vorgestellt. Heute zeige ich eine dritte Möglichkeit.

Diese nutzt eine Template-Engine namens „NLTemplate“. Der Projekt-Code ist kompakt und überschaubar, herunterzuladen bei GitHub. Installation und  Benutzung sind ausreichend dokumentiert, daher gehe ich hier nicht weiter darauf ein, sondern beschreibe lediglich die Benutzung in Tntnet.

Auf Eines sei aber noch vorher hingewiesen : das Template-Engine läuft, wenn es das angegebene Template-File nicht laden kann, in einem segment foult. Das bringt den gesamten Application-Server von Tntnet zum Absturz. Deshalb habe ich den Code für mich geforkt und angepasst. Jetzt wirft bei mir die Template-Engine Exception, wenn sich das Template-File nicht öffnen lässt. Der Tntnet-Application-Server kann damit sauber umgehen.

Durch die Verwendung von NLTemplate ist die Trennung zwischen View- und Controller-Code noch stärker, als es mit Bordmitteln von Tntnet möglich ist. Die Template-Files enthalten keinerlei interpretierten Code oder irgend welche „Magic“ mehr. Der zweite Vorteil, den man aber auch als Nachteil sehen kann, ist dass die Template-Files zur Laufzeit geladen werden. Das bedeutet, dass man die Template-Files ändern kann ohne den kompletten Code neu übersetzen zu müssen. Der dritte Vorteil ist, dass man den Precompiler ecppc nicht mehr braucht. Das vereinfacht den Build-Prozess.

Hier zu meinem Beispiel : es gibt zwei Template-Files. „site_skeletal.nlt“ ist das Template, dass die Seiten-Struktur abbildet, die auf jeder Seite gleich bleibt.

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{{ site_title }}</title>
    </head>
    <body>
        {{ main_content}}
    </body>
</html>

Der Bereich „{{ main_content}}“ wird ersetzt durch den individuellen Teil der Seite. Die zweite Template-Datei sieht so aus:

<h1>Use the NLTemplate system</h1>
You can generate items with loops:
<ul>
{% block town_items %}
    <li>Title: {{ town_name }}</li>
{% endblock %}
</ul>
You can use this template system without a pre compiler.

Dieser Inhalt wird in das obere Tamplate eingefügt. Der Teil, der mit dem Schlüsselwort „block“ gekennzeichnet ist, kann in einer Schleife beliebig generisch wiederholt werden. Mit den doppelt geschweiften Klammern werden Schlüsselwörter gekennzeichnet, die durch einen beliebigen Inhalt ersetzt werden können.

Jetzt zum Controller-Code:

#include <tnt/ecpp.h>
#include <tnt/httprequest.h>
#include <tnt/httpreply.h>
#include <tnt/httpheader.h>
#include <tnt/http.h>
#include <tnt/data.h>
#include <tnt/componentfactory.h>
#include <stdexcept>
#include <ostream>
#include <vector>

#include <NLTemplate/NLTemplate.h>

log_define("component.alternativ_hello")

namespace
{
class _component_ : public tnt::EcppComponent
{
    _component_& main()  {
        return *this;
    }

  protected:
    ~_component_();

  public:
    _component_(const tnt::Compident& ci, const tnt::Urlmapper& um, tnt::Comploader& cl);
    unsigned operator() (tnt::HttpRequest& request, tnt::HttpReply& reply, tnt::QueryParams& qparam);
};

static tnt::EcppComponentFactoryImpl<_component_> Factory("alternativ_hello");

_component_::_component_(const tnt::Compident& ci, const tnt::Urlmapper& um, tnt::Comploader& cl)
  : EcppComponent(ci, um, cl){
}

_component_::~_component_(){}

unsigned _component_::operator() (tnt::HttpRequest& request, tnt::HttpReply& reply, tnt::QueryParams& qparam)
{
    std::vector<std::string> towns;
    towns = {"Hamburg", "Frankfurt", "München"};

    NL::Template::LoaderFile loader;
    NL::Template::Template nl_main_content( loader );
    nl_main_content.load( "src/hello/view/main_content.nlt" );
    nl_main_content.block( "town_items" ).repeat( towns.size() );
    for ( unsigned int i=0; i < towns.size() ; i++ ) {
        nl_main_content.block( "town_items" )[ i ].set( "town_name", towns[ i ] );
    }
    std::stringstream ss_main_content;
    nl_main_content.render( ss_main_content );

    NL::Template::LoaderFile skeletal_loader;
    NL::Template::Template nlTemplate( skeletal_loader );
    nlTemplate.load( "src/hello/view/site_skeletal.nlt" );
    nlTemplate.set( "site_title", "About NLTemplate" );
    nlTemplate.set( "main_content", ss_main_content.str() );

    nlTemplate.render( reply.out() );

    return HTTP_OK;
}

} // namespace

Ich lade hier die zwei Templates-Files:  erst das Template mit dem Haupt-Inhalt, das ich mit generischen Inhalt befülle. Dann lade ich das Template für die Seiten-Struktur und füge den Variablen Teil des Haupt-Inhaltes ein.

NLTemplate bietet auch die Möglichkeit, ein Template in ein anderes zu includieren. Ich mag den Ansatz jedoch nicht, weil dann das Seiten-Skelett-Tamplate in einen Kopf- und Fuß-Teil aufgetrennt werden muss. Wenn das Seiten-Skelett-Tamplate an Komplexität zunimmt, wird es recht schnell unübersichtlich.

Dieses Beispiel funktioniert nur mit dem Master-Branch vom Tntnet-Projekt. In der nächsten Zeit werde ich versuchen das Beispiel auch mit dem 2.Xer-Zweig (dem offiziellen Release-Zweig) zum Laufen zu bekommen.

Advertisements

MVC-Architektur in Tntnet (Variante II.)

Standard

Wie schon im Artikel „MVC-Architektur in Tntnet (Variante I.)“ angekündigt, kommt hier eine alternative Variante, um eine MVC-Architektur in Tntnet zu realisieren. Diese Variante ist etwas einfacher in der Handhabung. Dafür stellt sie eine nicht ganz 100%-ig saubere Lösung dar. Denn hier wird erst der View aufgerufen; dieser ruft den Controller auf, der wiederum mit dem Model arbeitet. Klassischer Weise wird erst der Conroller und dann der View aufgerufen. Ein weitere Punkt ist sowohl ein Vor- wie ein Nachteil. Der Aufruf des Controllers wird nicht über das Routing gesteuert, da der View den Controller aufruft. Der Vorteil ist, dass sich eine einzige Route mit der Komponente verbindet. Das macht es einfacher und transparenter über URLs Zugriffsrechte zu kontrollieren oder generische Komponenten-Link-URLs zu verwenden. Dazu zu einem späterem Zeitpunk mehr. Jetzt erst mal zur konkreten Umsetzung der alternativen MVC-Variante.

Contoller

Die Controller-Klasse ist eine ganz normale C++-Klasse. Diese Klasse wird von dem View, der in der ecpp-Auszeichnungssprache erstellt wird, eingebunden. Bevor gezeigt wird, wie der View die logische Verarbeitung der Benutzereingaben an den Controller delegiert, wird hier erst mal ein exemplarischer Controller-Code gezeigt. Der gezeigte Controller soll die Kontrolle über den Login-Prozess übernehmen: Die Datei AlterLogInController.h:

#ifndef ALTERLOGINCONTROLLER_H
#define ALTERLOGINCONTROLLER_H

#include <Core/models/UserSession.h>
#include <tnt/httprequest.h>
#include <tnt/httpreply.h>
#include <iostream>

    class AlterLogInController
    {
        public:
            AlterLogInController (UserSession& userSession_): userSession(userSession_){};
            void operator() (
                tnt::HttpRequest& request,
                tnt::HttpReply& reply,
                tnt::QueryParams& qparam
            );
            std::string feedback;
            UserSession& userSession;
    };
#endif

Und die Datei AlterLogInController.cpp:

#include <Core/controller/AlterLogInController.h>
#include <Core/manager/WebACL.h>
#include <Core/models/UserSession.h>
#include <cxxtools/log.h>
#include <tnt/httprequest.h>
#include <tnt/httpreply.h>

log_define("Core.AlterLogInController")

void AlterLogInController::operator() (
    tnt::HttpRequest& request,
    tnt::HttpReply& reply,
    tnt::QueryParams& qparam)
{

    // define the query parameters
    std::string  arg_name     = qparam.arg<std::string>("arg_name");
    std::string  arg_password = qparam.arg<std::string>("arg_password");
    bool  arg_login_button    =  qparam.arg<bool>("arg_login_button");

    log_debug("authUser(" << arg_name << ", ***)");

    if ( arg_login_button ) {
        if ( WebACL::authUser ( arg_name, arg_password ) )
        {
            userSession.setUserName ( arg_name );
            userSession.addRoll (  WebACL::getRoll ( arg_name ) );
            reply.redirect ( "/home" );
        }
        else
        {
            log_debug("fail");
            feedback = "Login fehlgeschlagen!";
        };
    }
}

Das einzig Besondere an der Klasse ist, dass sie eine Methode "operator()" aufweist, der bestimmte Referenzen übergeben werden. Das sind Objekte der Klassen tnt::HttpRequest, tnt::HttpReply und tnt::QueryParams die in der ecpp-View-Umgebung zur Verführung stehen. Dem Controller werden die Referenzen auf diese Instanzen übergeben, damit dieser mit den Werten und Informationen weiter arbeiten kann. So z.B. stecken in tnt::QueryParams& qparam die übergebenen http-request-Parameter mit ihren Werten. In unserem Fall ist das der Name, das Passwort und ob der Button,  für das Abschicken des Login-Formulars geklickt wurde. Die Art wie die Parameter aus den übergebenen Objekt-Reverenzen heraus gelesen werden, ist die selbe wie im Artikel „MVC-Architektur in Tntnet (Variante I.)“ beschrieben. Nur ein kleiner Hinweis auf die Besonderheit des Funktion-Aufrufes reply.redirect ( "/home" );. Diese Funktion der Klasse tnt::HttpReply wird vm Tntnet-Framework bereitgestellt und dient dazu, auf eine andere Seite weiter zu leiten. In unserem Fall auf die Startseite /home. Wird der Login abgelehnt,  so wird eine Nachricht in der Klasseneigenschaft feedback für den View (/home) bereitgehalten. Dies geschieht in der Zeile

feedback = "Login fehlgeschlagen!";

Model

Für das Model gilt in dieser Variante II das Gleiche, wie in der I. Variante.

View

Im View gibt es bei dieser Variante einen entschiedenen Unterschied zur I. Variante:

<%session
    scope="shared"
    include="Core/models/UserSession.h" >
        UserSession userSession;
</%session>
<%request
    scope="shared"
    include="Core/controller/AlterLogInController.h">
        AlterLogInController  alterLogInController(userSession);
</%request>
<%cpp>
    alterLogInController.operator(
        request,
        reply,
        qparam
    );
</%cpp>

<!DOCTYPE HTML>
<html>
<head>
    <meta charset = "UTF-8" />
</head>
<body>
        <form method="post" >
            <h2>Login</h2>
% if ( alterLogInController.feedback != "" ) {
            <div class="feedback-box">
                <b><$ alterLogInController.feedback $> </b>
            </div>
% }
            <p>Für den gewählten Bereich muss du angemeldet sein. Bitte
            authentifiziere dich...
            </p>
            <p>Benutzer:<br>
                <input
                    class="full-size"
                    name="arg_name"
                    type="text"
                    size="40"
                    maxlength="40">
            </p>
            <p>Passwort:<br>
                <input
                    class="full-size"
                    name="arg_password"
                    type="password"
                    size="40"
                    maxlength="40"></p>
            <p>
                <button name="arg_login_button"
                            value="pushed"
                            type="submit">Login
                </button>
            </p>
        </form>
        </p><a href="NewAccount">Hier</a> kannst du dir ein Account erstellen</p>
</body>
</html>

Dem Konstruktor der Klasse AlterLogInController wird die Instanz der Kasse UserSession als Parameter mitgegeben. Die Klasse AlterLogInController braucht die Klasse UserSession nämlich, um die Information über einen erfolgreichen Login zu hinterlegen, damit andere Komponenten auf diese Information zugreifen können. In dem Abschnitt,der mit dem Tag <%cpp> umschlossen ist, wird der Controller dazu aufgefordert den Request entgegen zu nehmen und zu verarbeiten. In den <%cpp>-Tags kann man ganz normalen C++-Code einbetten. Weiter unten im ecpp-Code werden die Controller-Eigenschaften genutzt, um den View mit generischen Werten zu befüllen.

% if ( alterLogInController.feedback != "" ) {

Routing

Damit der View unter der gewünschten Rute vom Browser gefunden wird, muss diese noch gesetzt werden: alterLogInController.feedback app.mapUrl( "^/LogIn", "LogInView" ); Jetzt wird das Loginfenter unter http://DieDomain.de/LogIn zu erreichen sein. Es ist möglich mehrere Routen zu ein und der selben Komponente zu definieren. Allerdings sollte man sein ACL-Konzept nicht auf Basis von URLs realisieren, weil man dann u.U. seine eigenen ACLs ungewollt austrickst. Die Regel „halte es einfach“ ist bei dem Thema Routing sicher zu empfehlen.


Creative Commons Lizenzvertrag

MVC-Architektur in Tntnet (Variante I.)

Standard

MVC und Tntnet

Tntnet macht dem Entwickler keine Vorschrift, wie er sein Projekt zu organisieren hat oder welche Paradigmen zur Anwendung kommen sollen. Tntnet konzentriert sich auf die Basisfunktionalität. Wenn eine höhere Abstraktion gewünscht ist, muss der Entwickler diese selber implementieren. C++ gibt es lange bevor es das heute sehr popoläre model view controller(MVC) pattern gab.  C++ wird es höchstwahrscheinlich noch geben, wenn das MVC-Pattern durch andere Konzepte abgelöst oder weiterentwickelt wurde. Das ist der Grund, warum das MVC auch nicht fester Bestandteil von Tntnet ist. Das heißt aber nicht, dass MVC nicht mit Tntnet gehen würde. Hier zeige ich eine denkbare Implementierung von MVC in Tntent.

Der Controller

Die Controller-Klasse wird von tnt::Component abgeleitet, und muss eine Funktion „operator()“ implementieren:

class MyCopmonentController : public tnt::Component
{
    public:
        unsigned operator() (
            tnt::HttpRequest& request,
            tnt::HttpReply& reply,
            tnt::QueryParams& qparam
        );
};

Da die Klasse kein Interface hat über die sie angesprochen wird, entfällt die Header-Datei. Es ist nur eine *.cpp erforderlich. Mit „qparam.arg<TYPE>(KEYWORD)“ kann ein Argument ausgelesen, das dem HTML-Requeset mitgegeben wurde. Als Beispiel:

// URL arguments
std::string arg_login_name =
    qparam.arg<std::string>("arg_login_name");

„TYPE“ ist der variable Type, den man zurück bekommen möchte. „KEYWORD“ ist der Bezeichner, mit dem der Wert übergeben wird. Möchte man eine Liste von Werten zurückbekommen, (z.B. aus Listen in HTML-Formularen, in denen eine Mehrfachauswahl erlaubt ist), muss eine andere Funktion genutzt werden. Diese heißt „args“ statt „arg“ und gibt einen Vector von Typen zurück, den man angibt:

std::vector<std::string>  args_userroles =
    qparam.args<std::string>("args_userroles");

Um nicht mit Argumenten und shared Variablen durcheinander zu kommen, kann es hilfreich sein, sich auf die Konvention zu einigen, dass Argumente mit den Präfix „arg_“ beginnen. Die Namen in den HTML-Formularen (bzw. der View in den *.ecpp-Datein) müssen natürlich der gleichen Konvention folgen.

<p>
 <label for="login_name">Login*:</label>
 <br>
 <input 
    class="full-size" 
    name="arg_login_name" 
    type="text" 
    value="<$ accountData.getLogin_name() $>" 
    maxlength="80"> 
</p>

Empfohlene Argumenten Typen

Hier eine tabellarische Übersicht, welcher C++-Cast für welchen HTML-Typ sinnvoll ist.

HTML-Type C++-Type
button bool
input/text string
input/password string
input/number int, long, short…
input/checkbox bool
select/multiple vector

Gemeinsam genutzte Variablen

Um Werte an den View zu übergeben, nutzt man shared-Opjekte und -Variablen. Diese müssen mit einem Macro registriert und initialisiert werden:

 
// shared variables
TNT_REQUEST_SHARED_VAR( UserSession, s_userSession, ());

Der erste Parameter ist der Typ; der zweite Name und der Dritte ist der aufzurufende Constructor. Wenn dieser einen Parameter braucht, kann dieser hier angegeben werden. Es empfehlt sich für  die Übersicht die Namenskonvention zu verwenden, die shared Variablen ein „s_“ als Präfix voranstellen.

Es gibt für die shared Opjekte verschiedene Gültigkeitsbereiche bzw. Lebensdauer. So werden über „TNT_SESSION_GLOBAL_VAR“ die Objekte die gesamte Session überdauern. Es gibt noch „TNT_REQUEST_SHARED_VAR“. Hier haben die Objekte nur eine Lebensdauer für ein Request. Es ist ratsam mit „TNT_SESSION_GLOBAL_VAR“ sehr sparsam umzugehen und wenn möglich, nur mit „TNT_REQUEST_SHARED_VAR zu“ arbeiten. Andernfalls kann es zu ungewollten Effekten kommen, wenn Objekte von einer vorigen Request-Prozedur noch mit einen altem Wert belegt sind.

Damit der Controller tatsächlich beim Routing berücksichtigt wird, muss die Klasse der Component-Factory bekannt gemacht werden:

static tnt::ComponentFactoryImpl<MyCompController>
     factory("MyCompController");

Model

Im Controller (und später im View) wird eine Klasse UserSession als shared variables verwendet. Es ist im Prinzip möglich jeden Typ, also auch primitive Typen wie int zu benutzen. Davon ist jedoch abzuraten, weil es keine Namensräume gibt, die die einzelnen Komponenten trennen können, wenn sie von der Tntnet-Component-Factory verwaltet werden. Die Wahrscheinlichkeit bei sehr großen Projekten aus Versehen einen Variablennamen zu verwenden, der schon an anderer Stelle verwendet wird, ist sehr groß.

Kapselt aber jede Komponente (logische Einheit einer Website) ihre Session-Daten in eine eigene Klasse (bzw. Model) – wie hier – können verschiedene Komponenten, die selben Variablennamen haben, verwenden. Durch die Verwendung unterschiedlicher Typen (Klassen) werden sie von Tntnet als unterschiedliche Variablen verwendet. Zur Veranschaulichung:

Ist in dem Controller der Komponente A folgender Code zu finden

TNT_SESSION_SHARED_VAR(CompA::SessionShareds, sessionInfo, ());

und in dem Controller der Komponente B folgender

TNT_SESSION_SHARED_VAR(CompB::SessionShareds, sessionInfo, ());

so benutzen beide Komponenten zwar den gleichen Instanznamen aber unterschiedliche Klassen-Typen, so dass sie sich nicht gegenseitig ihre Werte überschreiben.

View

Der View wird in Tntnet mit einer erweiterten HTML-Auszeichnungssprache namens epcc erstellt und vom Precompiler ecppc in C++-Code umgewandelt. Ich werde bestimmt noch in einem späteren Artikel detaillierter auf diese Aufzeichnungssprache eingehen. Bis dahin sei vorerst noch auf die offizielle eng. Doku verwiesen: http://www.tntnet.org/man7/ecpp.7.html An diese Stelle gehe ich erst mal nur soweit darauf, ein wie es das MVC-Thema berührt.

Damit die shared Variablen des Controllers auch dem View zur Verfügung stehen, müssen diese der View-Umgebung bekannt gemacht werden. Das geschieht auf die folgende Weise:

<%session
    scope="shared"
    include="models/UserSession.h">
        UserSession s_userSession;
        std::vector<std::string> s_allRolls;
</%session>

<%request
    scope="shared">
            std::vector<std::string> sh_allRolls;
</%request>

Mit dem scope-Wert „shared“ wird angezeigt, dass es sich um shared Variablen handelt. Mit „include“ können benötigte Header-Dateien eingebunden werden. In diesem Fall includieren wir die Klasse „UserSession“. Diese wird gebraucht, damit der Type „UserSession“ dem Compiler bekannt ist. Zwischen den Tags werden die eigentlichen Variablen aufgelistet bzw. bekannt gemacht. In dem Beispiel sieht man auch, dass hier bei der Lebensdauer der shared Variablen differenziert wird. Im Tag „session“ kommen alle Werte, die zuvor mit dem Makro „TNT_SESSION_GLOBAL_VAR“ deklariert wurden. In „request“ kommen alle Variablen, die in dem Controller „TNT_REQUEST_SHARED_VAR“ initialisiert wurden.

Routing

Damit der View und der Controller tatsächlich gemeinsam eine Anfrage bearbeiten, müssen sie noch mit einer gemeinsamen Route verknüpft werden.

    app.mapUrl( "^/(.*)$", "$1Controller" );
    app.mapUrl( "^/(.*)$", "$1View" );

Diese Regel sagt aus, dass jede URL einmal um „Controller“ und einmal um „View“ ergänzt wird, und damit zuerst der Conntroller und dann der View aufgerufen wird. Lautet nun unser Controller z.B. „MyCompController“ und der Viel „MyCompView“, so wird die neue Kompnent über die URL „MyComp“ aufgerufen.

Sicherheitsaspekt

Der View sollte keinerlei Logik enthalten. Sollte einmal wegen eines Fehlers oder einer Fehlkonfiguration der Controller nicht aufgerufen werden, liefert der View trotzdem seinen Inhalt ab. Wenn die Zugriffsrechte im Controller realisiert sind, greifen diese nicht mehr und der View könnte Daten preisgeben, die nicht für den Besucher gedacht sind. Deshalb sollte IMMER der Controller für die Befüllung mit Inhalt und Daten zuständig sein.

Troubleshooting

Der Controller beim MVC wird (scheinbar) nicht aufgerufen

Problem: Man hat eine Komponente mit dem MVC-Konzept erstellt, aber der Controller scheint nicht aufgerufen zu werden.

  • Überprüfen, ob das wirklich zutrifft, indem z.B. eine Testausgabe mit std::cout auf die Standartausgabe ausgegeben wird
  • Kontrollieren, ob die Route stimmt, die über app.mapUrl() oder über das Konfigurations-File von Tntnet gesetzt wurde
  • Prüfen, ob der Name des Controller korrekt in der Component-Factory angegeben wurde: static tnt::ComponentFactoryImpl factory(„MyController“);
  • Kontrollieren, ob die Komponente compiliert und gelinkt wurde, indem das Makefile überprüft wird
  • Prüfen, ob ggf. form-Tag im View  die richtige Componente aufruft

Nachwort

Es werden sich schon einige Leser Gedanken gemacht haben, warum im Titel „(Variante I.)“ steht. Tntnet gibt den Entwickler die Freiheit, die Dinge so zu tun, wie man sie für richtig hält. Was „richtig“ ist, da gehen die Meinungen meist auseinander. Deshalb gibt es auch noch andere Lösungen. Ich werde noch in ein weiteres MVC-Pattern für Tntnet vorstellen. Auch das Thema „Verzeichnisstruktur in Tntnet-Projekten“ werde ich noch ein mal separat behandeln.


Creative Commons Lizenzvertrag