Wt

Your simple code is way too simple.

I don't know if you are using Windows/Mac/Linux, but look in Wt/examples (assuming you built and installed the examples) and run widgetgallery.

There is a file called Navigation.C that builds a navbar. Also look in Main.C where the bootstrap5 theme is loaded along with the stylesheets. If you don't load the bootstrap5 theme explicitly, it defaults to something other than bootstrap5.

Hi Alex,

as Mark pointed out, the underlying cause is that the right theme is not enabled. The navigation bar doesn't play nicely with the default or polished themes. You will need to use Bootstrap 2 at least.

I think I am having the same problem as Alex.

#include "EmperorApplication.h"

int main(int argc, char **argv)
{
    return Wt::WRun(argc, argv, [](const Wt::WEnvironment& env) {
        auto app = std::make_unique<EmperorApplication>(env);
        app->setTheme(std::make_shared<Wt::WBootstrap5Theme>());
      return app;
    });
}

#include "HeaderComponent.h"

HeaderComponent::HeaderComponent() : Wt::WStackedWidget() {
    navigation_ = this->addNew<Wt::WNavigationBar>();
    // navigation_->setResponsive(true);
    navigation_->addStyleClass("navbar-light bg-light");
    navigation_->setTitle("Bossdio",
                     "https://www.google.com/search?q=bossdio");

    Wt::WStackedWidget *contentsStack = this->addNew<Wt::WStackedWidget>();
    contentsStack->addStyleClass("contents");

    // Setup a Left-aligned menu.
    auto leftMenu = std::make_unique<Wt::WMenu>(contentsStack);
    leftMenu_ = navigation_->addMenu(std::move(leftMenu));

    auto searchResult = std::make_unique<Wt::WText>("Buy or Sell... Bye!");
    searchResult_ = searchResult.get();

    leftMenu_->addItem("Home", std::make_unique<Wt::WText>("There is no better place!"));
    leftMenu_->addItem("Layout", std::make_unique<Wt::WText>("Layout contents"))
        ->setLink(Wt::WLink(Wt::LinkType::InternalPath, "/layout"));
    leftMenu_->addItem("Sales", std::move(searchResult));
    leftMenu_->addStyleClass("me-auto");

    // Add a Search control.
    auto editPtr = std::make_unique<Wt::WLineEdit>();
    auto edit = editPtr.get();
    edit->setPlaceholderText("Enter a search item");

    edit->enterPressed().connect([=] {
      leftMenu_->select(2); // is the index of the "Sales"
      searchResult_->setText(Wt::WString("Nothing found for {1}.")
                                     .arg(edit->text()));
    });

    navigation_->addSearch(std::move(editPtr));
}

I am on ALT Linux , Firefox

command

./WtEmperor --docroot . --http-listen 0.0.0.0:9090

You need to put these widgets into WContainerWidgets or they will never get painted to the screen.

I think I did

#include "EmperorApplication.h"
#include "HeaderComponent.h"
#include "Wt/WSpinBox.h"

EmperorApplication::EmperorApplication(const Wt::WEnvironment& env)
    : Wt::WApplication(env)
{
    auto container = root()->addWidget( std::make_unique<Wt::WContainerWidget>() );
    container->addWidget(std::make_unique<HeaderComponent>());
    Wt::WSpinBox *sb = container->addNew<Wt::WSpinBox>();
    sb->setRange(0,2);

    Wt::WStackedWidget *stack = container->addNew<Wt::WStackedWidget>();
    stack->addNew<Wt::WText>("<strong>Stacked widget-index 0</strong><p>Hello</p>");
    stack->addNew<Wt::WText>("<strong>Stacked widget-index 1</strong><p>This is Wt</p>");
    stack->addNew<Wt::WText>("<strong>Stacked widget-index 2</strong><p>Do you like it?</p>");

    sb->changed().connect([=] {
        if (sb->validate() == Wt::ValidationState::Valid)
            stack->setCurrentIndex(sb->value());
    });
}

Hello moni,

the widget gallery is able to display a navigation bar in Bootstrap 5.
Does the log (either Wt's log or the browser's log) show any missing resources? I think you may be missing a resource (so that Bootstrap cannot apply the right styling/js).

If this is the case, you may need to point the application to the right resources (e.g. --resources-dir=/home/matthias/install/wt/share/resources). The path should contain the items found in the repo here.

Let me know if that did not help!

Best,
Matthias

Thanks Matthias and Mark,

I think there's no missing resources.

The WStackedWidget works when everything is in one cpp file. Maybe I don't understand C++ inheritance yet. Doesn't seem to work if i move it to a separate class inheriting from WStackedWidget and use ->addWidget() or ->addNew().

I'll keep digging where I went wrong.

Thanks

Hi again Matthias and Mark,

Found my problem. I tried to nest WStackedWidget within WStackedWidget. Mark was right it needs to be in WContainerWidget.

Thanks it works now.