How do I add a widget to an existing page?

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

How do I add a widget to an existing page?

Martin Tilsted
I have a website where I need some dynamic html, and after having looked

at some different javascript frameworks I think that qooxdoo looks the
most promising.

But I can't find out how to add a widget(A layout container) to an
existing html page. All the existing examples I could find use the
addToDocument() method, but the problem with that is that it add the
widget directly to the body element, using position:absolute; which make
it difficult to place the element relative to the existing html.

What I need is a way to add the widget, so it become part of the normal
html flow, causing the html below the widget to move down to make room
for the widget. (This is what always happens if you add a block level
element to the dom, and the element is not position:absolute).

So is there a way to add a widget relative to an existing dom node(Such
as a div), so I can say that this widget(A layout) should be located
just after an existing div?

Martin


-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How do I add a widget to an existing page?

thron7
Martin Tilsted wrote:

> I have a website where I need some dynamic html, and after having looked
>
> at some different javascript frameworks I think that qooxdoo looks the
> most promising.
>
> But I can't find out how to add a widget(A layout container) to an
> existing html page. All the existing examples I could find use the
> addToDocument() method, but the problem with that is that it add the
> widget directly to the body element, using position:absolute; which make
> it difficult to place the element relative to the existing html.
>
> What I need is a way to add the widget, so it become part of the normal
> html flow, causing the html below the widget to move down to make room
> for the widget. (This is what always happens if you add a block level
> element to the dom, and the element is not position:absolute).
>
> So is there a way to add a widget relative to an existing dom node(Such
> as a div), so I can say that this widget(A layout) should be located
> just after an existing div?
>  

Hi Martin,

with the current 0.7 release the Inline class is what you're looking
for; see http://qooxdoo.org/documentation/0.7/inline_widget for a how-to.

The upcoming 0.8 version of qooxdoo will offer more tools in this
respect, under the qx.ui.root name space. Take a preview at the online
demos, e.g.
http://demo.qooxdoo.org/devel/demobrowser/index.html#root~Inline.html.

Thomas


-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How do I add a widget to an existing page?

Martin Tilsted
Thanks, but I still can't make it work. All i get is an
"app is null error" in the javascript line:
var doc = qx.ui.core.ClientDocument.getInstance();

I think the problem is that i am using the quickstart version, instead
of the build system.

Is it required to use the build system to use inline widgets?

I am still having trouble understanding how to integrate my existing
project with the build system. (So I have not done that yet, therefor
the use of the quickstart part.

My problem is that I don't have any static html files in the project.
All the html is generated at runtime(From templates using
Java+Velocity), so what I really need might just be a way to use the
compiler, and skip the rest of the build system. (I already have a build
system, to generate my jar files, and deploy them and other resources on
the server).

(The html from my testpage, just in case, it should work with
quickstart, and I just did something stupid).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type='text/javascript' src='qx.js'></script>

<script type="text/javascript">
qxsettings = new Object();
qxsettings["qx.enableApplicationLayout"] = false;
</script>

  <title>$title</title>
</head><body>
<h1>Hi webpage</h1>
<div id='inlineWidget'></div>
<h1>The bottom</h1>

<script type='text/javascript'>
// The code below is cut and paste from the tutorial.
var someWidget = new qx.ui.form.Button("My Button");
var doc = qx.ui.core.ClientDocument.getInstance();
var inlineWidget = new qx.ui.basic.Inline("inlineWidget");
inlineWidget.add(someWidget);
doc.add(inlineWidget);
</script>

</body></html>



thron7 wrote:

> Martin Tilsted wrote:
>> I have a website where I need some dynamic html, and after having looked
>>
>> at some different javascript frameworks I think that qooxdoo looks the
>> most promising.
>>
>> But I can't find out how to add a widget(A layout container) to an
>> existing html page. All the existing examples I could find use the
>> addToDocument() method, but the problem with that is that it add the
>> widget directly to the body element, using position:absolute; which make
>> it difficult to place the element relative to the existing html.
>>
>> What I need is a way to add the widget, so it become part of the normal
>> html flow, causing the html below the widget to move down to make room
>> for the widget. (This is what always happens if you add a block level
>> element to the dom, and the element is not position:absolute).
>>
>> So is there a way to add a widget relative to an existing dom node(Such
>> as a div), so I can say that this widget(A layout) should be located
>> just after an existing div?
>>  
>
> Hi Martin,
>
> with the current 0.7 release the Inline class is what you're looking
> for; see http://qooxdoo.org/documentation/0.7/inline_widget for a how-to.
>
> The upcoming 0.8 version of qooxdoo will offer more tools in this
> respect, under the qx.ui.root name space. Take a preview at the online
> demos, e.g.
> http://demo.qooxdoo.org/devel/demobrowser/index.html#root~Inline.html.
>
> Thomas
>
>
> -------------------------------------------------------------------------
> Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
> Studies have shown that voting for your favorite open source project,
> along with a healthy diet, reduces your potential for chronic lameness
> and boredom. Vote Now at http://www.sourceforge.net/community/cca08
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How do I add a widget to an existing page?

florian_im-conepts
Hi Martin,

you can find a running inline application (qooxdoo 0.8) on my demopage. You can also download the qooxdoo sources there. Maybe this helps.

Florian

-----Ursprüngliche Nachricht-----
Von: [hidden email] [mailto:[hidden email]] Im Auftrag von Martin Tilsted
Gesendet: Freitag, 4. Juli 2008 10:07
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] How do I add a widget to an existing page?

