Project

General

Profile

Best Way to Move Widgets on the Page?

Added by Michael De Paola almost 10 years ago

I want to implement the feature for a user to move a widget around on the page like a drag and drop, but allow them to do things like overlap widgets so they might not all be perfectly in line in a layout. I found the DragEnabled() and DropEnabled() functions which will let me set it up, but so far I can only see how I could use these to drop the widgets into a pre-made container or layout and not just have them sit where they stop on the page.

My first idea was to drag a widget and drop it on a container, use a signal to say which container it was dropped onto, and change the widget's container accordingly but what would be better is if they were all in one container and could just be moved anywhere within it instead of being anchored to a point or layout so the user can rearrange the widgets to their needs.

Let me know if you have any ideas.

Thanks,

Michael


Replies (5)

RE: Best Way to Move Widgets on the Page? - Added by Bruce Toll almost 10 years ago

Based on your description, you might want to consider a non-modal WDialog. You can add a custom widget to the WDialog contents() and the individual WDialog widgets can be moved anywhere within the browser window.

RE: Best Way to Move Widgets on the Page? - Added by Michael De Paola almost 10 years ago

Thanks Bruce,

I looked into WDialogs and they do seem to be what I want. After trying to implement it however I ran into a problem which is when I spawn a Dialog box it doesn't seem to be mutable even though I've set the Dialog to be non-Modal and it also extends straight up and down the screen and off the edges. I've attached a screenshot to show what I mean. I've also included a code snippet of what I've done to spawn the dialog below.

dialog = new Wt::WDialog("SIL Data Table");

dynamicTable = CreateTableView(dialog->contents(), dataModelIn);

closeDialogButton = new Wt::WPushButton("Close", dialog->footer());
closeDialogButton->setDefault(true);
if (wApp->environment().ajax())
    closeDialogButton->disable();

dialog->setModal(false);
dialog->Wt::WDialog::setResizable(true);
dialog->Wt::WDialog::setMinimumSize(Wt::WLength::Auto, Wt::WLength::Auto);

closeDialogButton->clicked().connect(boost::bind(&WDialogContainerClass::acceptDialog, this));

dialog->show();

And the CreateTableView function is here:

Wt::WTableView* CreateTableView(Wt::WContainerWidget* parent, Wt::WAbstractItemModel* data_model)
{

    WStandardItemModel *model = new WStandardItemModel((DOUBLE_SIGNAL_NUMBER + 1), 2, parent);

    for(int i = 0; i < DOUBLE_SIGNAL_NUMBER; ++i){
        //Insert new data at the last index
        model->setData(i, 0, silSigNameVector[i]);
    }
    for(int j = 0; j < DOUBLE_SIGNAL_NUMBER; ++j){
        //Insert new data
        model->setData(j, 1, storedRTDS_A[j][RT_DATASTORE_HISTORY - 1]);
    }

    Wt::WTableView *tableView = new Wt::WTableView(parent);
    tableView->setModel(model);

    tableView->setRowHeaderCount(0); // treat first column as 'fixed' row headers
    tableView->setSortingEnabled(false);
    tableView->setAlternatingRowColors(true);
    tableView->setRowHeight(28);
    tableView->setHeaderHeight(28);
    tableView->setColumnWidth(0, 290);
    tableView->setColumnWidth(1, 150);
    tableView->setSelectionMode(Wt::ExtendedSelection);
    tableView->setEditTriggers(Wt::WAbstractItemView::NoEditTrigger);

    tableView->resize(480, 400);

    return tableView;
}

Any help to make it a normal sized window and also non-modal would be appreciated.

Thanks,

Michael

RE: Best Way to Move Widgets on the Page? - Added by Bruce Toll almost 10 years ago

Hey Michael,

The dialog looks like it is being rendered without a gray dialog cover in the background, so it appears that Wt is treating it as non-modal.

I don't see any obvious issues in the code that you have shared. Perhaps someone else on the list will spot something. In the meantime...

You may want to verify that Javascript is enabled in the client.

You could try setting an explicit size on the dialog with resize to see if that helps.

Other than that, I'd recommend checking the log output for any errors and possibly running your application with a memory check tool like valgrind.

If you still have issues, it would probably help if you could attach a self-contained example along with some information on your Wt environment, particularly the Wt version, Boost version, and O.S.

Regards,

Bruce

RE: Best Way to Move Widgets on the Page? - Added by Michael De Paola almost 10 years ago

Hi Bruce,

I found out what the issue was. The tableview that I was spawning within the WDialog was causing the WDialog to start with a default size large enough to show the full table if the table was fully expanded. But because I created the tableview to not be fully expanded because it has 60 rows and is somewhat large, it ended up just showing the very bottom of the tableview at the top of the screen. The rest of the visible WDialog was empty space that would have been used if I didn't resize the TableView in my function that creates it.

As a workaround I just added dialog->Wt::WDialog::setMaximumSizefunction(800, 800) so that when the dialog is created it doesn't spawn outside the screen and it can be manipulated as expected by the user within the page.

Thanks for the help,

Michael

RE: Best Way to Move Widgets on the Page? - Added by Michael De Paola almost 10 years ago

Also I forgot to mention but explicitly using resize didn't change the behavior, the initial height would only get changed by changing the maximum value for it. I guess this is due to the nature of the contents container though it was odd.

    (1-5/5)