Wt

Hello all,

I'm starting with Wt and try to understand its interconnection with Bootstrap.

As far as I understand Bootstrap is based on HTML, Javascript and CSS. From Wt's documentation I understand that Wt uses just the CSS Part of Bootstrap while the functionality comes from Wt - and thus I assume I'm limited to what Wt offers with regard to functionality. Is this correct?

I'd like to achive a collapsible side-menu exactly like this:

http://jsfiddle.net/kuntau/tVrE6/

The challenge and struggle for me is to map this functional behavior to Wt and to know whats possible and what not and how to achieve this (what HTML div/ui classes go when and where into Wt with setStyleClass!?) Here is what I came up with:

auto adminContent = std::make_unique<Wt::WStackedWidget>();

auto menuPtr = std::make_unique<WMenu>(adminContent.get());
auto adminMenu = menuPtr.get();

auto subMenuPtr = std::make_unique<WMenu>(adminContent.get());
auto subMenu = subMenuPtr.get();

subMenu->addItem("SubMenu Test 1", std::make_unique<WText>("Submenu Test 1"));
subMenu->addItem("SubMenu Test 2", std::make_unique<WText>("Submenu Test 2"));
subMenu->addItem("SubMenu Test 3", std::make_unique<WText>("Submenu Test 3"));

adminMenu->setStyleClass("nav nav-pills nav-stacked");
subMenu->setStyleClass("nav-pills submenu");

adminMenu->addItem("Bootstrap Test", std::make_unique<Wt::WTemplate>(WString::tr("boots-tutorial")));
adminMenu->addItem("Form Test", this->formPlayground());

adminMenu->addMenu("SubMenu Item", std::move(subMenuPtr));

adminMenu->addItem("Test Item", std::make_unique<Wt::WText>("Test contents"));
adminMenu->addItem("Tab widget", std::make_unique<Wt::WText>("Tab widget contents"));
adminMenu->addItem("Menu", std::make_unique<Wt::WText>("Menu contents"));

The result is shown in the image attached. When the submenu is opened, two items are selected (here in blue). What is wrong? The bootstrap example from the webpage above has small triangles at the collapsible menu items - how can I achieve this?

Thanks :-)