1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Vote Rating
    0
    jeremywhiteley is on a distinguished road

      0  

    Default Colors

    Colors


    How can I set colors for a button that I add to a page? I can't find any values for colors anywhere.
    Last edited by jeremywhiteley; 17 Mar 2012 at 5:05 PM. Reason: correction

  2. #2
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    231
    Vote Rating
    6
    bseddon is on a distinguished road

      0  

    Default


    Buttons are generated a collection of tags with assigned css classes, classes which change as the button state changes (normal, pressed, hover, etc). Here's the structure of a typical button:

    HTML Code:
    <div id="..." class="x-btn ...">
    <em>
    <button id="...l" type="button" >
    <span id="..." class="x-btn-inner" style="">Text</span>
    <span id="..." class="x-btn-icon add">&nbsp;</span>
    </button>
    </em>
    </div>
    So to color a button you need to replace the respective classes or override the implied styles. It's not so straight forward as selecting a color because there will be gradients with stop colors an so on.

    Have a look at this this example I put together to mimic the 'sexybuttons' in ExtJS by replacing the relevant css classes. I'm not suggesting you use these buttons but if you take a look at the sbuttons.css file you will see the classes you need to replace to provide your own button style(s).

    ExtJS provides the 'ui' property on components to allow developers to have their own themes. The ui might cover all components or, as in the s-button example, just buttons. The string you enter in the 'ui' property becomes part of the css class name added to button element tags. In the examples, the expected ui string is 's-button' and you will see this string appear in all the class name. So by including the .css file it becomes possible to create a button with a definition like:

    Code:
    {
    	xtype: 'button',
    	scale: 'small',
    	ui: 's-button',
    	text: 'Some text',
    	cls: 's-green',
    }
    You can see the ui being set so the css classes will refer to my classes. 's-green' is another class in sbuttons.css which is used to provide color to the classes. A few colors are defined in the css file.

  3. #3
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    231
    Vote Rating
    6
    bseddon is on a distinguished road

      0  

    Default


    I should also add that you can install the Sencha SDK to use the SASS/Compass features to create your own ui for buttons. This approach is 'correct' but it takes a bit of effort to get to the point where you can use it. However, when you do you really can change the color of a button with one setting.

    A discussion of this approach is beyond this post but here's my blog post in which I gathered together the information about theming all or part of ExtJS so I didn't forget.

    http://www.lyquidity.com/devblog/?p=125

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Vote Rating
    0
    jeremywhiteley is on a distinguished road

      0  

    Default


    Thanks, this is interesting. I need to get my head around this. Since this is a DESIGNER program, by not include the theming options in the designer program?
    They do say that: "Ext Designer can be used by business managers and non-programmers to create your application's interface, which can then be enhanced by developers."
    From what I read, I would say this program can't really by used by business managers and non programmers to create an application interface.

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Vote Rating
    0
    jeremywhiteley is on a distinguished road

      0  

    Default


    So I can't apply a theme style to the designer file?

  6. #6
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    231
    Vote Rating
    6
    bseddon is on a distinguished road

      0  

    Default


    I think that's going to depend on your perspective. If you are putting components together to create an application which is presented in one of three stock (or other purchased) themes then, yes, it may meet the requirement.

    If the requirement is for users to play with aspects of a theme (like the color of buttons) then it's not going to be a suitable tool. But then most frameworks which are equally complete have the same issue. For example Microsoft's WPF and Silverlight or Adobe's collection of tools are themed frameworks and changing color is not for the squeamish.

    By contrast, you can put something together using JQuery and control color (though probably inconsistently) but then you are into programming so out of the realm of managers and non-programmers.

    I've not seen that quote about business managers and non-programmers. Having used the Sencha tools for a couple of months I'd say it must represent an aspiration. Building a web site merges a bunch of technologies and concepts (for example html, css, javascript, ajax) and even using the designer can be tough to keep these straight. In addition (or maybe instead of) ExtJS introduces other abstractions: models, stores, controllers, layouts. These make forming complex rich web application pages much easier easy for the programmer but must be confronted by any user of the designer.

    As with all such tools, it is likely 'end' users are going to need some help. I can see programmers in an organization will provide components for the Sencha Designer which managers and non-programmers will use to forge applications. It's programmers that know how internal APIs work so could provide corporation specific modes and stores for end users. UI designers can provide themes (maybe just the buttons) for all users to use just as I've created the s-buttons for our use.

  7. #7
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    231
    Vote Rating
    6
    bseddon is on a distinguished road

      0  

    Default


    In the designer you see the standard theme (and I think this is fixed - at least in the beta builds). Swapping to one of the other themes for release of an application is accomplished by changing the single css file included in the root html file so it references an alternative css representing an alternative theme. Of course then you are changing colors across all components not just the buttons you asked about in the original question.

    The designer generates a stock root 'designer.html' file. I use a standard 'index.html' file which I've customized to add my other css files and change the theme css.

    My guess is the designer is work very much in progress and things around theming will improve once the application is released..

  8. #8
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,181
    Vote Rating
    77
    ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough ssamayoa is a jewel in the rough

      0  

    Default


    Quote Originally Posted by bseddon View Post
    My guess is the designer is work very much in progress and things around theming will improve once the application is released..
    Mmmm...

    Depends on the use. I'm a developer so my focus is not in theming but in development speed. I dont care about theming while developing and, even with some rouge cuts and limitations, fullfill 90% of my needs as developer.

    On the other hand, ExtJS is for APPLICATIONS not for web sites so you must maitain consistency in the visual elelements. Of course there are some situations which you need to break consistency like setting the color of a button in red because is something "dangerous" but for those situations you have the ui property and you can craft your own theme but you will see the efect until you run the application .

    I agree that would be very useful if we be able to use custom themes in designer.

    Regards.
    UI: Sencha Architect 3.x / ExtJS 4 MVC
    Server side: EJB 3.1 / CDI / JPA 2 / JAX-RS / JasperReports
    Application Server: Glassfish 3.1.x
    Databases: Oracle 10g & 11g / DB2 9 & 10 / Firebird 2.5

    If you like my answer please vote!

  9. #9
    Sencha User
    Join Date
    Mar 2012
    Posts
    4
    Vote Rating
    0
    jeremywhiteley is on a distinguished road

      0  

    Default


    Thank you bseddon! Yes, I totally agree with you! Sencha was at Salesforce.com cloud stock event this past week in San Fran. I was very impressed. I am hoping to use it to develop a web app that runs on top of force.com. However, none of the Sencha people at the event knew anything about salesforce.com visual force pages or force.com. They didn't demo how to use it when developing for force.com. This is frustrating to me, as I can see it as being an awesome way to design and develop apps!

  10. #10
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    231
    Vote Rating
    6
    bseddon is on a distinguished road

      0  

    Default


    May be you will find the time to create ExtJS stores and components which work against force.com apis. I'm sure there will be a lot of interest and it will be great to see posts containing news of any progress.

    It's five years since I looked at saleforce.com. Back then anyone developing applications which used their externally facing APIs had to be inspected for the sum of $2000 (allegedly to make sure there was nothing malicious happening). Maybe its the same today and, if so, a set of stock components which are already validated may be a saleable product.

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar