Praktický úvod do Wt

link: https://www.webtoolkit.eu/wt/doc/tutorial/wt.html

Pieter Libin
Koen Deforche
Wim Dumon
Pre Wt 3.2.0 (Decembra 5 2011)

Obsah

1. Úvod

Wt je C++ knižnica pre vývoj webových aplikácií. Priznal, C++ nepríde na myseľ ako prvé voľbou pre programovací jazyk, keď jeden rozpráva o vývoj webových aplikácií. Tvorba webu je zvyčajne spojená s skriptovacie jazyky, a je zvyčajne realizované na úrovni generovanie odpovede na prichádzajúce požiadavky. Keďže obe žiadosti a odpovede sú textové kódovanie, programovanie pre web je v konečnom dôsledku na spracovanie textov úlohy, a tak sa pohodlne vyjadrené v skriptovací jazyk.

Napriek tomu, z funkčného hľadiska, a ako programovanie úloh, moderné webové aplikácie podobá viac na pracovnej ploche aplikácie: je vysoko interaktívne a už usporiadané v stránkach (možno ešte koncepčne, ale nie fyzicky). Interakciu so serverom sa stane viac a viac v pozadí a nie je s kompletným stránka sa obnoví. Skutočne, prehliadač je premenená na platformu pre aplikácie, kde používatelia interagujú s údajmi a viac často ako ne s ostatnými.

Zatiaľ čo niektorí vývojári rozhodnú implementovať aplikáciu v Javascripte a používať klient-server, protokol pre prístup na server-bočné zdrojov, tento má niekoľko charakteristických tienisté stránky. Musíte sa pustiť statické zadaním (alebo pridať ďalšiu vrstvu, ako GWT). Typ bezpečnosti, vzniknuté zostavovateľ, je neoceniteľný ako projekt rastie v zložitosti a počtu vývojárov. Okrem toho je potrebné navrhnúť klient-server, protokol a minimalizovať komunikáciu a súvisiace round-trip latencies. Napokon, tento prístup nemôže pracovať pre aplikácie, ktoré potrebujú na splnenie accessibility guidelines, alebo je potrebné, aby sa vyhľadávač optimalizovaný, a teda si vyžadujú HTML-iba verzie aplikácie. Hm, ako na strane servera riešenie, prekonáva tieto problémy, a s malý k žiadne interaktivity a strát v porovnaní s JavaScript aplikácie.

Wt je hlavnou výhodou oproti iným server-bočné prístupov je jeho widget odbery(widget abstraction). Aplikácia je definovaná ako hierarchiu widgety. Niektoré tieto miniaplikácie sú všeobecné a poskytuje knižnicu (ako tlačítka, riadkové úpravy, stolný názory, …), a iné sú špecializované na konkrétnu aplikáciu (napr. celý blog widget). Widget vystihuje názor a správanie aspekty, spotrebuje a vytvára udalosti a tiež zúčastňuje URL manipulácia a môže komunikovať s ostatnými HTTP zdrojov. Viac často ako ne, widget delegátov skutočná “logiku” na model, vrstvenie prístup obyčajne známe ako MVC. Widget, na rozdiel od stránku, alebo “partlet”, je skutočne opakovane, prispôsobiteľné a rozšíriteľný budove bloku (ako plagát-dieťa objektovo-Orientovaného Programovania a) pre moderné webové aplikácie. Samotná žiadosť manipulácia a vykresľovanie je abstrahovaný, s ako výhodu, že celý vykresľovanie stránok model (obyčajný HTML) alebo inkrementálne aktualizácie (Ajax/WebSockets) môžu byť použité v závislosti na konfigurácii a prehliadač vlastnosti.

Hoci implementovaný v C++, Wt hlavné zameranie alebo novinka nie je jeho výkon, ale jeho zameranie na rozvoj ľahko udržiavateľné aplikácie a jeho rozsiahle knižnice, vstavané widgety. Ale preto, že je populárny a široko používané v integrovaných systémoch, zistíte, že výkonnosť a pôdorysného bol optimalizovaný príliš, na základe nie-nezmysel API, premýšľavý architektúry, a C++ …

V tomto tutoriále, budeme používať dve malé programy pre ilustráciu, ako používať Wt vytvárať webové aplikácie. Po tohto návodu, mali by ste mať dobrý pochopiť, aké sú možnosti, ako Wt aplikácie sú postavené, a ako to ponúka nástroj na riadenie zložitosti.

Prvá aplikácia je povinné Hello World aplikácie a zavádza dva kľúčové pojmy knižnice: vytvorenie a aktualizácia widget strom a reaguje na vstup používateľa. Druhá, o niečo väčší aplikácia je klasický hangman game. Obe aplikácie sú zahrnuté v Wt zdroj distribúcie.

Ale predtým, než sme sa ponoriť, poďme rýchlo prejsť na hlavné koncepcie knižnice.

2. Hlavné komponenty

2.1. Widgety

Používateľské rozhranie, vydaný v okne prehliadača, je špecifikované vytvorenie a udržiavanie widget strom. Každé widget zodpovedá obdĺžnikovej časti používateľské rozhranie, a riadi jeho obsah a správanie. Na srdce, knižnice sa stará o dve úlohy v rámci jednej relácie: (1) vykresľovanie( rendering) tento widget strom ako HTML/JavaScript v internetovom prehliadači, a sledovanie zmien za čiastkové aktualizácie, a (2) synchronizácia vstupu používateľa(synchronizing user input) a preložky events(relaying events) z prehliadača na tieto miniaplikácie.

Pretože je jasné oddelenie medzi používateľské rozhranie špecifikácia používajú widget strom a vykreslenie stromu, knižnica implementuje niekoľko optimalizácia pre vykresľovanie keď Ajax je k dispozícii. Nielen, že môžete knižnica aktualizovať rozhranie postupne, tam sú aj ďalšie triky, ako napríklad iba vykresľovanie viditeľné widget zmeny počas v reakcii na udalosť (alebo počiatočné zaťaženie), a v pozadí spôsobiť zmeny skryté widgety. Ako dôsledok, ako prvotné reakcie sú optimalizované a vzhľad následné aplikácie widget sa zobrazí trefný.

2.2. Session management a životnosť

Ďalším aspektom, ktorý je úplne spracovať knižnica je session management. Pre každú novú reláciu, ktorá zodpovedá novému používateľovi prístup k vašej webovej aplikácie, knižnica vytvára nové WApplication objekt. Ako vývojár, môžete implementovať aplikáciu skoro ako single-user žiadosti, pokiaľ necháte používatelia interagujú so spoločným komponentov (ako sú napríklad databázy), alebo so sebou, pre ktoré štandardné údaje-zdieľanie mechanizmy musia byť použitý.

V závislosti na model nasadenia, knižnica mapu relácie na určených alebo zdieľané procesov. Pri používaní určených procesov nový proces je vytvorený pre každý odlišný relácie, poskytuje jadro-úroveň izolácie rôznych relácií, ktoré môžu byť užitočné pre vysoko bezpečnostný citlivé aplikácie. Ak používate zdieľaný procesy nové relácie sú pridelené náhodne na jeden procesy, ktoré sú k dispozícii v knižnici. Tým sa znižuje nebezpečenstvo pre DoS útoky, ale vyžaduje viac opatrní, programovaní, ako pamäte korupcii postihuje všetky relácie v jedinom procese, a relácie nie sú izolované iným spôsobom, ale správne programovanie.

Hm používa keep-alive protokol medzi klientom a serverom určiť relácie životnosť. Tak dlho, ako sa webová stránka zobrazí v prehliadači používateľa relácia je stále nažive. Keď používateľ ukončí jeho okna, neodíde, alebo po uplynutí keď pripojenie je stratené, relácia sa dostane ukončená. Keď je relácia ukončená, aplikáciu objektu spolu s celou widget strom sa vypúšťa, preto by ste mali uvoľnenie zdrojov v držbe svoje miniaplikácie alebo aplikácie v destructors týchto objektov.

2.3. Deployment

