Back to site
Since 2004, our University project has become the Internet's most widespread web hosting directory. Here we like to talk a lot about web development, networking and server security. It is, after all, our expertise. To make things better we've launched this science section with the free access to educational resources and important scientific material translated to different languages.

Web Toolkit - Wt

Pieter Libin <pieter@emweb.be>
Koen Deforche <koen@emweb.be>
Wim Dumon <wim@emweb.be>

1. Uvod

Wt je C++ biblioteka za razvoj web aplikacija. Priznat, C++ nije palo na pamet da će biti prvi izbor za programski jezik kada se govori o razvoju web-a. Web razvoj se obično povezuje sa skript jezicima, i obično se sprovodi na nivou generisanja odgovora na dolazni zahtev. Pošto su oba zahteva i odgovori tekstualno kodirani, web programiranje je na kraju zadatak obrade teksta, a samim tim je pogodno za izražavanje u skript jeziku.

Ipak, sa funkcionalne tačke gledišta, i kao programski zadatak, moderna web aplikacija više podseća na desktop aplikaciju: interaktivna je i ne organizuje se u stranama (možda još uvek konceptualno, ali ne i fizički). Interakcija sa serverom dešava se sve više i više u pozadini a osvežava se na ne kompletnim stranicama. Zaista, pretraživač se transformiše u platformu za aplikacije gde korisnici stupaju u interakciju sa podacima i češće nego jedni sa drugima.

Dok su neki programeri odlučili da sprovedu aplikaciju u JavaScript i koriste klijent-server protokol za pristup strani resursa servera, to ima veliki broj svojstvenih nedostataka. Morate da pustite statičko kucanje (ili dodajte još jedan sloj, kao što je GWT). Tip bezbednosti, sprovodi se od strane kompajlera, i neprocenljivo je kako projekat raste u složenosti i u broju programera. Osim toga potrebno vam je da dizajnirate klijent-server protokol i da minimizirate komunikaciju i prateće povratne latencije. Konačno, ovaj pristup ne može da radi za aplikacije koje treba da ispune smernice pristupačnosti ili treba da bude optimizovan pretraživač i stoga zahteva samo HTML-ovu verziju aplikacije. Wt, kao rešenje na strani servera, prevazilazi ove probleme, i sa malo ili nimalo interaktivnosti gubitka u odnosu na JavaScript aplikaciju.

Glavna prednost Wt nad ostalim stranama pristupa servera je njena komponenta apstrakcije. Aplikacija se definiše u hijerarhiji kao komponenta. Neki od tih komponenti su generičke i obezbeđene su od strane biblioteke (kao taster, linija izmene, tabela pogleda...) i druge su specijalizovane za određenu aplikaciju ( npr. cela komponenta bloga). Komponenta sažima pogledom i ponašanjem aspekte, troši i proizvodi događaje i takođe učestvuje u URL rukovanju zajedno sa drugim HTTP resursima. Češće ne nego, komponenta delegira stvarnu “logiku” na modelu, slojeviti pristup obično poznat kao MVC. Komponenta za razliku od strane ili “partlet” ima istinsku višekratnu upotrebu, prilagodljivu i proširivu izgradnju bloka (kao poster-dete Objektno-Orijentisano Programiranje) za modernu web aplikaciju. Stvarni zahtev za rukovanje i prikazivanje se apstrahuje, što koristi da se cela strana prikazanog modela (HTML-a) ili postepene ispravke (Ajax/WebSockets) koje mogu da se koriste u zavisnosti od konfiguracije i svojstava pretraživača. .

Iako je realizovan u C++, Wt glavni fokus ili novina nije njegov nastup, već je njegov fokus na razvoju održavanja aplikacije i svoju veliku ugrađenu biblioteku komponenti. Ali zato što je popularna i široko korišćena u ugrađenim sistemima, naći ćete taj učinak i stopa-štampe je takođe optimizovana, na osnovu jedne ne-besmislene API, promišljene arhitekture, C++ …

U ovom upustvu koristiti ćemo dve komponente da ilustruju kako se koristi Wt za kreiranje web aplikacije. Posle ovog upustva treba da imate dobro shvatanje onoga što su mogućnosti, kako se grade Wt aplikacije, i koji vam nudi alat za kompleksno upravljanje.

Prva primena je obavezna Hello World aplikacija i uvodi dva ključna koncepta biblioteke: stvara i ažurira stablo komponenti i reaguje na korisnički unos. Druga, nešto veća primena je klasična igra egzekutora . Obe aplikacije su uključene u Wt izvornu distribuciju..

