Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Remote Application Platform (RAP) » Doubt creating a custom widget
Doubt creating a custom widget [message #132937] Fri, 15 May 2009 05:52 Go to next message
Kathiravan is currently offline Kathiravan Friend
Messages: 33
Registered: July 2009
Member
Hi
I am trying to create a custom widget to add a <svg> dom node. I have
looked into the custom widget example.

As a starting point, i created the widget with just a label to get the
custom widget working,

qx.Class.define( "com.biologistics.gd.designview.DesignWidget", {
extend: qx.ui.core.Widget,

construct: function( id ) {
this.setHtmlAttribute("id",id);
this._id = id;
},

properties : {
partId : {
init : "",
apply : "load"
}
},

members : {
load : function() {
var current = this.getPartId();
if( current != null && current != "" ) {
qx.ui.core.Widget.flushGlobalQueues();
var id = document.getElementById( this._id );
var label1 = new qx.ui.basic.Label(current);
add(label1);
}
},

}
});
I create an instance of the widget inside a viewpart->createPartControl
method.

But when i open the view, i get the following error, this may be a very
basic doubt :-) , ( but i googled enough for this )


Could not evaluate javascript response:

TypeError: this._layoutChanges is undefined

org.eclipse.swt.EventUtil.suspendEventHandling();var req =
org.eclipse.swt.Request.getInstance();req.setRequestCounter( "22" );var wm
= org.eclipse.swt.WidgetManager.getInstance();var w = wm.findWidgetById(
"w192" );w.doClose();wm.dispose( "w192" );wm.dispose( "w205" );wm.dispose(
"w230" );wm.dispose( "w191" );wm.dispose( "w190" );wm.dispose( "w206"
);wm.dispose( "w207" );wm.dispose( "w211" );wm.dispose( "w188" );var w =
wm.findWidgetById( "w222" );w.destroy();wm.dispose( "w222" );var w =
wm.findWidgetById( "w229" );w.destroy();wm.dispose( "w229" );var w =
wm.findWidgetById( "w228" );w.destroy();wm.dispose( "w228" );var w =
wm.findWidgetById( "w227" );w.destroy();wm.dispose( "w227" );var w =
wm.findWidgetById( "w226" );w.destroy();wm.dispose( "w226" );var w =
wm.findWidgetById( "w225" );w.destroy();wm.dispose( "w225" );var w =
wm.findWidgetById( "w224" );w.destroy();wm.dispose( "w224" );var w =
wm.findWidgetById( "w223" );w.destroy();wm.dispose( "w223" );var w =
wm.findWidgetById( "w220" );w.destroy();wm.dispose( "w220" );var w =
wm.findWidgetById( "w221" );w.destroy();wm.dispose( "w221" );var w =
wm.findWidgetById( "w218" );w.destroy();wm.dispose( "w218" );var w =
wm.findWidgetById( "w219" );w.destroy();wm.dispose( "w219" );var w =
wm.findWidgetById( "w216" );w.destroy();wm.dispose( "w216" );var w =
wm.findWidgetById( "w217" );w.destroy();wm.dispose( "w217" );var w =
wm.findWidgetById( "w214" );w.destroy();wm.dispose( "w214" );var w =
wm.findWidgetById( "w215" );w.destroy();wm.dispose( "w215" );var w =
wm.findWidgetById( "w212" );w.destroy();wm.dispose( "w212" );var w =
wm.findWidgetById( "w213" );w.destroy();wm.dispose( "w213" );wm.dispose(
"w208" );wm.dispose( "w209" );wm.dispose( "w210" );wm.dispose( "w187"
);var w = wm.findWidgetById( "w25" );w.setActive( true );var w =
wm.findWidgetById( "w45" );w.setWidth( 26 );w.setHeight( 22 );var w =
wm.newWidget( "w231", "w69", true, null, 'qx.ui.toolbar.ToolBar'
);w.addState( "rwt_FLAT" );w.setSpace( 0, 0, 0, 0 );w.setZIndex( 300
);w.setVisibility( false );var w = wm.newWidget( "w232", "w69", true,
null, 'qx.ui.layout.CanvasLayout' );w.setOverflow( "hidden"
);w.setHideFocus( true );w.setAppearance( "composite" );w.setSpace( 175,
956, 562, 149 );w.setZIndex( 299 );var t = wm.findWidgetById( "w25"
);t.addActivateListenerWidget( w );var w = wm.newWidget( "w233", "w232",
true, null, 'qx.ui.layout.CanvasLayout' );w.setOverflow( "hidden"
);w.setHideFocus( true );w.setAppearance( "composite" );w.setSpace( 0,
956, 0, 149 );w.setZIndex( 300 );var w = wm.newWidget( "w234", "w233",
true, null, 'com.biologistics.gd.designview.DesignWidget', '"w234"'
);w.setAppearance( "composite" );w.setOverflow( "hidden" );w.setSpace( 0,
956, 0, 149 );w.setZIndex( 300 );w.setTabIndex( 31 );w.setPartId( "New
Part" );var w = wm.findWidgetById( "w193" );w.setZIndex( 298 );var w =
wm.findWidgetById( "w194" );w.setZIndex( 297 );var w = wm.findWidgetById(
"w70" );w.setZIndex( 296 );var w = wm.findWidgetById( "w74" );w.setZIndex(
295 );var w = wm.findWidgetById( "w80" );w.setZIndex( 294 );var w =
wm.findWidgetById( "w81" );w.setZIndex( 293 );w.setVisibility( false );var
w = wm.findWidgetById( "w83" );w.setZIndex( 292 );var w =
wm.findWidgetById( "w88" );w.setZIndex( 291 );var w = wm.findWidgetById(
"w91" );w.setZIndex( 290 );var w = wm.findWidgetById( "w92" );w.setZIndex(
289 );var w = wm.findWidgetById( "w105" );w.setZIndex( 288 );var w =
wm.findWidgetById( "w117" );w.setZIndex( 287 );w.setTabIndex( -1
);w.setSelectionForeground( "#705e42" );w.setSelectionBackground(
"#ffffff" );var w = wm.findWidgetById( "w131" );w.setZIndex( 286 );var w =
wm.findWidgetById( "w143" );w.setZIndex( 285 );w.setTabIndex( 20
);w.setSelectionForeground( "#ffffff" );w.setSelectionBackground(
"#56a0ea" );var w = wm.findWidgetById( "w144" );w.setSpace( 0, 83, 0, 24
);w.setSelected( false );var w = wm.newWidget( "w235", "", false, null,
'org.eclipse.swt.custom.CTabItem', 'wm.findWidgetById( "w143" ), true'
);var t = wm.findWidgetById( "w143" );t.add( w );w.setSpace( 83, 170, 0,
24 );w.setLabel( "Custom Design View" );w.setIcon(
"25.fwk19731881/icons/full/eview16/defaultview_misc.gif"
);w.setUnselectedCloseVisible( false );w.setSelected( true );var w =
wm.findWidgetById( "w148" );w.setSpace( 253, 669, 1, 22 );var w =
wm.findWidgetById( "w149" );w.setTabIndex( 23 );var w = wm.findWidgetById(
"w155" );w.setZIndex( 284 );var w = wm.findWidgetById( "w167"
);w.setZIndex( 283 );var w = wm.findWidgetById( "w168" );w.setZIndex( 282
);var w = wm.findWidgetById( "w169" );w.setZIndex( 281 );var w =
wm.findWidgetById( "w25" );w.setActiveControl( wm.findWidgetById( "w40" )
);org.eclipse.swt.WidgetManager.getInstance().focus( "w40"
);qx.ui.core.Widget.flushGlobalQueues();org.eclipse.swt.Even tUtil.resumeEventHandling();org.eclipse.swt.FontSizeCalculat ion.measureStrings(
[ [ 8174886, "C", [ "Segoe UI", "Corbel", "Calibri", "Tahoma", "Lucida
Sans Unicode", "sans-serif" ], 11, false, false, -1 ], [ 4852582, "Custom
Design View", [ "Segoe UI", "Corbel", "Calibri", "Tahoma", "Lucida Sans
Unicode", "sans-serif" ], 11, false, false, -1 ] ] );

And also what would be best way to add the svg dom node to the widget. Any
suggestions?

Thanks,
Kathir.

Report message to a moderator

Re: Doubt creating a custom widget [message #132967 is a reply to message #132937] Fri, 15 May 2009 07:12 Go to previous messageGo to next message
Ivan Furnadjiev is currently offline Ivan FurnadjievFriend
Messages: 2429
Registered: July 2009
Location: Sofia, Bulgaria
Senior Member
Hi Kathiravan,

I suppose that the Javascript error is because of the class that your
custom widget extends - qx.ui.core.Widget. If you look at the GMap
custom widget example, it extends qx.ui.layout.CanvasLayout.
About your second question - you can use:
----
var svg = document.createElement( "svg" );
---<set svg element attributes and styles here>---
this.add( svg );
----

Best,
Ivan


Kathiravan wrote:
> Hi
> I am trying to create a custom widget to add a <svg> dom node. I have
> looked into the custom widget example.
> As a starting point, i created the widget with just a label to get the
> custom widget working,
>
> qx.Class.define( "com.biologistics.gd.designview.DesignWidget", {
> extend: qx.ui.core.Widget,
> construct: function( id ) {
> this.setHtmlAttribute("id",id);
> this._id = id;
> },
>
> properties : {
> partId : {
> init : "",
> apply : "load"
> }
> },
>
> members : {
> load : function() {
> var current = this.getPartId();
> if( current != null && current != "" ) {
> qx.ui.core.Widget.flushGlobalQueues();
> var id = document.getElementById( this._id );
> var label1 = new qx.ui.basic.Label(current);
> add(label1);
> }
> },
>
> }
> });
> I create an instance of the widget inside a
> viewpart->createPartControl method.
>
> But when i open the view, i get the following error, this may be a
> very basic doubt :-) , ( but i googled enough for this )
>
>
> Could not evaluate javascript response:
>
> TypeError: this._layoutChanges is undefined
>
> org.eclipse.swt.EventUtil.suspendEventHandling();var req =
> org.eclipse.swt.Request.getInstance();req.setRequestCounter( "22"
> );var wm = org.eclipse.swt.WidgetManager.getInstance();var w =
> wm.findWidgetById( "w192" );w.doClose();wm.dispose( "w192"
> );wm.dispose( "w205" );wm.dispose( "w230" );wm.dispose( "w191"
> );wm.dispose( "w190" );wm.dispose( "w206" );wm.dispose( "w207"
> );wm.dispose( "w211" );wm.dispose( "w188" );var w = wm.findWidgetById(
> "w222" );w.destroy();wm.dispose( "w222" );var w = wm.findWidgetById(
> "w229" );w.destroy();wm.dispose( "w229" );var w = wm.findWidgetById(
> "w228" );w.destroy();wm.dispose( "w228" );var w = wm.findWidgetById(
> "w227" );w.destroy();wm.dispose( "w227" );var w = wm.findWidgetById(
> "w226" );w.destroy();wm.dispose( "w226" );var w = wm.findWidgetById(
> "w225" );w.destroy();wm.dispose( "w225" );var w = wm.findWidgetById(
> "w224" );w.destroy();wm.dispose( "w224" );var w = wm.findWidgetById(
> "w223" );w.destroy();wm.dispose( "w223" );var w = wm.findWidgetById(
> "w220" );w.destroy();wm.dispose( "w220" );var w = wm.findWidgetById(
> "w221" );w.destroy();wm.dispose( "w221" );var w = wm.findWidgetById(
> "w218" );w.destroy();wm.dispose( "w218" );var w = wm.findWidgetById(
> "w219" );w.destroy();wm.dispose( "w219" );var w = wm.findWidgetById(
> "w216" );w.destroy();wm.dispose( "w216" );var w = wm.findWidgetById(
> "w217" );w.destroy();wm.dispose( "w217" );var w = wm.findWidgetById(
> "w214" );w.destroy();wm.dispose( "w214" );var w = wm.findWidgetById(
> "w215" );w.destroy();wm.dispose( "w215" );var w = wm.findWidgetById(
> "w212" );w.destroy();wm.dispose( "w212" );var w = wm.findWidgetById(
> "w213" );w.destroy();wm.dispose( "w213" );wm.dispose( "w208"
> );wm.dispose( "w209" );wm.dispose( "w210" );wm.dispose( "w187" );var w
> = wm.findWidgetById( "w25" );w.setActive( true );var w =
> wm.findWidgetById( "w45" );w.setWidth( 26 );w.setHeight( 22 );var w =
> wm.newWidget( "w231", "w69", true, null, 'qx.ui.toolbar.ToolBar'
> );w.addState( "rwt_FLAT" );w.setSpace( 0, 0, 0, 0 );w.setZIndex( 300
> );w.setVisibility( false );var w = wm.newWidget( "w232", "w69", true,
> null, 'qx.ui.layout.CanvasLayout' );w.setOverflow( "hidden"
> );w.setHideFocus( true );w.setAppearance( "composite" );w.setSpace(
> 175, 956, 562, 149 );w.setZIndex( 299 );var t = wm.findWidgetById(
> "w25" );t.addActivateListenerWidget( w );var w = wm.newWidget( "w233",
> "w232", true, null, 'qx.ui.layout.CanvasLayout' );w.setOverflow(
> "hidden" );w.setHideFocus( true );w.setAppearance( "composite"
> );w.setSpace( 0, 956, 0, 149 );w.setZIndex( 300 );var w =
> wm.newWidget( "w234", "w233", true, null,
> 'com.biologistics.gd.designview.DesignWidget', '"w234"'
> );w.setAppearance( "composite" );w.setOverflow( "hidden" );w.setSpace(
> 0, 956, 0, 149 );w.setZIndex( 300 );w.setTabIndex( 31 );w.setPartId(
> "New Part" );var w = wm.findWidgetById( "w193" );w.setZIndex( 298
> );var w = wm.findWidgetById( "w194" );w.setZIndex( 297 );var w =
> wm.findWidgetById( "w70" );w.setZIndex( 296 );var w =
> wm.findWidgetById( "w74" );w.setZIndex( 295 );var w =
> wm.findWidgetById( "w80" );w.setZIndex( 294 );var w =
> wm.findWidgetById( "w81" );w.setZIndex( 293 );w.setVisibility( false
> );var w = wm.findWidgetById( "w83" );w.setZIndex( 292 );var w =
> wm.findWidgetById( "w88" );w.setZIndex( 291 );var w =
> wm.findWidgetById( "w91" );w.setZIndex( 290 );var w =
> wm.findWidgetById( "w92" );w.setZIndex( 289 );var w =
> wm.findWidgetById( "w105" );w.setZIndex( 288 );var w =
> wm.findWidgetById( "w117" );w.setZIndex( 287 );w.setTabIndex( -1
> );w.setSelectionForeground( "#705e42" );w.setSelectionBackground(
> "#ffffff" );var w = wm.findWidgetById( "w131" );w.setZIndex( 286 );var
> w = wm.findWidgetById( "w143" );w.setZIndex( 285 );w.setTabIndex( 20
> );w.setSelectionForeground( "#ffffff" );w.setSelectionBackground(
> "#56a0ea" );var w = wm.findWidgetById( "w144" );w.setSpace( 0, 83, 0,
> 24 );w.setSelected( false );var w = wm.newWidget( "w235", "", false,
> null, 'org.eclipse.swt.custom.CTabItem', 'wm.findWidgetById( "w143" ),
> true' );var t = wm.findWidgetById( "w143" );t.add( w );w.setSpace( 83,
> 170, 0, 24 );w.setLabel( "Custom Design View" );w.setIcon(
> "25.fwk19731881/icons/full/eview16/defaultview_misc.gif"
> );w.setUnselectedCloseVisible( false );w.setSelected( true );var w =
> wm.findWidgetById( "w148" );w.setSpace( 253, 669, 1, 22 );var w =
> wm.findWidgetById( "w149" );w.setTabIndex( 23 );var w =
> wm.findWidgetById( "w155" );w.setZIndex( 284 );var w =
> wm.findWidgetById( "w167" );w.setZIndex( 283 );var w =
> wm.findWidgetById( "w168" );w.setZIndex( 282 );var w =
> wm.findWidgetById( "w169" );w.setZIndex( 281 );var w =
> wm.findWidgetById( "w25" );w.setActiveControl( wm.findWidgetById(
> "w40" ) );org.eclipse.swt.WidgetManager.getInstance().focus( "w40"
> );qx.ui.core.Widget.flushGlobalQueues();org.eclipse.swt.Even tUtil.resumeEventHandling();org.eclipse.swt.FontSizeCalculat ion.measureStrings(
> [ [ 8174886, "C", [ "Segoe UI", "Corbel", "Calibri", "Tahoma", "Lucida
> Sans Unicode", "sans-serif" ], 11, false, false, -1 ], [ 4852582,
> "Custom Design View", [ "Segoe UI", "Corbel", "Calibri", "Tahoma",
> "Lucida Sans Unicode", "sans-serif" ], 11, false, false, -1 ] ] );
>
> And also what would be best way to add the svg dom node to the widget.
> Any suggestions?
>
> Thanks,
> Kathir.
>

Report message to a moderator

Re: Doubt creating a custom widget [message #133123 is a reply to message #132967] Sat, 16 May 2009 05:10 Go to previous messageGo to next message
Kathiravan is currently offline Kathiravan Friend
Messages: 33
Registered: July 2009
Member
Hi Ivan,
I have tried with extend: qx.ui.layout.CanvasLayout but it gives the same
error as the Widget. I think i am missing some thing on the javascript.

Any clues.

BR,
Kathir.

Report message to a moderator

Re: Doubt creating a custom widget [message #133136 is a reply to message #133123] Sat, 16 May 2009 05:58 Go to previous messageGo to next message
Kathiravan is currently offline Kathiravan Friend
Messages: 33
Registered: July 2009
Member
ok..i found the problem.. I should have copied the whole constructor from
the GMap example.

this.base( arguments );

i didn't have this line before. Now i can see the label inside the view. I
will give a try with the svg node.

BR,
Kathir.

Report message to a moderator

Re: Doubt creating a custom widget [message #133149 is a reply to message #132967] Sat, 16 May 2009 07:21 Go to previous messageGo to next message
Kathiravan is currently offline Kathiravan Friend
Messages: 33
Registered: July 2009
Member
Hi Ivan,
For the svg node, i have added the following,

var svg = document.createElement("svg");
var svgChild1 = document.createElement("rect");
svgChild1.setAttribute("x","10");
svgChild1.setAttribute("y","20");
svgChild1.setAttribute("width","100");
svgChild1.setAttribute("height","50");
svgChild1.setAttribute("fill","red");
svg.appendChild(svgChild1);
svg.setAttribute("xmlns","http://www.w3.org/2000/svg");
svg.setAttribute("width","400");
svg.setAttribute("height","450");
this.add(svg);

But when i run this i get the following error,

Could not evaluate javascript response:

Error: Invalid Widget: [object HTMLUnknownElement]

and instead of adding the svg node to the widget, if i directly add to the
document body, it adds up the svg node to the end of the dom but this is
not what i want.

Are there any tutorials on learning qooxdoo for this kind of requirement.


BR,
Kathir.

Report message to a moderator

Re: Doubt creating a custom widget [message #133162 is a reply to message #133149] Sat, 16 May 2009 08:19 Go to previous messageGo to next message
Ivan Furnadjiev is currently offline Ivan FurnadjievFriend
Messages: 2429
Registered: July 2009
Location: Sofia, Bulgaria
Senior Member
Hi Kathiravan,

the qooxdoo 0.7 documentation is available at [1].

[1] http://qooxdoo.org/documentation/0.7

Best,
Ivan

Kathiravan wrote:
> Hi Ivan,
> For the svg node, i have added the following,
>
> var svg = document.createElement("svg");
> var svgChild1 = document.createElement("rect");
> svgChild1.setAttribute("x","10");
> svgChild1.setAttribute("y","20");
> svgChild1.setAttribute("width","100");
> svgChild1.setAttribute("height","50");
> svgChild1.setAttribute("fill","red");
> svg.appendChild(svgChild1);
> svg.setAttribute("xmlns","http://www.w3.org/2000/svg");
> svg.setAttribute("width","400");
> svg.setAttribute("height","450");
> this.add(svg);
>
> But when i run this i get the following error,
> Could not evaluate javascript response:
>
> Error: Invalid Widget: [object HTMLUnknownElement]
>
> and instead of adding the svg node to the widget, if i directly add to
> the document body, it adds up the svg node to the end of the dom but
> this is not what i want.
>
> Are there any tutorials on learning qooxdoo for this kind of requirement.
>
>
> BR,
> Kathir.
>

Report message to a moderator

Re: Doubt creating a custom widget - SVG Support [message #139549 is a reply to message #133149] Tue, 07 July 2009 07:14 Go to previous messageGo to next message
Kathiravan is currently offline Kathiravan Friend
Messages: 33
Registered: July 2009
Member
ok..finally i was able to create a svg based view with the online help. I
wrote a detailed post on the following link..

http://random-eclipse-tips.blogspot.com/2009/07/eclipse-rap- custom-widget-development.html

BR,
Kathir.

Report message to a moderator

Re: Doubt creating a custom widget - SVG Support [message #139665 is a reply to message #139549] Tue, 07 July 2009 20:06 Go to previous messageGo to next message
Ralf Sternberg is currently offline Ralf SternbergFriend
Messages: 1313
Registered: July 2009
Senior Member
Hi Kathir,

> ok..finally i was able to create a svg based view with the online help.
> I wrote a detailed post on the following link..
>
> http://random-eclipse-tips.blogspot.com/2009/07/eclipse-rap- custom-widget-development.html

cool, congratulations. Although I do not understand in detail what this
widget does, it's great to see folks creating custom RAP widgets and
sharing their work.

I noticed that the formatting of your blog post is mangled - obviously
you mixed up a </pre> with a <pre>.

Cheers,
Ralf

Report message to a moderator

Re: Doubt creating a custom widget - SVG Support [message #139676 is a reply to message #139665] Tue, 07 July 2009 20:21 Go to previous message
Kathiravan is currently offline Kathiravan Friend
Messages: 33
Registered: July 2009
Member
Thanks for pointing out the error on the page. I fixed it.

The custom widget basically displays different images based on a set of
ids, ( i am using it to display DNA/RNA sequences as images ) and when
scrolled over the individual images we display some details about the
sequence.

The Raphael javascript library helps creating svg graphics very easily.

BR,
Kathir.

Report message to a moderator

Previous Topic:Interaction Design API example...
Next Topic:Do not use workbench as service locator
Goto Forum:
  

[ Syndicate this forum (XML) ] [ RSS ]

Current Time: Fri Dec 27 02:42:13 GMT 2024

Powered by FUDForum. Page generated in 0.35031 seconds
.:: Contact :: Home ::.

Powered by: FUDforum 3.0.2.
Copyright ©2001-2010 FUDforum Bulletin Board Software

Back to the top

Sign up to our Newsletter

A fresh new issue delivered monthly