Niekoľko možnosti nasadenia sú k dispozícii:

  • wthttp konektor knižnica implementuje webový server, ktorý implementuje HTTP(S) a WebSockets. To je nielen pohodlné počas vývoja, ale aj efektívne riešenie pre nasadenie od malých vnorené systémy alebo mobilné zariadenia, k multi-server síl.
  • wtfcgi konektor knižnica implementuje FastCGI protokol. To umožňuje Wt aplikácie byť integrované do existujúceho webového servera (napríklad Apache, Lighttpd alebo Imdb).
  • wtisapi konektor knižnica implementuje ISAPI protokol. Na Windows platformy, umožňuje Wt aplikácie integrovať sa do spoločnosti Microsoft Internet Information Server (IIS).

3. Dobrý deň, Wt

V táto príklad, ukážeme aplikáciu, ktorá vyzve užívateľa na jeho meno. Keď on tlačí tlačidlo, pozdrav je aktualizovaný na základe názvu, ktorý bol zadaný.

img/dobrý deň.png

Nová relácia začína vytvárať inštanciu triedy WApplication. Tento objekt spravuje koreň widget strom a obsahuje ďalšie informácie o relácii, ako je pripojený prehliadača schopnosti.

Kompletný “Hello world” žiadosť
#include <Wt/WApplication>
#include <Wt/WBreak>
#include <Wt/WContainerWidget>
#include <Wt/WLineEdit>
#include <Wt/WPushButton>
#include <Wt/WText>

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

private:
    Wt::WLineEdit *nameEdit_;
    Wt::WText *greeting_;

    void greet();
};

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

    root()->addWidget(new Wt::WText("Your name, please ? "));
    nameEdit_ = new Wt::WLineEdit(root());
    Wt::WPushButton *button = new Wt::WPushButton("Greet me.", root());
    root()->addWidget(new Wt::WBreak());
    greeting_ = new Wt::WText(root());
    button->clicked().connect(this, &HelloApplication::greet);
}

void HelloApplication::greet()
{
    greeting_->setText("Hello there, " + nameEdit_->text());
}

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

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

Môžete vytvoriť a spustiť túto aplikáciu lokálne, ak chcete. Všetko, čo musíte urobiť, je zostaviť vyššie uvedený kód a prepojenie proti Wt knižnice (libwt) a vstavaný HTTP server (libwthttp).

Na UNIX-like systémoch, by ste mohli urobiť nasledovné:

$ g++ -o hello hello.cc -lwthttp -lwt
$ ./hello --docroot . --http-address 0.0.0.0 --http-port 9090
NOTE

Ak sa dostanete prepojenie chyby pri prvom kroku, možno budete musieť pridať ďalšie knižnice:

$ g++ -o hello hello.cc -I/usr/local/include -L/usr/local/lib
  -lwthttp -lwt -lboost_random -lboost_regex
  -lboost_signals -lboost_system -lboost_thread -lboost_filesystem
  -lboost_program_options -lboost_date_time

Poďme začať s posledným časť aplikácie, main() funkcie.

V main() funkcie, nazývame WRun() ak chcete spustiť aplikáciu server. Táto metóda sa vráti, ak žiadosť server, vypína (lov ZABIŤ signál alebo Windows ekvivalent).

Vnútri(Inside) WRun()

WRun() je vlastne pohodlie funkciu, ktorá vytvorí a nakonfiguruje WServer stupňa. Ak chcete mať väčšiu kontrolu, napríklad ak máte viacero “záznam bodov”, alebo ak chcete ovládať server spustenie a zastavenie, môžete použiť WServer API priamo miesto.

WRun() funkcie prechádza argc a argv, (čo pre niektoré konektory, ako napríklad vstavaný webserver konfiguruje server), a prijíma funkciu objektu ako posledný argument. Táto funkcia sa nazýva keď novú reláciu začalo a vráti sa nové WApplication stupňa pre danú reláciu. Táto funkcia je zase má ako vstupné WEnvironment objekt, a tento objekt môže byť použité na prispôsobenie aplikácie alebo autentifikáciu užívateľa.

Príklad instantiates štyri widgety do aplikácie koreňového obalu: text  ("Your name, please?"), linka upraviť (nameEdit_), prázdny text (greeting_) a tlačidlo ((button)). Tieto tri typy widgety sú všeobecné widgety poskytované knižnice a mapu priamo na rodák HTML prvky. V kat príklade budeme vidieť, ako iné vlastné a ďalšie špecializované aplikácie widget sa používajú rovnakým spôsobom.

