Wt examples 4.5.2
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
66 static WString dateDisplayFormat;
67
69 static WString dateEditFormat;
70};
71
72WString FileModel::dateDisplayFormat(WString("MMM dd, yyyy"));
73WString FileModel::dateEditFormat(WString("dd-MM-yyyy"));
74
78class FileEditDialog : public WDialog
79{
80public:
81 FileEditDialog(std::shared_ptr<WAbstractItemModel> model, const WModelIndex& item)
82 : WDialog("Edit..."),
83 model_(model),
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>();
116 createdPicker_ = createdPicker.get();
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>();
123 modifiedPicker_ = modifiedPicker.get();
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_;
208 WModelIndex item_;
209
210 WLineEdit *nameEdit_, *sizeEdit_;
211 WComboBox *typeEdit_;
213
214 void handleFinish(DialogCode result)
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:
258 TreeViewDragDrop(const WEnvironment &env)
259 : WApplication(env),
260 popup_(nullptr),
261 popupActionBox_(nullptr)
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
321 WTableView *fileView_;
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->expandToDepth(1);
398 treeView->selectionChanged()
399 .connect(this, &TreeViewDragDrop::folderChanged);
400
401 treeView->mouseWentUp().connect(this, &TreeViewDragDrop::showPopup);
402
403 folderView_ = treeView.get();
404
405 return std::move(treeView);
406 }
407
410 std::unique_ptr<WTableView> fileView() {
411 auto tableView
412 = std::make_unique<WTableView>();
413
414 tableView->setAlternatingRowColors(true);
415
416 tableView->setModel(fileFilterModel_);
417 tableView->setSelectionMode(SelectionMode::Extended);
418 tableView->setDragEnabled(true);
419
420 tableView->setColumnWidth(0, 100);
421 tableView->setColumnWidth(1, 150);
422 tableView->setColumnWidth(2, 100);
423 tableView->setColumnWidth(3, 60);
424 tableView->setColumnWidth(4, 100);
425 tableView->setColumnWidth(5, 100);
426
427 auto delegate = std::make_shared<WItemDelegate>();
428 delegate->setTextFormat(FileModel::dateDisplayFormat);
429 tableView->setItemDelegateForColumn(4, delegate);
430 tableView->setItemDelegateForColumn(5, delegate);
431
432 tableView->setColumnAlignment(3, AlignmentFlag::Right);
433 tableView->setColumnAlignment(4, AlignmentFlag::Right);
434 tableView->setColumnAlignment(5, AlignmentFlag::Right);
435
436 tableView->sortByColumn(1, SortOrder::Ascending);
437
438 tableView->doubleClicked().connect(this, std::bind(&TreeViewDragDrop::editFile,
439 this, std::placeholders::_1));
440
441 fileView_ = tableView.get();
442
443 return tableView;
444 }
445
448 void editFile(const WModelIndex& item) {
449 dialog_ = std::make_unique<FileEditDialog>(fileView_->model(), item);
450 }
451
454 std::unique_ptr<WWidget> pieChart() {
455 using namespace Chart;
456
457 auto chart = std::make_unique<WPieChart>();
458 // chart->setPreferredMethod(WPaintedWidget::PngImage);
459 chart->setModel(fileFilterModel_);
460 chart->setTitle("File sizes");
461
462 chart->setLabelsColumn(1); // Name
463 chart->setDataColumn(3); // Size
464
465 chart->setPerspectiveEnabled(true, 0.2);
466 chart->setDisplayLabels(LabelOption::Outside | LabelOption::TextLabel);
467
468 if (!WApplication::instance()->environment().ajax()) {
469 chart->resize(500, 200);
470 chart->setMargin(WLength::Auto, Side::Left | Side::Right);
471
472 auto w = std::make_unique<WContainerWidget>();
473 w->addWidget(std::move(chart));
474 w->setStyleClass("about");
475 return std::move(w);
476 } else {
477 chart->setStyleClass("about");
478 return std::move(chart);
479 }
480 }
481
484 std::unique_ptr<WWidget> aboutDisplay() {
485 std::unique_ptr<WText> result
486 = std::make_unique<WText>(WString::tr("about-text"));
487 result->setStyleClass("about");
488 return std::move(result);
489 }
490
495 if (folderView_->selectedIndexes().empty())
496 return;
497
498 WModelIndex selected = *folderView_->selectedIndexes().begin();
499 cpp17::any d = selected.data(ItemDataRole::User);
500 if (cpp17::any_has_value(d)) {
501 std::string folder = cpp17::any_cast<std::string>(d);
502
503 // For simplicity, we assume here that the folder-id does not
504 // contain special regexp characters, otherwise these need to be
505 // escaped -- or use the \Q \E qutoing escape regular expression
506 // syntax (and escape \E)
507 fileFilterModel_->setFilterRegExp(std::unique_ptr<std::regex>(new std::regex(folder)));
508 }
509 }
510
513 void showPopup(const WModelIndex& item, const WMouseEvent& event) {
514 if (event.button() == MouseButton::Right) {
515 // Select the item, it was not yet selected.
516 if (!folderView_->isSelected(item))
517 folderView_->select(item);
518
519 if (!popup_) {
520 popup_ = std::make_unique<WPopupMenu>();
521 popup_->addItem("icons/folder_new.gif", "Create a New Folder");
522 popup_->addItem("Rename this Folder")->setCheckable(true);
523 popup_->addItem("Delete this Folder");
524 popup_->addSeparator();
525 popup_->addItem("Folder Details");
526 popup_->addSeparator();
527 popup_->addItem("Application Inventory");
528 popup_->addItem("Hardware Inventory");
529 popup_->addSeparator();
530
531 std::unique_ptr<WPopupMenu> subMenu = std::make_unique<WPopupMenu>();
532 subMenu->addItem("Sub Item 1");
533 subMenu->addItem("Sub Item 2");
534 popup_->addMenu("File Deployments", std::move(subMenu));
535
536 /*
537 * This is one method of executing a popup, which does not block a
538 * thread for a reentrant event loop, and thus scales.
539 *
540 * Alternatively you could call WPopupMenu::exec(), which returns
541 * the result, but while waiting for it, blocks the thread.
542 */
543 popup_->aboutToHide().connect(this, &TreeViewDragDrop::popupAction);
544 }
545
546 if (popup_->isHidden())
547 popup_->popup(event);
548 else
549 popup_->hide();
550 }
551 }
552
555 void popupAction() {
556 if (popup_->result()) {
557 /*
558 * You could also bind extra data to an item using setData() and
559 * check here for the action asked. For now, we just use the text.
560 */
561 WString text = popup_->result()->text();
562 popup_->hide();
563
564 popupActionBox_ = std::make_unique<WMessageBox>("Sorry.","Action '"
565 + text + "' is not implemented.",
566 Icon::None,
567 StandardButton::Ok);
568 popupActionBox_->buttonClicked()
569 .connect(this, &TreeViewDragDrop::dialogDone);
570 popupActionBox_->show();
571 } else {
572 popup_->hide();
573 }
574 }
575
578 void dialogDone() {
579 popupActionBox_.reset();
580 }
581
590 fileModel_->invisibleRootItem()->setRowCount(0);
591
592 std::ifstream f((appRoot() + "data/files.csv").c_str());
593
594 if (!f)
595 throw std::runtime_error("Could not read: data/files.csv");
596
598
599 for (int i = 0; i < fileModel_->rowCount(); ++i) {
600 WStandardItem *item = fileModel_->item(i, 0);
601 item->setFlags(item->flags() | ItemFlag::DragEnabled);
602 item->setIcon("icons/file.gif");
603
604 std::string folderId = item->text().toUTF8();
605
606 item->setData(cpp17::any(folderId), ItemDataRole::User);
607 item->setText(folderNameMap_[folderId]);
608
609 convertToNumber(fileModel_->item(i, 3));
610 convertToDate(fileModel_->item(i, 4));
611 convertToDate(fileModel_->item(i, 5));
612 }
613 }
614
617 void convertToDate(WStandardItem *item) {
618 WDate d = WDate::fromString(item->text(), FileModel::dateEditFormat);
619 item->setData(cpp17::any(d), ItemDataRole::Display);
620 }
621
624 void convertToNumber(WStandardItem *item) {
625 int i = asNumber(item->text());
626 item->setData(cpp17::any(i), ItemDataRole::Edit);
627 }
628
632 std::unique_ptr<WStandardItem> level1;
633
634 level1 = createFolderItem("San Fransisco");
635 level1->appendRow(createFolderItem("Investors", "sf-investors"));
636 level1->appendRow(createFolderItem("Fellows", "sf-fellows"));
637 folderModel_->appendRow(std::move(level1));
638
639 level1 = createFolderItem("Sophia Antipolis");
640 level1->appendRow(createFolderItem("R&D", "sa-r_d"));
641 level1->appendRow(createFolderItem("Services", "sa-services"));
642 level1->appendRow(createFolderItem("Support", "sa-support"));
643 level1->appendRow(createFolderItem("Billing", "sa-billing"));
644 folderModel_->appendRow(std::move(level1));
645
646 level1 = createFolderItem("New York");
647 level1->appendRow(createFolderItem("Marketing", "ny-marketing"));
648 level1->appendRow(createFolderItem("Sales", "ny-sales"));
649 level1->appendRow(createFolderItem("Advisors", "ny-advisors"));
650 folderModel_->appendRow(std::move(level1));
651
652 level1 = createFolderItem(WString(reinterpret_cast<const char*>(u8"Frankf\u00DCrt")));
653 level1->appendRow(createFolderItem("Sales", "frank-sales"));
654 folderModel_->appendRow(std::move(level1));
655
656 folderModel_->setHeaderData(0, Orientation::Horizontal,
657 cpp17::any(std::string("SandBox")));
658 }
659
664 std::unique_ptr<WStandardItem> createFolderItem(const WString& location,
665 const std::string& folderId = std::string())
666 {
667 auto result
668 = std::make_unique<WStandardItem>(location);
669
670 if (!folderId.empty()) {
671 result->setData(cpp17::any(folderId));
672 result->setFlags(result->flags() | ItemFlag::DropEnabled);
673 folderNameMap_[folderId] = location;
674 } else
675 result->setFlags(result->flags().clear(ItemFlag::Selectable));
676
677 result->setIcon("icons/folder.gif");
678
679 return result;
680 }
681};
682
683std::unique_ptr<WApplication> createApplication(const WEnvironment& env)
684{
685 auto app = std::make_unique<TreeViewDragDrop>(env);
686 app->setTwoPhaseRenderingThreshold(0);
687 app->setTitle("WTreeView Drag & Drop");
688 app->useStyleSheet("styles.css");
689 app->messageResourceBundle().use(WApplication::appRoot() + "about");
690 app->refresh();
691
692 return std::move(app);
693}
694
695int main(int argc, char **argv)
696{
697 return WRun(argc, argv, &createApplication);
698}
699
int main(int argc, char **argv)
std::unique_ptr< WApplication > createApplication(const WEnvironment &env)
A dialog for editing a 'file'.
void handleFinish(DialogCode result)
WModelIndex item_
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

Generated on Wed Jan 12 2022 for the C++ Web Toolkit (Wt) by doxygen 1.9.3