Ali pre nego što zaronite, hajdemo brzo preći preko osnovnih koncepata biblioteke.

2. Glavne komponente

2.1. Komponente

Korisnički interfejs, prikazan u prozoru pretraživača, koji je odredio održavanje i stvaranje stabla komponenti. Svaka komponenta odgovara pravougaonom delu korisničkog interfejsa, i upravlja sa sadržajem i ponašanjem. U jezgru, biblioteka preuzima odgovornost za dva zadatka u okviru jedne sesije: (1) pruža stablo komponente u HTML/JavaScript u web pretraživaču, i prati promene kao inkrementalno ažuriranje, i (2) sinhronizacija korisničkog unosa i prenosi događaje iz pretraživača na ove komponente.

Zbog jasnog razdvajanja između specifikacije korisničkog interfejsa pomoću prikazivanja stabla komponenti, biblioteka realizuje nekoliko optimizacija za prikazivanje kada je Ajax na raspolaganju. Ne samo da biblioteka ažurira postepeno interfejs, postoje i drugi trikovi poput prikazivanja vidljivih komponenti promena kao odgovor na događaj ( ili početno učitavanje), i na promene u pozadini prikazanih skrivenih komponenti. Kao posledica toga, inicijalna reakcija je optimizovana i izgled naknadnih komponenti se brzo pojavljuju.

2.2. Sesija upravljanja i vek trajanja

Drugi aspekt koji u potpunosti upravlja bibliotekom je sesija menadžmenta. Za svaku novu sesiju, koja odgovara novom korisniku koji pristupa svojoj web aplikaciji, biblioteka stvara nov WApplication objekt. Kao programer, možete da prilično primenite neku aplikaciju kao jednu-korisničku aplikaciju, ako dozvolite korisnicima da komuniciraju sa zajedničkim komponentama (kao što su baze podataka), ili jedni sa drugima, za koje moraju koristiti standardne podatke za razmenu mehanizama.

U zavisnosti od modela raspoređivanja, biblioteka će mapirati sesiju na posvećenim ili podeljenim procesima. Kada koristite posvećene nove procese proces se kreira za svaku sesiju posebno, to pruža kernel nivou izolaciju različitih sesija, koje mogu biti korisne za veoma osetljive bezbednosne aplikacije. Kada koristite zajedničke procese nove sesije se nasumično dodeljuju jednom od procesa na raspolaganju u biblioteci. Ovo smanjuje opasnost za DoS napade, ali zahteva više pažljivog programiranja kao memorija protiv korupcije koja utiče na sve sesije u jednom procesu, i sesija nije izolovana od bilo kog drugog mehanizma osim pravilnog programiranja.

Wt koristi za održavanje u životu protokol između klijenta i servera da se utvrdi vek trajanja sesije. Dokle god se web stranica prikazuje u pregledaču korisnika, sesija se održava. Kada korisnik zatvori svoj prozor, udaljene navigacije, ili nakon isteka vremena kada se veza izgubi, sesija bude prekinuta. Kada se sesija prekida, objekat aplikacije, zajedno sa čitavim stablom komponenti se briše, zato treba osloboditi resurse koji drže svoje komponente ili aplikaciju rušenja ovih objekata.

2.3. Razvoj

Nekoliko primena opcija koje su dostupne:

  • Wthttpkonektor biblioteke implementira web server koji implementira HTTP (S) i WebSockets. To nije samo zgodan tok razvoja, već i efikasno rešenje za raspoređivanje počev od malih ubačenih sistema ili mobilnih uređaja do multi-server razvoja.

  • Wtfcgi Wtfcgi konektor biblioteke realizuje FastCGI protokol. To omogućava Wt aplikaciji da se integriše u postojeći web server (kao što su Apache, Lighttpd ili Nginx).

  • Wtisapi Wtisapi konektor biblioteke realizuje ISAPI protokol. Windows platforma, omogućava Wt aplikaciji da se integriše u Microsoft Internet Information Server (IIS).

3. Zdravo, Wt

U ovom primeru,, smo pokazali aplikaciju koja podstiče korisnika da očekuje ime. Kada pritisne dugme, pozdravni tekst se ažurira na osnovu imena koje je uneto.

img/hello.png

Nova sesija počinje sa stvaranjem instance časa WApplication. Ovim objektom upravlja rut stablo komponente i sadrži druge informacije sesija, kao što je mogućnost priključenih pregledača.

A complete "Hello world" application
#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);
}

Možete napraviti i pokrenuti lokalno ovu aplikaciju, ako želite. Sve što treba da uradite je da gore sastavite kod i link protiv Wt biblioteke (libwt) i ugrađenog HTTP servera (libwthttp).

Na UNIX sistemima, možete uraditi sledeće:

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

Ako dobijete link greške tokom prvog koraka, moglo bi biti potrebno da dodate više biblioteka:

$ 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čnimo sa poslednjeg dela aplikacije, glavna () funkcija.

Glavnu () funkciju, zovemo WRun() da pokrene server aplikacije. Ovaj metod će se vratiti kada se server aplikacije gasi ( kada se uhvati KILL signal ili Windows ekvivalent).

Sadržina WRun()

WRun() WRun() je zapravo pogodna funkcija koja kreira i konfiguriše WServer instancu. Ako želite više kontrole, na primer, ako imate više “polazniih tačaka”, ili želite da kontroliše pokretanje i zaustavljanje servera, možete da koristite WServer umesto API direktno.

WRun() funkcija prolazi argc i argv ((koja za neke konektore koji su ugrađeni u web server konfiguriše server), i prihvaća funkciju objekat kao poslednji argument. Ovu funkciju će te zvati kada nova sesija počne i vraća novu instancu WApplication za tu sesiju. Ova funkcija, zauzvrat, ima ulaz u WEnvironment objekat, i ovaj objekat može da se koristi za prilagođavanje aplikacija ili potvrdu identiteta korisnika.

Primer instanciranja četiri komponente u osnovnom pakovanju aplikacije: tekst ("Vaše ime, molim vas?"), linija izmene (nameEdit_), prazan tekst (pozdrav_) i taster (button). Ove tri vrste komponenti su generički dodaci koje pruža biblioteka,i mapira direktno na prirodnom HTML elementu. U primeru ispod egzekutor ćemo videti kako druge uobičajene prakse i više specijalizovanih komponenti koriste isti način.

Nakon što smo instacirali u komponentu, mi smo naveli da želimo da reaguje na klik na dugme. Mi povezujem pozdravni () metod na taster je kliknuo () signal. Događaji propagiraju od jedne komponente (dugme) na druge komponente ili, kao u ovom slučaju, primenu objekta, koristeći signale. Brzim pogledom na referentnu dokumentaciju komponenta navodi signale koji su izloženi određenim komponentama. Za osnove komponente, kao što je taster tipičan je miš i tastatura događaja. Viši-nivo komponente može reklamirati druge događaje ( na primer, calendar widget) has a ima izbor promene() signala), možete da dodate događaje sopstvenim prilagođavanje komponenti.

Kako događaj propagiranja funkcioniše

Kada je događaj izazvan od strane korisnika, web pretraživač komunicira sa ciljnim objektom i daje odgovarajući signal zajedno sa svim podacima obrasca na web serveru (koristeći punu osveženu stranicu ili Ajax/WebSockets). Na serveru, nakon što je zahtev potvrđen kao pravi, podaci iz obrasca, kao što su linije za uređivanje teksta kada prvi put obrađujete ažurirajte stanje grananja komponenti. Zatim, događaj propagira emitujući signal sa ciljnom komponentom, koji se prostire na događaj svih povezanih metoda, kao što su u našem primeru za pozdraviti () metodu. Modifikacije na komponenti stabla se prate, a nakon događaja se rukuje sa ovim promenama koje se odražavaju na izrečeno HTML DOM stablo, opet koristeći punu osveženu stranicu ili postepeno koristiti Ajax ili WebSockets.

Najinteresantnija stvar o sprovođenju pozdravne () metode može biti kod koji ne postoji: ne JavaScript za ažuriranje teksta pomoću DOM manipulacije ili da ponovo prikazuje stranu, ne JavaScript kod za slanje događaja kraj linije sa izmenjenom vrednošću korišćenjem Ajax-a i WebSockets, ne HTTP zahtev dekodiranja da tumači linije izmenjene vrednosti ili dugme dođaja, i nema sigurnosti u vezi koda. Sve ovo je umesto upravljanja biblioteke. Iako ovo može da bude i dalje upravljanje za mali primer, zamislite situaciju u kojoj stranica sadrži različite forme elemenata koji se odnose na različite zadatke i time upravlja različitim komponentama, kao i da se tokom događaja propagira mnogo nezavisnih komponenti za ažuriranje. .

4. Egzekutor