Po tom, čo sme konkretizovať widgety, sme určiť, že chceme reagovať na kliknutie na tlačidlo. Spájame pozdraviť()metóda na tlačidlo clicked() signál. Udalosti sa šíria z jedného widgetu (tlačidlo) na ďalšie widgety, alebo, ako v tomto prípade, aplikácia objekt, pomocou signálov. Pohľad na úrovni referenčnej dokumentácie widget obsahuje signály, ktoré sú vystavené podľa konkrétneho widget. Pre základné widgety, ako je tlačidlo, tieto sú typické mouse and keyboard events(myš a klávesnica events). Vyššej úrovni aplikácií widget môže inzerovať iné udalosti (napríklad calendar widgetselectionChanged() signál), a môžete pridať udalosti vlastné widgety.

Ako udalosť šírenie diel

Keď udalosť je vyvolaná užívateľ, webový prehliadač komunikuje cieľového objektu a zodpovedajúci signál, spolu s všetky údaje formulára na web server (pomocou obnoviť celú stránku alebo Ajax/WebSockets). Na server, po návrh bol potvrdený ako skutočný, dát formulára, ako napríklad riadkové upraviť text je prvý spracované na aktualizáciu widget strom štátu. Potom prípade je šírené vyžarujú signál na cieľ widget, ktorý propaguje prípade, ak sú všetky pripojené metód, ako v našom príkladee greet() metóda. Zmeny widget stromu sú sledované, a po udalosti boli riešené tieto zmeny sa prejavia na poskytnuté HTML DOM, strom, opäť pomocou obnoviť celú stránku alebo postupne pomocou Ajax alebo WebSockets.

Najzaujímavejšie vec, o vykonávaní pozdraviť() metóda môže byť kód, ktorý nie je tam: nie JavaScript aktualizácia textu pomocou DOM manipulácie alebo opätovne poskytli stránku, č kódu JavaScript na post prípade konci riadku upravte hodnotu pomocou Ajax alebo WebSockets, č HTTP vyžiadanie dekódovanie interpretovať line upraviť hodnotu alebo tlačidlo udalosť, a nie s bezpečnosťou kód. To všetko je spracované namiesto knižnice. Hoci by to mohlo byť ešte zvládnuteľné pre taký malý príklad predstavte si situáciu, keď stránka obsahuje rôzne prvky formulára vzťahujúce sa na rôznych úloh, a teda riadi rôzne widgety, a ak počas podujatia, propagácia mnoho nesúvisia widgety získať aktualizované.

4. Kat(Hangman)

Pre tých z vás, ktorí zabudli hry katom: úlohou je uhádnuť slovo. Môžete si vybrať list, jeden po druhom. Ak slovo obsahuje vybrané písmeno, je uvedená v správnej polohy(s). Ak slovo neobsahuje písmeno, stratíte otočiť a vrátiť o jeden krok bližšie k visí. Ak chcete vyhrať, musíte nájsť slovo, než zomriete visí. V našej verzii, dáme používateľa vybrať slovník (v angličtine alebo v holandčine), a budeme sledovať používateľov a jeho high-skóre.

4.1. Prvý vlastný widget

Najprv sme diskutovať o HangmanWidget, ktorý je vlastný widget, ktorý vystihuje samotnú hru: umožňuje používateľovi hrať jeden alebo viac hier. Nezaoberá sa aktualizovať používateľa skóre, namiesto toho to naznačuje, skóre aktualizácie, udalosti a iné widget(s) pomocou signálu.

Nasledujúce film ukazuje, ako widget je zložený z rôzne widgety:

img/kat.png

Na HangmanWidget kombinuje widgety poskytuje knižnica (WText: title_, statusText_, WComboBox: language_), a tri vlastné widgety (WordWidget: word_, ImagesWidget: images_ a LettersWidget:letters). Ako uvidíte, vlastné widgety sú konkretizovať a používajú sa v podstate rovnakým spôsobom ako knižnica widgety, vrátane reagoval na udalosti generované tieto miniaplikácie.

