Axa Assurance Maroc - Insurer Innovation Award 2024
Empowering Multi-tasking with an ADF UI Powerhouse (UIShell with dynamic tabs)
1. <Insert Picture Here>
Empowering Multi-tasking with an ADF UI Powerhouse
Steven Davelaar twitter:@stevendavelaar
Technical Director blog: blogs.oracle.com/jheadstart
Oracle Consulting
2. Agenda
• Multi-tasking
• Options with ADF applications
• Using UIShell with dynamic tabs
• Additional usability requirements
• UIShell with dynamic tabs implementation
• Implementing additional requirements
2
3. Multi-tasking options with ADF applications
• Start new browser instance
• End user easily looses overview
• Open new browser tab within same browser instance
• ADF tabs mixes with non-ADF tabs
• ADF session shared accross tabs
• Open new tab within ADF application
• Options to meet additional requirements
3
4. Multi-tasking and related usability requirements (1)
• Open new tab in various ways
• Using the menu
• Using global quick search
• From within other tabs
• Conditionally: check whether tab is already open
• Close tab in various ways
• Use close tab icon on tab label
• Use close tab button inside tab region
• Auto-close when task is completed
4
5. Multi-tasking and related usability requirements (2)
• Transaction handling
• Tabs are independent tasks -> independent transactions
• Visual indicator that tab contains pending changes
• Warning when closing tab with pending changes
• Miscelleaneous
• Update browser title based on selected tab
• Initially displayed tabs
• Prevent tabs from being closed manually
• Set maximum number of open tabs
• Update tab label based on current data inside tab
5
13. Adding and Selecting Dynamic Tabs
• Create DynTab class and managed beans
• Create DynTabManager class and managed bean
• Create custom TabsNavigationHandler
• Hides complexity of adding/selecting tabs
13
14. Create DynTab class and managed beans
• DynTab class holds all info about a dynamic tab
• Tab title
• Tab unique identifier
• Task flow ID
• Task flow parameters (optional)
• For each menu item, a managed bean using DynTab
class is defined
14
15. Maintain Jobs DynTab managed bean
• DynTab class holds all info about a dynamic tab
• Tab title, Tab unique identifier, Task flow ID and
parameters
• For each menu item, a managed bean using DynTab
class is defined
15
16. DynTabManager class and managed bean
• DynTabManager class controls tab behavior
• Housekeeping of open tabs and current tab
• Launch tab: add new or select existing tab
• Remove tab
• Mark current tab dirty
16
17. Navigating Using Dynamic Tabs
• Create custom TabNavigationHandler
– configure in faces-config.xml
– Provides standard JSF navigation through superclass
– Allows setting adding/selecting dynamic tab: tab name
specified after navigation outcome, separated by colon
17
19. Navigating Using Dynamic Tabs
• Action ”uishell:Jobs”
– navigates to UIShell.jsf page (if needed)
– Call launchTab with tabName “Jobs” on DynTabManager
– TaskFlowId and params picked up from JobsDynTab bean
19
26. JDev 11.1.1.x Implementation
• No MultiRegion executable
• Cannot use af:region inside af:forEach tag
• Page Template Page Definition with 15 pre-defined
taskflow bindings
• DynamicTabs declarative component defines 15
regions, only one rendered at a time
26
27. Implementing some Additional Requirements
• Tabs should have independent transactions
• Pending changes warning when closing tab
• Opening new tab from within other tab
• Opening new tab from global search
• Auto-closing a tab
• Initially displayed tabs
• Update browser window title
27
28. Data Control Scope and Transactions
• Data Control Scope
– Shared: all TF’s share same app module instance
– Isolated: Each TF instance has own app module instance
• Transaction Scope
– With isolated data control scope each TF has own transaction
– With shared data control scope, transaction is shared by
default, but can be changed using Transaction setting
28
29. Marking a Tab Dirty – Pending Changes Alert
• Pass DynTabManager as task flow parameter
• Create custom page controller class and implement
refreshRegion method
• get the data control through binding container, check
for changes and mark current tab dirty using
DynTabManager
• Configure custom page controller class in page
definition
• Show dialog when closing dirty tab
• Show dirty tab label in italics
29
35. Showing dirty tab label in italics
• Currently not possible to change styling of an
individual tab within panelTabbed component (ER
logged)
• Work around
• Use navigation pane to render tabs
• Use separate af:forEach loop to render the regions
35
37. Opening a Tab From Within Other Tab
• Set up EditEmployee task flow for deeplinking
• Pass TabManager instance as task flow parameter
• Define Edit EmployeeDynTab managed bean inside
“Search Employees” task flow
• Set commandLink action to “uishell:EditEmployee”
• Use setActionListener on commandLink to pass
parameters
37
39. Opening a Tab From Global Search
• Set up EditEmployee task flow for quick search query
• Set commandLink action to “uishell:EditEmployee”
• Use setActionListener on commandLink to pass
parameters
• Use subform and default command to auto submit
when tabbing out search field
39
43. Update browser window/tab title
• Add method to DynTabManager, called when
selecting another tab.
43
44. Summary
• Use dynamic tabs with UIShell to support multi-
tasking
• Set up infrastructure classes and beans to use ADF
regions as dynamic tabs in UIShell
• Create custom tabs navigation handler to hide
complexity for developers
• Think carefully about data control scope and
transaction settings
• Create custom page controller for marking tab dirty
• Pass TabManager instance as task flow parameter for
“inside-out” tab handling
44
45. Next steps
• Download sample applications for JDev 11.1.2 and
11.1.1.4 from JHeadstart blog
• Follow-on session
• Building Highly Reuseable ADF Task Flows
Wednesday 10.15-11.15
Mariott Marquis Golden Gate A
45