Za one od vas koji je zaboravio igru-igru egzekutor: izazov je pogodite reč. Možete izabrati slovo,jedno po jedno. Ako reč sadrži izabrano slovo, što je naznačeno na ispravnoj lokaciji. Ako reč ne sadrži slovo, možete izgubiti zaokret i dobiti jedan korak bliže vešanju. Da bi pobedio, moraš da pronađeš reč pre nego što umrete viseći. U našoj verziji, mi ćemo korisniku izabrati rečnik (Engleski ili Holandski), i mi ćemo pratiti korisnika i njegove visoke-bodove.

4.1. Prvi običaj komponenti

Prvo smo razgovarali o komponenti egzekutor, koji je običan dodatak koji sažima samu igru: omogućava korisniku da igra jednu ili više igara. Ne bavi se ažuriranjem bodova korisnika, umesto toga ukazuje na rezultat ispravki događaja na drugim komponentama koristeći signal.

TSledeći snimak pokazuje kako komponenta se sastoji od različitih komponenti:

img/hangman.png

Egzekutor komponente kombinuje komponente koje pruža biblioteka (WText: title_, statusText_, WComboBox: language_), i tri prilagođene komponente (WordWidget: word_, ImagesWidget: images_ and LettersWidget: letters). Kao što ćete videti prilagođene komponente su instance i koriste prilično isti način kao i biblioteka komponenti, uključujući reagovanje na generisane događaje od strane ovih komponenti.

Sa ovom informacijom, možemo implementirati definiciju časa. .

Deklaracija egzekutora komponente
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();
};

Ova komponenta je realizovana kao specijalizovana WContainerWidget. Ovo je tipičan izbor za komponente koje kombinuju druge komponente sa jednostavnim rasporedom. Nakon ustaljene prakse za komponente, uzimamo opciju nadređenog kontejnera kao poslednji argument konstruktoru. Mi proglašavamo jedan javni metod scoreUpdated(), rezultata, koji omogućava pristup na signal koji će se koristiti za indikaciju izmene rezultatom korisnika koji igra kroz igru. Signal<int> ovde se koristi, i ukazuje na to da će cela vrednost biti prosleđena kao informacija o događaju i da će odražavati rezultat ažuriranja (pozitivan kada korisnik pobedi, ili negativan kada korisik gubi). Svaka funkcija ili objekat metode sa potpisom koji je kompatibilan sa signalom može biti povezan sa njim i dobiće ažurirani rezultat.

Privatni deo časa deklaracije ima referencu na sadržane komponente, kao i stav u vezi sa igrom..

Konstruktor primene pokazuje neke sličnosti sa Hello World aplikacijom o kojoj smo ranije govorili: komponente su instance i signali događaja su vezani. Međutim postoje neke novine. .

Konstruktoregzekutor komponente
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();
}

Wt podržava različite tehnike za raspored komponenti koje se mogu kombinovati (vidi na traci sa strane): naime komponenti sa CSS formatom, HTML šabloni sa CSS formatom ili format menadžera. Evo, mi smo odlučili da koristimo prvi pristup, jer mi jednostavno želimo da stavimo sve vertikalno centrirano.

Druga opcija formata

Iako je poznat koncept format menadžera u GUI razvoju, CSS je kralj formata u web razvoju. Neke stvari je teško uraditi sa CSS,iako, posebno vertikalno centriranje ili vertikalne velilčine prilagođavanja. To je za ove svrhe gde su format menadžeri dodati u Wt. Ovi format menadžeri koriste JavaScript da izračunaju širinu i/ili visinu komponenti na osnovu dimenzija drugih komponenti.

LetterWidget Slovo komponente otkriva signal koji označava da korisnik izabere slovo. Mi povezujemo privatnu metodu registerGuess() to it, which do toga, koji implementira igru logike koja se bavi slovom trzalice. Obratite pažnju kako se ovaj događaj rukovanja prilagođava komponenti koja se ne razlikuje od reagovanje na događaj od tastera, praveći komponentu za višekratnu upotrebu kao komponentu pruža biblioteka (pod pretpostavkom da ste u poslu sa egzekutorom igre). .

