Home » Eclipse Projects » Remote Application Platform (RAP) » Custom widgets
| Custom widgets [message #35004] |
Tue, 26 June 2007 13:52  |
Eclipse User |
|
|
|
Originally posted by: mehow.infogenia.pl
Hello,
RAP controls are great if one wants to have a desktop-like application.
But for me RAP would also be useful if I could create more traditionally
looking web applications. For this I need custom widgets. I know how to
implement one in a pure Java (I know SWT quite well), but I guess it
might be quite inefficient in some cases and some things just can't be
done this way.
I don't know JavaScript as well as I do Java, so some short tutorial
with one or two examples how to create such a control from scratch would
be nice. Where should I start? Where should I look for more? Maybe
somebody could provide some examples on wiki?
Thanks,
Michal
|
|
|
| Re: Custom widgets [message #35187 is a reply to message #35004] |
Tue, 26 June 2007 18:53  |
| Eclipse User |
|
|
|
Originally posted by: b.muskalla.gmx.net
Hi,
in fact I think many people like to see a howto on creating custom
widgets. We'll try to provide one in the wiki in the next days.
But before you could take a look at some existing widgets like the Label
or the ProgressBar. The only thing you need is the Widget class itself
which handles all the logic, a Life Cycle Adapter (LCA) to build the
bridge between the nature of RAP and your widget and if you need: some
client side java scripts which uses properties of your widget trough the
LCA.
Don't hesitate to ask question about this here in the newsgroup. We'll
try to help you. And as I said, we'll try to provide a little tutorial
in the next days.
Cheers
Benny
Michał Tkacz wrote:
> Hello,
>
> RAP controls are great if one wants to have a desktop-like application.
> But for me RAP would also be useful if I could create more traditionally
> looking web applications. For this I need custom widgets. I know how to
> implement one in a pure Java (I know SWT quite well), but I guess it
> might be quite inefficient in some cases and some things just can't be
> done this way.
>
> I don't know JavaScript as well as I do Java, so some short tutorial
> with one or two examples how to create such a control from scratch would
> be nice. Where should I start? Where should I look for more? Maybe
> somebody could provide some examples on wiki?
>
> Thanks,
>
> Michal
|
|
|
| Re: Custom widgets [message #35264 is a reply to message #35187] |
Tue, 26 June 2007 20:43 |
| Eclipse User |
|
|
|
Originally posted by: rsternberg.innoopract.com
Hi,
Benjamin Muskalla schrieb:
> But before you could take a look at some existing widgets like the Label
> or the ProgressBar. The only thing you need is the Widget class itself
> which handles all the logic, a Life Cycle Adapter (LCA) to build the
> bridge between the nature of RAP and your widget and if you need: some
> client side java scripts which uses properties of your widget trough the
> LCA.
Another interesting example is the Google Maps widget, that Frank
implemented for a showcase application. You can find it here:
http://innoopract.com/components/org.eclipse.rap.gmaps_1.0.0 .jar
This also shows how the widget, the LCA, and the JavaScript works
togther. Anyway, we really need a custom widgets tutorial...
Ralf
|
|
|
| Re: Custom widgets [message #35291 is a reply to message #35187] |
Tue, 26 June 2007 21:05 |
| Eclipse User |
|
|
|
Originally posted by: mehow.infogenia.pl
This is a multi-part message in MIME format.
--------------030307030006020800030608
Content-Type: text/plain; charset=ISO-8859-2; format=flowed
Content-Transfer-Encoding: 8bit
Thanks again Benny,
Let me explain what I already tried. I've attached a design of a widget
I would like to create. Let's call it a box. This looks and works very
much like a group with two important differences:
1) the arrow in the upper left corner when clicked should collapse the
contents (then expand it when clicked again),
2) the corners of the widget are slightly rounded (which means that I
will have to put some images into those corners).
I checked the source code for Group and started to write my own
implementation, temporarily forgetting about rounded corners and the
toggle button:
public class Box extends Composite {
private static final int TRIM_LEFT = 4;
// How do I know the height of the title?
private static final int TRIM_TOP = 22;
private static final int TRIM_RIGHT = 4;
private static final int TRIM_BOTTOM = 4;
private String text = "";
public Box(Composite parent, int style) {
super(parent, style);
}
@Override
public Rectangle getClientArea() {
checkWidget();
Rectangle bounds = getBounds();
int width = Math.max(0, bounds.width - TRIM_LEFT - TRIM_RIGHT);
int height = Math.max(0, bounds.height - TRIM_TOP
- TRIM_BOTTOM);
return new Rectangle(TRIM_LEFT, TRIM_TOP, width, height);
}
@Override
public Rectangle computeTrim(int x, int y, int width, int height) {
return super.computeTrim(x - TRIM_LEFT, y - TRIM_TOP,
width + TRIM_LEFT + TRIM_RIGHT,
height + TRIM_TOP + TRIM_BOTTOM);
}
public void setText(final String text) {
checkWidget();
if(text == null)
SWT.error( SWT.ERROR_NULL_ARGUMENT );
this.text = text;
}
public String getText() {
checkWidget();
return text;
}
// TODO: some getters and setters for colors would be useful
// here as well
}
I already knew the next class to create was Lifecycle Adapter, so again
I (almost) duplicated GroupLCA:
public class BoxLCA extends AbstractWidgetLCA {
private static final String PROP_TEXT = "text";
@Override
public void preserveValues(final Widget widget) {
Box box = (Box) widget;
ControlLCAUtil.preserveValues(box);
IWidgetAdapter adapter = WidgetUtil.getAdapter(box);
adapter.preserve(PROP_TEXT, box.getText());
}
@Override
public void renderChanges(Widget widget) throws IOException {
Box box = (Box) widget;
ControlLCAUtil.writeChanges(box);
JSWriter writer = JSWriter.getWriterFor(box);
String text = box.getText();
if (WidgetLCAUtil.hasChanged(widget, PROP_TEXT, text, "")) {
text = WidgetLCAUtil.escapeText(text, true);
writer.set("title", text);
}
}
@Override
public void renderDispose(Widget widget) throws IOException {
JSWriter writer = JSWriter.getWriterFor(widget);
writer.dispose();
}
@Override
public void renderInitialization(Widget widget) throws IOException {
JSWriter writer = JSWriter.getWriterFor(widget);
writer.newWidget(Box.class.getName());
}
public void readData(Widget widget) {
}
}
As you can see I just changed "legend" to "title" being prepared to take
this change into account in code which was to come.
At last it was time to get my hands dirty and write some JavaScript
code. Looking at RWT code I created Box.js and put into a directory
js/my/package outside the source directory. Looking at Group.js I
realized that it inherits from GroupBox. Unsure if I should do the same,
I decided I will do for now. At this point I was forced to change
"title" back to "legend". Here is Box.js:
/**
* This class extends qx.ui.groupbox.GroupBox to ease its usage in RWT.
*/
qx.Class.define( "my.package.Box", {
extend : qx.ui.groupbox.GroupBox,
construct : function() {
this.base( arguments );
this._getLabelObject().setMode( "html" ); // what does it do?
},
members : {
setFont : function( value ) {
this._getLabelObject().setFont( value );
},
_getLabelObject : function() {
if ( this.getLegendObject().getLabelObject() == null ) {
this.setLegend( "(empty)" );
this.setLegend( "" );
}
return this.getLegendObject().getLabelObject();
}
}
});
Looks familiar, right? I didn't want to mess with it as I don't feel
confident writing JavaScript (yet).
Two questions arised at this point:
1) Why is Group.js in both the "src" folder and "js" folder?
2) Where do I find the source of qx.ui.groupbox.GroupBox so that I can
see how it works? (writing this post I finally found it in Qooxdoo SDK.
I guess I'll have to dive into it now).
Another thing I tried was to register Box.js using
org.eclipse.rap.ui.workbench.resources extension point. I am not sure if
it's necessary though.
At last I wrote a few lines of code to test the widget. The good thing
is that the widget (a solid rectangle) appears and it's children seem to
be layouted properly. The bad thing however is that although I set the
title using setText method, it doesn't appear.
What I really don't know however is how to describe the appearance of of
the widget (border/interior, rounded corners, toggle button). I guess I
would use a table for that but maybe absolute positioning is better.
Anyway I don't know where to put the actual code.
And the next question would be how to attach a client-side listener to
the toggle button (this is where I'll probably have to read some book on
DHTML ;)
I hope you're still reading at this point :)
Cheers
Michal
P.S. I'm looking forward to the tutorial :)
Benjamin Muskalla pisze:
> Hi,
>
> in fact I think many people like to see a howto on creating custom
> widgets. We'll try to provide one in the wiki in the next days.
>
> But before you could take a look at some existing widgets like the Label
> or the ProgressBar. The only thing you need is the Widget class itself
> which handles all the logic, a Life Cycle Adapter (LCA) to build the
> bridge between the nature of RAP and your widget and if you need: some
> client side java scripts which uses properties of your widget trough the
> LCA.
>
> Don't hesitate to ask question about this here in the newsgroup. We'll
> try to help you. And as I said, we'll try to provide a little tutorial
> in the next days.
>
> Cheers
> Benny
>
> Micha
|
|
|
| Re: Custom widgets [message #35357 is a reply to message #35264] |
Tue, 26 June 2007 21:21 |
| Eclipse User |
|
|
|
Originally posted by: mehow.infogenia.pl
Ralf Sternberg pisze:
> Hi,
>
> Benjamin Muskalla schrieb:
>> But before you could take a look at some existing widgets like the
>> Label or the ProgressBar. The only thing you need is the Widget class
>> itself which handles all the logic, a Life Cycle Adapter (LCA) to
>> build the bridge between the nature of RAP and your widget and if you
>> need: some client side java scripts which uses properties of your
>> widget trough the LCA.
>
> Another interesting example is the Google Maps widget, that Frank
> implemented for a showcase application. You can find it here:
>
> http://innoopract.com/components/org.eclipse.rap.gmaps_1.0.0 .jar
>
> This also shows how the widget, the LCA, and the JavaScript works
> togther. Anyway, we really need a custom widgets tutorial...
>
> Ralf
Thanks again Ralf,
I'll definitely take a look at it tommorow.
Have a good night!
Michał
|
|
|
| Re: Custom widgets [message #35459 is a reply to message #35357] |
Wed, 27 June 2007 14:12 |
| Eclipse User |
|
|
|
Originally posted by: mehow.infogenia.pl
I read the code an have several questions. Hopefully you can answer those:
1. In GMapLCA.preserveValues() there's a line
adapter.preserve( PROP_ADDRESS, widget );
I wonder, shouldn't it be
adapter.preserve( PROP_ADDRESS, ((GMap) widget).getAddress() );
instead?
2. It seems that Javascript file describing the widget (creating
Javascript widget class) should always be placed in the source folder
and should always be registered using
org.eclipse.rap.ui.workbench.resources extension point. Is that true?
3. While in SWT/RWT new widgets inherit from Composite (or Canvas) it
seems that in qooxdoo they typically inherit from one of the subclasses
of qx.ui.core.Parent, e.g. qx.ui.layout.CanvasLayout. Is that right?
4. It seems that RWT M4 uses objects and methods that are deprecated in
Qooxdoo 0.7 (e.g. OO instead of Class). Is it OK to use the new API when
creating new widgets?
5. I noticed the use of qx.ui.core.Widget.flushGlobalQueues() . When
should I consider using this function when writing my own widget?
6. About the _doActivate() method - is it something that should be done
for each widget or is it just in the case of GMap?
I think I'll dig into qx.ui.groupbox.CheckGroupBox right now.
Thanks,
Michał
Michał Tkacz pisze:
> Ralf Sternberg pisze:
>> Hi,
>>
>> Benjamin Muskalla schrieb:
>>> But before you could take a look at some existing widgets like the
>>> Label or the ProgressBar. The only thing you need is the Widget class
>>> itself which handles all the logic, a Life Cycle Adapter (LCA) to
>>> build the bridge between the nature of RAP and your widget and if you
>>> need: some client side java scripts which uses properties of your
>>> widget trough the LCA.
>>
>> Another interesting example is the Google Maps widget, that Frank
>> implemented for a showcase application. You can find it here:
>>
>> http://innoopract.com/components/org.eclipse.rap.gmaps_1.0.0 .jar
>>
>> This also shows how the widget, the LCA, and the JavaScript works
>> togther. Anyway, we really need a custom widgets tutorial...
>>
>> Ralf
>
> Thanks again Ralf,
>
> I'll definitely take a look at it tommorow.
>
> Have a good night!
>
> Michał
|
|
|
| Re: Custom widgets [message #35493 is a reply to message #35459] |
Wed, 27 June 2007 16:52 |
| Eclipse User |
|
|
|
Originally posted by: rsternberg.innoopract.com
Hi Michał,
Michał Tkacz schrieb:
> 1. In GMapLCA.preserveValues() there's a line
>
> adapter.preserve( PROP_ADDRESS, widget );
>
> I wonder, shouldn't it be
>
> adapter.preserve( PROP_ADDRESS, ((GMap) widget).getAddress() );
>
> instead?
You're right, this is obviously a bug. A mistake in the preserve code
doesn't result in an error, but it causes the property unnecessarily
being rendered with every response.
> 2. It seems that Javascript file describing the widget (creating
> Javascript widget class) should always be placed in the source folder
> and should always be registered using
> org.eclipse.rap.ui.workbench.resources extension point. Is that true?
Yes, you have to register your JS code so that is copied to the web
server and made available for the client.
> 3. While in SWT/RWT new widgets inherit from Composite (or Canvas) it
> seems that in qooxdoo they typically inherit from one of the subclasses
> of qx.ui.core.Parent, e.g. qx.ui.layout.CanvasLayout. Is that right?
That depends on your requirements. CanvasLayout is probably a good
choice, if your widget has any child widgets on the client side.
Otherwise, Terminator might be appropriate. However, as far as I know,
there are no restrictions with regard to subclassing in qooxdoo.
> 4. It seems that RWT M4 uses objects and methods that are deprecated in
> Qooxdoo 0.7 (e.g. OO instead of Class). Is it OK to use the new API when
> creating new widgets?
Did you really find those deprecated references in the M4 code or in the
GMaps custom control? Note that the GMaps control predates qooxdoo 0.7.
For new controls, you'll have to use the qx 0.7 API.
> 5. I noticed the use of qx.ui.core.Widget.flushGlobalQueues() . When
> should I consider using this function when writing my own widget?
This method is automatically called at the end of every response. Under
normal circumstances, you don't have to use this function in your code.
> 6. About the _doActivate() method - is it something that should be done
> for each widget or is it just in the case of GMap?
This was just a hack, specific to the GMaps widget. The background is
that the GMaps widget "swallows" the click event, which is needed for
the view activation in the workbench.
Good luck with your control, we're always interested to hear about
success or problems...
Cheers,
Ralf
|
|
|
| Re: Custom widgets [message #36026 is a reply to message #35493] |
Thu, 28 June 2007 22:31 |
| Eclipse User |
|
|
|
Originally posted by: mehow.infogenia.pl
Ralf Sternberg pisze:
> Hi Michał,
>
> Michał Tkacz schrieb:
>> 1. In GMapLCA.preserveValues() there's a line
>>
>> adapter.preserve( PROP_ADDRESS, widget );
>>
>> I wonder, shouldn't it be
>>
>> adapter.preserve( PROP_ADDRESS, ((GMap) widget).getAddress() );
>>
>> instead?
>
> You're right, this is obviously a bug. A mistake in the preserve code
> doesn't result in an error, but it causes the property unnecessarily
> being rendered with every response.
>
>> 2. It seems that Javascript file describing the widget (creating
>> Javascript widget class) should always be placed in the source folder
>> and should always be registered using
>> org.eclipse.rap.ui.workbench.resources extension point. Is that true?
>
> Yes, you have to register your JS code so that is copied to the web
> server and made available for the client.
>
>> 3. While in SWT/RWT new widgets inherit from Composite (or Canvas) it
>> seems that in qooxdoo they typically inherit from one of the
>> subclasses of qx.ui.core.Parent, e.g. qx.ui.layout.CanvasLayout. Is
>> that right?
>
> That depends on your requirements. CanvasLayout is probably a good
> choice, if your widget has any child widgets on the client side.
> Otherwise, Terminator might be appropriate. However, as far as I know,
> there are no restrictions with regard to subclassing in qooxdoo.
>
>> 4. It seems that RWT M4 uses objects and methods that are deprecated
>> in Qooxdoo 0.7 (e.g. OO instead of Class). Is it OK to use the new API
>> when creating new widgets?
>
> Did you really find those deprecated references in the M4 code or in the
> GMaps custom control?
You're right. It must have been GMap.js. Sorry for the confusion.
> Note that the GMaps control predates qooxdoo 0.7.
> For new controls, you'll have to use the qx 0.7 API.
>
>> 5. I noticed the use of qx.ui.core.Widget.flushGlobalQueues() . When
>> should I consider using this function when writing my own widget?
>
> This method is automatically called at the end of every response. Under
> normal circumstances, you don't have to use this function in your code.
>
>> 6. About the _doActivate() method - is it something that should be
>> done for each widget or is it just in the case of GMap?
>
> This was just a hack, specific to the GMaps widget. The background is
> that the GMaps widget "swallows" the click event, which is needed for
> the view activation in the workbench.
>
> Good luck with your control, we're always interested to hear about
> success or problems...
>
> Cheers,
> Ralf
Thanks for all the answers,
Michał
|
|
|
| Re: Custom widgets [message #37150 is a reply to message #35187] |
Wed, 11 July 2007 11:53 |
| Eclipse User |
|
|
|
Originally posted by: mehow.infogenia.pl
Benjamin Muskalla pisze:
> Hi,
>
> in fact I think many people like to see a howto on creating custom
> widgets. We'll try to provide one in the wiki in the next days.
>
> But before you could take a look at some existing widgets like the Label
> or the ProgressBar. The only thing you need is the Widget class itself
> which handles all the logic, a Life Cycle Adapter (LCA) to build the
> bridge between the nature of RAP and your widget and if you need: some
> client side java scripts which uses properties of your widget trough the
> LCA.
>
> Don't hesitate to ask question about this here in the newsgroup. We'll
> try to help you. And as I said, we'll try to provide a little tutorial
> in the next days.
Hello Benny,
Did you manage to create that tutorial maybe? As you might guessed I
didn't dive deeply into creating-custom-widgets problem yet. Yeah, I
read some code, but didn't create anything yet. I hope to do this in
coming days.
Michal
>
> Cheers
> Benny
>
> Michał Tkacz wrote:
>> Hello,
>>
>> RAP controls are great if one wants to have a desktop-like application.
>> But for me RAP would also be useful if I could create more
>> traditionally looking web applications. For this I need custom
>> widgets. I know how to implement one in a pure Java (I know SWT quite
>> well), but I guess it might be quite inefficient in some cases and
>> some things just can't be done this way.
>>
>> I don't know JavaScript as well as I do Java, so some short tutorial
>> with one or two examples how to create such a control from scratch
>> would be nice. Where should I start? Where should I look for more?
>> Maybe somebody could provide some examples on wiki?
>>
>> Thanks,
>>
>> Michal
|
|
|
| Re: Custom widgets [message #37184 is a reply to message #37150] |
Wed, 11 July 2007 12:06 |
 Benjamin Muskalla
Messages: 237
Registered: July 2009 |
Senior Member |
|
|
Hi Michał,
as you may know - Friday is Milestone time ;-)
There are several big things in progress which should be done for the
milestone and at the moment we are very busy.
Hope to get some time for it when the milestone is released.
Cheers
Benny
Michał Tkacz wrote:
> Benjamin Muskalla pisze:
>> Hi,
>>
>> in fact I think many people like to see a howto on creating custom
>> widgets. We'll try to provide one in the wiki in the next days.
>>
>> But before you could take a look at some existing widgets like the
>> Label or the ProgressBar. The only thing you need is the Widget class
>> itself which handles all the logic, a Life Cycle Adapter (LCA) to
>> build the bridge between the nature of RAP and your widget and if you
>> need: some client side java scripts which uses properties of your
>> widget trough the LCA.
>>
>> Don't hesitate to ask question about this here in the newsgroup. We'll
>> try to help you. And as I said, we'll try to provide a little tutorial
>> in the next days.
>
> Hello Benny,
>
> Did you manage to create that tutorial maybe? As you might guessed I
> didn't dive deeply into creating-custom-widgets problem yet. Yeah, I
> read some code, but didn't create anything yet. I hope to do this in
> coming days.
>
> Michal
>
>>
>> Cheers
>> Benny
>>
>> Michał Tkacz wrote:
>>> Hello,
>>>
>>> RAP controls are great if one wants to have a desktop-like application.
>>> But for me RAP would also be useful if I could create more
>>> traditionally looking web applications. For this I need custom
>>> widgets. I know how to implement one in a pure Java (I know SWT quite
>>> well), but I guess it might be quite inefficient in some cases and
>>> some things just can't be done this way.
>>>
>>> I don't know JavaScript as well as I do Java, so some short tutorial
>>> with one or two examples how to create such a control from scratch
>>> would be nice. Where should I start? Where should I look for more?
>>> Maybe somebody could provide some examples on wiki?
>>>
>>> Thanks,
>>>
>>> Michal
|
|
|
| Re: Custom widgets - javascript problem? [message #40609 is a reply to message #35291] |
Wed, 25 July 2007 15:33 |
| Eclipse User |
|
|
|
Originally posted by: giuliapo.gmail.com
Michał Tkacz wrote:
> Thanks again Benny,
>
> Let me explain what I already tried. I've attached a design of a widget
> I would like to create. Let's call it a box. This looks and works very
> much like a group with two important differences:
> 1) the arrow in the upper left corner when clicked should collapse the
> contents (then expand it when clicked again),
> 2) the corners of the widget are slightly rounded (which means that I
> will have to put some images into those corners).
>
> I checked the source code for Group and started to write my own
> implementation, temporarily forgetting about rounded corners and the
> toggle button:
>
> public class Box extends Composite {
>
> private static final int TRIM_LEFT = 4;
> // How do I know the height of the title?
> private static final int TRIM_TOP = 22;
> private static final int TRIM_RIGHT = 4;
> private static final int TRIM_BOTTOM = 4;
>
> private String text = "";
>
> public Box(Composite parent, int style) {
> super(parent, style);
> }
>
> @Override
> public Rectangle getClientArea() {
> checkWidget();
> Rectangle bounds = getBounds();
> int width = Math.max(0, bounds.width - TRIM_LEFT - TRIM_RIGHT);
> int height = Math.max(0, bounds.height - TRIM_TOP
> - TRIM_BOTTOM);
> return new Rectangle(TRIM_LEFT, TRIM_TOP, width, height);
> }
>
> @Override
> public Rectangle computeTrim(int x, int y, int width, int height) {
> return super.computeTrim(x - TRIM_LEFT, y - TRIM_TOP,
> width + TRIM_LEFT + TRIM_RIGHT,
> height + TRIM_TOP + TRIM_BOTTOM);
> }
>
> public void setText(final String text) {
> checkWidget();
>
> if(text == null)
> SWT.error( SWT.ERROR_NULL_ARGUMENT );
>
> this.text = text;
> }
>
> public String getText() {
> checkWidget();
> return text;
> }
>
> // TODO: some getters and setters for colors would be useful
> // here as well
>
> }
>
> I already knew the next class to create was Lifecycle Adapter, so again
> I (almost) duplicated GroupLCA:
>
> public class BoxLCA extends AbstractWidgetLCA {
>
> private static final String PROP_TEXT = "text";
>
> @Override
> public void preserveValues(final Widget widget) {
> Box box = (Box) widget;
> ControlLCAUtil.preserveValues(box);
> IWidgetAdapter adapter = WidgetUtil.getAdapter(box);
> adapter.preserve(PROP_TEXT, box.getText());
> }
>
> @Override
> public void renderChanges(Widget widget) throws IOException {
> Box box = (Box) widget;
> ControlLCAUtil.writeChanges(box);
> JSWriter writer = JSWriter.getWriterFor(box);
> String text = box.getText();
>
> if (WidgetLCAUtil.hasChanged(widget, PROP_TEXT, text, "")) {
> text = WidgetLCAUtil.escapeText(text, true);
> writer.set("title", text);
> }
> }
>
> @Override
> public void renderDispose(Widget widget) throws IOException {
> JSWriter writer = JSWriter.getWriterFor(widget);
> writer.dispose();
> }
>
> @Override
> public void renderInitialization(Widget widget) throws IOException {
> JSWriter writer = JSWriter.getWriterFor(widget);
> writer.newWidget(Box.class.getName());
> }
>
> public void readData(Widget widget) {
> }
>
> }
>
> As you can see I just changed "legend" to "title" being prepared to take
> this change into account in code which was to come.
>
> At last it was time to get my hands dirty and write some JavaScript
> code. Looking at RWT code I created Box.js and put into a directory
> js/my/package outside the source directory. Looking at Group.js I
> realized that it inherits from GroupBox. Unsure if I should do the same,
> I decided I will do for now. At this point I was forced to change
> "title" back to "legend". Here is Box.js:
>
> /**
> * This class extends qx.ui.groupbox.GroupBox to ease its usage in RWT.
> */
> qx.Class.define( "my.package.Box", {
> extend : qx.ui.groupbox.GroupBox,
>
> construct : function() {
> this.base( arguments );
> this._getLabelObject().setMode( "html" ); // what does it do?
> },
>
> members : {
> setFont : function( value ) {
> this._getLabelObject().setFont( value );
> },
>
> _getLabelObject : function() {
> if ( this.getLegendObject().getLabelObject() == null ) {
> this.setLegend( "(empty)" );
> this.setLegend( "" );
> }
> return this.getLegendObject().getLabelObject();
> }
> }
> });
>
> Looks familiar, right? I didn't want to mess with it as I don't feel
> confident writing JavaScript (yet).
>
> Two questions arised at this point:
> 1) Why is Group.js in both the "src" folder and "js" folder?
> 2) Where do I find the source of qx.ui.groupbox.GroupBox so that I can
> see how it works? (writing this post I finally found it in Qooxdoo SDK.
> I guess I'll have to dive into it now).
>
> Another thing I tried was to register Box.js using
> org.eclipse.rap.ui.workbench.resources extension point. I am not sure if
> it's necessary though.
>
> At last I wrote a few lines of code to test the widget. The good thing
> is that the widget (a solid rectangle) appears and it's children seem to
> be layouted properly. The bad thing however is that although I set the
> title using setText method, it doesn't appear.
>
> What I really don't know however is how to describe the appearance of of
> the widget (border/interior, rounded corners, toggle button). I guess I
> would use a table for that but maybe absolute positioning is better.
> Anyway I don't know where to put the actual code.
>
> And the next question would be how to attach a client-side listener to
> the toggle button (this is where I'll probably have to read some book on
> DHTML ;)
>
> I hope you're still reading at this point :)
>
> Cheers
>
> Michal
>
> P.S. I'm looking forward to the tutorial :)
>
> Benjamin Muskalla pisze:
>> Hi,
>>
>> in fact I think many people like to see a howto on creating custom
>> widgets. We'll try to provide one in the wiki in the next days.
>>
>> But before you could take a look at some existing widgets like the
>> Label or the ProgressBar. The only thing you need is the Widget class
>> itself which handles all the logic, a Life Cycle Adapter (LCA) to
>> build the bridge between the nature of RAP and your widget and if you
>> need: some client side java scripts which uses properties of your
>> widget trough the LCA.
>>
>> Don't hesitate to ask question about this here in the newsgroup. We'll
>> try to help you. And as I said, we'll try to provide a little tutorial
>> in the next days.
>>
>> Cheers
>> Benny
>>
>> Michał Tkacz wrote:
>>> Hello,
>>>
>>> RAP controls are great if one wants to have a desktop-like application.
>>> But for me RAP would also be useful if I could create more
>>> traditionally looking web applications. For this I need custom
>>> widgets. I know how to implement one in a pure Java (I know SWT quite
>>> well), but I guess it might be quite inefficient in some cases and
>>> some things just can't be done this way.
>>>
>>> I don't know JavaScript as well as I do Java, so some short tutorial
>>> with one or two examples how to create such a control from scratch
>>> would be nice. Where should I start? Where should I look for more?
>>> Maybe somebody could provide some examples on wiki?
>>>
>>> Thanks,
>>>
>>> Michal
>
>
> ------------------------------------------------------------ ------------
>
Hi Michal!
I read yout almost tutorial about doing a custom widget.
But as happened to you, my Box doesn't react to any method like setText
in terms of Javascript. I think the problem is somewhere on the
javascript. Because if i create the Box and after box.setText, I print
out a box.getText, I have the correct value. But I can't make it work on
the javascript.. nothing happens...
Can you help meu on this? Could you make it work? I mean..did you
accomplish entirely the "custom widget quest"? :)
Regards,
Bruno.
|
|
|
| Re: Custom widgets - javascript problem? [message #40642 is a reply to message #35291] |
Wed, 25 July 2007 15:38 |
| Eclipse User |
|
|
|
Originally posted by: giuliapo.gmail.com
Hi Michal!
I read yout almost tutorial about doing a custom widget.
But as happened to you, my Box doesn't react to any method like setText
in terms of Javascript. I think the problem is somewhere on the
javascript. Because if i create the Box and after box.setText, I print
out a box.getText, I have the correct value. But I can't make it work on
the javascript.. nothing happens...
Can you help meu on this? Could you make it work? I mean..did you
accomplish entirely the "custom widget quest"? :)
Regards,
Bruno.
Michał Tkacz wrote:
> Thanks again Benny,
>
> Let me explain what I already tried. I've attached a design of a widget
> I would like to create. Let's call it a box. This looks and works very
> much like a group with two important differences:
> 1) the arrow in the upper left corner when clicked should collapse the
> contents (then expand it when clicked again),
> 2) the corners of the widget are slightly rounded (which means that I
> will have to put some images into those corners).
>
> I checked the source code for Group and started to write my own
> implementation, temporarily forgetting about rounded corners and the
> toggle button:
>
> public class Box extends Composite {
>
> private static final int TRIM_LEFT = 4;
> // How do I know the height of the title?
> private static final int TRIM_TOP = 22;
> private static final int TRIM_RIGHT = 4;
> private static final int TRIM_BOTTOM = 4;
>
> private String text = "";
>
> public Box(Composite parent, int style) {
> super(parent, style);
> }
>
> @Override
> public Rectangle getClientArea() {
> checkWidget();
> Rectangle bounds = getBounds();
> int width = Math.max(0, bounds.width - TRIM_LEFT - TRIM_RIGHT);
> int height = Math.max(0, bounds.height - TRIM_TOP
> - TRIM_BOTTOM);
> return new Rectangle(TRIM_LEFT, TRIM_TOP, width, height);
> }
>
> @Override
> public Rectangle computeTrim(int x, int y, int width, int height) {
> return super.computeTrim(x - TRIM_LEFT, y - TRIM_TOP,
> width + TRIM_LEFT + TRIM_RIGHT,
> height + TRIM_TOP + TRIM_BOTTOM);
> }
>
> public void setText(final String text) {
> checkWidget();
>
> if(text == null)
> SWT.error( SWT.ERROR_NULL_ARGUMENT );
>
> this.text = text;
> }
>
> public String getText() {
> checkWidget();
> return text;
> }
>
> // TODO: some getters and setters for colors would be useful
> // here as well
>
> }
>
> I already knew the next class to create was Lifecycle Adapter, so again
> I (almost) duplicated GroupLCA:
>
> public class BoxLCA extends AbstractWidgetLCA {
>
> private static final String PROP_TEXT = "text";
>
> @Override
> public void preserveValues(final Widget widget) {
> Box box = (Box) widget;
> ControlLCAUtil.preserveValues(box);
> IWidgetAdapter adapter = WidgetUtil.getAdapter(box);
> adapter.preserve(PROP_TEXT, box.getText());
> }
>
> @Override
> public void renderChanges(Widget widget) throws IOException {
> Box box = (Box) widget;
> ControlLCAUtil.writeChanges(box);
> JSWriter writer = JSWriter.getWriterFor(box);
> String text = box.getText();
>
> if (WidgetLCAUtil.hasChanged(widget, PROP_TEXT, text, "")) {
> text = WidgetLCAUtil.escapeText(text, true);
> writer.set("title", text);
> }
> }
>
> @Override
> public void renderDispose(Widget widget) throws IOException {
> JSWriter writer = JSWriter.getWriterFor(widget);
> writer.dispose();
> }
>
> @Override
> public void renderInitialization(Widget widget) throws IOException {
> JSWriter writer = JSWriter.getWriterFor(widget);
> writer.newWidget(Box.class.getName());
> }
>
> public void readData(Widget widget) {
> }
>
> }
>
> As you can see I just changed "legend" to "title" being prepared to take
> this change into account in code which was to come.
>
> At last it was time to get my hands dirty and write some JavaScript
> code. Looking at RWT code I created Box.js and put into a directory
> js/my/package outside the source directory. Looking at Group.js I
> realized that it inherits from GroupBox. Unsure if I should do the same,
> I decided I will do for now. At this point I was forced to change
> "title" back to "legend". Here is Box.js:
>
> /**
> * This class extends qx.ui.groupbox.GroupBox to ease its usage in RWT.
> */
> qx.Class.define( "my.package.Box", {
> extend : qx.ui.groupbox.GroupBox,
>
> construct : function() {
> this.base( arguments );
> this._getLabelObject().setMode( "html" ); // what does it do?
> },
>
> members : {
> setFont : function( value ) {
> this._getLabelObject().setFont( value );
> },
>
> _getLabelObject : function() {
> if ( this.getLegendObject().getLabelObject() == null ) {
> this.setLegend( "(empty)" );
> this.setLegend( "" );
> }
> return this.getLegendObject().getLabelObject();
> }
> }
> });
>
> Looks familiar, right? I didn't want to mess with it as I don't feel
> confident writing JavaScript (yet).
>
> Two questions arised at this point:
> 1) Why is Group.js in both the "src" folder and "js" folder?
> 2) Where do I find the source of qx.ui.groupbox.GroupBox so that I can
> see how it works? (writing this post I finally found it in Qooxdoo SDK.
> I guess I'll have to dive into it now).
>
> Another thing I tried was to register Box.js using
> org.eclipse.rap.ui.workbench.resources extension point. I am not sure if
> it's necessary though.
>
> At last I wrote a few lines of code to test the widget. The good thing
> is that the widget (a solid rectangle) appears and it's children seem to
> be layouted properly. The bad thing however is that although I set the
> title using setText method, it doesn't appear.
>
> What I really don't know however is how to describe the appearance of of
> the widget (border/interior, rounded corners, toggle button). I guess I
> would use a table for that but maybe absolute positioning is better.
> Anyway I don't know where to put the actual code.
>
> And the next question would be how to attach a client-side listener to
> the toggle button (this is where I'll probably have to read some book on
> DHTML ;)
>
> I hope you're still reading at this point :)
>
> Cheers
>
> Michal
>
> P.S. I'm looking forward to the tutorial :)
>
> Benjamin Muskalla pisze:
>> Hi,
>>
>> in fact I think many people like to see a howto on creating custom
>> widgets. We'll try to provide one in the wiki in the next days.
>>
>> But before you could take a look at some existing widgets like the
>> Label or the ProgressBar. The only thing you need is the Widget class
>> itself which handles all the logic, a Life Cycle Adapter (LCA) to
>> build the bridge between the nature of RAP and your widget and if you
>> need: some client side java scripts which uses properties of your
>> widget trough the LCA.
>>
>> Don't hesitate to ask question about this here in the newsgroup. We'll
>> try to help you. And as I said, we'll try to provide a little tutorial
>> in the next days.
>>
>> Cheers
>> Benny
>>
>> Michał Tkacz wrote:
>>> Hello,
>>>
>>> RAP controls are great if one wants to have a desktop-like application.
>>> But for me RAP would also be useful if I could create more
>>> traditionally looking web applications. For this I need custom
>>> widgets. I know how to implement one in a pure Java (I know SWT quite
>>> well), but I guess it might be quite inefficient in some cases and
>>> some things just can't be done this way.
>>>
>>> I don't know JavaScript as well as I do Java, so some short tutorial
>>> with one or two examples how to create such a control from scratch
>>> would be nice. Where should I start? Where should I look for more?
>>> Maybe somebody could provide some examples on wiki?
>>>
>>> Thanks,
>>>
>>> Michal
>
>
> ------------------------------------------------------------ ------------
>
|
|
|
| Re: Custom widgets - javascript problem? [message #40736 is a reply to message #40609] |
Wed, 25 July 2007 19:24 |
| Eclipse User |
|
|
|
Originally posted by: mehow.infogenia.pl
This is a multi-part message in MIME format.
--------------090002050407070208050508
Content-Type: text/plain; charset=ISO-8859-2; format=flowed
Content-Transfer-Encoding: 8bit
Bruno Vieira wrote:
> Micha
|
|
|
| Re: Custom widgets - javascript problem? [message #40833 is a reply to message #40736] |
Wed, 25 July 2007 22:03 |
| Eclipse User |
|
|
|
Originally posted by: b.muskalla.gmx.net
Hi Michał,
nice to see some working code. Will take a look at it later to see what
you worked out.
As it doesn't sound nice that your team will switch over to GWT, I'm
really interested which features are missing in RAP for your projects.
I didn't say that we'll implement them in any way but I'd really like to
know what are the problems of our community :-)
Cheers
Benny
Michał Tkacz wrote:
> Bruno Vieira wrote:
>> Michał Tkacz wrote:
>>> Thanks again Benny,
>>>
>>> Let me explain what I already tried. I've attached a design of a
>>> widget I would like to create. Let's call it a box. This looks and
>>> works very much like a group with two important differences:
>>> 1) the arrow in the upper left corner when clicked should collapse
>>> the contents (then expand it when clicked again),
>>> 2) the corners of the widget are slightly rounded (which means that I
>>> will have to put some images into those corners).
>>>
>>> I checked the source code for Group and started to write my own
>>> implementation, temporarily forgetting about rounded corners and the
>>> toggle button:
>>>
>>> public class Box extends Composite {
>>>
>>> private static final int TRIM_LEFT = 4;
>>> // How do I know the height of the title?
>>> private static final int TRIM_TOP = 22;
>>> private static final int TRIM_RIGHT = 4;
>>> private static final int TRIM_BOTTOM = 4;
>>>
>>> private String text = "";
>>>
>>> public Box(Composite parent, int style) {
>>> super(parent, style);
>>> }
>>> @Override
>>> public Rectangle getClientArea() {
>>> checkWidget();
>>> Rectangle bounds = getBounds();
>>> int width = Math.max(0, bounds.width - TRIM_LEFT - TRIM_RIGHT);
>>> int height = Math.max(0, bounds.height - TRIM_TOP
>>> - TRIM_BOTTOM);
>>> return new Rectangle(TRIM_LEFT, TRIM_TOP, width, height);
>>> }
>>> @Override
>>> public Rectangle computeTrim(int x, int y, int width, int height) {
>>> return super.computeTrim(x - TRIM_LEFT, y - TRIM_TOP,
>>> width + TRIM_LEFT + TRIM_RIGHT,
>>> height + TRIM_TOP + TRIM_BOTTOM);
>>> }
>>>
>>> public void setText(final String text) {
>>> checkWidget();
>>> if(text == null)
>>> SWT.error( SWT.ERROR_NULL_ARGUMENT );
>>>
>>> this.text = text;
>>> }
>>> public String getText() {
>>> checkWidget();
>>> return text;
>>> }
>>>
>>> // TODO: some getters and setters for colors would be useful
>>> // here as well
>>>
>>> }
>>>
>>> I already knew the next class to create was Lifecycle Adapter, so
>>> again I (almost) duplicated GroupLCA:
>>>
>>> public class BoxLCA extends AbstractWidgetLCA {
>>>
>>> private static final String PROP_TEXT = "text";
>>>
>>> @Override
>>> public void preserveValues(final Widget widget) {
>>> Box box = (Box) widget;
>>> ControlLCAUtil.preserveValues(box);
>>> IWidgetAdapter adapter = WidgetUtil.getAdapter(box);
>>> adapter.preserve(PROP_TEXT, box.getText());
>>> }
>>>
>>> @Override
>>> public void renderChanges(Widget widget) throws IOException {
>>> Box box = (Box) widget;
>>> ControlLCAUtil.writeChanges(box);
>>> JSWriter writer = JSWriter.getWriterFor(box);
>>> String text = box.getText();
>>> if (WidgetLCAUtil.hasChanged(widget, PROP_TEXT, text,
>>> "")) {
>>> text = WidgetLCAUtil.escapeText(text, true);
>>> writer.set("title", text);
>>> }
>>> }
>>>
>>> @Override
>>> public void renderDispose(Widget widget) throws IOException {
>>> JSWriter writer = JSWriter.getWriterFor(widget);
>>> writer.dispose();
>>> }
>>>
>>> @Override
>>> public void renderInitialization(Widget widget) throws IOException {
>>> JSWriter writer = JSWriter.getWriterFor(widget);
>>> writer.newWidget(Box.class.getName());
>>> }
>>>
>>> public void readData(Widget widget) {
>>> }
>>>
>>> }
>>>
>>> As you can see I just changed "legend" to "title" being prepared to
>>> take this change into account in code which was to come.
>>>
>>> At last it was time to get my hands dirty and write some JavaScript
>>> code. Looking at RWT code I created Box.js and put into a directory
>>> js/my/package outside the source directory. Looking at Group.js I
>>> realized that it inherits from GroupBox. Unsure if I should do the
>>> same, I decided I will do for now. At this point I was forced to
>>> change "title" back to "legend". Here is Box.js:
>>>
>>> /**
>>> * This class extends qx.ui.groupbox.GroupBox to ease its usage in RWT.
>>> */
>>> qx.Class.define( "my.package.Box", {
>>> extend : qx.ui.groupbox.GroupBox,
>>>
>>> construct : function() {
>>> this.base( arguments );
>>> this._getLabelObject().setMode( "html" ); // what does it do?
>>> },
>>>
>>> members : {
>>> setFont : function( value ) {
>>> this._getLabelObject().setFont( value );
>>> },
>>>
>>> _getLabelObject : function() {
>>> if ( this.getLegendObject().getLabelObject() == null ) {
>>> this.setLegend( "(empty)" );
>>> this.setLegend( "" );
>>> }
>>> return this.getLegendObject().getLabelObject();
>>> }
>>> }
>>> });
>>>
>>> Looks familiar, right? I didn't want to mess with it as I don't feel
>>> confident writing JavaScript (yet).
>>>
>>> Two questions arised at this point:
>>> 1) Why is Group.js in both the "src" folder and "js" folder?
>>> 2) Where do I find the source of qx.ui.groupbox.GroupBox so that I
>>> can see how it works? (writing this post I finally found it in
>>> Qooxdoo SDK. I guess I'll have to dive into it now).
>>>
>>> Another thing I tried was to register Box.js using
>>> org.eclipse.rap.ui.workbench.resources extension point. I am not sure
>>> if it's necessary though.
>>>
>>> At last I wrote a few lines of code to test the widget. The good
>>> thing is that the widget (a solid rectangle) appears and it's
>>> children seem to be layouted properly. The bad thing however is that
>>> although I set the title using setText method, it doesn't appear.
>>>
>>> What I really don't know however is how to describe the appearance of
>>> of the widget (border/interior, rounded corners, toggle button). I
>>> guess I would use a table for that but maybe absolute positioning is
>>> better. Anyway I don't know where to put the actual code.
>>>
>>> And the next question would be how to attach a client-side listener
>>> to the toggle button (this is where I'll probably have to read some
>>> book on DHTML ;)
>>>
>>> I hope you're still reading at this point :)
>>>
>>> Cheers
>>>
>>> Michal
>>>
>>> P.S. I'm looking forward to the tutorial :)
>>>
>>> Benjamin Muskalla pisze:
>>>> Hi,
>>>>
>>>> in fact I think many people like to see a howto on creating custom
>>>> widgets. We'll try to provide one in the wiki in the next days.
>>>>
>>>> But before you could take a look at some existing widgets like the
>>>> Label or the ProgressBar. The only thing you need is the Widget
>>>> class itself which handles all the logic, a Life Cycle Adapter (LCA)
>>>> to build the bridge between the nature of RAP and your widget and if
>>>> you need: some client side java scripts which uses properties of
>>>> your widget trough the LCA.
>>>>
>>>> Don't hesitate to ask question about this here in the newsgroup.
>>>> We'll try to help you. And as I said, we'll try to provide a little
>>>> tutorial in the next days.
>>>>
>>>> Cheers
>>>> Benny
>>>>
>>>> Michał Tkacz wrote:
>>>>> Hello,
>>>>>
>>>>> RAP controls are great if one wants to have a desktop-like
>>>>> application.
>>>>> But for me RAP would also be useful if I could create more
>>>>> traditionally looking web applications. For this I need custom
>>>>> widgets. I know how to implement one in a pure Java (I know SWT
>>>>> quite well), but I guess it might be quite inefficient in some
>>>>> cases and some things just can't be done this way.
>>>>>
>>>>> I don't know JavaScript as well as I do Java, so some short
>>>>> tutorial with one or two examples how to create such a control from
>>>>> scratch would be nice. Where should I start? Where should I look
>>>>> for more? Maybe somebody could provide some examples on wiki?
>>>>>
>>>>> Thanks,
>>>>>
>>>>> Michal
>>>
>>>
>>> ------------------------------------------------------------ ------------
>>>
>>
>>
>> Hi Michal!
>>
>> I read yout almost tutorial about doing a custom widget.
>> But as happened to you, my Box doesn't react to any method like
>> setText in terms of Javascript. I think the problem is somewhere on
>> the javascript. Because if i create the Box and after box.setText, I
>> print out a box.getText, I have the correct value. But I can't make it
>> work on the javascript.. nothing happens...
>>
>> Can you help meu on this? Could you make it work? I mean..did you
>> accomplish entirely the "custom widget quest"? :)
>
> Yes I did! But to be honest I don't really remember what I did to fix
> particular problem described above :/ But don't worry :) I've attached
> the code of the current version of the widget. It's by no means perfect,
> but works much better now :)
>
> If any of you guys find inside things that could be done better or in a
> different way, I'd be glad to hear about that. Also if you have further
> questions Bruno, let me know.
>
> Unfortunately due to coming deadlines and many features still missing in
> RAP, our team was forced to switch to GWT for now. But I still think
> that RAP is a nice project and plan to come back to it in few months maybe.
>
> Thanks for all the help I got here,
>
> Michal
>
|
|
|
| Re: Custom widgets - javascript problem? [message #40895 is a reply to message #40833] |
Thu, 26 July 2007 09:06 |
| Eclipse User |
|
|
|
Originally posted by: mehow.infogenia.pl
Benjamin Muskalla wrote:
> Hi Michał,
>
> nice to see some working code. Will take a look at it later to see what
> you worked out.
>
> As it doesn't sound nice that your team will switch over to GWT, I'm
> really interested which features are missing in RAP for your projects.
> I didn't say that we'll implement them in any way but I'd really like to
> know what are the problems of our community :-)
Hi Benny,
Most of the issues were already mentioned in this group. They're:
- no file upload widget
- no calendar widget
- no way to detect click events for existing widgets (only selected ones
support that)
- no way to detect mouse-over events for existing widgets (or other way
of implementing custom tooltips)
- no way to detect location changes in Browser if initiated by the user
(bug 196787)
- no way to detect selection changes in ScrollBar
- no tutorial for creating custom widgets ;)
What I'll be missing working with GWT are extensions mechanism to
modularize the UI (it can't be used since the code is compiled to
JavaScript) and SWT API that many of our team members know well.
Cheers
Michal
>
> Cheers
> Benny
>
> Michał Tkacz wrote:
>> Bruno Vieira wrote:
>>> Michał Tkacz wrote:
>>>> Thanks again Benny,
>>>>
>>>> Let me explain what I already tried. I've attached a design of a
>>>> widget I would like to create. Let's call it a box. This looks and
>>>> works very much like a group with two important differences:
>>>> 1) the arrow in the upper left corner when clicked should collapse
>>>> the contents (then expand it when clicked again),
>>>> 2) the corners of the widget are slightly rounded (which means that
>>>> I will have to put some images into those corners).
>>>>
>>>> I checked the source code for Group and started to write my own
>>>> implementation, temporarily forgetting about rounded corners and the
>>>> toggle button:
>>>>
>>>> public class Box extends Composite {
>>>>
>>>> private static final int TRIM_LEFT = 4;
>>>> // How do I know the height of the title?
>>>> private static final int TRIM_TOP = 22;
>>>> private static final int TRIM_RIGHT = 4;
>>>> private static final int TRIM_BOTTOM = 4;
>>>>
>>>> private String text = "";
>>>>
>>>> public Box(Composite parent, int style) {
>>>> super(parent, style);
>>>> }
>>>> @Override
>>>> public Rectangle getClientArea() {
>>>> checkWidget();
>>>> Rectangle bounds = getBounds();
>>>> int width = Math.max(0, bounds.width - TRIM_LEFT - TRIM_RIGHT);
>>>> int height = Math.max(0, bounds.height - TRIM_TOP
>>>> - TRIM_BOTTOM);
>>>> return new Rectangle(TRIM_LEFT, TRIM_TOP, width, height);
>>>> }
>>>> @Override
>>>> public Rectangle computeTrim(int x, int y, int width, int height) {
>>>> return super.computeTrim(x - TRIM_LEFT, y - TRIM_TOP,
>>>> width + TRIM_LEFT + TRIM_RIGHT,
>>>> height + TRIM_TOP + TRIM_BOTTOM);
>>>> }
>>>>
>>>> public void setText(final String text) {
>>>> checkWidget();
>>>> if(text == null)
>>>> SWT.error( SWT.ERROR_NULL_ARGUMENT );
>>>>
>>>> this.text = text;
>>>> }
>>>> public String getText() {
>>>> checkWidget();
>>>> return text;
>>>> }
>>>>
>>>> // TODO: some getters and setters for colors would be useful
>>>> // here as well
>>>>
>>>> }
>>>>
>>>> I already knew the next class to create was Lifecycle Adapter, so
>>>> again I (almost) duplicated GroupLCA:
>>>>
>>>> public class BoxLCA extends AbstractWidgetLCA {
>>>>
>>>> private static final String PROP_TEXT = "text";
>>>>
>>>> @Override
>>>> public void preserveValues(final Widget widget) {
>>>> Box box = (Box) widget;
>>>> ControlLCAUtil.preserveValues(box);
>>>> IWidgetAdapter adapter = WidgetUtil.getAdapter(box);
>>>> adapter.preserve(PROP_TEXT, box.getText());
>>>> }
>>>>
>>>> @Override
>>>> public void renderChanges(Widget widget) throws IOException {
>>>> Box box = (Box) widget;
>>>> ControlLCAUtil.writeChanges(box);
>>>> JSWriter writer = JSWriter.getWriterFor(box);
>>>> String text = box.getText();
>>>> if (WidgetLCAUtil.hasChanged(widget, PROP_TEXT, text,
>>>> "")) {
>>>> text = WidgetLCAUtil.escapeText(text, true);
>>>> writer.set("title", text);
>>>> }
>>>> }
>>>>
>>>> @Override
>>>> public void renderDispose(Widget widget) throws IOException {
>>>> JSWriter writer = JSWriter.getWriterFor(widget);
>>>> writer.dispose();
>>>> }
>>>>
>>>> @Override
>>>> public void renderInitialization(Widget widget) throws
>>>> IOException {
>>>> JSWriter writer = JSWriter.getWriterFor(widget);
>>>> writer.newWidget(Box.class.getName());
>>>> }
>>>>
>>>> public void readData(Widget widget) {
>>>> }
>>>>
>>>> }
>>>>
>>>> As you can see I just changed "legend" to "title" being prepared to
>>>> take this change into account in code which was to come.
>>>>
>>>> At last it was time to get my hands dirty and write some JavaScript
>>>> code. Looking at RWT code I created Box.js and put into a directory
>>>> js/my/package outside the source directory. Looking at Group.js I
>>>> realized that it inherits from GroupBox. Unsure if I should do the
>>>> same, I decided I will do for now. At this point I was forced to
>>>> change "title" back to "legend". Here is Box.js:
>>>>
>>>> /**
>>>> * This class extends qx.ui.groupbox.GroupBox to ease its usage in RWT.
>>>> */
>>>> qx.Class.define( "my.package.Box", {
>>>> extend : qx.ui.groupbox.GroupBox,
>>>>
>>>> construct : function() {
>>>> this.base( arguments );
>>>> this._getLabelObject().setMode( "html" ); // what does it do?
>>>> },
>>>>
>>>> members : {
>>>> setFont : function( value ) {
>>>> this._getLabelObject().setFont( value );
>>>> },
>>>>
>>>> _getLabelObject : function() {
>>>> if ( this.getLegendObject().getLabelObject() == null ) {
>>>> this.setLegend( "(empty)" );
>>>> this.setLegend( "" );
>>>> }
>>>> return this.getLegendObject().getLabelObject();
>>>> }
>>>> }
>>>> });
>>>>
>>>> Looks familiar, right? I didn't want to mess with it as I don't feel
>>>> confident writing JavaScript (yet).
>>>>
>>>> Two questions arised at this point:
>>>> 1) Why is Group.js in both the "src" folder and "js" folder?
>>>> 2) Where do I find the source of qx.ui.groupbox.GroupBox so that I
>>>> can see how it works? (writing this post I finally found it in
>>>> Qooxdoo SDK. I guess I'll have to dive into it now).
>>>>
>>>> Another thing I tried was to register Box.js using
>>>> org.eclipse.rap.ui.workbench.resources extension point. I am not
>>>> sure if it's necessary though.
>>>>
>>>> At last I wrote a few lines of code to test the widget. The good
>>>> thing is that the widget (a solid rectangle) appears and it's
>>>> children seem to be layouted properly. The bad thing however is that
>>>> although I set the title using setText method, it doesn't appear.
>>>>
>>>> What I really don't know however is how to describe the appearance
>>>> of of the widget (border/interior, rounded corners, toggle button).
>>>> I guess I would use a table for that but maybe absolute positioning
>>>> is better. Anyway I don't know where to put the actual code.
>>>>
>>>> And the next question would be how to attach a client-side listener
>>>> to the toggle button (this is where I'll probably have to read some
>>>> book on DHTML ;)
>>>>
>>>> I hope you're still reading at this point :)
>>>>
>>>> Cheers
>>>>
>>>> Michal
>>>>
>>>> P.S. I'm looking forward to the tutorial :)
>>>>
>>>> Benjamin Muskalla pisze:
>>>>> Hi,
>>>>>
>>>>> in fact I think many people like to see a howto on creating custom
>>>>> widgets. We'll try to provide one in the wiki in the next days.
>>>>>
>>>>> But before you could take a look at some existing widgets like the
>>>>> Label or the ProgressBar. The only thing you need is the Widget
>>>>> class itself which handles all the logic, a Life Cycle Adapter
>>>>> (LCA) to build the bridge between the nature of RAP and your widget
>>>>> and if you need: some client side java scripts which uses
>>>>> properties of your widget trough the LCA.
>>>>>
>>>>> Don't hesitate to ask question about this here in the newsgroup.
>>>>> We'll try to help you. And as I said, we'll try to provide a little
>>>>> tutorial in the next days.
>>>>>
>>>>> Cheers
>>>>> Benny
>>>>>
>>>>> Michał Tkacz wrote:
>>>>>> Hello,
>>>>>>
>>>>>> RAP controls are great if one wants to have a desktop-like
>>>>>> application.
>>>>>> But for me RAP would also be useful if I could create more
>>>>>> traditionally looking web applications. For this I need custom
>>>>>> widgets. I know how to implement one in a pure Java (I know SWT
>>>>>> quite well), but I guess it might be quite inefficient in some
>>>>>> cases and some things just can't be done this way.
>>>>>>
>>>>>> I don't know JavaScript as well as I do Java, so some short
>>>>>> tutorial with one or two examples how to create such a control
>>>>>> from scratch would be nice. Where should I start? Where should I
>>>>>> look for more? Maybe somebody could provide some examples on wiki?
>>>>>>
>>>>>> Thanks,
>>>>>>
>>>>>> Michal
>>>>
>>>>
>>>> ------------------------------------------------------------ ------------
>>>>
>>>>
>>>
>>>
>>> Hi Michal!
>>>
>>> I read yout almost tutorial about doing a custom widget.
>>> But as happened to you, my Box doesn't react to any method like
>>> setText in terms of Javascript. I think the problem is somewhere on
>>> the javascript. Because if i create the Box and after box.setText, I
>>> print out a box.getText, I have the correct value. But I can't make
>>> it work on the javascript.. nothing happens...
>>>
>>> Can you help meu on this? Could you make it work? I mean..did you
>>> accomplish entirely the "custom widget quest"? :)
>>
>> Yes I did! But to be honest I don't really remember what I did to fix
>> particular problem described above :/ But don't worry :) I've attached
>> the code of the current version of the widget. It's by no means perfect,
>> but works much better now :)
>>
>> If any of you guys find inside things that could be done better or in a
>> different way, I'd be glad to hear about that. Also if you have further
>> questions Bruno, let me know.
>>
>> Unfortunately due to coming deadlines and many features still missing in
>> RAP, our team was forced to switch to GWT for now. But I still think
>> that RAP is a nice project and plan to come back to it in few months
>> maybe.
>>
>> Thanks for all the help I got here,
>>
>> Michal
>>
|
|
|
Goto Forum:
Current Time: Wed Oct 09 20:25:10 GMT 2024
Powered by FUDForum. Page generated in 0.05610 seconds |
] 
Search
Help
Register
Login
Home
