Loading images into qx.ui.embed.Gallery (0.7.3)

[dbrisinda]

I'm new to the qooxdoo framework and have been spending some time experimenting with the various demos. I have two questions/problems with the Gallery widget, if anyone can help.

1. The gallery demo loads a bunch of images into the gallery widget accessbile here:

http://demo.qooxdoo.org/current/demobrowser/#example~Gallery_1.html

I've taken the code verbatim, creates a CSS to match exactly what was given, but I only get a gallery of empty images (borders and coloring etc. are okay) but no actual image. I'm using the exact same image path as supplied in the example:

var imgPath = qx.io.Alias.getInstance().resolve("icon/64/apps/office-organizer.png");

I noticed that in the html source file there is a helper javascript file invoked as:

<script type="text/javascript" src="../util.js"></script>

I'm wondering if this is doing something behind the scenes that is allowing the images to appear?

2. How can I force the gallery widget to display the images horizontally only, with only a horizontal scrollbar? It seems to default to placing as many images that it can horizontally, then wrapping to the next line, creating a vertical scroll bar.

3. Is there a way to access the CSS styling in the example from JavaScript at runtime instead of directly through the CSS framework?

4. Lastly, the gallery widget doesn't work correctly in the latest Safari (3.1.2), the images are not contained in the gallery box (there is not even a vertical scrollbar they just keep wrapping to the next line until exhausted -- all visible).

Any ideas?

Best,

Dalmazio

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Alexander Back]

Hi Dalmazio,

welcome to the qooxdoo project!

See my comments below.

Dalmazio Brisinda wrote:

> I'm new to the qooxdoo framework and have been spending some time
> experimenting with the various demos. I have two questions/problems with
> the Gallery widget, if anyone can help.
>
> 1. The gallery demo loads a bunch of images into the gallery widget
> accessbile here:
>
>     http://demo.qooxdoo.org/current/demobrowser/#example~Gallery_1.html
>
> I've taken the code verbatim, creates a CSS to match exactly what was
> given, but I only get a gallery of empty images (borders and coloring
> etc. are okay) but no actual image. I'm using the exact same image path
> as supplied in the example:
>
> var imgPath =
> qx.io.Alias.getInstance().resolve("icon/64/apps/office-organizer.png");

Where did you copy the code? In a skeleton application or did you try it
on a plain HTML file?
The "resolve" of the "qx.io.Alias" class performs a resolvment of the
"icon" resource and returns the full path.
See http://qooxdoo.org/documentation/0.7/configuring_custom_resources 
for more details to this.

To start an own application the canonical way it to start with a
skeleton: http://qooxdoo.org/documentation/0.7/skeleton


> I noticed that in the html source file there is a helper javascript file
> invoked as:
>
> <script type="text/javascript" src="../util.js"></script>
>
> I'm wondering if this is doing something behind the scenes that is
> allowing the images to appear?
No, this little file has nothing to do with the images. Just a little
helper. As I mentioned, the paths to the images get resolved by the
framework class "qx.io.Alias".

> 2. How can I force the gallery widget to display the images horizontally
> only, with only a horizontal scrollbar? It seems to default to placing
> as many images that it can horizontally, then wrapping to the next line,
> creating a vertical scroll bar.
Yes, this is the default behaviour of the gallery. Try to set the width
and height manually to prevent the gallery from using more height
automatically.
Just take a look at the API viewer to get an overview of the API:
http://demo.qooxdoo.org/current/apiviewer/#qx.ui.embed.Gallery

Click at the "Inherit" button to display the inherited properties,
methods and events.

> 3. Is there a way to access the CSS styling in the example from
> JavaScript at runtime instead of directly through the CSS framework?
You can easily using JavaScript to manipulate the CSS at runtime by
using the native methods of  the browser like

document.getElementById("myID").style.marginBottom = "10px"

What do you like to achieve?

> 4. Lastly, the gallery widget doesn't work correctly in the latest
> Safari (3.1.2), the images are not contained in the gallery box (there
> is not even a vertical scrollbar they just keep wrapping to the next
> line until exhausted -- all visible).
First of all the gallery widget is an "old-style" widget which will
receive no further development in the future, so there will be no
support for this widget for Webkit.
However, if you fix bugs for Webkit you can just send them over and we
will integrate them into the framework.


cheers,
   Alex

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[dbrisinda]

Hi Alex,

Thanks for the warm welcome.

Good news, I tried as you suggested: running it as a skeleton application, and all the images loaded. Then I went back to my original application which used the same code -- without changing anything -- did a make source and it worked too! Very odd -- it's almost as if running the skeleton app caused it to fix some image loading settings (maybe some kind of cache issue?) that were then accessible from my custom app. Well, anyway, the images are loading now.

Thanks for the CSS styling example via JavaScript. That's exactly what I was looking for -- I'll play around with this.

Also, if I can get the widget to work on Safari, I'll submit the mods.

But for Firefox 2, I've tried several settings for forcing the Gallery widget to scroll only in the X dimension with fixed vertical height. But no luck. For example, assuming my images are well less than 200 pixels in height, I've used all of the following with no luck (after removing only the 'gallery.setBottom(20)' line):

gallery.setHeight(200);

gallery.setMaxHeight(200);

gallery.setClipHeight(200);

as well as the corresponding 'width' methods using large values. But it still wraps the images to the next line when it hits the horizontal width of the gallery. The only difference is when I use setOverflow("scrollX") instead of the default "auto". In this case the widget doesn't scroll in the Y dimension, but it doesn't scroll in the X dimension either -- even though an empty scroll bar appears in the X dimension. Only as many images as will fit into the visible X dimension are shown and the remainder are not visible or accessible.

Any ideas?

Stumped,

Dalmazio

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Alexander Back]

Hi Dalmazio,

see my comments below.

Dalmazio Brisinda wrote:
> Also, if I can get the widget to work on Safari, I'll submit the mods.
I'll look forward for this contribution :)

> But for Firefox 2, I've tried several settings for forcing the Gallery
> widget to scroll only in the X dimension with fixed vertical height. But
> no luck. For example, assuming my images are well less than 200 pixels
> in height, I've used all of the following with no luck (after removing
> only the 'gallery.setBottom(20)' line):
>
> gallery.setHeight(200);
> gallery.setMaxHeight(200);
> gallery.setClipHeight(200);
>
> as well as the corresponding 'width' methods using large values. But it
> still wraps the images to the next line when it hits the horizontal
> width of the gallery. The only difference is when I use
> setOverflow("scrollX") instead of the default "auto". In this case the
> widget doesn't scroll in the Y dimension, but it doesn't scroll in the X
> dimension either -- even though an empty scroll bar appears in the X
> dimension. Only as many images as will fit into the visible X dimension
> are shown and the remainder are not visible or accessible.
>
> Any ideas?

First of all, sorry for the last hint I gave you. This was a misleading
one. The gallery widget is an old fashioned widget which gets its look
almost entirely from the provided CSS.

So if you want to have e.g. your gallery 500px wide and the height
should be as high as to show one row you can achieve it this way:

--snip--
myGallery.setWidth(500);
myGallery.setHeight(170); // this only shows one row in the default setup
--snip--

and for the CSS you have to manipulated the element which hold the
"galleryFrame" class. This element has to be as wide as all images
together. For example a width of  2120px assuming you have 20 images in
your gallery.

Let me explain the gallery frame part a little bit. One image is about
106px wide (width+ margin) and to show the images in one row the
surrounding div element (the galleryFrame) as to as wide as all images
together.
Setting the outermost div (the one surrounding the galleryFrame) div to
500px the browsers show a horizontal scrollbar.

Of course, you have to experiment a little with the values for the
browsers, but this should lead you in the right direction.
To set the width of the galleryFrame div element dynamically just use

--snip--
myGallery.getElement().firstChild.style.width = "2120px";
--snip--

Hope this helps,
   Alex

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[dbrisinda]

Hi Alex,

Thanks for the excellent explanation -- it helped alot. I hardcoded the
width style property into the CSS .galleryFrame, and it now allows me to
scroll in the X direction.

However, I have a gallery that allows the user to add and delete images to
it. So I need to dynamically size this property. I tried the example you
gave:

--snip--
myGallery.getElement().firstChild.style.width = "2120px";
--snip--

But Firebug reports the following error:

--snip--
myGallery.getElement() has no properties
[Break on this error] myGallery.getElement().firstChild().style.width =
"2120px";
--snip--

And probing deeper, it appears that myGallery.getElement() returns null.

Any ideas?

Thanks again for all your help.

Best,
Dalmazio




Alexander Back wrote:

>
> Hi Dalmazio,
>
> see my comments below.
>
> Dalmazio Brisinda wrote:
>> Also, if I can get the widget to work on Safari, I'll submit the mods.
> I'll look forward for this contribution :)
>
> [...]
>
> First of all, sorry for the last hint I gave you. This was a misleading
> one. The gallery widget is an old fashioned widget which gets its look
> almost entirely from the provided CSS.
>
> So if you want to have e.g. your gallery 500px wide and the height
> should be as high as to show one row you can achieve it this way:
>
> --snip--
> myGallery.setWidth(500);
> myGallery.setHeight(170); // this only shows one row in the default setup
> --snip--
>
> and for the CSS you have to manipulated the element which hold the
> "galleryFrame" class. This element has to be as wide as all images
> together. For example a width of  2120px assuming you have 20 images in
> your gallery.
>
> Let me explain the gallery frame part a little bit. One image is about
> 106px wide (width+ margin) and to show the images in one row the
> surrounding div element (the galleryFrame) as to as wide as all images
> together.
> Setting the outermost div (the one surrounding the galleryFrame) div to
> 500px the browsers show a horizontal scrollbar.
>
> Of course, you have to experiment a little with the values for the
> browsers, but this should lead you in the right direction.
> To set the width of the galleryFrame div element dynamically just use
>
> --snip--
> myGallery.getElement().firstChild.style.width = "2120px";
> --snip--
>
> Hope this helps,
>    Alex
>
> -------------------------------------------------------------------------
> This SF.Net email is sponsored by the Moblin Your Move Developer's
> challenge
> Build the coolest Linux based applications with Moblin SDK & win great
> prizes
> Grand prize is a trip for two to an Open Source event anywhere in the
> world
> http://moblin-contest.org/redirect.php?banner_id=100&url=/
> _______________________________________________
> qooxdoo-devel mailing list
> qooxdoo-devel@...
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>

--
View this message in context: http://n2.nabble.com/Loading-images-into-qx.ui.embed.Gallery-%280.7.3%29-tp530110p577340.html
Sent from the qooxdoo mailing list archive at Nabble.com.


-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Alexander Back]

Hi Dalmazio,

dbrisinda wrote:

> However, I have a gallery that allows the user to add and delete images to
> it. So I need to dynamically size this property. I tried the example you
> gave:
>
> --snip--
> myGallery.getElement().firstChild.style.width = "2120px";
> --snip--
>
> But Firebug reports the following error:
>
> --snip--
> myGallery.getElement() has no properties
> [Break on this error] myGallery.getElement().firstChild().style.width =
> "2120px";
> --snip--

Do you make sure that "myGallery" is an instance of
"qx.ui.embed.Gallery" and the gallery was already added to the document?
As all widgets the gallery has a property "element" which is inherited
from the generic "qx.ui.core.Widget" class. Every property has among
other useful things [0] getter and setter methods. So the "getElement()"
method should return you the DOM element of the gallery widget.
However, this will only work if the widget is already added to the
document and thus the gallery DOM element is present.
To be sure that the element is created you can listen to the
"beforeAppear" event.

--snip--
myGallery.addLEventListener("beforeAppear", funciton(e)
{
   // this refers to "myGallery"
   this.getElement().firstChild.style.width = "2120px";
});
--snip--

cheers,
   Alex

[0] http://qooxdoo.org/documentation/0.7/defining_properties

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[dbrisinda]

Hi Alex,

Yes, myGallery is an instance of qx.io.embed.Gallery, and it has been added
to the document as follows:

    qx.ui.core.ClientDocument.getInstance().add(myGallery);

I also added the event listener exactly as you provided to see if the
gallery object has in fact been added to the document and I get a major
crap-out -- just after it let's me know it is in the "beforeAppear" listener
(I added a debugging print statement in the listener). Firebug reports the
following errors (see below -- I've included the 4 errors in full in case
you might be able to make some sense out of it).

If I comment out the single line where I try to change the width element in
the "beforeAppear" listener:

    this.getElement().firstChild.style.width = "2120px";

then no errors, and the gallery appears just fine (though without the needed
x width settings). Just out of curiosity I printed out the value of
this.getElement() in the "beforeAppear" listener and this is what I get:

    009412 DEBUG: qx.ui.embed.Gallery[67]: getElement(): null

Could this be a limitation of the old-style widgets, since it uses the CSS
framework for look & feel almost exclusively? I.e., is it possible that
there is no DOM element? Also, the Gallery widget is a subclass of
qx.io.basic.Terminator. Could this be causing some issues?

--

Crap-out output:

Error 1:

009410 ERROR: qx.ui.core.ClientDocument[57]: Could not apply border to child
[object qx.ui.embed.Gallery]: TypeError - style has no properties
at qx.ui.core.Border:810
at qx.ui.core.Widget:6726
at qx.ui.core.Parent:1228
at qx.ui.layout.impl.LayoutImpl:435
at qx.ui.core.Parent:1174
at qx.ui.core.Widget:659
at qx.ui.core.Widget:280
at qx.application.Gui:139
at qx.core.Target:299
at qx.core.Target:256
at qx.core.Target:186
at qx.io.image.PreloaderSystem:121
at qx.application.Gui:122
at qx.client.Timer:106
at qx.core.Target:299
at qx.core.Target:256
at qx.core.Target:186
at qx.client.Timer:294
at qx.lang.Function:181

Error 2:

009441 ERROR: qx.ui.core.ClientDocument[57]: Could not layout child [object
qx.ui.embed.Gallery] through layout handler: TypeError - this._style has no
properties
at qx.ui.core.Widget:1013
at qx.ui.layout.impl.LayoutImpl:581
at qx.ui.layout.impl.CanvasLayoutImpl:242
at qx.ui.core.Parent:1253
at qx.ui.layout.impl.LayoutImpl:435
at qx.ui.core.Parent:1174
at qx.ui.core.Widget:659
at qx.ui.core.Widget:280
at qx.application.Gui:139
at qx.core.Target:299
at qx.core.Target:256
at qx.core.Target:186
at qx.io.image.PreloaderSystem:121
at qx.application.Gui:122
at qx.client.Timer:106
at qx.core.Target:299
at qx.core.Target:256
at qx.core.Target:186
at qx.client.Timer:294
at qx.lang.Function:181

Error 3:

uncaught exception: [Exception... "Component returned failure code:
0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLBodyElement.appendChild]"
nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame ::
http://nowhere.local/qooxdoo/frontend/framework/source/class/qx/ui/core/Widget.js
:: anonymous :: line 832" data: no]
(no name)()Widget.js (line 1013)
layoutChild_sizeX_essentialWrapper(qx.ui.embed.Gallery _hashCode=67
__dbKey=51 _layoutChanges=Object, Object overflow=true left=true top=true
borderTop=true)LayoutImpl.js (line 581)
layoutChild(qx.ui.embed.Gallery _hashCode=67 __dbKey=51
_layoutChanges=Object, Object overflow=true left=true top=true
borderTop=true)CanvasLayoutImpl.... (line 242)
_layoutChild(qx.ui.embed.Gallery _hashCode=67 __dbKey=51
_layoutChanges=Object)Parent.js (line 1253)
flushChildrenQueue(Object)LayoutImpl.js (line 435)
_flushChildrenQueue()Parent.js (line 1174)
flushGlobalLayoutQueue()Widget.js (line 659)
flushGlobalQueues()Widget.js (line 280)
_preloaderDone()Gui.js (line 139)
_dispatchEvent(qx.event.type.Event _hashCode=91
_valueType=completed)Target.js (line 299)
dispatchEvent(qx.event.type.Event _hashCode=91 _valueType=completed,
true)Target.js (line 256)
createDispatchEvent("completed")Target.js (line 186)
start()PreloaderSystem.j... (line 121)
_preload()Gui.js (line 122)
(no name)(qx.event.type.Event _hashCode=83 _valueType=interval
$$initialized=true)Timer.js (line 106)
_dispatchEvent(qx.event.type.Event _hashCode=83 _valueType=interval
$$initialized=true)Target.js (line 299)
dispatchEvent(qx.event.type.Event _hashCode=83 _valueType=interval
$$initialized=true, true)Target.js (line 256)
createDispatchEvent("interval")Target.js (line 186)
_oninterval()Timer.js (line 294)
wrap()Function.js (line 181)

Error 4:

this.getElement() has no properties
this.getElement().firstChild.style.width = "2120px";

--

That'll show me...

Still stumped though -- but admittedly haven't looked at the qooxdoo source
code yet. I guess this could be the next logical step.

Any magic silver bullets before taking it there?

Best,
Dalmazio





Alexander Back wrote:

>
> Hi Dalmazio,
>
> dbrisinda wrote:
>> However, I have a gallery that allows the user to add and delete images
>> to
>> it. So I need to dynamically size this property. I tried the example you
>> gave:
>>
>> --snip--
>> myGallery.getElement().firstChild.style.width = "2120px";
>> --snip--
>>
>> But Firebug reports the following error:
>>
>> --snip--
>> myGallery.getElement() has no properties
>> [Break on this error] myGallery.getElement().firstChild().style.width =
>> "2120px";
>> --snip--
> Do you make sure that "myGallery" is an instance of
> "qx.ui.embed.Gallery" and the gallery was already added to the document?
> As all widgets the gallery has a property "element" which is inherited
> from the generic "qx.ui.core.Widget" class. Every property has among
> other useful things [0] getter and setter methods. So the "getElement()"
> method should return you the DOM element of the gallery widget.
> However, this will only work if the widget is already added to the
> document and thus the gallery DOM element is present.
> To be sure that the element is created you can listen to the
> "beforeAppear" event.
>
> --snip--
> myGallery.addLEventListener("beforeAppear", funciton(e)
> {
>    // this refers to "myGallery"
>    this.getElement().firstChild.style.width = "2120px";
> });
> --snip--
>
> cheers,
>    Alex
>
> [0] http://qooxdoo.org/documentation/0.7/defining_properties
>
> -------------------------------------------------------------------------
> This SF.Net email is sponsored by the Moblin Your Move Developer's
> challenge
> Build the coolest Linux based applications with Moblin SDK & win great
> prizes
> Grand prize is a trip for two to an Open Source event anywhere in the
> world
> http://moblin-contest.org/redirect.php?banner_id=100&url=/
> _______________________________________________
> qooxdoo-devel mailing list
> qooxdoo-devel@...
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>

--
View this message in context: http://n2.nabble.com/Loading-images-into-qx.ui.embed.Gallery-%280.7.3%29-tp530110p579574.html
Sent from the qooxdoo mailing list archive at Nabble.com.


-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[dbrisinda]

Hi Alex,

Well, I think I might have solved the problem -- with your help and
excellent explanations, of course -- especially the last one. I ended up
having to go back to the source code for the Gallery widget. It turns out
the following two modifications to the qx.ui.embed.Gallery widget corrects
the problem (see below). The first line seems to be necessary since the
parent DOM element is never created and otherwise results in null being
returned for any calls to getElement(). The second change uses the parent
implementation of _applyElementData(...) which has an argument which is the
element itself. This get's called by the inherited _applyElement() method
which passes the argument -- so it's probably best to use the supplied
argument.

1. Add the following line to the Gallery constructor:

    this.setElement(document.createElement("div"));

2. Change the method:

    _applyElementData : function() {
        this.getElement().appendChild(this.createView());
    },

to

    _applyElementData : function(elem) {
        this.base(arguments, elem);
        elem.appendChild(this.createView());
    },

and problem solved! I can now dynamically resize the widget using your
previous example, and invoking getElement() no longer returns null, but the
actual DOM element.

Thanks for all your help.

Best,
Dalmazio




Dalmazio Brisinda wrote:

>
> Hi Alex,
>
> Yes, myGallery is an instance of qx.io.embed.Gallery, and it has been
> added to the document as follows:
>
>     qx.ui.core.ClientDocument.getInstance().add(myGallery);
>
> I also added the event listener exactly as you provided to see if the
> gallery object has in fact been added to the document and I get a major
> crap-out -- just after it let's me know it is in the "beforeAppear"
> listener (I added a debugging print statement in the listener). Firebug
> reports the following errors (see below -- I've included the 4 errors in
> full in case you might be able to make some sense out of it).
>
> If I comment out the single line where I try to change the width element
> in the "beforeAppear" listener:
>
>     this.getElement().firstChild.style.width = "2120px";
>
> then no errors, and the gallery appears just fine (though without the
> needed x width settings). Just out of curiosity I printed out the value of
> this.getElement() in the "beforeAppear" listener and this is what I get:
>
>     009412 DEBUG: qx.ui.embed.Gallery[67]: getElement(): null
>
> Could this be a limitation of the old-style widgets, since it uses the CSS
> framework for look & feel almost exclusively? I.e., is it possible that
> there is no DOM element? Also, the Gallery widget is a subclass of
> qx.io.basic.Terminator. Could this be causing some issues?
>
> --
>
> Crap-out output:
>
> Error 1:
>
> 009410 ERROR: qx.ui.core.ClientDocument[57]: Could not apply border to
> child [object qx.ui.embed.Gallery]: TypeError - style has no properties
> at qx.ui.core.Border:810
> at qx.ui.core.Widget:6726
> at qx.ui.core.Parent:1228
> at qx.ui.layout.impl.LayoutImpl:435
> at qx.ui.core.Parent:1174
> at qx.ui.core.Widget:659
> at qx.ui.core.Widget:280
> at qx.application.Gui:139
> at qx.core.Target:299
> at qx.core.Target:256
> at qx.core.Target:186
> at qx.io.image.PreloaderSystem:121
> at qx.application.Gui:122
> at qx.client.Timer:106
> at qx.core.Target:299
> at qx.core.Target:256
> at qx.core.Target:186
> at qx.client.Timer:294
> at qx.lang.Function:181
>
> Error 2:
>
> 009441 ERROR: qx.ui.core.ClientDocument[57]: Could not layout child
> [object qx.ui.embed.Gallery] through layout handler: TypeError -
> this._style has no properties
> at qx.ui.core.Widget:1013
> at qx.ui.layout.impl.LayoutImpl:581
> at qx.ui.layout.impl.CanvasLayoutImpl:242
> at qx.ui.core.Parent:1253
> at qx.ui.layout.impl.LayoutImpl:435
> at qx.ui.core.Parent:1174
> at qx.ui.core.Widget:659
> at qx.ui.core.Widget:280
> at qx.application.Gui:139
> at qx.core.Target:299
> at qx.core.Target:256
> at qx.core.Target:186
> at qx.io.image.PreloaderSystem:121
> at qx.application.Gui:122
> at qx.client.Timer:106
> at qx.core.Target:299
> at qx.core.Target:256
> at qx.core.Target:186
> at qx.client.Timer:294
> at qx.lang.Function:181
>
> Error 3:
>
> uncaught exception: [Exception... "Component returned failure code:
> 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLBodyElement.appendChild]"
> nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame ::
> http://nowhere.local/qooxdoo/frontend/framework/source/class/qx/ui/core/Widget.js
> :: anonymous :: line 832" data: no]
> (no name)()Widget.js (line 1013)
> layoutChild_sizeX_essentialWrapper(qx.ui.embed.Gallery _hashCode=67
> __dbKey=51 _layoutChanges=Object, Object overflow=true left=true top=true
> borderTop=true)LayoutImpl.js (line 581)
> layoutChild(qx.ui.embed.Gallery _hashCode=67 __dbKey=51
> _layoutChanges=Object, Object overflow=true left=true top=true
> borderTop=true)CanvasLayoutImpl.... (line 242)
> _layoutChild(qx.ui.embed.Gallery _hashCode=67 __dbKey=51
> _layoutChanges=Object)Parent.js (line 1253)
> flushChildrenQueue(Object)LayoutImpl.js (line 435)
> _flushChildrenQueue()Parent.js (line 1174)
> flushGlobalLayoutQueue()Widget.js (line 659)
> flushGlobalQueues()Widget.js (line 280)
> _preloaderDone()Gui.js (line 139)
> _dispatchEvent(qx.event.type.Event _hashCode=91
> _valueType=completed)Target.js (line 299)
> dispatchEvent(qx.event.type.Event _hashCode=91 _valueType=completed,
> true)Target.js (line 256)
> createDispatchEvent("completed")Target.js (line 186)
> start()PreloaderSystem.j... (line 121)
> _preload()Gui.js (line 122)
> (no name)(qx.event.type.Event _hashCode=83 _valueType=interval
> $$initialized=true)Timer.js (line 106)
> _dispatchEvent(qx.event.type.Event _hashCode=83 _valueType=interval
> $$initialized=true)Target.js (line 299)
> dispatchEvent(qx.event.type.Event _hashCode=83 _valueType=interval
> $$initialized=true, true)Target.js (line 256)
> createDispatchEvent("interval")Target.js (line 186)
> _oninterval()Timer.js (line 294)
> wrap()Function.js (line 181)
>
> Error 4:
>
> this.getElement() has no properties
> this.getElement().firstChild.style.width = "2120px";
>
> --
>
> That'll show me...
>
> Still stumped though -- but admittedly haven't looked at the qooxdoo
> source code yet. I guess this could be the next logical step.
>
> Any magic silver bullets before taking it there?
>
> Best,
> Dalmazio
>
>
>
>
>
> Alexander Back wrote:
>>
>> Hi Dalmazio,
>>
>> dbrisinda wrote:
>>> However, I have a gallery that allows the user to add and delete images
>>> to
>>> it. So I need to dynamically size this property. I tried the example you
>>> gave:
>>>
>>> --snip--
>>> myGallery.getElement().firstChild.style.width = "2120px";
>>> --snip--
>>>
>>> But Firebug reports the following error:
>>>
>>> --snip--
>>> myGallery.getElement() has no properties
>>> [Break on this error] myGallery.getElement().firstChild().style.width =
>>> "2120px";
>>> --snip--
>> Do you make sure that "myGallery" is an instance of
>> "qx.ui.embed.Gallery" and the gallery was already added to the document?
>> As all widgets the gallery has a property "element" which is inherited
>> from the generic "qx.ui.core.Widget" class. Every property has among
>> other useful things [0] getter and setter methods. So the "getElement()"
>> method should return you the DOM element of the gallery widget.
>> However, this will only work if the widget is already added to the
>> document and thus the gallery DOM element is present.
>> To be sure that the element is created you can listen to the
>> "beforeAppear" event.
>>
>> --snip--
>> myGallery.addLEventListener("beforeAppear", funciton(e)
>> {
>>    // this refers to "myGallery"
>>    this.getElement().firstChild.style.width = "2120px";
>> });
>> --snip--
>>
>> cheers,
>>    Alex
>>
>> [0] http://qooxdoo.org/documentation/0.7/defining_properties
>>
>> -------------------------------------------------------------------------
>> This SF.Net email is sponsored by the Moblin Your Move Developer's
>> challenge
>> Build the coolest Linux based applications with Moblin SDK & win great
>> prizes
>> Grand prize is a trip for two to an Open Source event anywhere in the
>> world
>> http://moblin-contest.org/redirect.php?banner_id=100&url=/
>> _______________________________________________
>> qooxdoo-devel mailing list
>> qooxdoo-devel@...
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>>
>>
>
>

--
View this message in context: http://n2.nabble.com/Loading-images-into-qx.ui.embed.Gallery-%280.7.3%29-tp530110p579776.html
Sent from the qooxdoo mailing list archive at Nabble.com.


-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[dbrisinda]

Hi again,

Have another bug/fix for the qx.ui.embed.Gallery widget (see below). The
'concat()' is not defined, but is not really needed since it's only one
additional line:

Change the function:

    addFromPartialList : function(vPartialList)
    {
      this.concat(vPartialList);

      for (var i=0, a=vPartialList, l=a.length; i<l; i++) {
        this._frame.appendChild(this.createCell(a[i], i));
      }
    },

to

    addFromPartialList : function(vPartialList)
    {
      for (var i=0, a=vPartialList, l=a.length; i<l; i++) {
        this._list.push(a[i]);
        this._frame.appendChild(this.createCell(a[i], i));
      }
    },

Now partial lists of images can be appended to the widget.

Best,
Dalmazio

P.S. Sorry about not trimming the previous reply... didn't notice that
Nabble quoted the *whole* message including debugging output.

--
View this message in context: http://n2.nabble.com/Loading-images-into-qx.ui.embed.Gallery-%280.7.3%29-tp530110p579821.html
Sent from the qooxdoo mailing list archive at Nabble.com.


-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Alexander Back]

Hi Dalmazio,

I've just looked at the issue you described and you do not to change the
code of the gallery. Instead of the "beforeAppear" listener you can use
the "appear" listener and everything works fine. I'm sorry I pointed you
in the wrong direction :(

At the time the "beforeAppear" event is dispatched the DIV element of
the gallery widget is not yet rendered thus not available. With the use
of the "appear" event you at the right track. This event is always fired
after the widget is rendered and you can rely on the "getElement" method.

cheers,
   Alex

Dalmazio Brisinda wrote:

> Hi Alex,
>
> Well, I think I might have solved the problem -- with your help and
> excellent explanations, of course -- especially the last one. I ended up
> having to go back to the source code for the Gallery widget. It turns out
> the following two modifications to the qx.ui.embed.Gallery widget corrects
> the problem (see below). The first line seems to be necessary since the
> parent DOM element is never created and otherwise results in null being
> returned for any calls to getElement(). The second change uses the parent
> implementation of _applyElementData(...) which has an argument which is the
> element itself. This get's called by the inherited _applyElement() method
> which passes the argument -- so it's probably best to use the supplied
> argument.
>
> 1. Add the following line to the Gallery constructor:
>
>     this.setElement(document.createElement("div"));
>
> 2. Change the method:
>
>     _applyElementData : function() {
>         this.getElement().appendChild(this.createView());
>     },
>
> to
>
>     _applyElementData : function(elem) {
>         this.base(arguments, elem);
>         elem.appendChild(this.createView());
>     },
>
> and problem solved! I can now dynamically resize the widget using your
> previous example, and invoking getElement() no longer returns null, but the
> actual DOM element.
>
> Thanks for all your help.
>
> Best,
> Dalmazio

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[Alexander Back]

Hi Dalmazio,

I've just commited your fix to the legacy_0_7_x branch (Revision #14771)
Thanks for this one!

cheers,
   Alex

Dalmazio Brisinda wrote:

> Hi again,
>
> Have another bug/fix for the qx.ui.embed.Gallery widget (see below). The
> 'concat()' is not defined, but is not really needed since it's only one
> additional line:
>
> Change the function:
>
>     addFromPartialList : function(vPartialList)
>     {
>       this.concat(vPartialList);
>
>       for (var i=0, a=vPartialList, l=a.length; i<l; i++) {
>         this._frame.appendChild(this.createCell(a[i], i));
>       }
>     },
>
> to
>
>     addFromPartialList : function(vPartialList)
>     {
>       for (var i=0, a=vPartialList, l=a.length; i<l; i++) {
>         this._list.push(a[i]);
>         this._frame.appendChild(this.createCell(a[i], i));
>       }
>     },
>
> Now partial lists of images can be appended to the widget.
>
> Best,
> Dalmazio
>
> P.S. Sorry about not trimming the previous reply... didn't notice that
> Nabble quoted the *whole* message including debugging output.

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

[dbrisinda]

Hi Alex,

Well, you're right, of course!

Okay, so that all makes sense why null was being returned with the
getElement() call. And why is was working again with my (unnecessary) mods.
So, the constructor and _applyElementData modifications don't need to be
made afterall.

No worries about wrong directions -- all a learning experience.

Thanks again.

Best,
Dalmazio




Hi Dalmazio,

I've just looked at the issue you described and you do not to change the
code of the gallery. Instead of the "beforeAppear" listener you can use
the "appear" listener and everything works fine. I'm sorry I pointed you
in the wrong direction :(

At the time the "beforeAppear" event is dispatched the DIV element of
the gallery widget is not yet rendered thus not available. With the use
of the "appear" event you at the right track. This event is always fired
after the widget is rendered and you can rely on the "getElement" method.

cheers,
   Alex

--
View this message in context: http://n2.nabble.com/Loading-images-into-qx.ui.embed.Gallery-%280.7.3%29-tp530110p580900.html
Sent from the qooxdoo mailing list archive at Nabble.com.


-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
qooxdoo-devel@...
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel