Oracle Diagnostic Log Analyzer (ODL)

java options

-Djbo.debugoutput=console -Djbo.logging.show.function=true -Djbo.logging.show.timing=true

coding guidelines for adf jdevelopers

In managed bean avoid to use primitive types binding with components in pages.

richdemo.css

/* Copyright (c) 2006, 2011, Oracle and/or its affiliates. All rights reserved. */
.TestRichPanelBorder {
  position: absolute;
  top: 50px;
  left: 10px;
  width: 500px;
  height: 400px;
  border-top:1px silver solid;
  border-bottom:1px silver solid;
  background-color:blue;
  cursor: default;
  font-size:11px;
  font-family: Tahoma, Verdana, Helvetica, sans-serif;
}
.TestRichOutputTextNorth {
  border: 1px Black solid;
  margin-right: 5px;
  background-color:Yellow;
}
.TestRichOutputTextSouth {
  border: 1px Black solid;
  margin: 5px;
  padding: 5px;
  background-color:Yellow;
}
.TestRichOutputText {
  border: 1px Black solid;
  margin-right: 5px;
  padding-left: 3px;
  background-color:Yellow;
}

.TestWatermark {
  background-image: url('/images/watermark.png');
}

.DemoRichPanelBorder {
  border-top:1px silver solid;
  border-bottom:1px silver solid;
  background-color:scrollbar;
  cursor:default;
  font-size:11px;
  font-family: Tahoma, Verdana, Helvetica, sans-serif;
}

.DemoCurrentLocation {
  margin:3px 3px 3px 3px;
}

.DemoPathDisplay {

  border:1px gray solid;
  background-color:white;
  padding: 1px 1px 1px 1px;
}

.DemoFileIcon:ltr {
  margin-right: 2px;
  vertical-align: middle;
}
.DemoFileIcon:rtl {
  margin-left: 2px;
  vertical-align: middle;
}

af|panelResizeNotify {
  background-color:#dddddd;
  border:2px #999999 solid;
  padding: 5px;
  margin:5px;
  font-family: Tahoma;
  font-size: 8pt;
}

af|panelAddScript {
  background-color:#dddddd;
  border:2px #999999 solid;
  padding: 5px;
  margin:5px;
  font-family: Tahoma;
  font-size: 8pt;
}

/* The following 'AttributeDeprecated' classes are used in the component attribute editor. */
af|inputText.AttributeDeprecated af|inputText::label {
  text-decoration:line-through;
}
af|selectBooleanCheckbox.AttributeDeprecated af|selectBooleanCheckbox::label {
  text-decoration:line-through;
}
/*  bug 12630300 - workaround for MS SR111072584108293 */
@agent ie and (version:9) {
  .AFDialog {
    -tr-enable-ie-rtl-toggle: true;
  }
}

8 Organizing Content on Web Pages (OFM_ADF_WUI_DG_11.1.1.6)

http://docs.oracle.com/cd/E23943_01/web.1111/b31973/af_orgpage.htm#CDEHDJEA

8.6 Arranging Content in Forms.

Right-Aligned Labels and Left-Aligned Fields in a Form.

Labels Above Fields in a Form.

8.6.1 How to Use the panelFormLayout Component.

setting no of columns and rows.

setting Label width and Field Width.

Insert the desired child components.

when to use non-input components?

when to use panelLabelAndMessage component in panelFormLayout.

when to use the group component  in panelFormLayout.

when to use footer facet in panelFormLayout.

8.6.2What You May Need to Know About Using the group Component with the panelFormLayout Component.

panelGroupLayout Inside a Group Component WITH  layout="horizontal".

panelGroupLayout Inside a Group Component WITH  layout="vertical".

footer Facet in panelFormLayout with One Root group Component.

fixed field width of panelFormLayout child Components

solution link
http://www.jobinesh.com/2011/02/customizing-width-of-ui-control-using.html
extra knoledge link
http://docs.oracle.com/cd/E23943_01/web.1111/b31973/af_orgpage.htm#CACCBCCI
solution
You can use contentStyle attribute to override the default width of specific types of UI controls. This property is applicable for single select and multiple select controls( af:selectOneChoice, af:selectManyShuttle, af:selectBooleanRadio etc.) and input controls( af:inputText, af:inputRangeSlider, af:inputListOfValues,af:richTextEditor etc. ). 

<af:selectOneChoice  contentStyle="width:200px" label="Select an Item:" id="soc1">

panelAccordian and showDetailItem skining

af|panelAccordion {width: 100%;}
af|panelAccordion::header af|panelAccordion::header-start {background-color: PaleTurquoise; background-repeat: repeat-x;}
af|panelAccordion::header af|panelAccordion::header-disclose {background-color: PaleTurquoise;}
af|panelAccordion::header af|panelAccordion::header-title {background-color: PaleTurquoise;}
af|panelAccordion::header af|panelAccordion::header-toolbar {background-color: PaleTurquoise;}
af|panelAccordion::header af|panelAccordion::header-end {background-color: PaleTurquoise;}

af|panelAccordion::header:disclosed af|panelAccordion::header-start { background-color: PaleTurquoise;}
af|panelAccordion::header:disclosed af|panelAccordion::header-disclose { background-color: PaleTurquoise;}
af|panelAccordion::header:disclosed af|panelAccordion::header-title { background-color: PaleTurquoise;}
af|panelAccordion::header:disclosed af|panelAccordion::header-toolbar { background-color: PaleTurquoise;}
af|panelAccordion::header:disclosed af|panelAccordion::header-end { background-color: PaleTurquoise;}

af|panelAccordion::header-subsequent af|panelAccordion::header-start {background-color: PaleTurquoise;}
af|panelAccordion::header-subsequent af|panelAccordion::header-disclose {background-color: PaleTurquoise;}
af|panelAccordion::header-subsequent af|panelAccordion::header-title {background-color: PaleTurquoise;}
af|panelAccordion::header-subsequent af|panelAccordion::header-toolbar {background-color: PaleTurquoise;}
af|panelAccordion::header-subsequent af|panelAccordion::header-end {background-color: PaleTurquoise;}

af|panelAccordion::header-subsequent:disclosed af|panelAccordion::header-start {background-color: PaleTurquoise; }
af|panelAccordion::header-subsequent:disclosed af|panelAccordion::header-disclose {background-color: PaleTurquoise;}
af|panelAccordion::header-subsequent:disclosed af|panelAccordion::header-title { background-color: PaleTurquoise;}
af|panelAccordion::header-subsequent:disclosed af|panelAccordion::header-toolbar { background-color: PaleTurquoise;}
af|panelAccordion::header-subsequent:disclosed af|panelAccordion::header-end {background-color: PaleTurquoise;}
af|showDetailItem
{
color:PaleTurquoise;
background-color:PaleTurquoise;
text-line-through-color:PaleTurquoise;
outline-color:PaleTurquoise;
}

31 Customizing the Appearance Using Styles and Skins (ADFUI)

reference
01) http://docs.oracle.com/middleware/1212/adf/ADFUI/af_skin.htm#BAJFEFCJ
02) Oracle Fusion Developer Guide by Frank Nimphius


16 Building Custom Look and Feel with Cascading Style Sheets and Skinning
Cascading Style Sheets
CSS Syntax
Applying Styles to HTML Markup Elements
Using CSS in ADF Faces RC
inlineStyle Attribute
styleClass Attribute
ContentStyle Attribute
Conditional Formatting Using Expression Language
Introduction to Skinning in ADF Faces RC
ADF Faces Skinning vs. inlineStyle, contentStyle, and styleClass CSS


what is the priority order of css attributes, that should be applies to Adf Component?

Inline style
Local style class references
External style class reference

01) inlineStyle
02) Local styleClass
03) External styleClass
04) ContentStyle
04)    ADF skinnig

Increasing/decreasing JDev 11g ADF Faces RC page font size at runtime

A feature seen on some web sites is buttons to increase and decrease the text font size. While most browsers supply this functionality by default (eg. In Firefox you can press Ctrl plus or minus), giving web page buttons to do this can assist less computer literate users who may not now about the browser's inbuilt functions.

The solution requires a javascript routine. A quick Google on "javascript increase fontsize" returns a number of useful hits including this one by White Hat Web Design.

White Hat's code is a fairly common example available on the internet for doing just this in a standard web page.

Providing this functionality in JDeveloper 11g's ADF Faces RC requires a bit of tweaking. The following describes the bits of code you'll need.

Javascript

The following code takes the White Hat javascript and tweaks it:

view plainprint?

1. var fontMin=10;  
2. var fontMax=36;  
3. function increaseFontSize(event) {  
4.    event.cancel();  
5.    var p = document.getElementsByTagName('span'); // here  
6.    for(i=0; i < p.length; i++) {  
7.       if(p[i].style.fontSize) {  
8.          var s = parseInt(p[i].style.fontSize.replace('px',''));  
9.       } else {  
10.          var s = 14;  
11.       }  
12.       if(s!=fontMax) {  
13.          s += 2;  
14.       }  
15.       p[i].style.fontSize = s+'px';  
16.    }  
17. }  
18.   
19. function decreaseFontSize(event) {  
20.    event.cancel();  
21.    var p = document.getElementsByTagName('span'); // and here  
22.    for(i=0; i < p.length;i++) {  
23.       if(p[i].style.fontSize) {  
24.          var s = parseInt(p[i].style.fontSize.replace('px',''));  
25.       } else {  
26.          var s = 12;  
27.       }  
28.       if(s!=fontMin) {  
29.          s -= 2;  
30.       }  
31.       p[i].style.fontSize = s+'px';  
32.    }     
33. }  

First tweaks to the original code, note that each method now takes an event object, and then cancels the event on executing the javascript. While I'm not entirely over the need for this, my understanding is it hooks into the ADF Faces RC javascript engine and we'll see a bit further down in this post the usage of the clientListener tags to invoke this javascript. (Some more documentation on the ADF javascript engine would be appreciated Oracle – hint hint).

Secondly note the two commented lines. The original code searched for <p> tags, while in ADF Faces RC pages we need to search for <span> tags, as this is where ADF Faces RC places raw text.

Load the javascript into JSF

In the page we wish to include the javascript we include the following code:

view plainprint?

1. <trh:script source="js/fonts.js">  
2. </trh:script>  

...assuming you stored the above javascript in the ViewController public_html/js subdirectory as fonts.js.

(Alternatively this tag could go into your JSF template so you only need to include it once)

Note that this is in fact a Apache Trinidad component, not ADF Faces RC. As such you also need to change your JSF page's <jsp:root> tag to include the Trinidad HTML tag library as follows:

view plainprint?

1. <jsp:root  
2.   xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"   
3.   xmlns:f="http://java.sun.com/jsf/core"  
4.   xmlns:h="http://java.sun.com/jsf/html"     
5.   xmlns:af="http://xmlns.oracle.com/adf/faces/rich"  
6.   xmlns:trh="http://myfaces.apache.org/trinidad/html">  
7. </jsp:root  

Buttons

Next in order to provide buttons to call the javascript we include the following command controls on our page:

view plainprint?

1. <af:commandlink text="Smaller">  
2.   <af:clientlistener method="decreaseFontSize" type="action">  
3. </af:clientlistener></af:commandlink>  
4. <af:commandlink text="Larger">  
5.   <af:clientlistener method="increaseFontSize" type="action">  
6. </af:clientlistener></af:commandlink>  

Note the use of the clientListener tag to invoke the javascript functions we defined above.

Near success

At this point if you run your page you should see the fonts scale up and down when you press the relevant commandLink button.

One thing you may notice is that if you have other text based command and go components on the page (eg. <af:commandLink> <goLink>), the text fails to grow or shrink on pressing your new buttons. This occurs because the command and go components are rendered in a HTML < href> tag rather than the <span> tag we coded in our javascript. An easy solution to this is to modify your components as follows:

Original

view plainprint?

1. <af:commandlink text="Do something really important">  
2. </af:commandlink>  

Fix

view plainprint?

1. <af:commandlink>  
2.   <af:outputtext value="Do something really important" nowrap="true">  
3. </af:outputtext></af:commandlink>  

As the command control now uses a normal outputText component to render the text, this in turn is rendered as a HTML <span> tag in the end HTML page and will be subject to our javascript routines results.

One other thing you might notice, is in Firefox the font fails to shrink at all. Remember that Firefox has a user preference that stops this from occurring under Tools -> Options -> Content -> Fonts & Colours -> Advanced -> Minimum Font Size, a particularly useful feature on my laptop that runs at 1 sqwillion by 1 sqwillion resolution, where I can't see a d@mned thing.