Wednesday Nov 19, 2014

Modifying the Oracle Alta Skin

In the previous blog entries I showed you how to create an ADF project that uses the new Alta UI and then showed you an example of implementing one of the design patterns for a flip card. In this blog/video I'm going to show you how you can further fine tune the look and feel of your Alta application by modifying and extending your skin with CSS.

At the end of the day, this is going to be done in a similar way to how you skinned previous ADF applications. (If you have never done this before, you might want to watch the videos in these two blog entries).

But since the skinning design time is not completely there for Alta in JDeveloper 12.1.3 there are a couple of tricks. Specifically when you create the new skin, you'll need to change the trinidad-skins.xml file to indicate it is extending the alta-v1 and not skyros-v1  - <extends>alta-v1.desktop</extends>

Then the rest of your tasks would be basically the same (although you won't see the overview tab in your skin editor).

So here we go:

Thursday Dec 22, 2011

Styling Specific ADF Components with CSS and Skin

So you need one instance of a component in your ADF application to have a different color. Your first instinct would be to just go to the style area in the property inspector and change it. Well, you might want to rethink this, a better way would be to define your style in a central location for easier future maintenance, and an even better way might be to use an ADF Skin for this. This way you have one location for your global skinning and specific styles.

Here is a demo of how to go about doing this.

Also in this demo a quick explanation of the difference between InlineStyle, ContentStyle and StyleClass.

Thursday Jun 30, 2011

ADF Faces Skin Editor - How to Work with It

The ODTUG Kscop11 conference was a great success with lots of sessions about FMW running in a special track. I did several sessions and labs in the conference, and I thought it might be a good idea to at least give you a taste of what you might have missed.

So here is most of what I demoed in my ADF Faces Skinning session (not all though - that session was 60 minutes long, and while everyone did end up going out of the building in the middle because of a fire drill for about 5 minutes, there was other things covered in the session as well).

In the demo here you'll see how to generate new images and default color scheme, how to identify a component class with Firebug, how to skin a component, how to identify the global selector of a property, how to change fonts and how to change strings.


By the way, for more on ADF Skinning you should also listen to the ADF Insider seminar that Frank Nimphius recorded on skinning, it will give you better understanding of the overall skinning process.

P.S.
in the demo I add an entry to the web.xml file which prevent ADF Faces from compressing the HTML that is generated.

The entry is for org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION

 and I set it to true. This is very useful when you work on creating the skin, but don't forget to un-set it before you go production.


About

me
I'm a Director of Product Management for the Oracle Mobile and Development Tools.
Follow me:
Search

Archives
« February 2015
SunMonTueWedThuFriSat
1
2
3
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
       
       
Today