S touto informácií, môžeme realizovať definícii.

HangmanWidget  vyhlásenie(declaration)
class HangmanWidget : public Wt::WContainerWidget
{
public:
    HangmanWidget(const std::string &name, Wt::WContainerWidget *parent = 0);

    Wt::Signal<int>& scoreUpdated() { return scoreUpdated_; }

private:
    Wt::WText        *title_;
    WordWidget       *word_;
    ImagesWidget     *images_;
    LettersWidget    *letters_;
    Wt::WText        *statusText_;
    Wt::WComboBox    *language_;
    Wt::WPushButton  *newGameButton_;

    Wt::Signal<int>   scoreUpdated_;

    std::string       name_;
    Dictionary        dictionary_;
    int               badGuesses_;

    void registerGuess(char c);
    void newGame();
};

Tento widget je implementovaný ako špecializované WContainerWidget. To je typické voľbou pre widgety, ktoré kombinujú ďalšie widgety v jednoduché rozloženie. Po zvykových postupov pre aplikácie widget, berieme voliteľný materskej kontajner ako posledný argument konštruktora. Sme vyhlásiť verejné metóda scoreUpdated(), ktorý poskytuje prístup k signálu, ktorý sa bude používať na označenie zmien používateľa skóre, ako hrá prostredníctvom hry. Signál<int> tu používa, naznačuje, že celočíselnú hodnotu budú odovzdané ako informácie o udalosti, a bude odrážať skóre aktualizovať sám (pozitívne, keď používateľ výhry, alebo negatívne, ak používateľ stráca). Všetky funkcie alebo metóda objektu s podpisom kompatibilný so signálom môže byť pripojený k nej a dostane skóre update.

V súkromnej sekcii triedy vyhlásenia drží odkazy na obsiahnuté widgety, a štátu, súvisiace s hrou.

Konštruktér vykonávanie ukazuje niektoré podobnosť s hello world aplikácia sme diskutovali skôr: widgety sú konkretizovať a udalosti signály sú viazané. Tam sú niektoré novinky však.

HangmanWidget constructor
using namespace Wt;

HangmanWidget::HangmanWidget(const std::string &name, WContainerWidget *parent)
    : WContainerWidget(parent),
      name_(name),
      badGuesses_(0)
{
    setContentAlignment(AlignCenter);

    title_ = new WText(tr("hangman.readyToPlay"), this);

    word_ = new WordWidget(this);
    statusText_ = new WText(this);
    images_ = new ImagesWidget(MaxGuesses, this);

    letters_ = new LettersWidget(this);
    letters_->letterPushed().connect(this, &HangmanWidget::registerGuess);

    language_ = new WComboBox(this);
    language_->addItem(tr("hangman.englishWords").arg(18957));
    language_->addItem(tr("hangman.dutchWords").arg(1688));

    new WBreak(this);

    newGameButton_ = new WPushButton(tr("hangman.newGame"), this);
    newGameButton_->clicked().connect(this, &HangmanWidget::newGame);

    letters_->hide();
}

Hm podporuje rôzne techniky na rozloženie widgetov, ktoré môžu byť kombinované (pozri tiež sidebar): konkrétne aplikácie widget s CSS layout, HTML templates  s CSS layout, alebo layout managers. Tu sme sa rozhodli použiť prvý prístup, pretože sme jednoducho chcú dať všetko vertikálne centrované.

Ďalšie možnosti rozloženia

Hoci rozloženie manažéri sú známe koncepcie v GUI rozvoj CSS je kráľ rozloženie vývoj webových aplikácií. Niektoré veci sú ťažké urobiť s CSS, aj keď, najmä vertikálne centrovanie alebo vertikálnu veľkosť úpravy. To je pre tento účel, že rozloženie manažéri boli pridané k Wt. Tieto rozloženie manažéri používajú JavaScript na výpočet šírky a/alebo výška widgety na základe rozmerov ďalšie widgety.

LetterWidget odhaľuje signál, ktorý označuje, že používateľ vybral list. Sme sa spojiť súkromné metóda registerGuess(), ktorý implementuje hra logika sa zaoberá list vybrať. Všimnite si, ako táto udalosť manipulácia pre vlastný widget je nič iné, ako reagoval na udalosti zo tlačidlo, robiť, že widget, rovnako opakovane ako widgety, ktoré poskytol knižnici (za predpokladu, že ste v obchodnom kat hry).

Na podporu internacionalizácie, používame tr("kľúč") funkcie (ktorá je vlastne metóda WWidget, ktoré hovoryWString::tr()na vyhľadávanie (lokalizované) reťazec, vzhľadom na kľúč. To sa deje v správe zdrojov zväzku (pozri WMessageResourceBundle),, ktorý obsahuje locale-konkrétne hodnoty pre tieto struny. Hodnoty môžu byť arg() metódou WString, ako sa používa napríklad  “hangman.englishWords” reťazec, ktorý má ako skutočné anglický hodnota e “English words ({1} words)”.

Pre úplnosť, ukážeme nižšie zvyšok HangmanWidget implementácie.

HangmanWidget: hra logika vykonávanie( game logic implementation)
void HangmanWidget::newGame()
{
    WString title(tr("hangman.guessTheWord"));
    title_->setText(title.arg(name_));

    language_->hide();
    newGameButton_->hide();

    Dictionary dictionary = (Dictionary) language_->currentIndex();
    word_->init(RandomWord(dictionary));
    letters_->reset();
    badGuesses_ = 0;
    images_->showImage(badGuesses_);
    statusText_->setText("");
}

void HangmanWidget::registerGuess(char c)
{
    bool correct = word_->guess(c);

    if (!correct) {
        ++badGuesses_;
        images_->showImage(badGuesses_);
    }

    if (badGuesses_ == MaxGuesses) {
        WString status(tr("hangman.youHang"));
        statusText_->setText(status.arg(word_->word()));

        letters_->hide();
        language_->show();
        newGameButton_->show();

        scoreUpdated_.emit(-10);
    } else if (word_->won()) {
        statusText_->setText(tr("hangman.youWin"));
        images_->showImage(ImagesWidget::HURRAY);

        letters_->hide();
        language_->show();
        newGameButton_->show();

        scoreUpdated_.emit(20 - badGuesses_);
    }
}

4.2. Uvoľnenie (niektoré) Wt napájanie

Až teraz sme zaviedli pomerne unikátny spôsob, ako vytvoriť webové aplikácie a silný stavebný kameň pre opätovné použitie – widget. Ďalšiu miniaplikáciu v Kat hry, ktoré budeme riešiť, je jedným sme už použité len staršie: ImagesWidget. To ilustruje dôležitým aspektom knižnica, že vysoko zvyšuje užívateľský komfort pre užívateľov s Ajax relácie (ktorá by mala byť väčšina používateľov). Jeden z najviac atraktívne funkcie obľúbených webových aplikácií, ako je Google, v službe Gmail a Google Mapy je vynikajúce odozvy. Spoločnosť Google môže strávili nejakú úsilie na vývoj na strane klienta, JavaScript a Ajax kód na dosiahnutie tohto cieľa. S minimálnym úsilím – vskutku takmer automaticky – môžete získať podobné reakcie pomocou Hm, a naozaj knižnice používajú podobné techniky na dosiahnutie tohto cieľa. Pekný bonus pomocou Wt je, že aplikácia bude stále fungovať správne, keď Ajax alebo podpora JavaScript nie je k dispozícii. ImagesWidget triedy, ktoré budeme diskutovať ďalej obsahuje niektoré z týchto techník. Skryté sú widgety prefetched prehliadač, pripravený sa zobrazí po show() je tzv.

ImagesWidget: realizácia(implementation)
ImagesWidget::ImagesWidget(int maxGuesses, WContainerWidget *parent)
    : WContainerWidget(parent)
{
    for (int i = 0; i <= maxGuesses; ++i) {
        std::string fname = "icons/hangman";
        fname += boost::lexical_cast<std::string>(i) + ".png";
        WImage *theImage = new WImage(fname, this);
        images_.push_back(theImage);

        theImage->hide();
    }

    WImage *hurray = new WImage("icons/hangmanhurray.jpg", this);
    hurray->hide();
    images_.push_back(hurray);

    showImage(HURRAY);
}

void ImagesWidget::showImage(int index)
{
    image(index)->hide();
    image_ = index;
    image(index)->show();
}

WImage *ImagesWidget::image(int index) const
{
    return index == HURRAY ? images_.back() : images_[index];
}

V konštruktér, stretávame sa jedna základné widget z knižnice: WImage, ktorý nie je prekvapením zodpovedá obrázok v HTML. Kód ukazuje, ako widgety, ktoré zodpovedajú jednotlivým štátom kat príklade sú vytvorené a pridaný do nášho ImagesWidget, ktorá sa špecializuje WContainerWidget. Každý obraz je tiež skryté – sme si chcete zobraziť iba po jednom, a to je realizovaný v  showImage() funkcie.

Ale prečo sme sa vytvoriť tieto snímky, iba schovať? Platný alternatíva môže byť jednoducho vytvoriť WImage, ktoré chceme zobraziť a vymazať predchádzajúce, alebo ešte lepšie, jednoducho manipulovať obrázok, ukážte na inú adresu URL? Rozdiel má čo robiť s reakčným časom, aspoň keď Ajax je k dispozícii. Knižnica prvý omietok a prevody informácie viditeľné widgety na web prehliadač. Keď viditeľná časť web stránky je vykreslený v pozadí, zostali skryté widgety sú zrealizované a vložená v DOM strome. Webové prehliadače bude aj načítajte obrázky odkazuje na tieto skryté widgety. Ako dôsledok, keď užívateľ klikne na list tlačidlo a musíme aktualizovať kat obrázok, sme jednoducho skryť a zobraziť správny obraz widget, a to už vyžaduje nový obrázok, ktorý sa má načítať. Alternatívna realizácia by spôsobili prehliadač načítať nový obrázok, takže aplikácie sa zobrazujú pomaly. Pomocou skryté widgety je tak jednoduchý a účinný spôsob, ako načítajte obsah v prehliadači a zvýšiť účinnosť vašej žiadosti. Dôležité pamätať je, že tieto skryté widgety neznemožní aplikácii načítať čas, pretože viditeľné widgety sú prevedené ako prvý. Jasné win-win situácia tak.

4.3. Vnútorný cesty

Ignorovanie prihlasovacia obrazovka na chvíľu, potom naša aplikácia má dva hlavné windows: hra sama o sebe a vysoké skóre. Tieto sa realizujú HangmanWidget, ktoré sme popísané vyššie, a HighscoreWidget, (ktoré sme nebude diskutovať v tento návod). Obaja sú obsiahnuté pomocou WStackedWidget, ktoré je kontajner, v widget, ktorý zobrazuje iba jedna z jeho obsiahnuté deti v čase (a ktoré, vo všetkej počestnosti sme mali použité na realizáciuImagesWidget, boli to nie že by sme chceli vysvetliť, trochu viac o preloading obsah). Ak sme niečo o tom, Wt aplikácie sa prezentuje ako jednu adresu URL, a je teda len jednu stránku webovej aplikácie. To nie je nevyhnutne zlé, ale to môže byť lepšie, podpora viacerých adries Url, ktoré používateľovi na navigáciu v rámci vašej aplikácie, záložky najmä “pages”, alebo dať odkazy na ne. To tiež napomáha odomknúť obsahu v rámci vašej aplikácie pre vyhľadávacie roboty. Hm vám poskytuje spôsob, ako spravovať adresy Url, ktoré sú podcesty žiadosti URL adresa, ktorá sa nazýva “vnútorné cesty”.

img/internalpath.png

Vnútorný cesty sú najlepšie použiť v kombinácii s kotvy (za predpokladu, iný základné widget, WAnchor). Kotvový bod môže buď na externé adresy Url, na súkromné aplikácie resources (ktoré sme si nie diskutovať, ale sú užitočné pre dynamické non-HTML obsah), alebo vnútorným cesty. Keď sa takýto kotva je aktivovaný, toto sa mení aplikácie URL (ako by sa dalo očakávať), a internalPathChanged() signál vysiela. Teda, reagovať na vnútornú cestu zmeny, sme sa pripojiť event handler pre tento signál.

Vnútorné cesty: dokonalú ilúziu

Normálne, keď používateľ prejde odkaz, prehliadač získa dokument prepojená a nahrádza HTML stránky s nové stránky. Tento systém “celá stránka sa obnoví” spôsobí, že prehliadač re-vykresliť celú stránku každý čas, a to je presne to, čo Ajax prišiel, aby sa zabránilo. Pomocou nových funkcií v HTML 5 (JavaScript História podpory), a padali na triky, ktoré zahŕňajú adresu URL fragmenty v starších prehliadačoch, Wt vytvára ilúziu navigácia novej stránke, ale namiesto toho používa Ajax na aktualizáciu stránky odrážať zmenu adresy URL a navigácia udalosti. V rovnakom čase, vyhľadávače a jednoduché HTML stretnutie bude zobrazenie vašej žiadosti pomocou úplnej stránka sa obnoví.

Toto je implementácia metódy, ktoré sme sa pripojili:

HangmanGame: vnútorná cesta manipulácia(internal path handling)
void HangmanGame::handleInternalPath(const std::string &internalPath)
{
    if (session_.login().loggedIn()) {
        if (internalPath == "/play")
            showGame();
        else if (internalPath == "/highscores")
            showHighScores();
        else
            WApplication::instance()->setInternalPath("/play",  true);
    }
}

Teda, ak je užívateľ prihlásený, ukázali sme hru, keď cesta je "/play") a vysoké skóre, keď cesta je "/highscores". Pre dobrú formu, sme presmerovať všetky iné cesty na "/play"), (ktoré sa nakoniec vyvolali rovnakú funkciu znova). V našej hre sme, aby overovanie (či je používateľ prihlásený) orthogonal na vnútornej cesty: týmto spôsobom sa používateľ môže prísť na hru pomocou akéhokoľvek vnútorného cestu, prihláste sa a automaticky pokračujte s funkciou pre túto vnútornú cestu. Môžete si predstaviť, že toto je to, čo budete chcieť, komplexná aplikácia: prihlásenie funkcia by nemala brániť užívateľ priamo chystáte sa na určité “page” v rámci vašej aplikácie.

Nemuseli sme diskutovať o iných častiach hry katom príklad použitia: a to ako užívateľ skóre sú uložené, a overovanie systému. Prístup k databáze je realizované pomocou Hm::Dbo, ktoré je C++ ORM, ktorý je dodávaný s Hmot.  This tutorial zavádza databázovú vrstvu. Autentifikačný modul, Hm::Auth, ktoré sú použité v tomto príklade, je [introduced here.

5. Zhrnutie

V tomto tutoriálu sme vám poskytla základné techniky pre tvorbu webových aplikácií s použitím Wt, od malých až po zložitejšie. Zatiaľ čo tutoriál je žiadne miesto, diskutovať v reálnom živote komplexné aplikácie s malým skok viery, malo by byť jasné, že techník vytvárania aplikácií používanie aplikácií widget ako stavebné bloky, poskytuje účinný spôsob, ako spravovať zložitosť (a vyvíja funkcie), zatiaľ čo uvoľnenie vývojár aplikácie mnohých technické aspekty a vtipy spojené s web platformu. Vzhľadom na mnohé podobnosti medzi Wt a iné GUI sadám nástrojov, vývojári môžu liečiť webový prehliadač v mnohých aspektov ako len ďalší GUI platformu.

V tomto tutoriále sme sa dotkol mnohých dôležitých Wt funkcie. Ale Wt pridá oveľa viac pre vaše toolbox, ktoré neboli spomenuté: uploadovať súbory, dynamické zdrojov, maľovanie, strom a tabuľke názorov a ich modely, grafy knižnica, efekty animácie, WebSockets, vstavané bezpečnostné opatrenia, overovanie, atď… Pre viac informácií nájdete v dokumentácia online.

6. Ďalšie kroky

Možno budete chcieť pokračovať učenie o Wt pomocou:

Leave a Reply

Your email address will not be published. Required fields are marked *