ListView styling does not follow Theme packaging structure

[mtraynham]

The ListView class points to a DefaultListViewAppearance in it's constructor.
This should probably be doing a GWT.create(ListViewAppearence.class) and have the module xml allow replacements, such as a BlueListViewAppearance.

[mtraynham]

Here is my svn diff for the necessary changes with a deferred binding approach. Also this removes the Type dependency parameter on the ListViewAppearance class, which was uneeded in the first place:

Index: src/main/java/com/sencha/gxt/theme/blue/Blue.gwt.xml
===================================================================
--- src/main/java/com/sencha/gxt/theme/blue/Blue.gwt.xml (revision 2750)
+++ src/main/java/com/sencha/gxt/theme/blue/Blue.gwt.xml (working copy)
@@ -59,6 +59,10 @@
<!-- <when-type-is class="com.sencha.gxt.widget.core.client.box.MessageBox.MessageBoxAppearance" /> -->
<!-- </replace-with> -->

+ <replace-with class="com.sencha.gxt.theme.blue.client.list.BlueListViewAppearance">
+ <when-type-is class="com.sencha.gxt.widget.core.client.ListView.ListViewAppearance" />
+ </replace-with>
+
<replace-with class="com.sencha.gxt.theme.blue.client.tree.BlueTreeAppearance">
<when-type-is class="com.sencha.gxt.widget.core.client.tree.Tree.TreeAppearance" />
</replace-with>
Index: src/main/java/com/sencha/gxt/theme/blue/client/list/selectedBackground.gif
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

Property changes on: src/main/java/com/sencha/gxt/theme/blue/client/list/selectedBackground.gif
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream

Index: src/main/java/com/sencha/gxt/theme/blue/client/list/ListView.css
===================================================================
--- src/main/java/com/sencha/gxt/theme/blue/client/list/ListView.css (revision 0)
+++ src/main/java/com/sencha/gxt/theme/blue/client/list/ListView.css (revision 0)
@@ -0,0 +1,47 @@
+.view {
+ background-color: white;
+ border: 1px solid #A3BAE9;
+ -moz-outline: none;
+ outline: 0 none;
+ position: relative;
+}
+
+@if user.agent ie6 {
+ .view {
+ overflow: auto;
+ }
+} @else {
+ .view {
+ overflow-y: auto;
+ }
+}
+
+.item {
+ border: 1px solid #FFFFFF;
+ font-family: tahoma, arial, helvetica, sans-serif;
+ font-size: 12px;
+ font-size-adjust: none;
+ font-stretch: normal;
+ font-style: normal;
+ font-variant: normal;
+ font-weight: normal;
+ line-height: normal;
+ overflow: hidden;
+ padding: 2px;
+ white-space: nowrap;
+ cursor: pointer;
+}
+
+@sprite .over {
+ gwt-image: 'selectedBackground';
+ height: auto;
+ border: 1px dotted #DDDDDD !important;
+ cursor: pointer;
+}
+
+.sel {
+ background: none repeat scroll 0 50% #DFE8F6;
+ border: 1px dotted #A3BAE9 !important;
+ cursor: pointer;
+}
+
Index: src/main/java/com/sencha/gxt/theme/blue/client/list/BlueListViewAppearance.java
===================================================================
--- src/main/java/com/sencha/gxt/theme/blue/client/list/BlueListViewAppearance.java (revision 0)
+++ src/main/java/com/sencha/gxt/theme/blue/client/list/BlueListViewAppearance.java (revision 0)
@@ -0,0 +1,140 @@
+package com.sencha.gxt.theme.blue.client.list;
+
+import java.util.ArrayList;
+import java.util.List;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.dom.client.NodeList;
+import com.google.gwt.resources.client.ImageResource;
+import com.google.gwt.resources.client.ImageResource.ImageOptions;
+import com.google.gwt.resources.client.ImageResource.RepeatStyle;
+import com.google.gwt.safehtml.shared.SafeHtml;
+import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
+import com.sencha.gxt.core.client.dom.XElement;
+import com.sencha.gxt.widget.core.client.ListView.ListViewAppearance;
+import com.sencha.gxt.widget.core.client.ListView.ListViewResources;
+import com.sencha.gxt.widget.core.client.ListView.ListViewStyle;
+
+
+@SuppressWarnings("javadoc")
+public class BlueListViewAppearance implements ListViewAppearance {
+
+ /**
+ * The default resources for the list view.
+ */
+ public interface BlueListViewResources extends ListViewResources {
+ /**
+ * Returns the default list view style names.
+ *
+ * @return the default list view style names
+ */
+ @Source("ListView.css")
+ BlueListViewStyle css();
+
+ /**
+ * Returns the image resource for the selected item background.
+ *
+ * @return selected background image resource
+ */
+ @ImageOptions(repeatStyle = RepeatStyle.Horizontal)
+ ImageResource selectedBackground();
+ }
+
+ /**
+ * The default styles for the list view.
+ */
+ public interface BlueListViewStyle extends ListViewStyle {
+
+ /**
+ * Returns the name of the style representing the item.
+ *
+ * @return the style for the item
+ *
+ */
+ String item();
+
+ /**
+ * Returns the name of the style representing the cursor over state.
+ *
+ * @return the style for the cursor over state
+ */
+ String over();
+
+ /**
+ * Returns the name of the style representing the selected state.
+ *
+ * @return the style of the selected state
+ */
+ String sel();
+
+ /**
+ * Returns the name of the style representing the list view root.
+ *
+ * @return the style of the list view
+ */
+ String view();
+ }
+
+ protected BlueListViewResources resources;
+ protected BlueListViewStyle style;
+
+ public BlueListViewAppearance() {
+ this.resources = GWT.create(BlueListViewResources.class);
+ this.style = resources.css();
+ this.style.ensureInjected();
+ }
+
+ @Override
+ public Element findCellParent(XElement item) {
+ return item;
+ }
+
+ @Override
+ public Element findElement(XElement child) {
+ return child.findParentElement("." + style.item(), 10);
+ }
+
+ @Override
+ public List<Element> findElements(XElement parent) {
+ NodeList<Element> nodes = parent.select("." + style.item());
+ List<Element> temp = new ArrayList<Element>();
+ for (int i = 0; i < nodes.getLength(); i++) {
+ temp.add(nodes.getItem(i));
+ }
+
+ return temp;
+ }
+
+ @Override
+ public void onOver(XElement item, boolean over) {
+ item.setClassName(style.over(), over);
+ }
+
+ @Override
+ public void onSelect(XElement item, boolean select) {
+ item.setClassName(style.sel(), select);
+ }
+
+ @Override
+ public void render(SafeHtmlBuilder builder) {
+ builder.appendHtmlConstant("<div class=\"" + style.view() + "\"></div>");
+ }
+
+ @Override
+ public void renderEnd(SafeHtmlBuilder builder) {
+ }
+
+ @Override
+ public void renderItem(SafeHtmlBuilder sb, SafeHtml content) {
+ sb.appendHtmlConstant("<div class='" + style.item() + "'>");
+ sb.append(content);
+ sb.appendHtmlConstant("</div>");
+
+ }
+
+ @Override
+ public ListViewResources resources() {
+ return (ListViewResources)GWT.create(BlueListViewResources.class);
+ }
+}
\ No newline at end of file
Index: src/main/java/com/sencha/gxt/widget/core/client/selectedBackground.gif
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
Index: src/main/java/com/sencha/gxt/widget/core/client/ListView.css
===================================================================
--- src/main/java/com/sencha/gxt/widget/core/client/ListView.css (revision 2750)
+++ src/main/java/com/sencha/gxt/widget/core/client/ListView.css (working copy)
@@ -1,47 +0,0 @@
-.view {
- background-color: white;
- border: 1px solid #A3BAE9;
- -moz-outline: none;
- outline: 0 none;
- position: relative;
-}
-
-@if user.agent ie6 {
- .view {
- overflow: auto;
- }
-} @else {
- .view {
- overflow-y: auto;
- }
-}
-
-.item {
- border: 1px solid #FFFFFF;
- font-family: tahoma, arial, helvetica, sans-serif;
- font-size: 12px;
- font-size-adjust: none;
- font-stretch: normal;
- font-style: normal;
- font-variant: normal;
- font-weight: normal;
- line-height: normal;
- overflow: hidden;
- padding: 2px;
- white-space: nowrap;
- cursor: pointer;
-}
-
-@sprite .over {
- gwt-image: 'selectedBackground';
- height: auto;
- border: 1px dotted #DDDDDD !important;
- cursor: pointer;
-}
-
-.sel {
- background: none repeat scroll 0 50% #DFE8F6;
- border: 1px dotted #A3BAE9 !important;
- cursor: pointer;
-}
-
Index: src/main/java/com/sencha/gxt/widget/core/client/ListViewCustomAppearance.java
===================================================================
--- src/main/java/com/sencha/gxt/widget/core/client/ListViewCustomAppearance.java (revision 2750)
+++ src/main/java/com/sencha/gxt/widget/core/client/ListViewCustomAppearance.java (working copy)
@@ -11,7 +11,7 @@
import com.sencha.gxt.widget.core.client.ListView.ListViewAppearance;

@SuppressWarnings("javadoc")
-public abstract class ListViewCustomAppearance<M> implements ListViewAppearance<M> {
+public abstract class ListViewCustomAppearance implements ListViewAppearance {

protected String itemSelector;
protected String overStyle;
Index: src/main/java/com/sencha/gxt/widget/core/client/ListViewDefaultAppearance.java
===================================================================
--- src/main/java/com/sencha/gxt/widget/core/client/ListViewDefaultAppearance.java (revision 2750)
+++ src/main/java/com/sencha/gxt/widget/core/client/ListViewDefaultAppearance.java (working copy)
@@ -1,75 +0,0 @@
-package com.sencha.gxt.widget.core.client;
-
-import java.util.ArrayList;
-import java.util.List;
-
-import com.google.gwt.core.client.GWT;
-import com.google.gwt.dom.client.Element;
-import com.google.gwt.dom.client.NodeList;
-import com.google.gwt.safehtml.shared.SafeHtml;
-import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
-import com.sencha.gxt.core.client.dom.XElement;
-import com.sencha.gxt.widget.core.client.ListView.ListViewAppearance;
-import com.sencha.gxt.widget.core.client.ListView.ListViewDefaultResources;
-import com.sencha.gxt.widget.core.client.ListView.ListViewDefaultStyle;
-
-@SuppressWarnings("javadoc")
-public class ListViewDefaultAppearance<M> implements ListViewAppearance<M> {
-
- protected ListViewDefaultResources resources;
- protected ListViewDefaultStyle style;
-
- public ListViewDefaultAppearance() {
- this.resources = GWT.create(ListViewDefaultResources.class);
- this.style = resources.css();
- this.style.ensureInjected();
- }
-
- @Override
- public Element findCellParent(XElement item) {
- return item;
- }
-
- @Override
- public Element findElement(XElement child) {
- return child.findParentElement("." + style.item(), 10);
- }
-
- @Override
- public List<Element> findElements(XElement parent) {
- NodeList<Element> nodes = parent.select("." + style.item());
- List<Element> temp = new ArrayList<Element>();
- for (int i = 0; i < nodes.getLength(); i++) {
- temp.add(nodes.getItem(i));
- }
-
- return temp;
- }
-
- @Override
- public void onOver(XElement item, boolean over) {
- item.setClassName(style.over(), over);
- }
-
- @Override
- public void onSelect(XElement item, boolean select) {
- item.setClassName(style.sel(), select);
- }
-
- @Override
- public void render(SafeHtmlBuilder builder) {
- builder.appendHtmlConstant("<div class=\"" + style.view() + "\"></div>");
- }
-
- @Override
- public void renderEnd(SafeHtmlBuilder builder) {
- }
-
- @Override
- public void renderItem(SafeHtmlBuilder sb, SafeHtml content) {
- sb.appendHtmlConstant("<div class='" + style.item() + "'>");
- sb.append(content);
- sb.appendHtmlConstant("</div>");
-
- }
-}
\ No newline at end of file
Index: src/main/java/com/sencha/gxt/widget/core/client/ListView.java
===================================================================
--- src/main/java/com/sencha/gxt/widget/core/client/ListView.java (revision 2750)
+++ src/main/java/com/sencha/gxt/widget/core/client/ListView.java (working copy)
@@ -19,9 +19,6 @@
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;
-import com.google.gwt.resources.client.ImageResource;
-import com.google.gwt.resources.client.ImageResource.ImageOptions;
-import com.google.gwt.resources.client.ImageResource.RepeatStyle;
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
import com.google.gwt.safehtml.shared.SafeHtmlUtils;
@@ -159,7 +156,7 @@
*
* @param <M> the model type
*/
- public interface ListViewAppearance<M> {
+ public interface ListViewAppearance {

/**
* Returns the cell's parent element if it exists. Default implementation
@@ -223,58 +220,31 @@
* @param content the item content
*/
void renderItem(SafeHtmlBuilder builder, SafeHtml content);
-
+
+ /**
+ * Returns the resources of the list view
+ */
+ ListViewResources resources();
}

/**
* The default resources for the list view.
*/
- public interface ListViewDefaultResources extends ClientBundle {
+ public interface ListViewResources extends ClientBundle {
/**
* Returns the default list view style names.
*
* @return the default list view style names
*/
- @Source("ListView.css")
- ListViewDefaultStyle css();
-
- /**
- * Returns the image resource for the selected item background.
- *
- * @return selected background image resource
- */
- @ImageOptions(repeatStyle = RepeatStyle.Horizontal)
- ImageResource selectedBackground();
+ ListViewStyle css();
}

/**
* The default styles for the list view.
*/
- public interface ListViewDefaultStyle extends CssResource {
+ public interface ListViewStyle extends CssResource {

/**
- * Returns the name of the style representing the item.
- *
- * @return the style for the item
- *
- */
- String item();
-
- /**
- * Returns the name of the style representing the cursor over state.
- *
- * @return the style for the cursor over state
- */
- String over();
-
- /**
- * Returns the name of the style representing the selected state.
- *
- * @return the style of the selected state
- */
- String sel();
-
- /**
* Returns the name of the style representing the list view root.
*
* @return the style of the list view
@@ -282,22 +252,22 @@
String view();
}

- private static ListViewDefaultResources standardResources;
+ private static ListViewResources standardResources;

/**
* Returns the default resources for the list view.
*
* @return the default resources
*/
- public static ListViewDefaultResources getStandardResources() {
+ public static ListViewResources getStandardResources() {
if (standardResources == null) {
- standardResources = GWT.create(ListViewDefaultResources.class);
+ standardResources = ((ListViewAppearance)GWT.create(ListViewAppearance.class)).resources();
standardResources.css().ensureInjected();
}
return standardResources;
}

- protected ListViewAppearance<M> appearance;
+ protected ListViewAppearance appearance;
protected XElement focusEl;
protected final FocusImpl focusImpl = FocusImpl.getFocusImplForPanel();

@@ -328,7 +298,7 @@
* @param valueProvider the value provider
*/
public ListView(ListStore<M> store, ValueProvider<? super M, N> valueProvider) {
- this(store, valueProvider, new ListViewDefaultAppearance<M>());
+ this(store, valueProvider, (ListViewAppearance) GWT.create(ListViewAppearance.class));
}

/**
@@ -339,7 +309,7 @@
* @param cell the cell
*/
public ListView(ListStore<M> store, ValueProvider<? super M, N> valueProvider, Cell<N> cell) {
- this(store, valueProvider, new ListViewDefaultAppearance<M>());
+ this(store, valueProvider, (ListViewAppearance) GWT.create(ListViewAppearance.class));
setCell(cell);
}

@@ -350,7 +320,7 @@
* @param valueProvider the value provider
* @param appearance the appearance
*/
- public ListView(final ListStore<M> store, ValueProvider<? super M, N> valueProvider, ListViewAppearance<M> appearance) {
+ public ListView(final ListStore<M> store, ValueProvider<? super M, N> valueProvider, ListViewAppearance appearance) {
this.appearance = appearance;
this.valueProvider = valueProvider;
setSelectionModel(new ListViewSelectionModel<M>());

[mtraynham]

I was still getting a rebind error, but referencing that the Resulting type must be a class. Could be because ListViewCustomAppearance is abstract.

[hphung]

I'm also wanting to style my ListViews. Is there a reason why this does not follow the pattern of all the other Appearances?

Thanks

[lefke123]

I'd love an actual reply on the thread, seeing as I'm running into the exact same issue. I need to style my lists, but the way the code is designed is blocking an implementation.

Could someone comment on this, or suggest a workaround?

[mtraynham]

Just create a class called ExtendedListView that looks like the following:

package com.digitalsmiths.admin.client.util.gxtExtended.listview;


import com.google.gwt.cell.client.Cell;
import com.google.gwt.core.client.GWT;
import com.sencha.gxt.core.client.ValueProvider;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.widget.core.client.ListView;


public class ExtendedListView<M, N> extends ListView<M, N> {
	/**
	 * Creates a new list view.
	 * 
	 * @param store the store
	 * @param valueProvider the value provider
	 */
	@SuppressWarnings("unchecked")
	public ExtendedListView(ListStore<M> store, ValueProvider<? super M, N> valueProvider) {
		this(store, valueProvider, (ListViewAppearance<M>)GWT.create(ListViewAppearance.class));
	}


	/**
	 * Creates a new list view.
	 * 
	 * @param store the store
	 * @param valueProvider the value provider
	 * @param cell the cell
	 */
	@SuppressWarnings("unchecked")
	public ExtendedListView(ListStore<M> store, ValueProvider<? super M, N> valueProvider, Cell<N> cell) {
		this(store, valueProvider, (ListViewAppearance<M>)GWT.create(ListViewAppearance.class));
		setCell(cell);
	}


	/**
	 * Creates a new list view.
	 * 
	 * @param store the store
	 * @param valueProvider the value provider
	 * @param appearance the appearance
	 */
	public ExtendedListView(final ListStore<M> store, ValueProvider<? super M, N> valueProvider, ListViewAppearance<M> appearance) {
		super(store, valueProvider, appearance);
	}
}

Now in your .gwt.xml Module file put the following:

  <replace-with class="com.sencha.gxt.widget.core.client.ListViewDefaultAppearance">
    <when-type-is class="com.sencha.gxt.widget.core.client.ListView.ListViewAppearance" />
  </replace-with>

This will simulate the default appearance that was hardcoded in GXT, but you could inject another Appearance that implements ListViewAppearance if necessary.