Results 1 to 7 of 7

Thread: [UPDATED] Two themes in single app 5.1

  1. #1
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    769
    Answers
    38
    Vote Rating
    77
      5  

    Default [UPDATED] Two themes in single app 5.1

    With regards on previous thread located here http://www.sencha.com/forum/showthre...-in-single-app I prepared updated guide compatible with 5.1 how to use two themes in single app. Please let me know if everything is fine or you have any suggestion to change anything

    1. index.html

    PHP Code:
    <!DOCTYPE HTML><html manifest="">
    <
    head>
        <
    meta http-equiv="X-UA-Compatible" content="IE=edge">
        <
    meta charset="UTF-8">

        <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <
    meta name="google" content="notranslate" />

        <
    title><application name></title>

        <
    script type="text/javascript">
            var 
    Ext Ext || {};
            
    Ext.repoDevMode true;
            
    Ext.beforeLoad = function(tags){
                var 
    theme location.href.match(/theme=([\w-]+)/),
                      
    locale location.href.match(/locale=([\w-]+)/);

                
    theme  = (theme && theme[1]) || (tags.desktop 'crisp' 'crisp-touch');
                
    locale = (locale && locale[1]) || 'de';

                
    Ext.manifest theme "-" locale;
                
    Ext.microloaderTags tags;
            };
        
    </script>

        <!-- The line below must be kept intact for Sencha Cmd to build your application -->
        <script id="microloader" type="text/javascript" src="bootstrap.js"></script>
    </head>
    <body></body>
    </html> 
    2. app.json

    Change theme to you favourite - in my case
    PHP Code:
    "theme""ext-theme-crisp"
    If you want to use locale too add locale package to requires:
    PHP Code:
    "requires": [
        
    "ext-locale"
    ], 
    js - change framework path to "ext-all-debug.js" (not sure why rtl is default)

    css - change bootstrap to
    PHP Code:
    {
        
    "path""${build.out.css.dir}/<application name>-all.css",
        
    "bootstrap"true

    Add manifest section under development:
    PHP Code:
    /**
     * Controls the name of the manifest file used by the microloader for
     * dev and build modes
     */
    "manifest": {
        
    "name""${build.id}.json",
        
    "bootstrap""${build.id}.json"
    }, 
    Change output section:
    PHP Code:
    "output": {
        
    "base""${workspace.build.dir}/${build.environment}/${build.id}",
        
    "page""../index.html",
        
    "manifest""../${build.id}.json",
        
    "deltas": {
            
    "enable"false
        
    },
        
    "cache": {
            
    "enable"false
        
    },
        
    "js": {
            
    "optimize": {
                
    "callParent"true,
                
    "cssPrefix"true,
                
    "defines"true
            
    }
        }
    }, 
    Append locales and builds:

    PHP Code:
    "locales": [
        
    "de"
    ],

    "builds": {
        
    "crisp": {
            
    "theme""ext-theme-crisp"
        
    },
        
    "crisp-touch": {
            
    "theme""ext-theme-crisp-touch"
        
    }

    3. build.xml - full file

    PHP Code:
    <?xml version="1.0" encoding="utf-8"?><project name="<application name>" default=".help">
        <!--
        The build-impl.xml file imported here contains the guts of the build process. It is
        a great idea to read that file to understand how the process works, but it is best to
        limit your changes to this file.
        -->
        <import file="${basedir}/.sencha/app/build-impl.xml"/>

        <!--
        The following targets can be provided to inject logic before and/or after key steps
        of the build process:

            The "init-local" target is used to initialize properties that may be personalized
            for the local machine.

                <target name="-before-init-local"/>
                <target name="-after-init-local"/>

            The "clean" target is used to clean build output from the build.dir.

                <target name="-before-clean"/>
                <target name="-after-clean"/>

            The general "init" target is used to initialize all other properties, including
            those provided by Sencha Cmd.

                <target name="-before-init"/>
                <target name="-after-init"/>
            
            The "page" target performs the call to Sencha Cmd to build the 'all-classes.js' file.

                <target name="-before-page"/>
                <target name="-after-page"/>

            The "build" target performs the call to Sencha Cmd to build the application.

                <target name="-before-build"/>
                <target name="-after-build"/>
        -->

        <macrodef name="x-run-build">
            <attribute name="target"/>
            <attribute name="theme"/>
            <attribute name="locale" default="cs"/>
            <attribute name="buildName" default="@{theme}"/>
            <attribute name="buildId" default="@{theme}-@{locale}"/>
            <sequential>
                <if>
                    <equals arg1="@{locale}" arg2=""/>
                    <then>
                        <ant dir="${basedir}" inheritall="false" inheritrefs="true" target="@{target}">
                            <property name="compiler.ref.id" value="${compiler.ref.id}-@{theme}"/>
                            <property name="app.theme" value="ext-theme-@{theme}"/>
                            <property name="app.build.dir.suffix" value="ext-theme-@{theme}"/>
                            <property name="cmd.dir" value="${cmd.dir}"/>
                            <property name="build.environment" value="${build.environment}"/>
                            <property name="build.compression.yui" value="${build.compression.yui}"/>
                            <property name="build.id" value="@{buildId}"/>
                            <property name="build.name" value="@{buildName}"/>
                        </ant>
                    </then>
                    <else>
                        <ant dir="${basedir}" inheritall="false" inheritrefs="true" target="@{target}">
                            <property name="compiler.ref.id" value="${compiler.ref.id}-@{theme}-@{locale}"/>
                            <property name="app.theme" value="ext-theme-@{theme}"/>
                            <property name="app.locale" value="@{locale}"/>
                            <property name="app.build.dir.suffix" value="ext-theme-@{theme}-@{locale}"/>
                            <property name="cmd.dir" value="${cmd.dir}"/>
                            <property name="build.environment" value="${build.environment}"/>
                            <property name="build.compression.yui" value="${build.compression.yui}"/>
                            <property name="build.id" value="@{buildId}"/>
                            <property name="build.name" value="@{buildName}"/>
                        </ant>
                    </else>
                </if>
            </sequential>
        </macrodef>

        <target name="build-all" depends="build-crisp,build-crisp-touch"/>

        <!--<target name="clean" depends="init,clean-all"/>-->
        <!--<target name="build" depends="init,build-all"/>-->

        <!-- Build -->

        <target name="build-crisp" depends="init">
            <echo>Build <application name> - Crisp Theme</echo>
            <x-run-build theme="crisp" target="app-build-impl.build"/>
        </target>

        <target name="build-crisp-touch" depends="init">
            <echo>Build <application name> - Crisp Touch Theme</echo>
            <x-run-build theme="crisp-touch" target="app-build-impl.build"/>
        </target>

        <!-- Watch -->

        <target name="watch-crisp" depends="init">
            <echo>Watch <application name> - Crisp Theme</echo>
            <x-run-build theme="crisp" target="watch"/>
        </target>

        <target name="watch-crisp-touch" depends="init">
            <echo>Watch <application name> - Crisp Touch Theme</echo>
            <x-run-build theme="crisp-touch" target="watch"/>
        </target>

        <!-- Refresh -->

        <target name="refresh-crisp" depends="init">
            <echo>Refresh <application name> - Crisp Theme</echo>
            <x-run-build theme="crisp" target="app-build-impl.refresh"/>
        </target>

        <target name="refresh-crisp-touch" depends="init">
            <echo>Refresh <application name> - Crisp Theme</echo>
            <x-run-build theme="crisp-touch" target="app-build-impl.refresh"/>
        </target>

        <!-- Clean -->
        <target name="clean-all" depends="clean-crisp,clean-crisp-touch"/>

        <target name="clean-crisp" depends="init">
            <echo>Clean <application name> - Crisp Theme</echo>
            <x-run-build theme="crisp" target="app-build-impl.clean"/>
        </target>

        <target name="clean-crisp-touch" depends="init">
            <echo>Clean <application name> - Crisp Theme</echo>
            <x-run-build theme="crisp-touch" target="app-build-impl.clean"/>
        </target>

        <target name="sass-full" depends="resources,sass"/>

        <target name="sass-all" depends="init">
            <for param="theme" list="crisp,crisp-touch">
                <sequential>
                    <x-run-build target="sass-full" theme="@{theme}"/>
                </sequential>
            </for>
        </target>
    </project>

  2. #2
    Sencha Premium Member
    Join Date
    Apr 2014
    Posts
    97
    Answers
    4
    Vote Rating
    79
      3  

    Default

    Thanx Zdeno! I did ran into some issues. Mostly not being able to run the development version. I changed some settings and it seems to run fine now. I also did not make any changes to the build.xml file (I am not sure this is still necessary). I've updated your guide a bit (using neptune theme and multiple locales).

    1. index.html

    PHP Code:
    <!DOCTYPE HTML><html manifest="">
    <
    head>
        <
    meta http-equiv="X-UA-Compatible" content="IE=edge">
        <
    meta charset="UTF-8">

        <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <
    meta name="google" content="notranslate" />

        <
    title>MyApp</title>

        <
    script type="text/javascript">
            var 
    Ext Ext || {};
            
    Ext.repoDevMode true;
            
    Ext.beforeLoad = function(tags){
                var 
    theme location.href.match(/theme=([\w-]+)/),
                      
    locale location.href.match(/locale=([\w-]+)/);

                
    theme  = (theme && theme[1]) || (tags.desktop 'neptune' 'neptune-touch');
                
    locale = (locale && locale[1]) || 'en';

                
    Ext.manifest theme "-" locale;
                
    Ext.microloaderTags tags;
            };
        
    </script>

        <!-- The line below must be kept intact for Sencha Cmd to build your application -->
        <script id="microloader" type="text/javascript" src="bootstrap.js"></script>
    </head>
    <body></body>
    </html> 
    2. app.json

    If you want to use locale, add locale package to requires:

    PHP Code:
        "requires": [
            
    "ext-locale"
        
    ], 
    CSS (changed <application name> to ${app.name})

    PHP Code:
        "css": [
            {
                
    "path""${build.out.css.dir}/${app.name}-all.css",
                
    "bootstrap"true
            
    }
        ], 
    Bootstrap section (change manifest)

    PHP Code:
        "bootstrap": {
            
    "base""${app.dir}",
            
    "manifest""${build.id}.json",
            
    "microloader""bootstrap.js",
            
    "css""bootstrap.css"
        
    }, 
    Output section

    PHP Code:
        "output": {
            
    "base""${workspace.build.dir}/${build.environment}/${build.id}",
            
    "page""../index.html",
            
    "manifest""../${build.id}.json",
            
    "deltas": {
                
    "enable"false
            
    },
            
    "cache": {
                
    "enable"false
            
    },
            
    "js": {
                
    "optimize": {
                    
    "callParent"true,
                    
    "cssPrefix"true,
                    
    "defines"true
                
    }
            }
        }, 
    Append locales and builds, after app id

    PHP Code:
        "locales": [
            
    "en",
            
    "nl"
        
    ],

        
    "builds": {
            
    "neptune": {
                
    "theme""ext-theme-neptune"
            
    },
            
    "neptune-touch": {
                
    "theme""ext-theme-neptune-touch"
            
    }
        } 
    After these changes I was able to test the multiple builds by changing the URL to e.g.
    localhost/?theme=neptune-touch&locale=nl

  3. #3
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    769
    Answers
    38
    Vote Rating
    77
      1  

    Default

    Cheers hope this guide will help to other users too

  4. #4
    Sencha Premium Member
    Join Date
    Apr 2014
    Posts
    97
    Answers
    4
    Vote Rating
    79
      0  

    Default

    Having even more fun with this I added one sass variable to recreate the Neptune Charcoal theme by dongryphon

    Create a file called Main.scss in sass/var/view/main (as stated in the Setup & Getting Started section of sencha guides) and add the line

    Code:
    $base-color: #333 !default;
    It's pretty kewl cuz both neptune and neptune-touch pick up this change perfectly. Works pretty ok for the crisp theme also, except for the icons

  5. #5
    Sencha User Psychokrameur's Avatar
    Join Date
    Jun 2008
    Posts
    195
    Vote Rating
    19
      2  

    Default

    Hello guys,

    Thanks a lot for this Guide.
    Could you please post your complete app.json please, some stuff unclear about the manifest.

    In addition, a little note is that it seems to me that in the output section.

    This:
    PHP Code:
    "output": {
            
    "base""${workspace.build.dir}/${build.environment}/${build.id}",
           ...
        }, 

    should be:

    PHP Code:
    "output": {
    "base""${workspace.build.dir}/${build.environment}/${app.name}/${build.id}",
    ...
    }, 

    Hope I'm not wrong but if you have multiple app it mess up in the production build dir.

    In addition, I'm not able to make this working for multiple locale in development mode, it only do one build (the first local). Did you manage that?


  6. #6
    Sencha User
    Join Date
    Sep 2010
    Posts
    462
    Answers
    5
    Vote Rating
    39
      0  

    Default

    Has anyone discovered what causes Cmd to drop the json extension when loading a manifest dynamically?

    Instead of "brun.json" or "rouge.json" the network panel shows only "brun" or rouge".

    It is happening inconsistently. Sometimes yes, sometimes no.

    Sencha Cmd v5.1.2.52

  7. #7
    Sencha User
    Join Date
    Sep 2010
    Posts
    462
    Answers
    5
    Vote Rating
    39
      0  

    Default

    My dynamic theme json manifests brun.json and rouge.json manifests contain the same line:
    Code:
       
    "css": [        
        {"path": "bh/aw/build/production/bone/resources/bone-all.css"}     
    ],
    So how can this one css file be red or brown?

    I can only assume it is explained somehow in "generating the manifest" in microloader docs. But it's a vague guess.

    Those people who had success, what css files ended up in your production resources? app-all.css only, or were there files for your themes?

Posting Permissions

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