Java and ME: March 2015

Friday, March 27, 2015

Custom fonts in ADF 11g

There are beautiful fonts you may want to use in your web applications. In this post I'm going to show you how you can use custom fonts such as Google Fonts in your ADF 11g Applications. For ADF 12c Applications, you can find more instructions here.

What you need

JDeveloper 11gR1, 11gR2

ADF Skin Editor

Google Fonts

For JDeveloper 11gR1 you should download the ADF Skin Editor (download the latest release) since this version doesn't come with that tool integrated to the IDE. On the other hand, 11gR2 has the ADF Skin Editor tool integrated to JDeveloper.

As a best practice you should create your own skin based on a skin provided by Oracle. That way, whenever you want to change the font of your entire application, there is only one place to make the change: the custom skin. This post is based on this best practice, so make sure you understand how to work with ADF skins.

This is the font family we are going to use in this post. It's called Indie Flower

Since ADF 11g skins make use of CSS2, the process of using custom fonts is not as easier as in 12c, but we have a workaround for that, just make sure you use a custom skin and a page template on your application.

Custom fonts in ADF 11gR1 and 11gR2
If you are using 11gR1, create the skin application using the skin editor. Steps are as follows (Remember, if you are using 11gR2 you can create the skin from within JDeveloper):
Click on new application... Set the name and folder...
Set the skin project name and the target application release that you want to skin:

Then, create a new ADF Skin File (right click on project and select Create new ADF Skin File)

Extend whichever Oracle skin you want, JDeveloper will suggest you one if you like. When the Skin Editor opens, go to Selectors and expand the Global Selector Aliases node and then Font, there you can see the class ADFDefaultFontFamily which is where we need to make the change in order to set the new font family for our entire ADF Application. Go to the Properties Inspector and make the change in the Font Family property:

That's it, we have defined that all the components in an ADF application that uses this skin will use the custom font (except for those defined with a specific inlineStyle). However, if you notice we haven't told the skin file where the custom font is, that's because skins in 11g use CSS2 and so we can't define nor import the font in the skin file, if we do, it will get removed at runtime. The downside of this is that we can't use the skin editor to preview the font family change.

If you are using ADF 11gR1, deploy the custom skin as an adfLib (right click on project -> deploy...) and import it into your ADF application.
If you are using ADF 11gR2, this is not necessary since you can create the custom skin from within your project in JDeveloper.
Anyway, remember to change the {WEB-INF}/trinidad-config.xml file to make use of your custom skin:

...
  <skin-family>custom-skin</skin-family>
  <skin-version>default</skin-version>
...

The second part of the solution requires the use of Page templates, if you are not using page templates in your application, you will have to modify every single page where you want to use the custom font. The code you add to your page template or to your single page is the same:

<af:resource type="css" source="http://fonts.googleapis.com/css?family=Indie+Flower"/>

Here, we are adding a CSS resource where the custom font is defined. You may wonder where have the URL come from, well if you go to the Indie Flower font quick use, you will notice the URL is there.

Wondering where to place the above code? If you are using page templates, place it right after the jsp:root tag, on the other hand, if you are using single pages, place it inside the document tag.

Now, if you run an ADF application that makes use of your custom skin, all your components will be using the same font-family:

You should be aware that if you have components that set the font-family in the inlineStyle property or use any other custom class that overrides the font-family, then those components won't use the font-family defined in the skin.

That's it, hopefully you now will be able to modernize your ADF 11g applications using new custom fonts.

see ya!

Saturday, March 21, 2015

Custom fonts in ADF 12c

There are beautiful fonts you may want to use in your web applications. In this post I'm going to show you how you can use custom fonts such as Google Fonts in your ADF 12c Applications. For ADF 11g Applications, you can find more instructions here.

What you need

JDeveloper 12c

Google Fonts

This is the font family we are going to use in this post. It's called Indie Flower

Since ADF 12c makes use of CSS3, the process of using custom fonts is simpler than it was in 11g.

Custom fonts in ADF 12c
Create your skin if you have not created one yet. In JDeveloper 12c you can use the integrated ADF Skin Editor tool as follows:

Extend whichever Oracle skin you want, JDeveloper will suggest you one if you like. When the Skin Editor opens, go to Selectors and expand the Global Selector Aliases node and then Font, there you can see the class ADFDefaultFontFamily which is where we need to make the change in order to set the new font family for our entire ADF 12c Application. Go to the Properties Inspector and make the change in the Font Family property:

Then, open the Source editor (next tab after Selectors) because we need to define the custom font. The following shows you an excerpt of the Skin CSS where we have defined the font and overridden the font-family property of the ADFDefaultFontFamily class

...

@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: 400;
  src: local('Indie Flower'), local('IndieFlower'), url(http://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) format('woff2'), url(http://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

.AFDefaultFontFamily:alias {
    font-family: 'Indie Flower', cursive;
}

...

You may wonder where have the @font-face instruction come from, well if you go to the Indie Flower font quick use, you will notice there is the following link:

http://fonts.googleapis.com/css?family=Indie+Flower

If you open it, you will find the @font-face definition that you need to use in your Skin CSS. In the same quick use link you will find several ways to use the font: using a link, using an @import instruction and even suing JavaScript. However, only copying the @font-face instruction in the Skin CSS worked for me.

ADF Skin Editor 12c comes with a handy option where you can launch your browser and check the changes you have made to the skin without launching Weblogic or your ADF application:

Let's see how this works before and after changing the font-family:

Now, if you run an ADF 12c application that makes use of your custom skin, all your components will be using the same font-family:

Should I commit .adfc_diagram files?

Wondering whether you should commit *.adfc_diagram files?

You should know that JDeveloper saves the position in the diagram of each component in these files, so if your diagram looks like this:

And if you don't commit these files, next time you checkout/clone from your version control system, it may look like the following, since JDeveloper will create a new file with default positions:

Each task flow has its own file, and the name for these files follows this pattern:

{TASK_FLOW_ID}.adfc_diagram

Where {TASK_FLOW_ID} is the task flow id you defined for the task flow when you created it. Now, if you want to know where is JDeveloper saving these files, you can go to Project Properties -> Project Source Paths -> Modelers:

Further more, if you want to know/change the directory where JDeveloper saves theses files inside your project, go to Application -> Default Project Properties -> Project Source Paths -> Modelers:

see ya!