Za podršku internacionalizaciji, mi koristimotr("ključ") funkciju (koja je zapravo WWidget metod koja poziva WString::tr(), da bi pronalaženje (lokalizovalo) string za davanje ključa. To se dešava u paketu poruke resursa (pogledaj WMessageResourceBundle), koji sadrži lokalne specifične vrednosti za ove string. Vrednosti mogu biti arg() metoda WString,koja se koristi na primer za “hangman.englishWords” string koji ima stvarnu englesku vrednost “Engleske reči ({1} reči)”.

Kompletno smo pokazali, ispod ostatka egzekutor komponente implementacije..

Egzekutor komponenta: implementacija igre logike.
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. Oslobađanje (neke) Wt moći

Do sada smo uveli prilično jedinstven način da se razvije web aplikacija, kao i moćan sastavni blok za ponovno korišćenje - komponenti. Sledećom komponentom u igri egzekutor ćemo se pozabaviti, jednu smo već koristili samo ranije ImagesWidget. To ilustruje važan aspekt biblioteke koja visoko poboljšava korisničko iskustvo sa jedne Ajax sesije (koja treba da bude za većinu vaših korisnika). Jedna od najprivlačnijih osobina popularne web aplikacije kao što su Google Gmail i Google Maps je odličan odgovor vreme. Google je proveo dosta napora u razvoju strane klijenta- JavaScript i Ajax koda da bi se postiglo ovo. Uz malo truda - u stvari gotovo automatski - možete dobiti sličan odziv pomoću Wt, i zaista biblioteka će koristiti slične tehnike da se to postigne. Lep bonus od koristi Wt je da će aplikacija i dalje funkcionisati ispravno kada Ajax ili JavaScript podrška nije dostupna. ImagesWidget čas, na kojima ćemo razgovarati o sledećem, sadrži neke od ovih tehnika. Skrivene komponente prefektirane od strane pretraživača, spremne da budu prikazane kada se pokaže () poziv.

ImagesWidget: implementacija
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);
        hangmanImages_.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 image)
{
    image(image_)->hide();
    image_ = index;
    image(image_)->show();
}

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

U konstruktoru, srešćemo još jednu osnovnu komponentu iz biblioteke: WImage,što ne iznenađuje odgovara slici u HTML-u. Kod pokazuje kako su komponente koje odgovaraju svakom stavu egzekutora kreiranog primera i dodato u naš ImagesWidget, koji je specijalizovan za WContainerWidget.Svaka slika se takođe krije - mi ćemo želeti da pokažemo samo jednu po jednu, i to se sprovodi u showImage() funkciji.

Ali zašto smo kreirali ove slike samo da bi ih sakrili? Važna alternativa može biti da jednostavno napravite WImage koju želimo da pokažemo i izbrišemo prethodnu, ili još bolje, da jednostavno manipulišemo slikom da ukažemo na druge URL adrese? Razlika ima veze sa vremenom odziva, bar kada je Ajax na raspolaganju. Biblioteka prva prikazuje i prenosi informacije vidljivih komponenti na web pretraživaču. Kada vidljivi deo web stranice prikazuje, u pozadini, preostale skrivene komponente su donete i ubačene u DOM stablo. Web pretraživači će takođe prethodno instalirane slike uputiti ovim skrivenim komponentama. Kao posledica toga, kada korisnik klikne na slovo dugmeta, mi treba da ažuriramo sliku egzekutora, jednostavno je sakrijemo i prikažemo ispravnu komponentu slike, i to više ne zahteva da učita novu sliku. Alternativna implementacija bi izazvala pregledač da donese novu sliku, aplikacija bi bila sporija. Korišćenje skrivenih elemenata je stoga jednostavan i efikasan način da se prethodno instalirani sadržaj u pretraživaču poboljša brzinu vašeg zahteva. Važno je zapamtiti da ove komponente ne ugrožavaju skriveno vreme učitavanja aplikacije, jer vidljive komponente su prvo prebačene. Jasna win-win situacija dakle.

4.3. Interni putevi

Ignorišite prijavu ekrana za trenutak, a onda naša aplikacija ima dva glavna prozora: sama igra i visoke ocene. Ovo se implementira od strane egzekutor komponente o kojoj smo govorili ranije, HighscoreWidget (o kojoj nećemo raspravljati u ovom uputstvu).Obe su sadržane u WStackedWidget, koja je kontejner komponente koja pokazuje samo jedno od svoje sadržane dece u jednom trenutku (i koja, iskreno mi je trebalo da koristim za sprovođenje ImagesWidget, to nije bilo pa smo želeli da objasnimo malo više o tom učitavanju sadržaja). Ako ne uradimo nešto na tome, Wt primena se predstavlja kao jedan URL, pa tako je jedna strana web aplikacija. Ovo nije nužno loše, ali možda bi bilo bolje da podrži više URL adresa koje omogućavaju korisniku da se kreće u okviru aplikacije, sačuva određenu “stranu”, ili stavi linkove na njih.Takođe je instrument za otključavanje sadržaja unutar vaše aplikacije za pretragu istrumenta robota. Wt vam pruža način da upravljate adresama koje su na putu aplikacije URL, koje se zovu “interni putevi”.

