PDA

View Full Version : GXT - invisible images



bostone
21 Aug 2009, 7:28 AM
Hi all,

I'm using GXT 2.0.1 and here's problem I'm having:
I created ImageBundle, put all my images to it
Here's part of my code that creates a button with text and image
ContentPanel window = new ContentPanel();
window.setLayout(new RowLayout(Orientation.VERTICAL));
add(window);
ToolBar toolBar = new ToolBar();
Button item1 = new Button("New", IMAGES.filenew());
item1.setIconAlign(IconAlign.TOP);
item1.setIconAlign(IconAlign.LEFT);
toolBar.add(item1);
window.setTopComponent(toolBar);When rendered - I can see that image map was created with all the images that I defined however, background is not correctly clipped and nothing is showing. Here's how it looks. Notice a small notch under the button - that's a very top of image I'm trying to show

http://img219.imageshack.us/img219/2719/snap012.png

Also - I'm trying to set image directly to ContentPanel by doing ContentPanel#setIcon(AbstractImagePrototype ) and then I inspect the pane with Firebug and I cannot see any references to the image or background URL, is this even supported and if not how should I do it?

I'm trying to avoid setting direct style references, very much interested in making AbstractImagePrototype work

Thanks for your suggestions

Bo

bostone
21 Aug 2009, 8:16 AM
I dork with styles in Firebug a little - it looks like that image has margin-top:20 which already places it outside of the button itself. The clipping itself seems to be fine - background-position is OK but height, width, etc. are not and I also noticed that image itself is smaller than background icon which is 22px

bostone
21 Aug 2009, 8:34 AM
Using same image in the basic tree - works with no problem:
treePanel.getStyle().setLeafIcon(IMAGES.filenew());

bostone
24 Aug 2009, 8:47 AM
Hey ExtJS guys - I'm evaluating this for large corporation, it doesn't look good when problems like that are not addressed by dev team. I still cannot resolve the problem and it is dead showstopper

Regards,

Bo

Arno.Nyhm
25 Aug 2009, 12:46 AM
note:
first class support you find in different subscription plans:
http://extjs.com/store/gxt/#support-table

i think you have to contact extjs directly to find a individual solution for your evaluation phase.

Colin Alworth
25 Aug 2009, 4:07 AM
I can't be certain, but I think that as of GXT 2.0.x the combined images are not supported, and you need to stick with just a style name or a file name. (can someone confirm this?)

What does IMAGES.filenew() resolve to for you? Our buttons drawn with icons (css and file name) works fine (using both 2.0.1 and the latest from svn trunk), and appears to work fine in the samples (http://extjs.com/examples-dev/explorer.html#buttons). Or build the samples yourself - the code does work there..

Also, look at your lines

item1.setIconAlign(IconAlign.TOP);
item1.setIconAlign(IconAlign.LEFT);
as the second is overriding the first, so the first line does nothing.

The community can help, but yelling at devs for attention does no one any good. Are you generating your IMAGES.filenew() using an ImageBundle interface, or strings and the IconHelper class? What does the css look like (selectors, file location, etc) for the incorrect offset that you are seeing?

bostone
25 Aug 2009, 7:07 AM
Hi Colin,

It generates image map fine, it's a placement that is not working. I also am able to use the generated map for the tree control. I''m trying to use syntax that GXT provides in their examples and I found idea of map appealing far more than hardcoding styles

I tried TOP and LEFT and no align at all - it is pretty consistent with putting image about 20 pix below button

sven
25 Aug 2009, 7:09 AM
Do you see the problem also with the examples?

http://www.extjs.com/examples/explorer.html#buttons

They are also using an imagebundle and i dont see a problem there.

bostone
25 Aug 2009, 8:10 AM
Do you see the problem also with the examples?

http://www.extjs.com/examples/explorer.html#buttons

They are also using an imagebundle and i dont see a problem there.

I actually don't see any problem there. Here's how my code is layout (I'm using maven archetype from codehaus to manage the project)



<module>

<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User' />

<!-- inherit css based theme -->
<inherits name='com.google.gwt.user.theme.standard.Standard' />
<inherits name="com.extjs.gxt.ui.GXT" />
<!-- Specify the app entry point class. -->
<entry-point class='teradata.engtools.nucleus.client.Application' />

<!-- Specify the application specific style sheet. -->
<stylesheet src='Application.css' />

<source path="client" excludes="**/*Test*.java" />

</module>


And here's war directory after everything is compiled
http://img81.imageshack.us/img81/9848/snap013.png

Arno.Nyhm
26 Aug 2009, 3:25 AM
i missing the code how you defined your IMAGES?

bostone
26 Aug 2009, 7:43 AM
i missing the code how you defined your IMAGES?
Since there's no trade secrets in that code yet you can get zipped version here (http://www.box.net/shared/0mczvxvatu). I omitted jar files. To run it you need Maven installed then unzip the archive and from the top folder run "mvn compile gwt:resources gwt:run" (no quotes)
To answer your question, I define my IMAGES as
private static final AppIcons IMAGES = GWT.create(AppIcons.class);
Generated image map is there the problem is - the clipped image is placed 20px below the button and is not visible

Colin Alworth
26 Aug 2009, 8:57 AM
While I may take a crack at compiling this at my leisure, it would be easier for us to help if you can do some of the legwork yourself. For example, what css selector is giving your icon the bad offset, or what selectors are present when you use standard icons but not with your icon?

I recently had an issue with tabs and icons, and I discovered that while I had the latest gxt.jar, I had an older copy of the resources folder, so a css class was missing from gxt-all.css which was spoiling the offsets - this could be a difficult error to find just from code, and at least I don't have time to replace each possibly faulty piece of the project until something works...

Don't give up - GWT is well worth it for ease of coding, and at least for us, GXT has proven very helpful for all of the prebuilt components.

Colin Alworth
26 Aug 2009, 9:10 AM
Okay, I got it working - and the issue is that your Application.css file was moving the image...

img {
margin-top: 20px;
} I have no idea why you have this in there, but it is the reason that your images are out of whack... removing this fixed the 'new' button and the button at the top left of the page.

I'm sure you need this for something, but maybe try making the selector a little more specific than 'img'.

bostone
26 Aug 2009, 9:14 AM
I solved it! Damn templates! Basically - the CSS code generated by mojo archetype was overriding GXT. If you look at the source I attached, it contains Application.css with the following content

button {
display: block;
font-size: 16pt
}

.widePanel {
width: 100%
}

img {
margin-top: 20px;
}The last one was the cause of error. I removed it and everything works now
Lesson learn - namespaces are good!

Thanks for your help, Colin!

bostone
26 Aug 2009, 10:13 AM
Okay, I got it working - and the issue is that your Application.css file was moving the image...

img {
margin-top: 20px;
} I have no idea why you have this in there, but it is the reason that your images are out of whack... removing this fixed the 'new' button and the button at the top left of the page.

I'm sure you need this for something, but maybe try making the selector a little more specific than 'img'.

Yeah - I actually found that before I got your last reply! :)

sven
26 Aug 2009, 10:15 AM
As hint: If you have something like this i would always suggest to inspect the wrong positioned/displayed elements with firebug. There you can see very fast what css rules are applied.

bostone
26 Aug 2009, 12:14 PM
As hint: If you have something like this i would always suggest to inspect the wrong positioned/displayed elements with firebug. There you can see very fast what css rules are applied.
Right. I practically never have Firebug closed when I work. Issues that I'm having are related to learning new technology. Plus I didn't make it easier by throwing Maven and code generation in the mix