Thanks, but I still can't make it work. All i get is an
"app is null error" in the javascript line:
var doc = qx.ui.core.ClientDocument.getInstance();

I think the problem is that i am using the quickstart version, instead
of the build system.

Is it required to use the build system to use inline widgets?

I am still having trouble understanding how to integrate my existing
project with the build system. (So I have not done that yet, therefor
the use of the quickstart part.

My problem is that I don't have any static html files in the project.
All the html is generated at runtime(From templates using
Java+Velocity), so what I really need might just be a way to use the
compiler, and skip the rest of the build system. (I already have a build
system, to generate my jar files, and deploy them and other resources on
the server).

(The html from my testpage, just in case, it should work with
quickstart, and I just did something stupid).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type='text/javascript' src='qx.js'></script>

<script type="text/javascript">
qxsettings = new Object();
qxsettings["qx.enableApplicationLayout"] = false;
</script>

  <title>$title</title>
</head><body>
<h1>Hi webpage</h1>
<div id='inlineWidget'></div>
<h1>The bottom</h1>

<script type='text/javascript'>
// The code below is cut and paste from the tutorial.
var someWidget = new qx.ui.form.Button("My Button");
var doc = qx.ui.core.ClientDocument.getInstance();
var inlineWidget = new qx.ui.basic.Inline("inlineWidget");
inlineWidget.add(someWidget);
doc.add(inlineWidget);
</script>

</body></html>



thron7 wrote:

> Martin Tilsted wrote:
>> I have a website where I need some dynamic html, and after having looked
>>
>> at some different javascript frameworks I think that qooxdoo looks the
>> most promising.
>>
>> But I can't find out how to add a widget(A layout container) to an
>> existing html page. All the existing examples I could find use the
>> addToDocument() method, but the problem with that is that it add the
>> widget directly to the body element, using position:absolute; which make
>> it difficult to place the element relative to the existing html.
>>
>> What I need is a way to add the widget, so it become part of the normal
>> html flow, causing the html below the widget to move down to make room
>> for the widget. (This is what always happens if you add a block level
>> element to the dom, and the element is not position:absolute).
>>
>> So is there a way to add a widget relative to an existing dom node(Such
>> as a div), so I can say that this widget(A layout) should be located
>> just after an existing div?
>>  
>
> Hi Martin,
>
> with the current 0.7 release the Inline class is what you're looking
> for; see http://qooxdoo.org/documentation/0.7/inline_widget for a how-to.
>
> The upcoming 0.8 version of qooxdoo will offer more tools in this
> respect, under the qx.ui.root name space. Take a preview at the online
> demos, e.g.
> http://demo.qooxdoo.org/devel/demobrowser/index.html#root~Inline.html.
>
> Thomas
>
>
> -------------------------------------------------------------------------
> Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
> Studies have shown that voting for your favorite open source project,
> along with a healthy diet, reduces your potential for chronic lameness
> and boredom. Vote Now at http://www.sourceforge.net/community/cca08
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How do I add a widget to an existing page?

florian_im-conepts
Why do I always forget to add the URL?

http://qooxdoo.2f-cms.com/load.php?name=Fotogalerie&file=image&id=1&pic_no=0&cat=2&alone=0

Florian

-----Ursprüngliche Nachricht-----
Von: [hidden email] [mailto:[hidden email]] Im Auftrag von Florian Giesen
Gesendet: Freitag, 4. Juli 2008 10:42
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] How do I add a widget to an existing page?

Hi Martin,

you can find a running inline application (qooxdoo 0.8) on my demopage. You can also download the qooxdoo sources there. Maybe this helps.

Florian

-----Ursprüngliche Nachricht-----
Von: [hidden email] [mailto:[hidden email]] Im Auftrag von Martin Tilsted
Gesendet: Freitag, 4. Juli 2008 10:07
An: qooxdoo Development
Betreff: Re: [qooxdoo-devel] How do I add a widget to an existing page?

Thanks, but I still can't make it work. All i get is an
"app is null error" in the javascript line:
var doc = qx.ui.core.ClientDocument.getInstance();

I think the problem is that i am using the quickstart version, instead
of the build system.

Is it required to use the build system to use inline widgets?

I am still having trouble understanding how to integrate my existing
project with the build system. (So I have not done that yet, therefor
the use of the quickstart part.

My problem is that I don't have any static html files in the project.
All the html is generated at runtime(From templates using
Java+Velocity), so what I really need might just be a way to use the
compiler, and skip the rest of the build system. (I already have a build
system, to generate my jar files, and deploy them and other resources on
the server).

(The html from my testpage, just in case, it should work with
quickstart, and I just did something stupid).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type='text/javascript' src='qx.js'></script>

<script type="text/javascript">
qxsettings = new Object();
qxsettings["qx.enableApplicationLayout"] = false;
</script>

  <title>$title</title>
</head><body>
<h1>Hi webpage</h1>
<div id='inlineWidget'></div>
<h1>The bottom</h1>

<script type='text/javascript'>
// The code below is cut and paste from the tutorial.
var someWidget = new qx.ui.form.Button("My Button");
var doc = qx.ui.core.ClientDocument.getInstance();
var inlineWidget = new qx.ui.basic.Inline("inlineWidget");
inlineWidget.add(someWidget);
doc.add(inlineWidget);
</script>

</body></html>



thron7 wrote:

> Martin Tilsted wrote:
>> I have a website where I need some dynamic html, and after having looked
>>
>> at some different javascript frameworks I think that qooxdoo looks the
>> most promising.
>>
>> But I can't find out how to add a widget(A layout container) to an
>> existing html page. All the existing examples I could find use the
>> addToDocument() method, but the problem with that is that it add the
>> widget directly to the body element, using position:absolute; which make
>> it difficult to place the element relative to the existing html.
>>
>> What I need is a way to add the widget, so it become part of the normal
>> html flow, causing the html below the widget to move down to make room
>> for the widget. (This is what always happens if you add a block level
>> element to the dom, and the element is not position:absolute).
>>
>> So is there a way to add a widget relative to an existing dom node(Such
>> as a div), so I can say that this widget(A layout) should be located
>> just after an existing div?
>>  
>
> Hi Martin,
>
> with the current 0.7 release the Inline class is what you're looking
> for; see http://qooxdoo.org/documentation/0.7/inline_widget for a how-to.
>
> The upcoming 0.8 version of qooxdoo will offer more tools in this
> respect, under the qx.ui.root name space. Take a preview at the online
> demos, e.g.
> http://demo.qooxdoo.org/devel/demobrowser/index.html#root~Inline.html.
>
> Thomas
>
>
> -------------------------------------------------------------------------
> Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
> Studies have shown that voting for your favorite open source project,
> along with a healthy diet, reduces your potential for chronic lameness
> and boredom. Vote Now at http://www.sourceforge.net/community/cca08
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: How do I add a widget to an existing page?

Alexander Back
In reply to this post by Martin Tilsted
Hi Martin,

Martin Tilsted wrote:
> Thanks, but I still can't make it work. All i get is an
> "app is null error" in the javascript line:
> var doc = qx.ui.core.ClientDocument.getInstance();
>
> I think the problem is that i am using the quickstart version, instead
> of the build system.
 >
> Is it required to use the build system to use inline widgets?
The build system takes care of putting all needed classes together so
you do not need to worry about any dependencies. So using the build
system should be the preferred way.

> I am still having trouble understanding how to integrate my existing
> project with the build system. (So I have not done that yet, therefor
> the use of the quickstart part.
What kind of build system do you use?

> My problem is that I don't have any static html files in the project.
> All the html is generated at runtime(From templates using
> Java+Velocity), so what I really need might just be a way to use the
> compiler, and skip the rest of the build system. (I already have a build
> system, to generate my jar files, and deploy them and other resources on
> the server).
Maybe you can use a testpage you can develop against and integrate the
build version of your qooxdoo application into the templates. Would that
work?

The problem with your code below is that you cannot inline the code
right away in the HTML file. You have to build an application file and
integrate this one into the HTML file. Just take a look at the
quickstart example. The "Application.js" is the thing you need.
The "main" method in this application gets called right after the
framework is "booted" completely. This method is the place where your
application code resides in.
So just put your inline code into the "main" method of your application.

cheers,
   Alex

> (The html from my testpage, just in case, it should work with
> quickstart, and I just did something stupid).
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd">
> <html>
> <head>
>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
>
> <script type='text/javascript' src='qx.js'></script>
>
> <script type="text/javascript">
> qxsettings = new Object();
> qxsettings["qx.enableApplicationLayout"] = false;
> </script>
>
>   <title>$title</title>
> </head><body>
> <h1>Hi webpage</h1>
> <div id='inlineWidget'></div>
> <h1>The bottom</h1>
>
> <script type='text/javascript'>
> // The code below is cut and paste from the tutorial.
> var someWidget = new qx.ui.form.Button("My Button");
> var doc = qx.ui.core.ClientDocument.getInstance();
> var inlineWidget = new qx.ui.basic.Inline("inlineWidget");
> inlineWidget.add(someWidget);
> doc.add(inlineWidget);
> </script>
>
> </body></html>
>
>
>
> thron7 wrote:
>> Martin Tilsted wrote:
>>> I have a website where I need some dynamic html, and after having looked
>>>
>>> at some different javascript frameworks I think that qooxdoo looks the
>>> most promising.
>>>
>>> But I can't find out how to add a widget(A layout container) to an
>>> existing html page. All the existing examples I could find use the
>>> addToDocument() method, but the problem with that is that it add the
>>> widget directly to the body element, using position:absolute; which make
>>> it difficult to place the element relative to the existing html.
>>>
>>> What I need is a way to add the widget, so it become part of the normal
>>> html flow, causing the html below the widget to move down to make room
>>> for the widget. (This is what always happens if you add a block level
>>> element to the dom, and the element is not position:absolute).
>>>
>>> So is there a way to add a widget relative to an existing dom node(Such
>>> as a div), so I can say that this widget(A layout) should be located
>>> just after an existing div?
>>>  
>> Hi Martin,
>>
>> with the current 0.7 release the Inline class is what you're looking
>> for; see http://qooxdoo.org/documentation/0.7/inline_widget for a how-to.
>>
>> The upcoming 0.8 version of qooxdoo will offer more tools in this
>> respect, under the qx.ui.root name space. Take a preview at the online
>> demos, e.g.
>> http://demo.qooxdoo.org/devel/demobrowser/index.html#root~Inline.html.
>>
>> Thomas

-------------------------------------------------------------------------
Sponsored by: SourceForge.net Community Choice Awards: VOTE NOW!
Studies have shown that voting for your favorite open source project,
along with a healthy diet, reduces your potential for chronic lameness
and boredom. Vote Now at http://www.sourceforge.net/community/cca08
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel