1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    2
    Vote Rating
    0
    cbovee is on a distinguished road

      0  

    Default Custom cell button clarifications

    Custom cell button clarifications


    I'd like some clarification as to the best way to style a cell button. I would like to keep all of the functionality of the default cell button, but I need to change the background to either a color or an image. This should change depending on the mouse events such as over and pressed. I've created a base button appearance and then extended it to override the colors to orange. We will eventually have different brands (for lack of a better term) which will need the same styling, but in a different color. I've been using straight java and not UIBinder if this makes a difference. I've looked at some of the other responses, but I seem to be missing something in my understanding of how it works and how it should be extended.

    When creating my test project, I noticed the cell button contains both the cell style and a table frame style. Based off the default cell button, I believe the style for the button comes from the table frame. I know the table frame contains the multiple images for the borders. Now, I want to keep the same functionality with the arrows/icons, etc. already there but apply my various colors based on state. What would be the best way to do this and where would that styling take place? I know you can use css to do rounded corners and shadows (multiple examples of this on the web), but will excluding the table frame break the rest of the functionality of the current cell button?

    Next, we are changing the icons based on state as well. For example, the button would be white/gray with a black icon and black text for the default state. On press, the button will change to orange with a white icon and white text. On over, there would be the same white icon with white text, but a darker orange color. In my tests, the colors never seemed to change when using the over and press in the cell button style and I'm not even sure how to actually implement the icon changing colors when the icon is actually set through the java code.

    Any ideas or help would really be appreciated. I hoping the menus will be easier than the buttons. I attached my sample code and this is the site I was looking at for button styles
    http://www.webdesignerwall.com/demo/css-buttons.html and here is the actual explanation of the styling http://webdesignerwall.com/tutorials...adient-buttons
    Attached Files

  2. #2
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    411
    Vote Rating
    21
    icfantv will become famous soon enough icfantv will become famous soon enough

      0  

    Default


    Hi, please read this forum post for an idea on how this might be accomplished:

    http://www.sencha.com/forum/showthread.php?194900

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    2
    Vote Rating
    0
    cbovee is on a distinguished road

      0  

    Default


    Yes, I had already read that post and a couple of others that seemed related. I was hoping to get a more in-depth explanation. CSS is not one of my strong areas, but themeing is one of the requirements for our project. I don't really have time to wait for a theme builder, so I will keep working with the table frames and see if I can find a solution. Thanks.

  4. #4
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    411
    Vote Rating
    21
    icfantv will become famous soon enough icfantv will become famous soon enough

      0  

    Default


    A more in-depth explanation of what? You can change the icon based on state without touching the CSS. You just need to add the appropriate listeners. Also, what do you mean by "table frame?" I hear "frame," assume <frame>, and cringe.

    As far as changing the theme goes, your best bet to do it correctly would be to modify the CSS to what you need and then either inject it, or create your own ButtonCellAppearance. If you need help with the CSS, we can help you with that.

    If you look at the source for ButtonCellDefaultAppearance you'll notice that the entire button structure is constructed in a rather complex fashion based on the features of the button the user's requested (split, icon, icon location, etc...) Mucking with the classes from within Java could have farther reaching consequences than you might expect.

  5. #5
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    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


    In the context of a button in gxt, 'frame' refers to the decoration around the button - top/left, top/middle, top/right, center/left, center/right, bottom/left, bottom/middle, bottom/right, and of course the very center where the content goes - collectively, these are referred to as a 9-box. These framing elements are required to make the button look consistent in all browsers through the same html content, though we hope to use simpler content in the browsers that support it. For now though, we use those frame pieces to allow the button to have a custom gradient and rounded corners, defined in images.

    If you are looking for more examples of how to theme a button beyond what is in stock GXT, check out the desktop example - there are three themed buttons built there, one for the start button, one for the task buttons, and one for shortcuts. These all extend from the base implementation and provide their own 9-box images in the form of frame resources.

    As far as I can tell, it is *not* necessary to use a frame, a 9-box, or even a ClientBundle to build a custom button appearance. All that is required is that ButtonCellAppearance is implemented - render deals with 'how do i draw', which might just be "<button>{text}</button>", getButtonElement and getFocusElement to allow the Cell and Widget to ask questions of the actual rendered elements, and the various on* methods that change the button state (in the case of <button>, just changing background color might enough for most of that).

Thread Participants: 2

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..."