Wednesday, October 8, 2014

New Alta UI for ADF UI Shell Application

I have applied new Alta UI for customised ADF UI Shell application. Customised version of ADF UI Shell is taken from my previous blog post - ADF UI Shell Usability Improvement - Tab Contextual Menu. Old application with new Alta UI looks fresh and clean. Runtime performance is improved - ADF transfers less content to the browser, this makes application load and run faster.

Here you can download my sample application with Alta UI applied to ADF UI Shell -

All three ADF UI Shell tabs are opened and Master-Detail data is displayed in this example:

New style is applied for LOV component and buttons, making all buttons and controls more visible and natural:

Customized ADF UI Shell supports tab menu - user can close current tab or other tabs:

There was a change in 12c related to the tab menu, we need to set align ID property differently. You can see this change in ADF UI Shell template file - Java Script function gets tab ID to align directly from component client ID property:

Alta UI is applied simply by changing a skin name in trinidad file:

This hidden gem was packaged with current JDEV 12.1.3 release, you don't need to download anything extra.


Unknown said...

Truly a class feature in ADF Skinning...Thanks for the great info

Tamilselvi said...

Thanks for posting about the new 'Alta' skin feature.

I tried to use Alta skin for my application and it works well.

Based on your sample app, I took the dynamic shell code to incorporate with my code.

In, I get the below error with the import - import oracle.adf.controller.internal.binding.DCTaskFlowBinding;

Error -> "Illegal internal package import. Please use public API ".

I included 'ADF PageFlow RunTime' library in my project. But, I couldn't get the reason for the error.

I see the error in your project as well. But, it compiles and runs well.

I see compilation error with my project.

\View\src\oracle\ui\pattern\dynamicShell\ error: package oracle.adf.controller.internal.binding does not exist
[javac] import oracle.adf.controller.internal.binding.DCTaskFlowBinding;

Andrej Baranovskij said...

I will double check and will follow up.


Andrej Baranovskij said...

This error, because of ADF internal API class usage. There is public class with the same name available, just change the import - don't sue the one with internal packaged in its name.


Marko said...

Hi Andrejus,

For question about use of "import oracle.adf.controller.internal.binding.DCTaskFlowBinding" public class that can be used is "oracle.adf.model.binding.DCBindingContainer". I found two things that can be used in this app to improve behaivour. First is in main.jsf removing id form showDetailItem. Because same id cause that all tabs are closed when you close first tab. All tabs have same id. In this way id is generated unique for all tabs and behaivour of closing tabs is ok. Second is modification in launch methods in to pass false instead of true for opening tabs (new tab). Because in this way it's opening new tabs every time.

I have one question for you. I need your private opinion (not Oracle). What is best to use in wery big project for ui pattern. Project is ERP with over 20 modules and 1200 forms (applications). Would you use multiTaskFlow (Custom UI Shell), or Oracle's UIShell taskFlow, or you would create your own kind of implementation (programmatic interface from backing bean that generate tabs-showDetailItems in tabbed panel). With or without task flows?

Thank you for suggestion.


Andrej Baranovskij said...

Hi Marko,

DCTaskFlowBinding internal is coming as it is from original UI Shell code. Yes, it should be changed to public class - thats correct.

I guess you are talking about showDetailItem for multiTaskFlow binding example. Yes, in the previous ADF release it worked correctly even with ID left, in 12c ID should be removed.

Opening new tabs every time depends on application preference. Often it is desired behavior to open same form multiple times in different tabs, in isolated mode.

For very large ADF application, I would consider using customised Oracle UI Shell template. Mainly because it allows to implement tab isolation quite easily (this is not working so nice with multiTaskFlow binding):

On other hand, if you are ready to spend time on implementing custom UI Shell with multiTaskFlow binding, this could be an option as well. Mainly because it will allow to open dynamic number of tabs. And layout can be more easily customised.


Marko said...

Hi Andrejus,

I will go with Oracle's UIShell and customized it. Thanks! I think that 14 tabs is not that much of restriction. Probably I would put it on multiTaskFlow implementation too, because of number of connections with 300 users. Is that only thing that UIShell have as restriction. Thank you a lot. You saved me lot of time.

Best regards,

Andrej Baranovskij said...

You can add more tabs on design time in UI Shell template - more static predefined regions. It will support more tabs.

To support more DB connection, make sure to use DB pooling option for ADF BC.


Arun Mohan said...

Hi Andrejus,

Have you tried this in ADF 12.2.1? If so, could you please comment on below issue.

We were using this UI shell in our application(ADF 12.1.3). Last week we migrated the application to latest ADF release 12.2.1. From then, when the page reloads, tabs disappear. Page reload happens when the user close a tab or clicking on the URL bar and then pressing enter key. If user refresh the page two or three times, the tab re-appear but tab switching is not working. We tried migrating your application to 12.2.1 and it behave in the same manner. I couldn't find any thread in Oracle community regarding this issue. Any help would be highly appreciated.

Thanks and Regards,

Unknown said...

hi Arun Mohan
have you solved your problem , because i have same thing.


Andrej Baranovskij said...

Yes, we are using it with Didnt saw such behavior as you describe. It works well for me.


Unknown said...

Hi Andrejus,

I need help on how to auto focus a input text field with in a bound tak flow which is rendered using Dynamic Tab Shell template.

Question is how to get the client component Id of the text field in managed bean on page load?
If we have task-flow dragged as a region on a JSPX, we can find the component using region id "r1" from FacesContext.getCurrentInstance().getViewRoot.findComponent("r1").findComponent("it1"), where it1 is the id of the tect field. But now, we dont have a task-flow region binding in pagedef, so how can we dynamically get inputtext client id at runtime?

Please help. Here is the forum post: