PDA

View Full Version : Changes to organization of Ext JS Themes in Cmd 3.0.2



dongryphon
26 Dec 2012, 4:39 PM
See also http://www.sencha.com/forum/showthread.php?252466-Sencha-Cmd-v3.0.2-is-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".



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":
Copy in the images from the base framework theme.
Generate image "slices" from the CSS3 rendering for use in IE (using "packages/theme-name/theme.html" and related files)
Copy in the content of "package/<theme-name>/images" (if it exists).

mitchellsimoens
28 Dec 2012, 8:58 AM
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:


sencha theme build [theme-name]

dongryphon
28 Dec 2012, 1:32 PM
Good point - you will also need to run



sencha app build


To build your theme's SASS or invoke compass manually.

cswsteve
1 Jan 2013, 9:49 AM
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.
41027

When I run it in IE9 everything works except the Panel header (which also seems to affect the button rollovers too).
41028

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.

cswsteve
1 Jan 2013, 4:03 PM
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;

IlanCopelyn
29 Jan 2013, 5:00 AM
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:


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:


[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"?

IlanCopelyn
29 Jan 2013, 5:51 AM
Actually, might I suggest the following instead. Please setup a walkthrough as follows:

Target webapp design:

A simple webapp consisting of 3 pages with a static navigation header for switching between the pages.
The main content area of each page will be generated by an ExtJS app
All extjs apps will share a common theme
i.e.
+-----------------------------+
| Logo
| Menu = App1 App2 App3
+-----------------------------+
|
| content generated
| by extjs App1,2,or 3
| depending on which menu link
| is clicked
|
+-----------------------------+

Steps in the walkthrough

The walkthrough will use senchacmd to generate the workspace and 2 apps (initially)
Coding the apps can be skipped - just pick 3 apps from the examples - e.g. a chart, grid, and a tree control
An opensource theme (like http://bootstrap.newbridgegreen.com/) is added to the workspace - senchacmds / any customisation to theme are shown
Show how to build and view the 2 generated apps, and show that they are using a shared theme
A 3rd app is added - sencha cmds are shown and we see how to change the 3rd app to make use of the global theme
We can now load the final built app and switch between the 3 extjs apps / pages
Source code is provided for download
I appreciate that this may be a bit of effort but it should have the following advantages to you:
1. It will succinctly demonstrate senchacmd usage
2. It will provide a reference architecture/template for developers for what I believe must be the most common webapp design pattern
3. It will provide a base test app which future theme developers can drop their themes into, and help pave the way for future outsourcing of theme design by developers
4. No doubt the structure of extjs workspaces/apps and the senchacmd will evolve - this will give you an easy way to explain the changes

Thanks

IlanCopelyn
31 Jan 2013, 4:31 AM
I've setup a proof of concept here:
https://github.com/ilanc/extjs-theme-bootstrap

No walkthrough though.

dongryphon
9 Feb 2013, 1:42 PM
@IlanCopelyn - That is great work. Thanks for sharing it with folks!

The changes to this structure in 3.0.2 were to prepare the way for a resolution to this issue of theme creation and sharing. This will be available very soon as part of the Ext JS 4.2 beta with the introduction of Sencha Cmd 3.1.

We are still ironing out the details of this as it relates to Ext JS 4.1.x because to make this really work well we needed to change the structure of our SASS and resources to be more like what you see in Cmd 3.0.2. This probably means that the upcoming beta of Cmd 3.1 will not have improvements in this area for Ext JS 4.1.x apps but perhaps we can find a way to share some of that with the old theme structure for 3.1 GA.

worthlutz
10 Feb 2013, 3:00 PM
OK, I can now create a new theme but I am still confused. If I create a theme (say "red") other than the default one in the packages directory, how is that theme used? I see it gets build during the

sencha app build
but how do you use it?


Thanks,
Worth

IlanCopelyn
11 Feb 2013, 12:11 AM
@dongryphon thanks : ) will the 4.2 beta be available for license-only developers?

@worth the short answer is: if you've managed to compile sass to .css then probably all you need to do is change your .html file to include {appname}\resources\{themename}\app.css as the stylesheet (replace ext-all.css).

the slightly longer answer is that the directory structure and build process is being tweaked atm so perhaps wait till 4.2 + the new guides are out? The existing guides will give you a good idea of what's going on in the build process and how to customise themes, but you will have to manually alter the build files atm to support global themes (see the github repo I posted previously):
http://docs.sencha.com/ext-js/4-1/#!/guide/theming
http://docs.sencha.com/ext-js/4-1/#!/guide/command
etc...

worthlutz
11 Feb 2013, 6:39 AM
@worth the short answer is: if you've managed to compile sass to .css then probably all you need to do is change your .html file to include {appname}\resources\{themename}\app.css as the stylesheet (replace ext-all.css).

the slightly longer answer is that the directory structure and build process is being tweaked atm so perhaps wait till 4.2 + the new guides are out? The existing guides will give you a good idea of what's going on in the build process and how to customise themes, but you will have to manually alter the build files atm to support global themes (see the github repo I posted previously):
http://docs.sencha.com/ext-js/4-1/#!/guide/theming
http://docs.sencha.com/ext-js/4-1/#!/guide/command
etc...
@IlanCopelyn

Thanks, I looked at your github repo briefly but need to study it more. I am not up to speed on the build process and have tried to make some changes once which lost me lots of time as I ended up with two copies of my application instanitated one on top of the other with the active one on the bottom. Needless to say it took a while to figure out why nothing was working. Hopefully there will be more in depth documentation and guides.

Worth

IlanCopelyn
11 Feb 2013, 7:55 AM
I would suggest the following: (1) Build a single app with (2) the prescribed senchacmd created directory structure and then (3) add a custom theme. Once you have all of that building and your apps index.html is loading in your browser you can start fiddling about with editing the theme.

Here's a head start:
1. Create the app


unzip the extjs src to c:\ext-4.1.1a
c:
cd \
sencha -sdk ext-4.1.1a generate app -path temp\foo

NB this is for a single app - it doesn't use the workspace stuff from my github example
Have a look at the structure of the stuff in C:\temp\foo
Better yet commit all the files in temp\foo to local git repo so you can see what changes senchacmd does below

2. Make sure the apps index.html loads in your browser
file:///C:/Temp/foo/index.html
There's not much to the default app btw

3. Edit the app and add the components you want
I'd avoid making a complex app - just copy one of the apps from the c:\ext-4.1.1a\examples directory

4. Add a theme


cd temp\foo
sencha generate theme yourthemename


check which files have been added
Actually it looks like the theme just references the default. You'll have to copy the SASS source manually:


source = C:\Temp\foo\ext\resources\themes\stylesheets\ext4\default
target = C:\Temp\foo\packages\theme\stylesheets\yourthemename\default

you may need to edit the SASS config files

C:\Temp\foo\packages\yourthemename\sass\*

5. Make sure you can build the theme (i.e. scss -> .css)


sencha app build

Should create:
C:\Temp\foo\resources\yourthemename\app.css

6. Edit you index.html to use the built .css

7. Finally
make a test change to one of the sass theme source files (something obvious like the base colour), rebuild, and reload your index.html and confirm that the change has propagated

Once you've succeeded with all of that, then look at the github repo above in order to try share a single theme amongst multiple apps. Good luck

PS


sencha help {any commands here}

is useful for exploring the switches/options available with each sencha command