Project

General

Profile

Wt Custom Widgets with Javascript

Added by Nilesh Chakraborty about 11 years ago

Hi,

I would like to know if Wt allows this level of flexibility. Say for example, I want to create a widget like the MacOS fish-eye dock for my Wt application, attach signals and slots to it. There are already good scripts available using JQuery to do that. But is it possible to hook them up in my Wt application? I pondered a lot, browsed through the manual, and through the source code, but couldn't figure out any pattern/method through which I can accomplish that or something pretty close to that.

I'd be more than delighted if this could be possible with your help.

Thanks,

Nilesh


Replies (8)

RE: Wt Custom Widgets with Javascript - Added by Mohammed Rashad about 11 years ago

look at WGoogleMap.C in examples.

Its a custom Widget

RE: Wt Custom Widgets with Javascript - Added by Nilesh Chakraborty about 11 years ago

I'm trying to do this thing as a simple test:

Application::Application(const WEnvironment& env) : WApplication(env)
{
  setTitle("Test!");

  require("js/jquery.js");
  require("js/interface.js");
  require("js/javasc.js");
  useStyleSheet("style.css");

  this->messageResourceBundle().use(WApplication::appRoot() + "dock");
  dock_ = new WTemplate(WApplication::root());
  dock_->setTemplateText(WString::tr("dock-xml"));
}

jquery.js and interface.js (Interface plugin) attached.

javasc.js (Options script for the js dock) attached.

dock.xml and style.css attached.

When I try this script using a normal html page, it works quite well.

Ref: http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html

But when doing it from inside Wt, nothing is being shown. Is there something (everything?) I'm doing completely wrong?

WGoogleMap.C seems too complicated to be studied as a walk-through :/

interface.js (12.5 KB) interface.js Interface Plugin for JQuery
jquery.js (20.7 KB) jquery.js JQuery library
javasc.js (258 Bytes) javasc.js Options file
dock.xml (1.12 KB) dock.xml HTML stuff, the actual dock
style.css (1.24 KB) style.css CSS Stylesheet

RE: Wt Custom Widgets with Javascript - Added by Mohammed Rashad about 11 years ago

you just loaded javascript library

require("js/jquery.js");

require("js/interface.js");

require("js/javasc.js");

you need to apply some javascript code to work

stringstream js;

js << "alert(0);";

use doJavaScript to run the script as

WApplication::instance()->doJavascript(js.str());

RE: Wt Custom Widgets with Javascript - Added by Nilesh Chakraborty about 11 years ago

I tried a new version:

Application::Application(const WEnvironment& env)
  : WApplication(env)
{
  setTitle("Hello world");                               // application title

  require("js/jquery.js");
  require("js/interface.js");
  useStyleSheet("style.css");

  this->messageResourceBundle().use(WApplication::appRoot() + "dock");
  dock_ = new WTemplate(WApplication::root());
  dock_->setTemplateText(WString::tr("dock-xml"));
  std::stringstream js;
  js << "jQuery.noConflict();"
    "jQuery(document).ready("
  "function()"
  "{"
  "jQuery('#dock2').Fisheye("
  "{"
  "maxWidth: 60,"
  "items: 'a',"
  "itemsText: 'span',"
  "container: '.dock-container2',"
  "itemWidth: 40,"
  "proximity: 80,"
  "alignment : 'left',"
  "valign: 'bottom',"
  "halign : 'center'"
  "}"
  ")"
  "}"
  ");";
  WApplication::doJavaScript(js.str());
}

Still the same results. :/

RE: Wt Custom Widgets with Javascript - Added by Nilesh Chakraborty about 11 years ago

After a bit of experimenting, I found that no matter what I give, my browser always complains like \" $(this).hide() is not a function \" or "$("div").hide() is not a function" or in the above case, \"Uncaught Type Error: Object# has no method 'Fisheye'.

Is there any other method to do what I want?

RE: Wt Custom Widgets with Javascript - Added by Wim Dumon about 11 years ago

  1. use doc_id() to get the (dynamically generated) name of your widget. doc_>jsRef() is also often useful.
  2. Rather than using WApplication::doJavaScript(), use WWidget::doJavaScript for JS applied to widgets. It will take into account that the widget's rendering is deferred in certain cases, and will not execute the JS before the widget exists.

So your example should look more or less like this:

  dock_ = new WTemplate(WApplication::root());
  dock_->setTemplateText(WString::tr("dock-xml"));
  std::stringstream js;
  js <<
  "jQuery('#" + doc_->id() + "').Fisheye(" 
  "{" 
  "maxWidth: 60," 
  "items: 'a'," 
  "itemsText: 'span'," 
  "container: '.dock-container2'," 
  "itemWidth: 40," 
  "proximity: 80," 
  "alignment : 'left'," 
  "valign: 'bottom'," 
  "halign : 'center'" 
  "}" 
  ");";
  dock_->doJavaScript(js.str());

RE: Wt Custom Widgets with Javascript - Added by Koen Deforche about 11 years ago

Hey,

The jquery hide and show methods are missing in the jquery distributed with wt.

If I am not mistaken, this has been fixed in the latest githead since also the new wmediaplayer class required this.

Regards,

Koen

RE: Wt Custom Widgets with Javascript - Added by Nilesh Chakraborty about 11 years ago

Hi,

I wasn't aware of the new WMediaPlayer class. Will study the code, maybe it'll help me to build widgets. :)

Thanks,

Best regards,

Nilesh

    (1-8/8)