Wt examples  4.10.4
Loading...
Searching...
No Matches
TreeViewDragDrop.C
Go to the documentation of this file.
1/*
2 * Copyright (C) 2008 Emweb bv, Herent, Belgium.
3 *
4 * See the LICENSE file for terms of use.
5 */
6#include <fstream>
7
8#include <Wt/WApplication.h>
9#include <Wt/WComboBox.h>
10#include <Wt/WContainerWidget.h>
11#include <Wt/WDatePicker.h>
12#include <Wt/WDateValidator.h>
13#include <Wt/WDialog.h>
14#include <Wt/WEnvironment.h>
15#include <Wt/WIntValidator.h>
16#include <Wt/WItemDelegate.h>
17#include <Wt/WLabel.h>
18#include <Wt/WLineEdit.h>
19#include <Wt/WMessageBox.h>
20#include <Wt/WPushButton.h>
21#include <Wt/WRegExpValidator.h>
22#include <Wt/WGridLayout.h>
23#include <Wt/WPopupMenu.h>
24#include <Wt/WSortFilterProxyModel.h>
25#include <Wt/WStandardItem.h>
26#include <Wt/WStandardItemModel.h>
27#include <Wt/WTableView.h>
28#include <Wt/WTreeView.h>
29#include <Wt/WText.h>
30#include <Wt/WVBoxLayout.h>
31
32#include <Wt/Chart/WPieChart.h>
33
34#include "CsvUtil.h"
35#include "FolderView.h"
36
37using namespace Wt;
38
43
51class FileModel : public WStandardItemModel
52{
53public:
57 : WStandardItemModel() { }
58
61 virtual std::string mimeType() const {
63 }
64
67
70};
71
74
78class FileEditDialog : public WDialog
79{
80public:
81 FileEditDialog(std::shared_ptr<WAbstractItemModel> model, const WModelIndex& item)
82 : WDialog("Edit..."),
84 item_(item)
85 {
86 int modelRow = item_.row();
87
88 resize(300, WLength::Auto);
89
90 /*
91 * Create the form widgets, and load them with data from the model.
92 */
93
94 // name
95 auto nameEdit = std::make_unique<WLineEdit>(asString(model_->data(modelRow, 1)));
96 nameEdit_ = nameEdit.get();
97
98 // type
99 auto typeEdit = std::make_unique<WComboBox>();
100 typeEdit_ = typeEdit.get();
101 typeEdit_->addItem("Document");
102 typeEdit_->addItem("Spreadsheet");
103 typeEdit_->addItem("Presentation");
104 typeEdit_->setCurrentIndex
105 (typeEdit_->findText(asString(model_->data(modelRow, 2))));
106
107 // size
108 auto sizeEdit = std::make_unique<WLineEdit>(asString(model_->data(modelRow, 3)));
109 sizeEdit_ = sizeEdit.get();
110 sizeEdit_->setValidator
111 (std::make_shared<WIntValidator>(0, std::numeric_limits<int>::max()));
112
113
114 // created
115 auto createdPicker = std::make_unique<WDatePicker>();
117 createdPicker_->lineEdit()->validator()->setMandatory(true);
119 createdPicker_->setDate(cpp17::any_cast<WDate>(model_->data(modelRow, 4)));
120
121 // modified
122 auto modifiedPicker = std::make_unique<WDatePicker>();
124 modifiedPicker_->lineEdit()->validator()->setMandatory(true);
126 modifiedPicker_->setDate(cpp17::any_cast<WDate>(model_->data(modelRow, 5)));
127
128 /*
129 * Use a grid layout for the labels and fields
130 */
131 auto layout = std::make_unique<WGridLayout>();
132
133 std::unique_ptr<WLabel> label;
134 int row = 0;
135
136 label = std::make_unique<WLabel>("Name:");
137 label->setBuddy(nameEdit_);
138 layout->addWidget(std::move(label), row, 0);
139 layout->addWidget(std::move(nameEdit), row, 1);
140 ++row;
141
142 label = std::make_unique<WLabel>("Type:");
143 label->setBuddy(typeEdit_);
144 layout->addWidget(std::move(label), row, 0);
145 layout->addWidget(std::move(typeEdit), row, 1);
146 ++row;
147
148 label = std::make_unique<WLabel>("Size");
149 label->setBuddy(sizeEdit_);
150 layout->addWidget(std::move(label), row, 0);
151 layout->addWidget(std::move(sizeEdit), row, 1);
152 ++row;
153
154 label = std::make_unique<WLabel>("Created:");
155 label->setBuddy(createdPicker_->lineEdit());
156 layout->addWidget(std::move(label), row, 0);
157 layout->addWidget(std::move(createdPicker), row, 2);
158 ++row;
159
160 label = std::make_unique<WLabel>("Modified:");
161 label->setBuddy(modifiedPicker_->lineEdit());
162 layout->addWidget(std::move(label), row, 0);
163 layout->addWidget(std::move(modifiedPicker), row, 2);
164 ++row;
165
166 std::unique_ptr<WPushButton>button;
167 auto buttons = std::make_unique<WContainerWidget>();
168
169 button = std::make_unique<WPushButton>("Save");
170 button->clicked().connect(this, &WDialog::accept);
171 buttons->addWidget(std::move(button));
172
173 button = std::make_unique<WPushButton>("Cancel");
174 contents()->enterPressed().connect(this, &WDialog::accept);
175 button->clicked().connect(this, &WDialog::reject);
176 buttons->addWidget(std::move(button));
177
178 /*
179 * Focus the form widget that corresonds to the selected item.
180 */
181 switch (item.column()) {
182 case 2:
183 typeEdit_->setFocus(); break;
184 case 3:
185 sizeEdit_->setFocus(); break;
186 case 4:
187 createdPicker_->lineEdit()->setFocus();
188 break;
189 case 5:
190 modifiedPicker_->lineEdit()->setFocus();
191 break;
192 default:
193 nameEdit_->setFocus(); break;
194 }
195
196 layout->addWidget(std::move(buttons), row, 0, 0, 3, AlignmentFlag::Center);
197 layout->setColumnStretch(1, 1);
198
199 contents()->setLayout(std::move(layout));
200
201 finished().connect(this, &FileEditDialog::handleFinish);
202
203 show();
204 }
205
206private:
207 std::shared_ptr<WAbstractItemModel> model_;
209
213
215 {
216 if (result == DialogCode::Accepted) {
217 /*
218 * Update the model with data from the edit widgets.
219 *
220 * You will want to do some validation here...
221 *
222 * Note that we directly update the source model to avoid
223 * problems caused by the dynamic sorting of the proxy model,
224 * which reorders row numbers, and would cause us to switch to editing
225 * the wrong data.
226 */
227 std::shared_ptr<WAbstractItemModel> m = model_;
228 int modelRow = item_.row();
229
230 std::shared_ptr<WAbstractProxyModel> proxyModel =
231 std::dynamic_pointer_cast<WAbstractProxyModel>(m);
232 if (proxyModel) {
233 m = proxyModel->sourceModel();
234 modelRow = proxyModel->mapToSource(item_).row();
235 }
236
237 m->setData(modelRow, 1, cpp17::any(nameEdit_->text()));
238 m->setData(modelRow, 2, cpp17::any(typeEdit_->currentText()));
239 m->setData(modelRow, 3, cpp17::any(asNumber
240 (sizeEdit_->text().toUTF8())));
241 m->setData(modelRow, 4, cpp17::any(createdPicker_->date()));
242 m->setData(modelRow, 5, cpp17::any(modifiedPicker_->date()));
243 }
244
245 //delete this;
246 }
247
248};
249
253class TreeViewDragDrop : public WApplication
254{
255public:
259 : WApplication(env),
262 {
263 setCssTheme("polished");
264
265 /*
266 * Create the data models.
267 */
269 std::make_shared<WStandardItemModel>(0, 1);
271
272
273 fileModel_ =
274 std::make_shared<FileModel>();
276
277 /*
278 * The header items are also endered using an ItemDelegate, and thus
279 * support other data, e.g.:
280 *
281 * fileModel_->setHeaderFlags(0, Horizontal, HeaderIsUserCheckable);
282 * fileModel_->setHeaderData(0, Horizontal,
283 * std::string("icons/file.gif"),
284 * Wt::DecorationRole);
285 */
286 fileFilterModel_ = std::make_shared<WSortFilterProxyModel>();
287 fileFilterModel_->setSourceModel(fileModel_);
288 fileFilterModel_->setDynamicSortFilter(true);
289 fileFilterModel_->setFilterKeyColumn(0);
290 fileFilterModel_->setFilterRole(ItemDataRole::User);
291
292 /*
293 * Setup the user interface.
294 */
295 createUI();
296
297 }
298
300 {
301 dialog_.reset();
302 }
303
304private:
306 std::shared_ptr<WStandardItemModel> folderModel_;
307
309 std::shared_ptr<WStandardItemModel> fileModel_;
310
312 std::shared_ptr<WSortFilterProxyModel> fileFilterModel_;
313
315 std::map<std::string, WString> folderNameMap_;
316
318 WTreeView *folderView_;
319
322
323 std::unique_ptr<FileEditDialog> dialog_;
324
326 std::unique_ptr<WPopupMenu> popup_;
327
329 std::unique_ptr<WMessageBox> popupActionBox_;
330
333 void createUI() {
334 WContainerWidget *w = root();
335 w->setStyleClass("maindiv");
336
337 /*
338 * The main layout is a 3x2 grid layout.
339 */
340 std::unique_ptr<WGridLayout> layout =
341 std::make_unique<WGridLayout>();
342 layout->addWidget(createTitle("Folders"), 0, 0);
343 layout->addWidget(createTitle("Files"), 0, 1);
344 layout->addWidget(folderView(), 1, 0);
345 layout->setColumnResizable(0);
346
347 // select the first folder
348 folderView_->select(folderModel_->index(0, 0, folderModel_->index(0, 0)));
349
350 std::unique_ptr<WVBoxLayout> vbox =
351 std::make_unique<WVBoxLayout>();
352 vbox->addWidget(fileView(), 1);
353 vbox->addWidget(pieChart(), 1);
354 vbox->setResizable(0);
355
356 layout->addLayout(std::move(vbox), 1, 1);
357
358 layout->addWidget(aboutDisplay(), 2, 0, 1, 2);
359
360 /*
361 * Let row 1 and column 1 take the excess space.
362 */
363 layout->setRowStretch(1, 1);
364 layout->setColumnStretch(1, 1);
365
366 w->setLayout(std::move(layout));
367 }
368
371 std::unique_ptr<WText> createTitle(const WString& title) {
372 auto result = std::make_unique<WText>(title);
373 result->setInline(false);
374 result->setStyleClass("title");
375
376 return result;
377 }
378
381 std::unique_ptr<WTreeView> folderView() {
382 auto treeView = std::make_unique<FolderView>();
383
384 /*
385 * To support right-click, we need to disable the built-in browser
386 * context menu.
387 *
388 * Note that disabling the context menu and catching the
389 * right-click does not work reliably on all browsers.
390 */
391 treeView->setAttributeValue
392 ("oncontextmenu",
393 "event.cancelBubble = true; event.returnValue = false; return false;");
394 treeView->setModel(folderModel_);
395 treeView->resize(200, WLength::Auto);
396 treeView->setSelectionMode(SelectionMode::Single);
397 treeView->setEnabledDropLocations(DropLocation::OnItem);
398 treeView->expandToDepth(1);
399 treeView->selectionChanged()
400 .connect(this, &TreeViewDragDrop::folderChanged);
401
402 treeView->mouseWentUp().connect(this, &TreeViewDragDrop::showPopup);
403
404 folderView_ = treeView.get();
405
406 return std::move(treeView);
407 }
408
411 std::unique_ptr<WTableView> fileView() {
412 auto tableView
413 = std::make_unique<WTableView>();
414
415 tableView->setAlternatingRowColors(true);
416
417 tableView->setModel(fileFilterModel_);
418 tableView->setSelectionMode(SelectionMode::Extended);
419 tableView->setDragEnabled(true);
420
421 tableView->setColumnWidth(0, 100);
422 tableView->setColumnWidth(1, 150);
423 tableView->setColumnWidth(2, 100);
424 tableView->setColumnWidth(3, 60);
425 tableView->setColumnWidth(4, 100);
426 tableView->setColumnWidth(5, 100);
427
428 auto delegate = std::make_shared<WItemDelegate>();
430 tableView->setItemDelegateForColumn(4, delegate);
431 tableView->setItemDelegateForColumn(5, delegate);
432
433 tableView->setColumnAlignment(3, AlignmentFlag::Right);
434 tableView->setColumnAlignment(4, AlignmentFlag::Right);
435 tableView->setColumnAlignment(5, AlignmentFlag::Right);
436
437 tableView->sortByColumn(1, SortOrder::Ascending);
438
439 tableView->doubleClicked().connect(this, std::bind(&TreeViewDragDrop::editFile,
440 this, std::placeholders::_1));
441
442 fileView_ = tableView.get();
443
444 return tableView;
445 }
446
449 void editFile(const WModelIndex& item) {
450 dialog_ = std::make_unique<FileEditDialog>(fileView_->model(), item);
451 }
452
455 std::unique_ptr<WWidget> pieChart() {
456 using namespace Chart;
457
458 auto chart = std::make_unique<WPieChart>();
459 // chart->setPreferredMethod(WPaintedWidget::PngImage);
460 chart->setModel(fileFilterModel_);
461 chart->setTitle("File sizes");
462
463 chart->setLabelsColumn(1); // Name
464 chart->setDataColumn(3); // Size
465
466 chart->setPerspectiveEnabled(true, 0.2);
467 chart->setDisplayLabels(LabelOption::Outside | LabelOption::TextLabel);
468
469 if (!WApplication::instance()->environment().ajax()) {
470 chart->resize(500, 200);
471 chart->setMargin(WLength::Auto, Side::Left | Side::Right);
472
473 auto w = std::make_unique<WContainerWidget>();
474 w->addWidget(std::move(chart));
475 w->setStyleClass("about");
476 return std::move(w);
477 } else {
478 chart->setStyleClass("about");
479 return std::move(chart);
480 }
481 }
482
485 std::unique_ptr<WWidget> aboutDisplay() {
486 std::unique_ptr<WText> result
487 = std::make_unique<WText>(WString::tr("about-text"));
488 result->setStyleClass("about");
489 return std::move(result);
490 }
491
496 if (folderView_->selectedIndexes().empty())
497 return;
498
499 WModelIndex selected = *folderView_->selectedIndexes().begin();
500 cpp17::any d = selected.data(ItemDataRole::User);
501 if (cpp17::any_has_value(d)) {
502 std::string folder = cpp17::any_cast<std::string>(d);
503
504 // For simplicity, we assume here that the folder-id does not
505 // contain special regexp characters, otherwise these need to be
506 // escaped -- or use the \Q \E qutoing escape regular expression
507 // syntax (and escape \E)
508 fileFilterModel_->setFilterRegExp(std::unique_ptr<std::regex>(new std::regex(folder)));
509 }
510 }
511
514 void showPopup(const WModelIndex& item, const WMouseEvent& event) {
515 if (event.button() == MouseButton::Right) {
516 // Select the item, it was not yet selected.
517 if (!folderView_->isSelected(item))
518 folderView_->select(item);
519
520 if (!popup_) {
521 popup_ = std::make_unique<WPopupMenu>();
522 popup_->addItem("icons/folder_new.gif", "Create a New Folder");
523 popup_->addItem("Rename this Folder")->setCheckable(true);
524 popup_->addItem("Delete this Folder");
525 popup_->addSeparator();
526 popup_->addItem("Folder Details");
527 popup_->addSeparator();
528 popup_->addItem("Application Inventory");
529 popup_->addItem("Hardware Inventory");
530 popup_->addSeparator();
531
532 std::unique_ptr<WPopupMenu> subMenu = std::make_unique<WPopupMenu>();
533 subMenu->addItem("Sub Item 1");
534 subMenu->addItem("Sub Item 2");
535 popup_->addMenu("File Deployments", std::move(subMenu));
536
537 /*
538 * This is one method of executing a popup, which does not block a
539 * thread for a reentrant event loop, and thus scales.
540 *
541 * Alternatively you could call WPopupMenu::exec(), which returns
542 * the result, but while waiting for it, blocks the thread.
543 */
544 popup_->aboutToHide().connect(this, &TreeViewDragDrop::popupAction);
545 }
546
547 if (popup_->isHidden())
548 popup_->popup(event);
549 else
550 popup_->hide();
551 }
552 }
553
556 void popupAction() {
557 if (popup_->result()) {
558 /*
559 * You could also bind extra data to an item using setData() and
560 * check here for the action asked. For now, we just use the text.
561 */
562 WString text = popup_->result()->text();
563 popup_->hide();
564
565 popupActionBox_ = std::make_unique<WMessageBox>("Sorry.","Action '"
566 + text + "' is not implemented.",
567 Icon::None,
568 StandardButton::Ok);
569 popupActionBox_->buttonClicked()
570 .connect(this, &TreeViewDragDrop::dialogDone);
571 popupActionBox_->show();
572 } else {
573 popup_->hide();
574 }
575 }
576
579 void dialogDone() {
580 popupActionBox_.reset();
581 }
582
591 fileModel_->invisibleRootItem()->setRowCount(0);
592
593 std::ifstream f((appRoot() + "data/files.csv").c_str());
594
595 if (!f)
596 throw std::runtime_error("Could not read: data/files.csv");
597
599
600 for (int i = 0; i < fileModel_->rowCount(); ++i) {
601 WStandardItem *item = fileModel_->item(i, 0);
602 item->setFlags(item->flags() | ItemFlag::DragEnabled);
603 item->setIcon("icons/file.gif");
604
605 std::string folderId = item->text().toUTF8();
606
607 item->setData(cpp17::any(folderId), ItemDataRole::User);
608 item->setText(folderNameMap_[folderId]);
609
610 convertToNumber(fileModel_->item(i, 3));
611 convertToDate(fileModel_->item(i, 4));
612 convertToDate(fileModel_->item(i, 5));
613 }
614 }
615
618 void convertToDate(WStandardItem *item) {
619 WDate d = WDate::fromString(item->text(), FileModel::dateEditFormat);
620 item->setData(cpp17::any(d), ItemDataRole::Display);
621 }
622
625 void convertToNumber(WStandardItem *item) {
626 int i = asNumber(item->text());
627 item->setData(cpp17::any(i), ItemDataRole::Edit);
628 }
629
633 std::unique_ptr<WStandardItem> level1;
634
635 level1 = createFolderItem("San Fransisco");
636 level1->appendRow(createFolderItem("Investors", "sf-investors"));
637 level1->appendRow(createFolderItem("Fellows", "sf-fellows"));
638 folderModel_->appendRow(std::move(level1));
639
640 level1 = createFolderItem("Sophia Antipolis");
641 level1->appendRow(createFolderItem("R&D", "sa-r_d"));
642 level1->appendRow(createFolderItem("Services", "sa-services"));
643 level1->appendRow(createFolderItem("Support", "sa-support"));
644 level1->appendRow(createFolderItem("Billing", "sa-billing"));
645 folderModel_->appendRow(std::move(level1));
646
647 level1 = createFolderItem("New York");
648 level1->appendRow(createFolderItem("Marketing", "ny-marketing"));
649 level1->appendRow(createFolderItem("Sales", "ny-sales"));
650 level1->appendRow(createFolderItem("Advisors", "ny-advisors"));
651 folderModel_->appendRow(std::move(level1));
652
653 level1 = createFolderItem(WString(reinterpret_cast<const char*>(u8"Frankf\u00DCrt")));
654 level1->appendRow(createFolderItem("Sales", "frank-sales"));
655 folderModel_->appendRow(std::move(level1));
656
657 folderModel_->setHeaderData(0, Orientation::Horizontal,
658 cpp17::any(std::string("SandBox")));
659 }
660
665 std::unique_ptr<WStandardItem> createFolderItem(const WString& location,
666 const std::string& folderId = std::string())
667 {
668 auto result
669 = std::make_unique<WStandardItem>(location);
670
671 if (!folderId.empty()) {
672 result->setData(cpp17::any(folderId));
673 result->setFlags(result->flags() | ItemFlag::DropEnabled);
675 } else
676 result->setFlags(result->flags().clear(ItemFlag::Selectable));
677
678 result->setIcon("icons/folder.gif");
679
680 return result;
681 }
682};
683
684std::unique_ptr<WApplication> createApplication(const WEnvironment& env)
685{
686 auto app = std::make_unique<TreeViewDragDrop>(env);
687 app->setTwoPhaseRenderingThreshold(0);
688 app->setTitle("WTreeView Drag & Drop");
689 app->useStyleSheet("styles.css");
690 app->messageResourceBundle().use(WApplication::appRoot() + "about");
691 app->refresh();
692
693 return std::move(app);
694}
695
696int main(int argc, char **argv)
697{
698 return WRun(argc, argv, &createApplication);
699}
700
Wt::Auth::Dbo::UserDatabase< AuthInfo > UserDatabase
Definition Session.h:22
int main(int argc, char **argv)
std::unique_ptr< WApplication > createApplication(const WEnvironment &env)
A dialog for editing a 'file'.
void handleFinish(DialogCode result)
WLineEdit * nameEdit_
std::shared_ptr< WAbstractItemModel > model_
WLineEdit * sizeEdit_
WDatePicker * createdPicker_
WDatePicker * modifiedPicker_
WComboBox * typeEdit_
FileEditDialog(std::shared_ptr< WAbstractItemModel > model, const WModelIndex &item)
A specialized standard item model which report a specific drag and drop mime type.
FileModel()
Constructor.
static WString dateEditFormat
Date edit format.
virtual std::string mimeType() const
Return the mime type.
static WString dateDisplayFormat
Date display format.
static const char * FileSelectionMimeType
Constant that indicates the mime type for a selection of files.
Definition FolderView.h:28
Main application class.
void folderChanged()
Change the filter on the file view when the selected folder changes.
std::unique_ptr< WWidget > aboutDisplay()
Creates the hints text.
std::shared_ptr< WStandardItemModel > fileModel_
The file model (used by fileView_)
std::map< std::string, WString > folderNameMap_
Maps folder id's to folder descriptions.
void editFile(const WModelIndex &item)
Edit a particular row.
std::shared_ptr< WSortFilterProxyModel > fileFilterModel_
The sort filter proxy model that adapts fileModel_.
std::unique_ptr< WTreeView > folderView()
Creates the folder WTreeView.
std::unique_ptr< WText > createTitle(const WString &title)
Creates a title widget.
void createUI()
Setup the user interface.
virtual ~TreeViewDragDrop()
std::shared_ptr< WStandardItemModel > folderModel_
The folder model (used by folderView_)
std::unique_ptr< WMessageBox > popupActionBox_
Message box to confirm the poup menu action.
std::unique_ptr< WTableView > fileView()
Creates the file table view (a WTableView)
std::unique_ptr< WPopupMenu > popup_
Popup menu on the folder view.
WTableView * fileView_
The file view.
void convertToDate(WStandardItem *item)
Convert a string to a date.
std::unique_ptr< WWidget > pieChart()
Creates the chart.
void showPopup(const WModelIndex &item, const WMouseEvent &event)
Show a popup for a folder item.
std::unique_ptr< WStandardItem > createFolderItem(const WString &location, const std::string &folderId=std::string())
Create a folder item.
TreeViewDragDrop(const WEnvironment &env)
Constructor.
void popupAction()
Process the result of the popup menu.
void populateFiles()
Populate the files model.
void convertToNumber(WStandardItem *item)
Convert a string to a number.
void dialogDone()
Process the result of the message box.
WTreeView * folderView_
The folder view.
std::unique_ptr< FileEditDialog > dialog_
void populateFolders()
Populate the folders model.
void readFromCsv(std::istream &f, std::shared_ptr< WAbstractItemModel > model, int numRows, bool firstLineIsHeaders)
Definition CsvUtil.C:54