Oracle ADF: Add a Favicon to Page, Page Template

A favicon, also known as a web site icon, tab icon or bookmark icon, most commonly 16×16 pixels, associated with a particular Web site or Web page.
Resources used
-          Jdeveloper IDE  (11.1.2.3.0)
-          Internet Explorer 10 (10.0.9200.16384)
So, how to implement this in Oracle ADF?
It’s simple, take a breath there!

Ø  Create an ADF Application

Ø  Place the favicon image (e.g. used in POC – flower_blue.ico) in the Web Content Root location as depicted in the image below. (FaviconViewController\public_html). For supported image file formats check http://en.wikipedia.org/wiki/Favicon#File_format_support

Ø  Set “smallIconSource” value equal to “ /flower_blue.ico  ” under Appearance of af:document tag.
 
 
Image - 1

Ø  Set the Java EE Application web context root to “ / ” as depicted in Image - 2 if deployed to Integrated Weblogic Server or if deployed to Stand Alone Server change the context root to “ / ” in Deployments as depicted in Image – 3. (Right click ViewController Project and select Project Properties Menu to display this dialog.) 

Note: Sometimes another application may exist with the same context root, so undeploy the application (Refer Image - 5) as displayed in Log Window of IDE to avoid error as displayed in Image - 4


Image - 2
 

Image - 3
 

Image - 4
 
Image – 5 
Ø  The application is successfully deployed as depicted below.
 
Image – 6
 
Ø  The running URL displays the favicon image next to Address Bar & on Tab as depicted below. 
 
Image – 7
 
Ø  When Bookmarked as Favourites, the favicon is displayed. 
 
Image – 8
 
Ø  When the Tab is pinned to Windows Taskbar, it displays before navigation Icons as well as in taskbar as icon as dipicted below.

 
Image – 9
 
Ø  The same URL, when tested on Firefox browser displays favicon as depicted below.


Image – 10

If the same is needed to be achieved using a page template, follow, as stated below

Ø  Design a template, which will be consumed by the pages and also used across the project. (Refer Image – 11, 12, 13)
 

Ø  Drag drop an OutputText component any where on the page template from Component Palette and set the following attributes – escape = “false” & value = [<link REL="SHORTCUT ICON" HREF="http://localhost:7101/flower_blue.ico">], as displayed below. 
 

<af:outputText value='&lt;link REL="SHORTCUT ICON" HREF="http://localhost:7101/flower_blue.ico">' id="pt_ot1" escape="false"/>
 

Ø  The context root need not be “ / ”, it can anything. (Refer Image - 14)

 
Image - 11
 
 
Image - 12
 

Image - 13
 
 
Image – 14
 
Ø  Run the jspx page using the template which we just created, we find it deployed successfully without any error as depicted below.
 
 
Image – 15
 
Ø  Check the URL generated to display, the jspx page developed using page template including the favicon, as depicted below.
 
 
Image - 16 

 
Location: Hyderabad, Andhra Pradesh, India

Comments

Post a Comment

Popular posts from this blog

Oracle ADF : Dynamic Regions

Image
A good web design should consider the following aspects Page boot-up/ load speed Visually attractive appeal Quicker navigation The first two aspects largely deal with the amount of  picturesque content, styling & UI approach taken. In this post, I am going to deal with "In-Page" Navigation. The above approach helps to keep the end user engaged still being on the same page. So, the question here is, how to achieve it? Oracle ADF provides Regions & Dynamic regions to achieve this. A region is a section of the page that renders, so if we are ought to achieve dynamic updation of region, we need to implement Dynamic Regions - an ADF region where the task flow binding dynamically determines the value of its taskFlowId attribute at runtime. Hope you got the theory, let's check it out... Create an adf application (For the demo sake, I have developed based on static content, not related to any data bound components). Considering the work space s...
Read more

Oracle ADF : Working with Parameters

Image
Parameters accept and store values and can be very helpful in ADF applications. There are many types of parameters as visualized below. To demonstrate the above scenario let’s develop a ADF application, Scenario: Lets have 3 buttons on a page & on press of each button renders different page fragments by passing the parameters as depicted in above pic. Ø   Create a JSPX page – “Index.jspx” with no bindings, add 3 buttons with action listeners respectively with each action listener having a unique value, say first button has the following value   #{‘a’} stored to #{requestScope.ClickRec}, i.e this translates to ClickRec of requestScope variable storing a value – ‘a’ on clicking first button in laymen’s terms. Ø   As the components on page is not bound to any data controls, no data bindings is created dynamically, so update this by right clicking on the page & create Page Definition and accept the defaults. Ø   Naviga...
Read more