ListView Template

[Mike_javaJunior]

and how to configure the template. for example what shall I do to make my page look like buttons and not like lines?
look:
Снимок экрана от 2013-02-26 17:42:54.jpg
when I'd like it to look like:
Снимок экрана от 2013-02-26 17:43:52.jpg
here is the code:

public class QueryPanel extends LayoutContainer {



    public QueryPanel(final String customerId, final String login, final String password){


        setLayout(new FitLayout());
        final ContentPanel gallery = new ContentPanel();
        gallery.setHeading("Reports");
        gallery.setLayout(new FitLayout());
        gallery.setCollapsible(true);
        gallery.setAnimCollapse(false);
        gallery.setFrame(true);
        gallery.setId("images-view");
        gallery.setWidth(535);


        ListStore<GalleryButtonModel> store = new ListStore<GalleryButtonModel>();
        store.add(new GalleryButtonModel("Copy all messages", "CopyIcon.png", new CopyMsgs(customerId)));
        store.add(new GalleryButtonModel("Spam report", "spam.gif", new SpamReport(customerId, login, password)));
        store.add(new GalleryButtonModel("Top customers report", "topCustomers.gif", new TopCustomersReport(customerId, login, password)));
        store.add(new GalleryButtonModel("Total report", "total-report.gif", new TotalReport(customerId, login, password)));
        store.add(new GalleryButtonModel("Message througput report", "message-troughput.gif", new MessageThroughputReport(customerId, login, password)));
        store.add(new GalleryButtonModel("Delivery time report", "delivery-time.gif", new DeliveryTimeReport(customerId, login, password)));
        store.add(new GalleryButtonModel("Action type report", "report.gif", new ActionTypeReport(customerId, login, password)));


        ListView<GalleryButtonModel> view = new ListView<GalleryButtonModel>() {
            @Override
            protected GalleryButtonModel prepareData(GalleryButtonModel model) {
                String s = model.get("name");
                model.set("shortName", Format.ellipse(s, 15));
                return model;
            }


        };


        view.setId("img-chooser-view");
        view.setTemplate(getTemplate(""));
        view.setStore(store);
        view.setItemSelector("div.thumb-wrap");
        view.getSelectionModel().select(0, false);
        view.getSelectionModel().addListener(Events.SelectionChange,
                new Listener<SelectionChangedEvent<GalleryButtonModel>>() {


                    public void handleEvent(SelectionChangedEvent<GalleryButtonModel> be) {
                        be.getSelectedItem().getExample().getButtonModel();
                    }


                });
        VBoxLayoutData vFlex = new VBoxLayoutData();
        vFlex.setFlex(1);
        gallery.add(view, new FitData(5,5,5,5));
        add(gallery, vFlex);
   
    }


        private native String getTemplate(String base)/*-{
            return ['<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
                '<div class="thumb"><img src="/gxt/images/default/button/{path}" title="{name}"></div>',
                '<span class="x-editable">{shortName}</span></div>',
                '</tpl>',
                '<div class="x-clear"></div>'].join("");


        }-*/;
}

Help please

[Colin Alworth]

(Question also posted on SO at http://stackoverflow.com/questions/1...rganise-images, so I've copied my answer here for anyone else who sees this thread later and has the same issue)

Sounds like you are probably talking about this example: http://www.sencha.com/examples-2/#listview

In the template you are using, you reference the css classes thumb and thumb-wrap. These are not just strings added to the html structure, they have meaning in the CSS on the page. Here are some selected bits according to firebug that apply here:

#images-view .thumb-wrap {
    border: 1px solid white;
    float: left;
    margin: 4px 0 4px 4px;
    padding: 5px;
}


#images-view .thumb {
    background: none repeat scroll 0 0 #DDDDDD;
    padding: 3px;
}

These rules describe how to style elements with the thumb and thumb-wrap classes when placed inside a container with the images-view id. You have the id set elsewhere in your code, but if you want to remove that, you may be able to simplify these rules.

The float:left; style is specifically what is causing them to line up left-to-right, then top-to-bottom. It is up to you of course what other styling you want to use, but if these rules aren't in a CSS file on your page, those elements won't be styled by them.

[Mike_javaJunior]

Thank you very much. You helped me a lot. You said to add that to the css, but I didn't manage to do this. I mean, it doesn't work, but I added that I need to the template like:

 '<div class="thumb-wrap" id="{name}" style="border: 1px solid white;float: left;margin: 50px 0 4px 150px;padding: 5px;">',

and have the result. But can you please recommend me a few recources where I can found any information about using css in gwt.

[Colin Alworth]

CSS in GWT starts out as the same as CSS in regular html/js applications - make a css file and reference it with a <link> tag, or just stick the style on the html page somewhere in a <style> tag. In these cases, all of the standard rules about css still apply - nothing special for GWT or GXT, any normal documentation should be helpful to learn css.

Beyond that, GWT can also optimize your CSS like it does the rest of your code if you use CssResource and ClientBundle. Documentation for these can be found at https://developers.google.com/web-to...le#CssResource - the basic idea is that you keep the CSS in your code, you write a interface that exposes the compiled names of all of the css classes, and you call those methods (i.e. thumbWrap()) instead of referring to the specific string 'thumb-wrap' - this lets the compiler make all of your css names simpler. GXT 3 makes very heavy use of CssResource, though GXT 2 doesn't use it at all to remain compatible with old versions of GWT. But you don't need to use CssResource in order to use CSS in GWT.