1. #11
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    139
    Vote Rating
    4
    jvahabzadeh is on a distinguished road

      0  

    Default


    I was just about to post that I'd found it . . .

    Somewhere along the way, in the Development Mode window, I noticed it complaining about getTestImage not existing...

    I then found that the .html file had the wrong info.

    This is what I had before (copied from the article) in the DefaultAppearance.html file:
    HTML Code:
    <div class="{style.testButton}">
        <div class="{style.testImage}"></div>
        <div class="{style.testText}"></div>
    </div>
    And this is what I changed it to:
    HTML Code:
    <div class="{style.testButton}">
        <div class="{style.testButtonImage}"></div>
        <div class="{style.testButtonText}"></div>
    </div>
    And it seems to work. Zero functionality, of course, but I haven't played with any changes to Appearance yet.

  2. #12
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Great! The xtemplate error messages do need some work, but they aren't a lot of good if you can't see them.

    Let us know if you run into more issues, or have any suggestions on making this process easier! We anticipate that appearances will make it easier to declare custom ways to draw all components by default.

    Remember also that an individual component instance can have a custom appearance - most/all GXT 3 components/cells have a constructor that takes an appearance. The <replace-with> option is great for changing all of them, but to change just a single one requires much less code.

    Another hint: if your template takes only one parameter (style in your case), there is no need to refer to that data by name in the template - you can write this instead (as you would do in GXT 2):
    Code:
    <div class="{testButton}">
        <div class="{testButtonImage}"></div>
        <div class="{testButtonText}"></div>
    </div>
    Of course, if you plan on adding additional params, it is probably best to prefix the variables with the param name.

  3. #13
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    139
    Vote Rating
    4
    jvahabzadeh is on a distinguished road

      0  

    Default Suggestions for article, and questions on swapping the Appearance..

    Suggestions for article, and questions on swapping the Appearance..


    Ok, I wasn't sure if I should post these in separate threads or not, but here's a few things I'd offer as suggestions.

    In the article about Appearance Design Pattern, I'd recommend:
    1) For the "original" PushButton, change the styles in the css portion (and associated references in the code) to match what is later done with the Style interface for DefaultAppearance (that is, "testText" should be "testButtonText", "testImage" should be "testButtonImage" etc)

    2) Likewise under the XTemplate section, change the styles referred to in the divs to match them as well.



    Now, onto questions again!

    I tried swapping in a new Appearance. It seems to be completely ignored.

    Here's what I've done:
    1) I created a separate class, called AppearanceType2, that implements AppearancePushButton.Appearance. It is identical to DefaultAppearance in EVERY way EXCEPT that AppearanceType2.Resources has a @Source line that refers to "Appearance2.css"

    2) I created Appearance2.css, identical to DefaultAppearance.css except that the border color, font size, and padding for testButton is different.

    3) In my project's .gwt.xml file, I changed the replace-with as follows:
    HTML Code:
      <!-- <replace-with class="AppearancePushButton.DefaultAppearance"> THIS WAS THE ORIGINAL LINE --> 
      <replace-with class="com.joev.gwttests.AppearanceType2">
        <when-type-is class="AppearancePushButton.Appearance"/>
      </replace-with>

    The results? Nothing! It's as if I made no changes whatsoever. What am I missing?

    Also, if I wanted to add an onHover type of behavior to the AppearancePushButton (using the orignal Appearance interface and DefaultAppearance static class within AppearancePushButton), how would I correctly do this with the Appearance Design Pattern?


    My source code for the new classes is below....

    AppearanceType2:
    PHP Code:
    package com.joev.gwttests.client;

    import com.google.gwt.core.client.GWT;
    import com.google.gwt.resources.client.ClientBundle;
    import com.google.gwt.resources.client.CssResource;
    import com.google.gwt.safehtml.shared.SafeHtml;
    import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
    import com.google.gwt.user.client.ui.Image;
    import com.sencha.gxt.core.client.XTemplates;
    import com.sencha.gxt.core.client.dom.XElement;

    public class 
    AppearanceType2 implements AppearancePushButton.Appearance {

      public interface 
    Template extends XTemplates {
        @
    XTemplate(source "DefaultAppearance.html")
        
    SafeHtml template(Style style);
      }

      public interface 
    Style extends CssResource {

        
    String testButton();

        
    String testButtonText();

        
    String testButtonImage();

      }

      private final 
    Style style;
      private final 
    Template template;

      public interface 
    Resources extends ClientBundle {

        @
    Source("Appearance2.css")
        
    Style style();
      }

      public 
    AppearanceType2() {
        
    this((Resources)GWT.create(Resources.class));
      }

      public 
    AppearanceType2(Resources resources) {
        
    this.style resources.style();
        
    this.style.ensureInjected();
        
    this.template GWT.create(Template.class);
      }

      @
    Override
      
    public void onUpdateIcon(XElement parentImage icon) {
        
    XElement element parent.selectNode("." style.testButtonImage());
        
    element.removeChildren();
        
    element.appendChild(icon.getElement());
      }

      @
    Override
      
    public void onUpdateText(XElement parentString text) {
        
    parent.selectNode("." style.testButtonText()).setInnerText(text);
      }

      @
    Override
      
    public void render(SafeHtmlBuilder sb) {
        
    sb.append(template.template(style));
      }

    Appearance2.css:
    Code:
    .testButton {
      border: 1px solid red;
      font-size: 16px;
      padding: 2px;
    }
    
    .testButtonImage {
      float: left;
    }
     
    .testButtonText {
      text-align: center;
      text-decoaration: underline;
    }
    EDIT: I realize, by the way, that having a separate Appearance implementation is absurd to deal with only a .css change - I'm just trying it out to see if my use of different Appearance classes work, in anticipation of doing more with it....

  4. #14
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    I should have caught this earlier, sorry about that.

    The reason your change isn't having any affect is the same reason GWT didn't seem to care about the missing package name in those lines - in fact, if you deleted the <replace-with... altogether, it would still work. Here is why:

    Code:
      public AppearancePushButton(String text) {
        this(text, (Appearance)GWT.create(DefaultAppearance.class));
      }
    This should be calling GWT.create on Appearance.class. The way that GWT.create works is that it first looks for the last declared replace-with or generate-with declaration, and if it doesnt find one, it calls the default constructor of the class. Since DefaultAppearance is a class, not an interface, this is legal.

    If you had written

    Code:
      public AppearancePushButton(String text) {
        this(text, (Appearance)GWT.create(Appearance.class));
      }
    Then you would have seen an error much earlier on, complaining that Appearance is abstract, and can't be created. Make this change and your replace-with should work correctly.

  5. #15
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    139
    Vote Rating
    4
    jvahabzadeh is on a distinguished road

      0  

    Default


    That fixed it, thanks!

    So, um, I guess I'll add to my list of suggestions for the Appearance Design Pattern article to change that line of code in what you've provided . . so that it reads:
    PHP Code:
    this(text, (Appearance)GWT.create(Appearance.class)); 
    rather than
    PHP Code:
    this(text, (Appearance)GWT.create(DefaultAppearance.class)); 
    However, I'd also note that the replace-with clause and the when-class-is clause *does*, as you suggested earlier, require the fully-qualified class name with package. Just found that out as a result of this as well.... the DefaultAppearance.class bit was masking that problem.

    I definitely appreciate all your help with this!

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi