SmartGWT.mobile data dependent icon

[bda@celerity.be]

Hi,

Can I use tableView.setIconField(fieldName) to point to an icon name returned by the datasource (DB) and different for each record?

If this is the case, what should be the format of the icon name string returned by the datasource and where are the icons supposed to be stored?

I want to use this to present a country flag along with each record.

In smartgwt (desktop) I used to use setImageURLPrefix, setImageURLSuffix on ListGridField to build the full icon name, is there something similar in .mobile ?

Thanks for your help, Ben.

[Isomorphic]

The value should be an absolute or relative URL to the icon image. Right now, SmartGWT.mobile doesn't have properties to automatically add a suffix or prefix - the value in the Record must be the complete URL.

[bda@celerity.be]

I have tried with the full URL as a value, but this does not work.

In all your examples, the image is located inside the jar and provided through ImageResources, no example with an image provided as an URL.

Please find below my code:

package com.nside.moon_ui.mobile.screens;

import com.nside.moon_ui.mobile.images.ImageResources;
import com.smartgwt.mobile.client.data.Criteria;
import com.smartgwt.mobile.client.data.DataSource;
import com.smartgwt.mobile.client.data.LoadDSCallback;
import com.smartgwt.mobile.client.types.FetchMode;
import com.smartgwt.mobile.client.types.TableMode;
import com.smartgwt.mobile.client.util.SC;
import com.smartgwt.mobile.client.widgets.ScrollablePanel;
import com.smartgwt.mobile.client.widgets.form.DynamicForm;
import com.smartgwt.mobile.client.widgets.form.fields.SwitchItem;
import com.smartgwt.mobile.client.widgets.form.fields.events.ChangedEvent;
import com.smartgwt.mobile.client.widgets.form.fields.events.ChangedHandler;
import com.smartgwt.mobile.client.widgets.tableview.TableView;


public class GridProspects extends ScrollablePanel {
	
	private TableView tableView;
	private SwitchItem statusFilterField;

    private void fetchData() {
        
    	Criteria criteria = new Criteria();
    	criteria.addCriteria("countryCode","BR");
    	if (!(Boolean)statusFilterField.getValue()){
        	criteria.addCriteria(statusFilterField.getName(),Boolean.FALSE);
    	}
    	tableView.invalidateCache();
        tableView.fetchData(criteria);
    }
	
	public GridProspects() {
		super("Prospects",ImageResources.INSTANCE.prospect());

		final String dsName = "mb_grid_prospects";
		
		DynamicForm form = new DynamicForm();

        statusFilterField = new SwitchItem("statusIs_final", "Include final records");
        statusFilterField.setOnText("Yes");
        statusFilterField.setOffText("No");
        statusFilterField.setValue(false);
        statusFilterField.addChangedHandler(new ChangedHandler(){

			@Override
			public void onChanged(ChangedEvent event) {
				fetchData();
			}});

        form.setFields(statusFilterField);
		
        addMember(form);

		tableView = new TableView();
        tableView.setShowNavigation(false);
        tableView.setShowIcons(true);
        tableView.setTableMode(TableMode.GROUPED);
        tableView.setDataFetchMode(FetchMode.BASIC);
		
		tableView.setTitleField("companyName_short");
        tableView.setInfoField("name_short");
        tableView.setIconField("icon");
        tableView.setDescriptionField("summary");
        
        addMember(tableView);

        DataSource.load(dsName,new LoadDSCallback(){
			@Override
			public void execute(DataSource[] dsList) {
				if (dsList!=null&&dsList.length>0){
					tableView.setDataSource(dsList[0]);
			        fetchData();
				} else {
					SC.say("Unable to load datasource: " + dsName + " DataSource URL=" +  DataSource.getLoaderUrl() + " RESTHandler URL="+DataSource.getDefaultDataURL());
				}
			}
        });
	
	}

}

"icon" field in the ds "mb_grid_prospects" returns as value an absolute URL like :
http://127.0.0.1:8080/MOON_UI/images/flags/BR.png

If I copy this URL in a browser I get the image. However the icon box in the tableview remains empty. Looking at the js, the <img> tag does not refer any src attribute which make me think I must be missing a step.

Thanks for your help. Ben.

[Isomorphic]

Sorry, you're correct, the icon field was expected to contain either an ImageResource or Image, as of the next nightly build it will accept a String and assume it's a URL. Updated JavaDoc for setIconField() explains this:

+ * Sets the name of the field to use for the icon of a record. The value should be a
+ * <code>String</code> containing the URI of the icon. Alternatively, the field value
+ * may be an instance of {@link com.google.gwt.resources.client.ImageResource} or
+ * {@link com.google.gwt.user.client.ui.Image}.
+ *
+ * <p>In the case of {@link com.smartgwt.mobile.client.widgets.tableview.TableView}, this
+ * only applies if {@link com.smartgwt.mobile.client.widgets.tableview.TableView#getShowIcons()
+ * showIcons} is <code>true</code>.
+ *
+ * @param iconField the name of the field containing the icon's URI.

[bda@celerity.be]

Many thanks, it works well now.

Is there any way to control icon size ? It is by default a square box of about 24x24 (not sure exact size) and icon image gets resize to fit in the box. Can we set the box size to fit the icon size or at least prevent from being resized ?

Thanks, Ben.

[Isomorphic]

As it happens, we just made changes today so that larger icons are centered rather than stretched. Grab the next nightly to take a look.

[bda@celerity.be]

Thanks, works fine now