Monday, September 18, 2006

Wt in-place-edit widget.

As promised, and following up on my previous post, a Wt implementation of the in-place-edit widget.

The code, starting with the class definition of the new widget:

class WInPlaceEdit : public WCompositeWidget
{
public:
WInPlaceEdit(const std::string text, WContainerWidget *parent = 0);

const std::string text() const;

public signals:
Wt::Signal<std::string> valueChanged;

private slots:
void save();

private:
WContainerWidget *impl_;
WText *text_;
WLineEdit *edit_;
WPushButton *save_;
WPushButton *cancel_;
};

and the implementation of the constructor, and the two methods:

WInPlaceEdit::WInPlaceEdit(const std::string text, WContainerWidget *parent)
:
WCompositeWidget(parent)
{
setImplementation(impl_ = new WContainerWidget());
setInline(true);

text_ = new WText(text, impl_);
text_->setFormatting(WText::PlainFormatting);
text_->decorationStyle().setCursor(WCssDecorationStyle::Default);

edit_ = new WLineEdit(text, impl_);
edit_->setTextSize(20);
save_ = new WPushButton("Save", impl_);
cancel_ = new WPushButton("Cancel", impl_);
edit_->hide();
save_->hide();
cancel_->hide();

text_->clicked.connect(SLOT(text_, WWidget::hide));
text_->clicked.connect(SLOT(edit_, WWidget::show));
text_->clicked.connect(SLOT(save_, WWidget::show));
text_->clicked.connect(SLOT(cancel_, WWidget::show));

save_->clicked.connect(SLOT(save_, WWidget::hide));
save_->clicked.connect(SLOT(cancel_, WWidget::hide));
save_->clicked.connect(SLOT(edit_, WFormWidget::disable));
save_->clicked.connect(SLOT(this, WInPlaceEdit::save));

cancel_->clicked.connect(SLOT(save_, WWidget::hide));
cancel_->clicked.connect(SLOT(cancel_, WWidget::hide));
cancel_->clicked.connect(SLOT(edit_, WWidget::hide));
cancel_->clicked.connect(SLOT(text_, WWidget::show));
}

const std::string WInPlaceEdit::text() const
{
return text_->text();
}

void WInPlaceEdit::save()
{
edit_->hide();
text_->show();
text_->setText(edit_->text());
edit_->enable();

emit(valueChanged(edit_->text()));
}

And this is what it does (sorry, no demo online yet since the current CVS is not release-ready) :
  • Client-side event handling (JavaScript), for all functionality but save().
  • Server-side event handling for the save() method, using AJAX.
  • Works also without JavaScript, but then all event-handling happens server-side and requires a complete page refresh.
  • Fast load time since invisible widgets (the edit buttons) or transmitted only after the visible widgets are displayed.
  • Small bandwidth footprint: the demo application loads in 11Kb spread over 4 HTTP requests. Note that no effort has been done to compress the JavaScript. The save() button triggers generates about 200 bytes.
Looking forward to see how this compares to the echo2 + GWT implementation !

6 comments:

Anonymous said...

hi what kind of development environment do you guys use? I assume you have tested wt on linux/bsd/osx?

Anonymous said...

hi what kind of development environment do you guys use? I assume you have tested wt on linux/bsd/osx?

xynopsis said...

We test and develop primiarily in Linux. Windows support is currently under development and should be up very soon enough!

Anonymous said...

Wt doesn't build under OS-X 10.4 (Tiger). I built boost, cmake 2.4, fcgi etc. using darwin ports and downloaded both wt-1.1.7 and latest cvs release. Both versions failed to build!

[ 0%] Built target filetostring
[ 1%] Built target xl
[ 2%] Building CXX object src/CMakeFiles/wt.dir/wt/WApplication.o
/Users/rt/Desktop/wt-source/wt/src/wt/WApplication.C:150: error: explicit qualification in declaration of `void Wt::AddExposedSignal(Wt::SignalInterface*)'
/Users/rt/Desktop/wt-source/wt/src/wt/WApplication.C:156: error: explicit qualification in declaration of `void Wt::RemoveExposedSignal(Wt::SignalInterface*)'
make[2]: *** [src/CMakeFiles/wt.dir/wt/WApplication.o] Error 1
make[1]: *** [src/CMakeFiles/wt.dir/all] Error 2
make: *** [all] Error 2

Koen Deforche said...

Can you try with the current CVS ?
Can you join on the mailing list ? I think this is valuable information for other potential users, developing on Mac OS X.

Thanks,
koen

Anonymous said...

It is damn OT, but i'm contacting you for an openkiosk work. I can pay a little fee. Please contact me at openkiosk at 81100.eu.org.