Results 1 to 4 of 4

Thread: Multiple Appearances of a Button

  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    51
    Answers
    2

    Default Answered: Multiple Appearances of a Button

    I've just extended the ButtonCellDefaultAppearance class to my own custom appearance. I don't want to use this appearance for every button instance through out the product. I only want to use this in specific situations so putting something like this in there isn't what I want:

    Code:
    <replace-with class="my appearance class">
    <when-type-is class="class to be replaced" />
    </replace-with>

    Without putting in the replace I get an error saying I forgot to inherit the appearance when I try to use it. So my question is how can I use this as a secondary appearance?

    This is my first time really ever working with appearances feel free to yell if its something simple

  2. I'm not sure with out seeing the code, why every button would show up with a global appearance change unless the GWT module had the type replacement.


    If the button is instantiated with custom appearance it should only render with the appearances that it was instantiated with, unless possibly there is a module with some type replacement annotations.


    I can't remember what version I copied the css from, so a new copy might be needed. Another note, in the short future we have themeing coming which should make this stuff much easier.


    How I might Create a Custom Button Style...


    Create a custom button appearance CSS file. This file must reside in the same package as the custom appearance. Change anything in this css for the new custom appearance.


    This CSS file was copied from the GXT base theme:


    Code:
    /* ./CustomButtonCell.css file */ 
    @external x-toolbar-mark;
    .button {
      cursor: pointer;
      white-space: nowrap;
    }
    .hasWidth .mainTable {
      width: 100%;
    }
    .button td {
      text-align: center;
    }
    @if !user.agent ie6  {
      .button td img {
        float: left;
      }
      .iconTop td img, .iconBottom td img {
        float: none;
      }
    } @else {
      .iconTop {}
      .iconBottom {}
    }
    .iconWrap {
      padding: 0px 2px;
    }
    .text {
      padding: 0px 2px;
      font-family: Tahoma, Arial, Verdana, sans-serif;
      font-size: 11px;
      font-weight: normal;
      text-align: center;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
    }
    .iconWrap div {
      font-size: 1px;
    }
    .small .iconLeft td, .small .iconRight td, .small .noIcon td {
      line-height: 18px;
    }
    .medium .iconTop .iconWrap div, .medium .iconBottom .iconWrap div {
      height: 20px;
    }
    .medium .iconLeft td, .medium .iconRight td, .medium .noIcon td {
      line-height: 24px;
    }
    .medium .iconTop .iconWrap div, .medium .iconBottom .iconWrap div {
      height: 26px;
    }
    .large .iconLeft td, .large .iconRight td, .large .noIcon td, .large .iconWrap div {
      line-height: 32px;
    }
    .large .iconTop .iconWrap div, .large .iconBottom .iconWrap div {
      height: 34px;
    }
    @if user.agent ie6 {
      @eval SPLIT com.sencha.gxt.core.client.util.ImageHelper.createModuleBasedUrl("base/images/button/split.gif");
      .split {
        background-image: SPLIT;
      }
    } @else {
      @sprite .split  {
        gwt-image: 'split';
        width: auto;
        height: auto;
      }
    }
    .split {
      background-position: right center;
      padding-right: 14px;
      background-repeat: no-repeat;
    }
    @if user.agent ie6 {
      @eval SPLITBOTTOM com.sencha.gxt.core.client.util.ImageHelper.createModuleBasedUrl("base/images/button/splitBottom.gif");
      .splitBottom {
        background-image: SPLITBOTTOM;
      }
    } @else {
      @sprite .splitBottom  {
        gwt-image: 'splitBottom';
        width: auto;
        height: auto;
      }
    }
    .splitBottom {
      gwt-image: 'splitBottom';
      background-position: center bottom;
      padding-bottom: 14px;
      background-repeat: no-repeat;
    }
    .over {}
    @if user.agent ie6 {
      @eval ARROW com.sencha.gxt.core.client.util.ImageHelper.createModuleBasedUrl("base/images/button/arrow.gif");
      .arrow {
        background-image: ARROW;
      }
    } @else {
      @sprite .arrow  {
        gwt-image: 'arrow';
        width: auto;
        height: auto;
      }
    }
    .arrow {
      padding-right: 10px;
      background-position: right center;
      background-repeat: no-repeat;
    }
    @if user.agent ie6 {
      @eval ARROWBOTTOM com.sencha.gxt.core.client.util.ImageHelper.createModuleBasedUrl("base/images/button/arrowBottom.gif");
      .arrowBottom {
        background-image: ARROWBOTTOM;
      }
    } @else {
      @sprite .arrowBottom  {
        gwt-image: 'arrowBottom';
        width: auto;
        height: auto;
      }
    }
    .arrowBottom {
      background-position: center bottom;
      padding-bottom:14px;
      background-repeat: no-repeat;
    }

    Create a custom appearance, which overrides the ButtonCellDefaultAppearance.


    This was copied from the ButtonCellDefaultAppearance:


    Code:
    import com.google.gwt.core.client.GWT;
    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.sencha.gxt.theme.base.client.button.ButtonCellDefaultAppearance;
    
    
    public class CustomButtonAppearance<T> extends ButtonCellDefaultAppearance<T> {
      public interface CustomButtonCellResources extends ButtonCellResources {
        @ImageOptions(repeatStyle = RepeatStyle.None)
        ImageResource arrow();
    
    
        @ImageOptions(repeatStyle = RepeatStyle.None)
        ImageResource arrowBottom();
    
    
        @ImageOptions(repeatStyle = RepeatStyle.None)
        ImageResource split();
    
    
        @ImageOptions(repeatStyle = RepeatStyle.None)
        ImageResource splitBottom();
    
    
        @Source("CustomButtonCell.css")
        ButtonCellStyle style();
      }
    
    
      public CustomButtonAppearance() {
        super(GWT.<ButtonCellResources> create(CustomButtonCellResources.class));
      }
    }



    Override the default button so the appearance can be initialized with it.
    Code:
    import com.sencha.gxt.cell.core.client.ButtonCell.ButtonCellAppearance;
    import com.sencha.gxt.cell.core.client.TextButtonCell;
    import com.sencha.gxt.widget.core.client.button.TextButton;
    
    
    public class CustomButton extends TextButton {
      public CustomButton() {
        super(new TextButtonCell());
      }
    
    
      public CustomButton(ButtonCellAppearance<String> appearance) {
        super(new TextButtonCell(appearance));         
      }
    }

    Initialize the custom Button with custom appearance. This overrides the default style.
    Code:
    public void onModuleLoad() {            
      CustomButtonAppearance<String> overrideAppearance = new CustomButtonAppearance<String>();
      CustomButton button3 = new CustomButton(overrideAppearance);
      button3.setText("Button3");
      RootPanel.get().add(button3);
    }



    How I Might Mix Stlying...


    There are other ways to style GXT widgets and we list some of those below. Listed below in a couple of the four options, is the GWT Standard CSS Resource setup mixed with GXT Appearance. I would recommend using the appearance to style because it trumps some style changes and follows the current widget pattern.


    Given having a custom style sheet for the CSS Resource interface.


    Code:
    /* style.css file */
    .customStyle {
      width: 50px;
      height: 50px;
    }

    And given the CSS resource AppResources is setup for initializing GWT CSS Resource.
    Code:
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.resources.client.ClientBundle;
    import com.google.gwt.resources.client.CssResource;
    
    
    public interface AppResources extends ClientBundle {
      public static final AppResources INSTANCE =  GWT.create(AppResources.class);
    
    
      public interface AppStyles extends CssResource {
        String customStyle();
      }
    
    
      @Source("style.css")
      public AppStyles css();
    }

    Globally change the button appearance by replacing all the button appearance. This would be for #4 below. Put this in the Project.gwt.xml module.


    Code:
    <replace-with class="com.sencha.gxt.project.client.resources.button.CustomButtonAppearance">
        <when-type-is class="com.sencha.gxt.cell.core.client.ButtonCell.ButtonCellAppearance" />
    </replace-with>

    Then the CSS Resources can be intermixed with Appearance design.


    The Examples of the different ways to mix up the style for the CustomButtonAppearance widget:


    Code:
    public void onModuleLoad() {
      AppResources.INSTANCE.css().ensureInjected();
    
    
      // 1. Default appearance overrides custom css style
      CustomButton button = new CustomButton();
      button.addStyleName(AppResources.INSTANCE.css().customStyle());
      button.setText("Button1");
      RootPanel.get().add(button);
    
    
      // 2. Override the default appearance completely
      CustomButton button2 = new CustomButton();
      button2.setStyleName(AppResources.INSTANCE.css().customStyle());
      button2.setText("Button2");
      RootPanel.get().add(button2);
    
    
      // 3. Override the default appearance all together
      CustomButtonAppearance<String> overrideAppearance = new CustomButtonAppearance<String>();
      CustomButton button3 = new CustomButton(overrideAppearance);
      button3.setText("Button3");
      RootPanel.get().add(button3);
    
    
      // 4. Suggested, override the default appearance all together GWT module change. 
      // See more on <replace-with class="com.sencha.gxt.project.client.resources.button.CustomButtonAppearance">
      CustomButton button4 = new CustomButton();
      button4.setText("Button4");
      RootPanel.get().add(button4);
    }

    Just a note, digging into the custom appearance or styles can have consequences and could could cause some of the multiple browser layout tuning to go haywire.

    Brandon

  3. #2
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178
    Answers
    12

    Default

    I would instantiate the button with the appropriate cell that uses the custom appearance if you only need it for a couple buttons.

    Brandon

  4. #3
    Sencha User
    Join Date
    May 2011
    Posts
    51
    Answers
    2

    Default

    So could I extend say ToggleButtonCell and inside that extension make it use another appearance?

    Up to this point now I've tried extending ButtonCellAppearance and creating a button like this:

    ToggleButton mybutton = new ToggleButton(new ToggleButtonCell(new CustomAppearance);

    Which makes the button use the new appearance..problem is, it makes every other button in the app rerender with this new appearance too..essentially doing the same thing as the replace.

  5. #4
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,178
    Answers
    12

    Default

    I'm not sure with out seeing the code, why every button would show up with a global appearance change unless the GWT module had the type replacement.


    If the button is instantiated with custom appearance it should only render with the appearances that it was instantiated with, unless possibly there is a module with some type replacement annotations.


    I can't remember what version I copied the css from, so a new copy might be needed. Another note, in the short future we have themeing coming which should make this stuff much easier.


    How I might Create a Custom Button Style...


    Create a custom button appearance CSS file. This file must reside in the same package as the custom appearance. Change anything in this css for the new custom appearance.


    This CSS file was copied from the GXT base theme:


    Code:
    /* ./CustomButtonCell.css file */ 
    @external x-toolbar-mark;
    .button {
      cursor: pointer;
      white-space: nowrap;
    }
    .hasWidth .mainTable {
      width: 100%;
    }
    .button td {
      text-align: center;
    }
    @if !user.agent ie6  {
      .button td img {
        float: left;
      }
      .iconTop td img, .iconBottom td img {
        float: none;
      }
    } @else {
      .iconTop {}
      .iconBottom {}
    }
    .iconWrap {
      padding: 0px 2px;
    }
    .text {
      padding: 0px 2px;
      font-family: Tahoma, Arial, Verdana, sans-serif;
      font-size: 11px;
      font-weight: normal;
      text-align: center;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
    }
    .iconWrap div {
      font-size: 1px;
    }
    .small .iconLeft td, .small .iconRight td, .small .noIcon td {
      line-height: 18px;
    }
    .medium .iconTop .iconWrap div, .medium .iconBottom .iconWrap div {
      height: 20px;
    }
    .medium .iconLeft td, .medium .iconRight td, .medium .noIcon td {
      line-height: 24px;
    }
    .medium .iconTop .iconWrap div, .medium .iconBottom .iconWrap div {
      height: 26px;
    }
    .large .iconLeft td, .large .iconRight td, .large .noIcon td, .large .iconWrap div {
      line-height: 32px;
    }
    .large .iconTop .iconWrap div, .large .iconBottom .iconWrap div {
      height: 34px;
    }
    @if user.agent ie6 {
      @eval SPLIT com.sencha.gxt.core.client.util.ImageHelper.createModuleBasedUrl("base/images/button/split.gif");
      .split {
        background-image: SPLIT;
      }
    } @else {
      @sprite .split  {
        gwt-image: 'split';
        width: auto;
        height: auto;
      }
    }
    .split {
      background-position: right center;
      padding-right: 14px;
      background-repeat: no-repeat;
    }
    @if user.agent ie6 {
      @eval SPLITBOTTOM com.sencha.gxt.core.client.util.ImageHelper.createModuleBasedUrl("base/images/button/splitBottom.gif");
      .splitBottom {
        background-image: SPLITBOTTOM;
      }
    } @else {
      @sprite .splitBottom  {
        gwt-image: 'splitBottom';
        width: auto;
        height: auto;
      }
    }
    .splitBottom {
      gwt-image: 'splitBottom';
      background-position: center bottom;
      padding-bottom: 14px;
      background-repeat: no-repeat;
    }
    .over {}
    @if user.agent ie6 {
      @eval ARROW com.sencha.gxt.core.client.util.ImageHelper.createModuleBasedUrl("base/images/button/arrow.gif");
      .arrow {
        background-image: ARROW;
      }
    } @else {
      @sprite .arrow  {
        gwt-image: 'arrow';
        width: auto;
        height: auto;
      }
    }
    .arrow {
      padding-right: 10px;
      background-position: right center;
      background-repeat: no-repeat;
    }
    @if user.agent ie6 {
      @eval ARROWBOTTOM com.sencha.gxt.core.client.util.ImageHelper.createModuleBasedUrl("base/images/button/arrowBottom.gif");
      .arrowBottom {
        background-image: ARROWBOTTOM;
      }
    } @else {
      @sprite .arrowBottom  {
        gwt-image: 'arrowBottom';
        width: auto;
        height: auto;
      }
    }
    .arrowBottom {
      background-position: center bottom;
      padding-bottom:14px;
      background-repeat: no-repeat;
    }

    Create a custom appearance, which overrides the ButtonCellDefaultAppearance.


    This was copied from the ButtonCellDefaultAppearance:


    Code:
    import com.google.gwt.core.client.GWT;
    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.sencha.gxt.theme.base.client.button.ButtonCellDefaultAppearance;
    
    
    public class CustomButtonAppearance<T> extends ButtonCellDefaultAppearance<T> {
      public interface CustomButtonCellResources extends ButtonCellResources {
        @ImageOptions(repeatStyle = RepeatStyle.None)
        ImageResource arrow();
    
    
        @ImageOptions(repeatStyle = RepeatStyle.None)
        ImageResource arrowBottom();
    
    
        @ImageOptions(repeatStyle = RepeatStyle.None)
        ImageResource split();
    
    
        @ImageOptions(repeatStyle = RepeatStyle.None)
        ImageResource splitBottom();
    
    
        @Source("CustomButtonCell.css")
        ButtonCellStyle style();
      }
    
    
      public CustomButtonAppearance() {
        super(GWT.<ButtonCellResources> create(CustomButtonCellResources.class));
      }
    }



    Override the default button so the appearance can be initialized with it.
    Code:
    import com.sencha.gxt.cell.core.client.ButtonCell.ButtonCellAppearance;
    import com.sencha.gxt.cell.core.client.TextButtonCell;
    import com.sencha.gxt.widget.core.client.button.TextButton;
    
    
    public class CustomButton extends TextButton {
      public CustomButton() {
        super(new TextButtonCell());
      }
    
    
      public CustomButton(ButtonCellAppearance<String> appearance) {
        super(new TextButtonCell(appearance));         
      }
    }

    Initialize the custom Button with custom appearance. This overrides the default style.
    Code:
    public void onModuleLoad() {            
      CustomButtonAppearance<String> overrideAppearance = new CustomButtonAppearance<String>();
      CustomButton button3 = new CustomButton(overrideAppearance);
      button3.setText("Button3");
      RootPanel.get().add(button3);
    }



    How I Might Mix Stlying...


    There are other ways to style GXT widgets and we list some of those below. Listed below in a couple of the four options, is the GWT Standard CSS Resource setup mixed with GXT Appearance. I would recommend using the appearance to style because it trumps some style changes and follows the current widget pattern.


    Given having a custom style sheet for the CSS Resource interface.


    Code:
    /* style.css file */
    .customStyle {
      width: 50px;
      height: 50px;
    }

    And given the CSS resource AppResources is setup for initializing GWT CSS Resource.
    Code:
    import com.google.gwt.core.client.GWT;
    import com.google.gwt.resources.client.ClientBundle;
    import com.google.gwt.resources.client.CssResource;
    
    
    public interface AppResources extends ClientBundle {
      public static final AppResources INSTANCE =  GWT.create(AppResources.class);
    
    
      public interface AppStyles extends CssResource {
        String customStyle();
      }
    
    
      @Source("style.css")
      public AppStyles css();
    }

    Globally change the button appearance by replacing all the button appearance. This would be for #4 below. Put this in the Project.gwt.xml module.


    Code:
    <replace-with class="com.sencha.gxt.project.client.resources.button.CustomButtonAppearance">
        <when-type-is class="com.sencha.gxt.cell.core.client.ButtonCell.ButtonCellAppearance" />
    </replace-with>

    Then the CSS Resources can be intermixed with Appearance design.


    The Examples of the different ways to mix up the style for the CustomButtonAppearance widget:


    Code:
    public void onModuleLoad() {
      AppResources.INSTANCE.css().ensureInjected();
    
    
      // 1. Default appearance overrides custom css style
      CustomButton button = new CustomButton();
      button.addStyleName(AppResources.INSTANCE.css().customStyle());
      button.setText("Button1");
      RootPanel.get().add(button);
    
    
      // 2. Override the default appearance completely
      CustomButton button2 = new CustomButton();
      button2.setStyleName(AppResources.INSTANCE.css().customStyle());
      button2.setText("Button2");
      RootPanel.get().add(button2);
    
    
      // 3. Override the default appearance all together
      CustomButtonAppearance<String> overrideAppearance = new CustomButtonAppearance<String>();
      CustomButton button3 = new CustomButton(overrideAppearance);
      button3.setText("Button3");
      RootPanel.get().add(button3);
    
    
      // 4. Suggested, override the default appearance all together GWT module change. 
      // See more on <replace-with class="com.sencha.gxt.project.client.resources.button.CustomButtonAppearance">
      CustomButton button4 = new CustomButton();
      button4.setText("Button4");
      RootPanel.get().add(button4);
    }

    Just a note, digging into the custom appearance or styles can have consequences and could could cause some of the multiple browser layout tuning to go haywire.

    Brandon

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •