The Mechanics of Theming Oracle JET Applications

Source: Oracle Blog's

We have a requirement to have different themes for our Oracle JET application, "business" and "pleasure". The first will have images of serious business suits, the second will have party hats; the first will have grey/blue fonts and colors, the second will be polka dots or something. You want the themes to be able to be swapped in and out at build time. OK, that's the scenario.

1. Create the application. Let's imagine we start like this:

yo oraclejet myapp --template=basic

OK, we now have the "basic" template provided by the Oracle JET Yeoman generator and take note of the "themes" folder below, which is automatically available:

2. Install node-sass. In the "myapp" folder, we need to now run this to make the next steps possible, i.e., incorporate node-sass, a library that provides bindings for Node.js to LibSass, the C version of the popular Sass, enabling you to natively compile .scss files to css, at "incredible speed".

yo oraclejet:add-sass

3. Create themes. Now, we run this in the "myapp" folder to create a new theme, note there are no quotes around the theme name:

yo oraclejet:add-theme business

We now have this, i.e., in the "src" folder, where you do all your coding work, there's now a "themes" folder, with placeholders for the "business" theme overrides on/changes to/extensions to the default "alta" theme:

And let's create another one:

yo oraclejet:add-theme pleasure

Now, we have two themes in our "src" folder:

4. Build themes. Let's now build the Oracle JET application with our "business" theme:

grunt build --theme=business

Now we have, as expected, a "web" folder, where our application is built into, which now includes our "business" theme, while both our themes are added to the "themes" folder, so that we can see the themes that are available in one place. You could see the "themes" folder as a staging area, while within the "web" folder only the theme that will actually be served is shown:

Note:

grunt build --theme=:

--theme=business:android, will build the app with "bsuiness" custom theme extending the android alta

--theme=business, this will select the "business" theme with default, i.e., "web", platform

  if no theme parameter is specified, default "alta" theme will be used to build the app  

5. Serve up themed applications. Now, the time has come to serve up our themed application:

grunt serve --theme=: --platform= 

The above serves up the app using the : notation, comparable to described above for grunt build --theme=:.

That's all. Now, with the mechanics out of the way, read the following:

http://docs.oracle.com/middleware/jet210/jet/developer/GUID-0329F030-A317-42FC-8C1E-A0A82F5AF6AE.htm#JETDG268
http://www.oracle.com/webfolder/technetwork/jet/globalExamples-ThemeViewer.html
http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=theming&demo=themename