img/internalpath.png

Interni putevi se najbolje koriste u kombinaciji sa ankerima (pod uslovom da su druga osnovna komponenta WAnchor). Interni putevi se najbolje koriste u kombinaciji sa ankerima (pod uslovom da su druga osnovna komponenta sredstvima aplikacije (nećemo razgovarati o tome, ali su korisni za dinamičke bez URL sadržaje), ili interne puteve. Kada se takav anker aktivira, ova promena URL aplikacije (kao što se moglo očekivati), i internalPathChanged() signal se emituje. Tako, da odgovorim na unutrašnje promene putanje, moramo povezati događaj rukovanja za ovaj signal.

Interni putevi: savršena iluzija

Normalno, kada korisnik dolazi na vezu, pretraživač preuzima povezan dokument zamenjuje trenutu HTML stranicu sa novom stranicom. Ovaj sistem “punih osveženih stranica” izaziva pretraživač da se ponovo donese cela stranica svaki put, i da je tačno ono što je Ajax došao da izbegne. Koristeći nove funkcije u HTML 5 (JavaScript History podrška), opet pada nazad na trikove koje uključuju URL fragmenti u starijim pretraživačima, Wt stvara iluziju navigacije na novoj stranici, ali umesto toga koristi Ajax da ažurira stranicu odražavanja promene URL i navigaciju događaja. U isto vreme, pretraživač i obična HTML sesija će pregledati vašu aplikaciju pomoću pune osvežene stranice.

Ovo je primena metode koju smo povezali:

HangmanGame: 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);
    }
}

Tako, ako je korisnik prijavljen, prikazali smo igru kada putanja “/igraj" i visoki rezultati kada je put “/rekordi”. Za dobru formu, možemo preusmeriti sve druge puteve za “/igraj” ( koji će se završiti kada aktivira ponovo istu funkciju). U našoj igri pravimo autentifikaciju ( da li je korisnik trenutno prijavljen ortogonalan na internim putevima): na ovaj način korisnik može da dođe na igru koristeći svaku unutrašnju putanju, prijavite se i automatski nastavite sa funkcijom za taj unutrašnji put. Možete zamisliti da je to ono što želite u složenoj primeni: prijavljivanje funkcija ne bi trebalo da spreči korisnika da se direktno ide na određenu “stranicu” u okviru aplikacije.

Nismo razgovarali o drugim delovima aplikacije egzekutor igre primer: naime kako se čuvaju korisnički rezultati i autentifikacija sistema. Pristup bazi je implementiran pomoću Wt::Dbo, što je C++ ORM koji dolazi sa Wt. Ovo uputstvo predstavlja bazu podataka sloja. Autentičnost modula, Wt::Auth, kao što se koristi u ovom primeru je [uveden ovde.

5. Rezime

U ovom uputstvu ćemo vam obezedite osnovne tehnike za kreiranje web aplikacije pomoću Wt, od malih do složenih. Upustvo nije mesto da se razgovara u realnom životu složene aplikacije, sa malim skokom vere, trebalo bi da bude jasno da su iste tehnike stvaranja aplikacije pomoću komponenti kao gradivnih blokova, obezbeđujući efikasan način za upravljanje kompleksnosti ( i razvija osobine), a oslobađa programere aplikacija mnogih tehničkih aspekata i nepreciznosti povezanih sa web platformi. Zbog mnogo sličnosti između Wt i drugih GUI kompleta alata, programeri mogu tretirati web pretraživač u mnogim aspektima kao samo još jednu GUI platformu.

U ovom uputstvu smo se dotakli mnogih važnih Wt karakteristika. Ali Wt dodaje mnogo više svojoj kutiji sa alatima koje nismo pomenuli: fajlovi, dinamični resursi, slikarstvo, stablo i tabele pogleda i njihovi modeli, grafikoni biblioteka, animacija efekata, WebSockets, ugrađene bezbednosne mere, autentičnosti, itd...Za više informacija, molimo vas pogledajte online dokumentaciju..

Published (Last edited): 05-03-2013 , source: http://webtoolkit.eu/wt/doc/tutorial/wt.html