ADF Skinning

[Yannick Ongena]

Hi all,

 

I have a question about how people go with ADF skinning.

When we have to help other partners we often see that they do not always lack ADF skills but the biggest issue is often skinning.

 

The main reason for this is that companies work with design agencies. Those people have good skills in designing websites and deliver HTML and CSS. In most cases there is a big gap between those designers/slicers and ADF developers.

The biggest question is how to transform an HTML template to an ADF template with proper skin. ADF has a massive list of CSS selectors and you have to understand the ADF components in order to build a proper skin. This is something you cannot ask from a normal design agency.

 

I want to know how other people cope with this problem.

 

Is there something Oracle can do for us? Are there trainings specially designed to learn skinning skills in order to close that gap?

 

For internal application I can imagine this is not a top priority requirement but when you look at it from a WebCenter angle, and you are designing extranets or public facing websites, these things get a higher priority.

 

Thanks

Yannick

[Simon Lessard]

Hi,

That's indeed a very common issue and I've seen two different approaches for it. One was to have the design team create the graphic chart with rules that were later implemented by an ADF developer in the application, the other requires to hire a designer and train it with ADF skinning. If ADF is a strategic choice for the company, I think the second option is cheaper and pays more in the long run, allowing more reuse and and consistent look between applications. As for the transformation of an HTML template to ADF, it requires the designer and the developer to work side by side so that the designer can ask for component layout changes when the generated HTML is unacceptable or adjust the CSS with the generated HTML when it's not possible. Sadly, I fear there's no easy way out for that problem.

Regards,

~ Simon

--
You received this message because you are subscribed to the ADF Enterprise Methodology Group (http://groups.google.com/group/adf-methodology). To unsubscribe send email to adf-methodolo...@googlegroups.com
 
All content to the ADF EMG lies under the Creative Commons Attribution 3.0 Unported License (http://creativecommons.org/licenses/by/3.0/). Any content sourced must be attributed back to the ADF EMG with a link to the Google Group (http://groups.google.com/group/adf-methodology).

--
Simon Lessard, ADF Architect

CMA SYSTeMS

( +33(0) 6 79 37 39 85 (France)

( +1.418.930.0279 (Canada)

[Francois Lötter]

Hi

At my company we had someone from the design authority sit with us for a few days. We have about 6 it shops within the company with all kinds of technologies, so it is important to have standards across all these. 

We designed a template with the company logo, fonts, colors and skinned most of the widgets.

Now we produce ADF jsp pages that have the correct look and feel.

I made use of the Firefox plugin, Firebug, to identify the html components.

Best regards

Francois

Francois Lötter
+27823251360
...
"We make living by what we get. We make life by what we give." ~Winston Churchill

[John Flack]

When the stand-alone skin editor came out, I tried giving it to our web designers, to see what they could do toward making a skin that satisfies our client’s new look and feel standards.  The designers understand CSS fairly well, but an ADF skin is only quasi-CSS – it has some things in it that a normal CSS editor will choke on.  It does some things that are really weird to a person who is used to normal CSS – like if you try to set font and font size in “af|panelHeader”, thinking that you will be setting them for all “af:panelHeader” components – wrong!  The font settings are in one of the text selectors (I forget which one), and it overrides the settings that are specific to the component.  And the skin editor doesn’t always show good examples of the result of a property change – so you really need to run a sample page, which you can’t do in the stand-alone skin editor.

 

In short, after a week or two of frustration, our web designers said in essence – “I don’t have time to deal with this s**t” and it landed back in my lap.

[Amr Gawish]

Hi Yannick,

That's a dilemma I face when trying to teach developers how to skin at first, as they lack creativity and designing standards they mess up the design badly as they don't understanding what skinning is rightly for, and on the other hand the web designer has his set of tools to design with his standardization which obviously can not be applied - easily - when you try to skin that on ADF or WebCenter.

But I believe this is not the problem of ADF, it's more a problem of any component based framework which in this case the JSF, as you are not responsible for rendering the HTML markup of the component you face a lot of troubles trying to fix the default rendering of the component to suit your designing needs.

Hopefully WebCenter 12c with JSF2 will come to rescue, but until then there is no easy way to do it, I'm afraid.

--

You received this message because you are subscribed to the ADF Enterprise Methodology Group (http://groups.google.com/group/adf-methodology). To unsubscribe send email to adf-methodolo...@googlegroups.com
 
All content to the ADF EMG lies under the Creative Commons Attribution 3.0 Unported License (http://creativecommons.org/licenses/by/3.0/). Any content sourced must be attributed back to the ADF EMG with a link to the Google Group (http://groups.google.com/group/adf-methodology).

--

Best Regards,

Amr Gawish
Senior Oracle Middleware Consultant
    

[Mark Robinson]

A method I found that works really well is to have the designer create the site/template in photoshop and then pass on an image to an ADF developer.  The developer can then cut up the template or extract colours/gradients and build the skin that way.

The first draft won't be perfect but it will be a pretty good approximation of what you're trying to get.

I find it works well since the developer will know what the components mean in terms of the UI and how they can be skinned (eg, skinning all buttons or just certain types of buttons).

Mark

[Chad Thompson]

On Thursday, April 5, 2012 at 6:42 PM, Mark Robinson wrote:

A method I found that works really well is to have the designer create the site/template in photoshop and then pass on an image to an ADF developer.  The developer can then cut up the template or extract colours/gradients and build the skin that way.

I've seen that used to pretty good effect - the trick is to get the designer to focus on things like sizes, colors, etc. and not the nitty-gritty of CSS design.

(i.e. knowing fonts, colors, sizes is helpful - the border radius with -webkit-border-radius, etc. typically isn't.)

-- 
Chad Thompson 
chad_t...@mac.com

[Andreas Koop]

Hi

Am Freitag, 6. April 2012 01:42:25 UTC+2 schrieb Mark Robinson:

A method I found that works really well is to have the designer create the site/template in photoshop and then pass on an image to an ADF developer.  The developer can then cut up the template or extract colours/gradients and build the skin that way.

To confirm: In general this approach works best in our projects! Further more a big plus for ADF Developer is beeing able to cut out / or mask all needed image slices in photoshop. Then - if the screendesign  improves - those slices should be reexported as PNGs.

But of course Skinning is not always an easy task. Very good CSS knowledge in CSS, ADF specific/global selectors is needed. The Skin Editor and Firebug are really useful for that.

Also - as Amr mentioned - the skinning capabilities are limited to the components renders. Sometimes I wish to intercept the components render() methods and hook up some fancy markup code ;)

Andreas.

[grant ronald]

I appreciate that if a designer gives you a design which doesn't take
into account the kind of UI controls ADF gives you then it might be
difficult to develop something that meets the design requirement. But
assuming some knowledge of the types of components, what are the general
skinning difficulties people are finding? Colors? Fonts? Gradients?
Field bevels? Or simply that some components don't "take" the color
where you expect it to...or something more fundamental?

I've a few of our UX people looking at this thread and any specific
skinning problems might help them formulate some guidance.
Thanks

> *Chad Thompson*
> chad_t...@mac.com

[John Flack]

The first thing that frustrated our web designers was background colors. They found the correct selector, changed the color, and nothing happened. That's because the skin wasn't really using a background color, it was using a background image - you had to go to the images tab and change the color of the image. (which is really rather cool - it automatically generates a new image using the newly selected color) Not intuitive - it was inherited from the skin we were subclassing.

In fact, inheritance is both a blessing and a curse. Nice not to have to make sure every possible selector is in the skin, but sometimes hard to see what settings you are getting from the parent, and what from its parents - should I have chosen a different parent? If so, which one? The rich components demo application (http://jdevadf.oracle.com/adf-richclient-demo/faces/index.jspx) helps a lot, because it lets you switch skins fast and see what effects they have on appearance of certain components.

Since I took back the design of our skin and templates, I've had problems of my own, but part of it may be my ignorance of how CSS really works. I'm never sure which component should get which settings, and where the settings will cascade to the children of that component. For instance, while the body of my pages will have a light background, so text will be black, the footer in the template has a dark background, so text will be white. I set the default text color to black. But I had to figure out how to say "white text if you are in the footer". I got it to work by creating my own selector "footerText" and setting the class of each outputText component in the footer to use that style, but I still think there had to have been a better way - maybe involving styling the panelGroupLayout that defines the footer.

There are plenty of training materials for us developers. Maybe some materials for skin and template designers is needed.

[Simon Lessard]

Hi,

I agree that the inheritance is the most annoying part. I asked for an empty skin while working on Trinidad for that very issue, but I lost the vote. Having an "empty" skin to be able to inherit from would be very nice. It would indeed imply a lot of work to get popup working though, but it would prevent all the aliases from being activated which are not very much used from my experience. Maybe a really minimal skin would be better, without aliases, without color, without font or font family, only some basic positioning to be able to display the components.

Another thing is the styles that ADF applies directly on the HTML elements. We worked around that one using !important in the past, but that's really dirty.

Finally the HTML structure generated by HTML make web designer cringes, it's not WAI compliant enough, uses too many inner elements, too many tables used as layout and so on.

Regards,

~ Simon

--
You received this message because you are subscribed to the ADF Enterprise Methodology Group (http://groups.google.com/group/adf-methodology). To unsubscribe send email to adf-methodolo...@googlegroups.com

All content to the ADF EMG lies under the Creative Commons Attribution 3.0 Unported License (http://creativecommons.org/licenses/by/3.0/).  Any content sourced must be attributed back to the ADF EMG with a link to the Google Group (http://groups.google.com/group/adf-methodology).

[Andre Araujo]

Nice thoughts… adding to this conversation I think most of us want to be
able to skin and design adf applications such this: baesystems.com 
even the AVITEK vm built in Webcenter Framework:
http://pmoskovi.files.wordpress.com/2011/01/52.png

These are examples of nice look and feel web-apps.

How to get a modern and cool 21st century futurist design? which type of
techniques do you guys recommend?

For most of the customers I worked on, the ADF default layout that Oracle
provides is horrible. And they want to change the look and feel of the
application!

---

From: John Flack <Jo...@smdi.com>
To: "adf-met...@googlegroups.com" <adf-met...@googlegroups.com>
Sent: Tuesday, 10 April 2012 10:47 PM
Subject: RE: [ADF EMG] ADF Skinning

--
You received this message because you are subscribed to the ADF Enterprise Methodology Group (http://groups.google.com/group/adf-methodology). To unsubscribe send email to adf-methodology+unsub...@googlegroups.com

[Liza Lyons]

Folks:

If you are open to sharing, it would be really helpful for us to see specific examples of what you're trying to achieve with your skins.  We're currently working on ideas for simplifying the overall skinning user experience, and the more real-world examples we have, the better.

Thanks!
Liza

Liza Lyons Broadbent
Sr. Manager, Application Development Tools User Experience

[John Flack]

Our mandate is to try to get the next versions of our applications to look something like:
http://www.samhsa.gov/
Mostly, we'll need a header and footer like this page in our template, and the colors and fonts as in this page in our skin.  Since we have dynamic applications, not static pages like this one, we have some latitude for some variations from this.

[Liza Lyons]

John:

Thanks for the quick reply!  Do you have any examples of what a typical ADF page might look like (the content between the header and footer)?

Liza

[Maiko Rocha]

This is no ADF Skinning specific but you all might be interested in reading some of the answers to this question on Quora:

http://www.quora.com/User-Experience/UI-Designers-how-do-you-work-with-engineers-to-ensure-your-vision-is-achieved 

[]s!

Maiko

[Andre Araujo]

Hi,

Maybe I'm wrong...who knows.... but I will provide my thoughts based on MY experiences on the ADF and WEBCENTER world.

ADF is a component based framework. So..if you are intended to use fancy JQuery, HTML/CSS stuff provided by some designers/design shop don't go for ADF. 

It really sucks to skin and customise the look and feel of an Oracle ADF app if you want your ADF Web app to looks like some modern Web app that we have nowadays...It generates heaps of XML which it's no way productive...

In my opinion ADF is good to use for companies that want to build some web app to use internally or to deal with some business process/scenario or something like that, it provides quickly build time and deployment in some cases you are using already built JSF components.

To use in a scenario like I've mentioned, usually companies will not bother if the design it's modern or not (see the most used ERP's in the world and you will see how ugly they are designed).

Regarding Webcenter....to make a quick deployment using Webcenter Spaces just to leverage some E2.0 features it's a good idea (if your customer don't bother about design).

There are other softwares much well designed OOTB than Webcenter, but maybe they doesn't have some of the Webcenter features. 

Webcenter provides an API that you can use and try to integrate with some other JAVA Web Framework....now I'm working on doing this...how to use other JAVA Web Frameworks to integrate with Webcenter using the REST API's. Let's see what happens...

One thing that I've learned on this process is: Try not to re-invent the way the ADF components works, otherwise you will have a lot of trouble and headaches doing it.

In fact Oracle should help us more on this subject (maybe trainings, more documentation, showing what we can do and what we cannot do)...because write documentation like this....(http://docs.oracle.com/cd/E18941_01/tutorials/jdtut_11r2_83/jdtut_11r2_83.html)...

...sorry but showing how to build an awful skin doesn't help us at all.

That are other JSF frameworks who are much... much beautiful than ADF (PrimeFaces for example) but unfortunately doesn't offer the easiness that ADF offers when we are integrating with other Oracle products.

Regards,

Andre

---

From: Maiko Rocha <maiko...@gmail.com>
To: adf-met...@googlegroups.com
Sent: Saturday, 14 April 2012 6:22 AM
Subject: [ADF EMG] Re: ADF Skinning

--

[Ultan Ó Broin (Oracle Applications User Experience [Usability])]

cool, yeah. i was one of the troublemakers in there. one thing I would add is to tailor your language to the audience. so if you're dealing with enterprise developers, then avoid calling them hackers etc which has a negative connotation. my own survey of ADF developers is that they do like to be called "developers" (when the beer is flowing, another story). Same for design patterns, yada, ...