Wt

look at WGoogleMap.C in examples.

Its a custom Widget

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 :/

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());

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. :/

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?

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());

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

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