Skip to main content


Eclipse Community Forums
Forum Search:

Search      Help    Register    Login    Home
Home » Eclipse Projects » Remote Application Platform (RAP) » Custom widgets
Custom widgets [message #35004] Tue, 26 June 2007 13:52 Go to next message
Eclipse UserFriend
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 Go to previous messageGo to next message
Eclipse UserFriend
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 Go to previous messageGo to next message
Eclipse UserFriend
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 Go to previous messageGo to next message
Eclipse UserFriend
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 Go to previous messageGo to next message
Eclipse UserFriend
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 Go to previous messageGo to next message
Eclipse UserFriend
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 Go to previous messageGo to next message
Eclipse UserFriend
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 Go to previous messageGo to next message
Eclipse UserFriend
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 Go to previous messageGo to next message
Eclipse UserFriend
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 Go to previous messageGo to next message
Benjamin Muskalla is currently offline Benjamin MuskallaFriend
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 Go to previous messageGo to next message
Eclipse UserFriend
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 Go to previous messageGo to next message
Eclipse UserFriend
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 Go to previous messageGo to next message
Eclipse UserFriend
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 Go to previous messageGo to next message
Eclipse UserFriend
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 Go to previous message
Eclipse UserFriend
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
>>
Previous Topic:BIDI support in TabFolder
Next Topic:Customizing the look of existing widgets
Goto Forum:
  


Current Time: Tue Oct 08 15:32:25 GMT 2024

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

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

Back to the top