Skip to main content

Posts

Showing posts with the label JavaScript

Build an Image Slider in ADF/WebCenter Portal using jFlow Plus v2

In a modernized ADF/WebCenter Portal application, it's very common to have an image slider that can slide images automatically/manually from one to another. If you are thinking of implementing such functionality, my post here might help you. The image slider transition is implemented by JQuery. I will not focus anything on JQuery as there are many third party JQuery plugin out there for such image sliding effect. But those plugins are not ready to use for your ADF/WebCenter application, due to ADF technology itself which is based on faces components. Here I am presenting a working copy of such implementation. The plugin I used here is "jFlow Plus v2". You can download the plugin and find more info about it here: http://wordimpress.com/demos/jflowplus-v2/. To preview the finished version built on top of ADF, here is the screenshot: Here are several things I want to emphasize: Determine your page layout - flow layout or stretch layout. You always want to determin...

Set a PanelTab height dynamically using JavaScript

It's not a common scenario but interesting to note down what's the use case and how to implement it. The use case is to get the view port height on the ADF page and set height to the PanelTab or other component related to the view port height. Most sites are still designed with flow layout on fixed width of the page. Users would have all kinds of different desktop resolutions so that their browser would render the ADF pages a bit differently. Some with large resolution would have large blank space. To make the site more appealing (or even readable at least) and fit into different browser window sizes, we can definitely control the heights of ADF components using JavaScript. In this example, we will look at the PanelTab component but it can be applied to any other ADF components. There is actually a web design - responsive web design - supposed to solve these kind of problems and render the site in multiple platforms. But the solution in this blog is more or less a fix/worka...

Invoke actions on non-command component

It's a small demo on how to perform additional actions on click a goLink component which doesn't support any action logics inherently. The solution is to use javascript to invoke a command component programatically. But why do I need to perform some action on a golink click, why don't I use commandLink directly? Well, the reasons can be many, one of the valid reason is if you have such requirement like: on click of a link, open a predefined URL in a new window and also perform some action. I know there must be other similar scenarios which could be categoried into the same group like this one. The implementation is fairly easy. Here is the code snippet: The command link is hidden and aligned after goLink in page source. The additional action logics is defined in the action listener of the command link.  Here is the demo to download. (JDeveloper 11.1.1.5 and need HR schema objects to run)

Page Navigation using JavaScript in ADF Faces

Recently I posted a question on the Oracle ADF forum asking if there is Javascript API for page navigations in ADF faces and the simple answer is NO. My Original Post: I have a UI user case that has a af:menu which contains mutiple af:goMenuItem. When user click on the menu, the menu slides down and shows up the af:goMenuItem. As we know, you could define the page destinations in af:goMenuItem to go to another page when user clicked, but af:menu itself cannot be redirected to another page. Well, the user case wants the menu itself could be redirected if user click on it.   So I am thinking using JavaScript to do this: when the af:menu gets clicked, redirect to another page. BUT, I looked over the ADF Faces Javascript API and was not able to find that piece of code to do this. Any help??? Frank's Response: 1 - you can have a hidden command item to do the navigation based on a control flow case. In this case, you access the command component from JavaScript create a new Ac...

About ClientListener and ServerListener

ClientListener , by its meaning, is fired/triggered by its source component to execute some client side script been defined in java scripts. Oracle defines it as "The clientListener tag is a declarative way to register a client-side listener script to be executed when a specific event type is fired. This tag will be ignored for any server-rendered components, as it is only supported by rich client components." Before using the clientListener tag, be sure to look for any existing behavior tags which might eliminate the need for scripts. ClientListener is more generic and could be used anywhere there is a need for java scripts insertion. But ADF already provides some specific tag listener for some special occasion,  for example: the af:showPopupBehavior tag simplifies what it takes to display a popup. This example will invoke the JavaScript method "showPopupFromAction" when the button is clicked and will then manually display a popup. ServerListener , is fir...