The objective of this lesson is to show you how to make a simple web page navigation using Wt. Before starting you have to remember that Wt can be used to create 1 URL applications. That means you can have a full application that runs using just one URL. However it is also useful to give your users different URL’s to take advantage of some browser features like bookmarks or the back and forward buttons.

The skeleton we are going to create is to give you the following structure:

Let’s talk about the code.

• The onInternalPathChange function is the one in charge of switching the contents of your web page depending on your URL.
• The functions home and page1 show the main contents of your webpage. Something interesting here is that I’m using two ways to create internal links. The first one (the one shown in home) uses a regular anchor embedded in a string. You have to notice that the link “#/page1” includes a pound sign at the beginning. That is necessary so the setInternalPathEncoding function can turn it later into a functional link. The second way to create a link uses the WAnchor and WLink classes. WLink takes two arguments: the link type (in this case we have an internal link, so we use InternalPath) and a destination (we are using “/” because we want to send the user to the root page). WAnchor takes three arguments: a WLink, a string (which is the anchor text that the user sees on his browser) and the parent container.
• header, footer and sidebar are general functions. In my case, they are always shown. You could later create classes that inherit from WContainerWidget to turbo charge them. For formatting purposes you should also take a look at the different layout options Wt offers.

Here is the code:

#include <Wt/WAnchor>
#include <Wt/WApplication>
#include <Wt/WContainerwidget>
#include <Wt/WLink>
#include <Wt/WText>

using namespace Wt;

class ControlExample: public WApplication {
private:
    std::string appName;
    WContainerWidget* _content;

public:
    ControlExample(const WEnvironment &env): WApplication(env) {
        appName = "Application Name";
        setTitle(appName);
        _content = 0;
        internalPathChanged().connect(this, &ControlExample::onInternalPathChange);

        header();
        home();
        sidebar();
        footer();
    }

    WContainerWidget* content() {
        if (_content == 0) {
            _content = new WContainerWidget(root());
            _content->setId("content");
        }
        return _content;
    }

    void onInternalPathChange() {
        content()->clear();
        if (internalPath() == "/") {
            home();
        }
        else if (internalPath() == "/page1") {
            page1();
        }
    }

    void header() {
        WContainerWidget* header = new WContainerWidget(root());
        header->setId("header");
        header->addWidget(new WText("<h1>" + appName + "</h1>"));
    }

    void sidebar() {
        WContainerWidget* sidebar = new WContainerWidget(root());
        sidebar->setId("sidebar");
        sidebar->addWidget(new WText("Sidebar Information"));
    }

    void footer() {
        WContainerWidget* footer = new WContainerWidget(root());
        footer->setId("footer");
        footer->addWidget(new WText("Developed using C++/Wt"));
    }

    void home() {
        WText *t = new WText("<strong>Home</strong> content and a link to <a href='#/page1'>page1</a>");
        t->setInternalPathEncoding(true);
        content()->addWidget(t);

    }

    void page1() {
        content()->addWidget(new WText("<strong>Home</strong> content and a link to "));
        WAnchor* a = new WAnchor(WLink(WLink::InternalPath, "/"), "home", content());
    }

};

WApplication* createApplication(const WEnvironment &env) {
    return new ControlExample(env);
}

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

Important: in order to run this application I have changed my –deploy-path argument in the command line to the following:

--http-address=0.0.0.0 --http-port=8080 --deploy-path=/ --docroot=.

As with all my previous Wt examples, you have to select and copy this code into a single .cpp file. Check out my Hello World entry to find more information about building the application.

The application should run showing something like this:

Happy coding.