Hybrid View

  1. #1
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,512
    Vote Rating
    176
    dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of

      0  

    Default Changes to organization of Ext JS Themes in Cmd 3.0.2

    Changes to organization of Ext JS Themes in Cmd 3.0.2


    See also http://www.sencha.com/forum/showthre...-Now-Available

    The guides will be updated soon. The holidays create challenges there but then again I imagine relatively few people will be looking at this for this time period.

    Here is an excerpt from the new theme guide to describe the "themes as packages" structure. This will be further expanded in Cmd 3.1 but 3.0.2 should get themes reorganized along this path and that should carry forward well for future releases.

    For many reasons, we want the Sencha Cmd tooling to be an enabler for people to create and ultimately share themes. The previous organization of a theme (inherited from Ext JS 4.0) made that difficult as there was no single root folder that contained all of that theme and only that theme.

    In Cmd 3.0.2 and forward, themes are now contained in folders of their own in the "packages" folder. The theme formerly named "default" was renamed the "theme" package. So "resources/sass/default/app.scss" moves to "packages/theme/sass/app.scss".

    Code:
        resources/              # Contains SASS source code and additional resources
            images/             # General image content (optional)
            ...             
            theme/              # The compiled form of the default "theme"
                images/         # Unified image content generate by build process
                app.css         # The compiled theme
            red/                # The compiled form of other themes (by name)
                images/
                app.css
    
        packages/               # Contains themes (the only packages for now)
            theme/              # The default theme (you can generate more here)
                images/         # Optional folder (content is copied if it exists)
                sass/           # sass input files for the default theme
                    config.rb   # Compass configuration file
                    app.scss    # Root SASS source for theme
                slice-src/      # Generated code for slicing (used by theme.html)
                    ...         # See below for description of these files
                theme.html      # Web page for visual inspection and image slicing
                ...             
    
            red/                # Other generated themes
                ...             # Contents are the same as the default "theme"
    
        build/                  # Build output
            appName/            # Build output for app
                production/     # Build output for "sencha app build production:
                    resources/  # All files from "resources" folder
                        ....
                testing/        # Build output (env = "production", "testing", etc.)
                    ....
    The important difference here is that "resources" now consists entirely of static resources. There is no "theme" folder to filter out, so all of the content of the resources folder is copied to the build folder.

    The image build process for a theme is in 3 steps to produce the final content of "resources/theme-name/images":
    1. Copy in the images from the base framework theme.
    2. Generate image "slices" from the CSS3 rendering for use in IE (using "packages/theme-name/theme.html" and related files)
    3. Copy in the content of "package/<theme-name>/images" (if it exists).
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you get 404 on your images when you generate a new theme, you can do this command in the app dir to move the images into your theme's images dir:

    Code:
    sencha theme build [theme-name]
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,512
    Vote Rating
    176
    dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of

      0  

    Default


    Good point - you will also need to run

    Code:
       sencha app build
    To build your theme's SASS or invoke compass manually.
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  4. #4
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    54
    Vote Rating
    2
    cswsteve is on a distinguished road

      0  

    Default


    I downloaded Cmd 3.0.2 and was able to create a custom theme perfectly except for 1 thing. The Panel headers continue to use the default theme blue gradient only in IE6-IE9. It works perfectly in Chrome, Firefox and Safari. To illustrate this better I used really dark colors so I could easily see how each element in the theme was being affected. I found this a really good way to learn how to build custom themes.

    Here is an example of what it looks like in Chrome, Firefox and Safari.
    Steve Palm.2013.01.01_11.27.53.AM.png

    When I run it in IE9 everything works except the Panel header (which also seems to affect the button rollovers too).
    Steve Palm.2013.01.01_11.28.21.AM.png

    I have everything working in the new packages folder using sass (which by the way is a much better design). I ran the following commands to generate and build the theme and get no errors.

    sencha theme build -p packages/newtheme/theme.html -o packages/ newtheme /images -image packages/ newtheme /image.png -data packages/ newtheme /data.json

    sencha theme build -t newtheme

    I have tried this on much more complex views and everything works except for the Panel header background in IE9. I can see all the sliced images in the images folder so I know the slicing is working too it just seems like this one piece is missing.

  5. #5
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    54
    Vote Rating
    2
    cswsteve is on a distinguished road

      0  

    Default


    I was able to figure this out. It turns out that IE9 does not always refresh 100% and the only way to completely refresh it is to close and reopen IE9. That was throwing me because Firefox, Chrome and Safari all refresh and show the updates CSS without closing.

    Another thing I had to do was set more of the SASS variables. For anyone else that is interested here are that changes to get the Panel header to change.

    //Panel
    $panel-header-background-gradient: color-stops($dark-blue, $dark-blue);
    $panel-header-font-weight: normal !default;
    $panel-header-color: $dark-gray;

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2011
    Posts
    29
    Vote Rating
    0
    IlanCopelyn is on a distinguished road

      0  

    Default Step-by-step instructions for creating new workspace with multi-apps and shared theme

    Step-by-step instructions for creating new workspace with multi-apps and shared theme


    I'm a bit confused. Does the new package structure allow multiple apps to share a single (global) theme? as per this discussion http://www.sencha.com/forum/showthread.php?245718

    If so please advise on steps to setup. On windows I have:
    Code:
    cd \
    sencha -sdk ext-4.1.1a generate workspace dev\test
    sencha -sdk ext-4.1.1a generate app TestApp dev\test\app\testApp
    cd dev\test
    sencha generate theme foo
    I can't create a theme at the workspace level - I get:
    Code:
    [ERR]           Failed to determine framework path.  Please ensure this command
    was issued from either a framework or application directory
    If I go into the app dir it works, however now I wind up with a package under the app dir i.e.:
    C:\dev\test\app\testApp\packages\foo

    I was expecting to create:
    C:\dev\test\packages\foo

    Are you still recommending that we create a "theme app"?