Wednesday Aug 22, 2012

Beautiful websites with Oracle ADF/Webcenter

I've been following a thread on the ADF Enterprise Methodology group on google with some interest recently, which has prompted this blog posting..

Its all about "Can Oracle ADF-Faces be used to create a truly uber-sexy website", complete with sizzle ??

The answer is yes of course! Oracle ADF-Faces can produce a sexy website.

It's true that Oracle ADF-Faces was originally designed to be quick RAD framework for building Oracle Fusion Applications and it succeeds there, and over time its rapidly being used for building UIs for all of Oracle's products, from internal applications, task screens for Oracle BPM worklists, Enterprise Manager screens and is the main framework you would use with Oracle Webcenter Portal (& Spaces). The latter particularly leans towards a user audience which craves ubersexyness and sizzle vs an expenses clerk who is only really interested in getting the job done efficiently, although nice looking would be nice...

So your building an Oracle ADF website and you want it to look good where should you start?? Well Oracle ADF Skinning is the first port of call. Even with simple skinning you can create some really nice looking interfaces, just look at http://www.medibankhealthbook.com.au, an Australian Health Website and http://My.Symantic.com, specifically MySymantic.com uses pure ADF, for both of these sites checkout the look and feel of the registration page to get an idea of what can be done..

my.symantec.com www.medibankhealthbook.com.au

Want some sizzle? 

So far although the websites could look good, they're clean, efficient and nice looking and depending on your view they might lack uber-sexyness let alone sizzle.. For that you'll probably need some custom javascript and CSS3.  Oracle ADF supports a client side javascript API which allows you to add  your own javascript and thus you can create and invoke client side javascript to hide and show canvases etc.. A good example of this being used on the web, although not built with Oracle ADF, is the O2 website, when you move your mouse over the lower panels (Phones & Tariffs,Priority Moments etc) it hide/shows a panel below. This can easily be done in Oracle ADF with some simple client side javascript which hide/shows Oracle ADF Panels, I'll create an example in a later post showing how to do this.

So far so good, but what about uber-sizzle?

Well anythings possible with a good dose of javascript, CSS and a good graphics designer, however for the most of us doing this javascript uber-sizzle is a little beyond us (well it is me! :-), this is where 3rd party libraries come to the rescue.  According to theregister , the "current" defacto standard javascript library is the JQuery library, it provides a number of components (some of which compete with ADF components),makes javascript easier to use,  but more importantly it includes a number of "animations" which can be added to a website, these animations by themselves can make a website look ooooerrrr... and thats precisely what a number of web designers do..

A number of my ADF clients have used JQuery in their websites and one of the most common usage of the animate method is to have images slide across or panels slide in-out of view. Examples of this components include this blog and Nivo.

Oracle ADF websites which use JQuery/JavaScript

http://www.ferrovial.es http://www.baesystems.com
BAE
http://www.ladwp.com

All of these use JQuery in someway, most of them for animations, such as a ticker at the top in Ferrovial, Image slider in BAESystems.com and LADWP. 

Also checkout a blog entry by a friend of mine, Duncan Mills, here, he shows whats possible with CSS3 Animations and ADF. I particularly like the ability to have the Next/Previous button hidden in a panel on the left hand side, something which is very popular in the Mac/Ubuntu Desktops at the moment...


So there you have it, you can use a Rapid Development Framework like Oracle ADF-Faces, use the native components and then add libraries like JQuery and give it some sizzle.

In a later blog posting I'll explain how one integrates JQuery with ADF to add some sizzle. 

However, before I leave you here are some important notes :

  • I/Oracle does not endorse the usage of 3rd Party libaries like JQuery, they should work but some might not play nice
  • If possible always try to use the native components in Oracle ADF first, then apply skinning/CSS and finally use a framework like JQuery if needed.
  • Remember beauty is in the eye of the beholder, get people to review the work :-)
  • Read the thread on the ADF Enterprise Development group it has some really good comments
Enjoy

Friday Jun 22, 2012

UI Design Patterns : Are you developing a Fusion Apps extension, an ADF or Webcenter App?

A big question I get asked when speaking to partners who are developing Oracle ADF, or Webcenter, Apps is how to make it look nice.. Some of the big System Integrators ask me, "Do we have any design patterns/guidelines we can use?". .. Alas website design is a very personal thing and each website will have different requirements and needs, however I am now pleased to say we've just launched "Oracle Fusion Applications Design Patterns" website. 

 The website is the result of many years of Oracle R&D into user interface design for Fusion applications and features a really cool web app which allows you to visualise the UI components in action.

Although many of the design patterns are related to ADF , its worth noting that ADF took its lead from Oracle Fusion Applications User Interface needs - not the other way around, its just taken us a while to publish these. Coupled together with the dashboard patterns this makes are really cool extra asset for your kit bag

Enjoy

About

Architect & Technology Evangelist - If its middleware I'm interested

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today