Where's the Javadoc for ADF 11g?

If you're using JDev you can have access to the ADF API through different ways. My preferred one is by selecting the class in the source editor and pressing F1 for the full javadoc or Ctrl+D to have the mini-javadoc view (if you have the source code jars) popping up. Another way is to use the global search field on the top right of the IDE.

Sometimes you also want to link the reference to the API from, for example, a blog post. In this case you can access the whole ADF 11g API reference from this link: http://download.oracle.com/docs/cd/E15051_01/apirefs.htm

How do I know if I’m inside a Task Flow or not?

If for some esoteric reason you need to know if you're inside a Task Flow or not, here's the snippet for doing so from a backing bean

ViewPortContext ctx = ControllerContext.getInstance().getCurrentViewPort();
TaskFlowId id = ctx.getTaskFlowContext().getTaskFlowId();
if (id != null){
System.out.println("BOUNDED taskflow.");
} else {
System.out.println("UN-BOUNDED taskflow.");
}

ControllerContext is also accessible through EL, so you can use the same logic in our JSF/ADF tags.

OOW09 Unconference Slide Deck Posted

You can now check out the presentation that George and I delivered during Oracle OpenWorld 2009 Unconference session. It talks about some of ADF Faces key components, page layout and how we rebuild two well known websites using ADF Faces.

We will revamping this presentation with more content and more demos for our technical session at Devoxx 2009.

Centered, Fixed Size Layout with ADF Faces

ADF Faces layout components are pretty powerful. They are able to stretch themselves and their children components to neatly accommodate UI components to fill the height and width of the browser content area, also called the viewport.

That’s all cool and dandy, but what if you don’t want things to stretch? More precisely, you want your UI to be of a fixed size? Something like this very blog, or the 960 Grid System where the contents are displayed inside a 960px container that is centralized in the browser’s viewport no matter what’s the browser window size or the display resolution?

If you work with ADF Faces you’d think that this kind of layout is not possible just by looking at the ADF Faces Component Demo or WebCenter Spaces Workspaces (that are all ADF based), right? I mean, everything stretches and expands and accommodates inside the browser’s viewport, and if you resize the browser you can see the components adjusting themselves to the new viewport size. Moreover, everything seems to be left or start-aligned. So how can I achieve a centered, fixed size layout?

Well, let’s start by writing down what I need:

I need the background of my page to stretch to fill the whole viewport. Then I need to make my main area to be centered, but it also needs to scroll, so I can stack things vertically.

Cool. So this is my requirement. I guess that you already noticed some clues on how I’m building the UI. Let’s see how you can translate this to ADF Faces tags:

“Wait, that’s it?” Yup. Three tags (I know, it’s actually four, but stay with me). Let’s take a look at it again:

1. The panelStretchLayout is the base layout component. This will be true for 99.999% of your layouts. It makes sure that the browser’s viewport will be fully utilized.
2. A nested panelGroupLayout with layout=”scroll” so the vertical scrollbar will be shown whenever the contents of the page overflow the browser’s viewport. In this case, it will show as the browser’s native scrollbar on the right side as it is being stretched by the parent panelStretchLayout. It also has halign=”center” so anything within it will be centralized.
3. Another panelGroupLayout with layout=”vertical”. This is the fixed size container; notice that some inlineStyle properties are being set, lie, “width:960px”. This will guarantee that this container won’t exceed 960px. The other properties are for visualization purposes only. Of course, you shouldn’t be setting inlineStyle properties. Just create a CSS file with a custom class or, better, create a skin for your application, but this will work for the sample.

This is all that’s needed. OK, now, notice that there’s one more nested panelgroupLayout with layout=”vertical” and inlineStyle=”height:1024.0px” . This is to simulate some overflow content so the scrollbar shows up in the browser:

Here’s how the HTML for this structure was generated by ADF Faces. I recommend the Firebug Plugin if you want to get down to this level of detail:

I’ve got to admit that it’s not visually compelling right now, so let’s jazz it up with some background and CSS to see how it looks:

Much better now. I’ve added a Header Area that actually stretches beyond the fixed size area that contains the Top Area and the Content Area.

One thing that you need to be aware is that now you are on a fixed size “world”. Don’t expect things to stretch or adjust to each other within the fixed size container, but that’s ok, because you’ve chosen to work with a fixed size layout and you can arbitrarily set the components size. You should avoid using percentages too, because then it’s up to the browser to decide what 90% of “what” should be rendered. If you need to stretch horizontally than use the AFStretchWidth selector in the component’s styleClass.

Last but not least, I’ve done some of the hard work for you and put everything on an ADF Faces template so you can study the sample or even reuse it. You can download the sample here.

If you have any suggestions on UI layouts that would be interested to see on ADF Faces feel free to post them in the comments area.

FIRST!

Hi all, I finally decide to blog. I've got to admit that I'm not too excited, maybe because I'm not quite sure what I will be posting, if posting at all.

Anyway, I will try to give some insight on the work that I do with Oracle products, mainly ADF and WebCenter, but also on some more generic stuff like CSS, REST, JQuery, and Grails. I hope that it will be useful for you somehow. :-)

That said though, keep in mind that this blog title is ADF Garage, which means that sometimes I will bend or break the rules of whatever I'm using. I will try to alert you whenever possible, but beware!