Download as PDF, PPTX
Uploaded bySteven Davelaar
Empowering Multi-tasking with an ADF UI Powerhouse (UIShell with dynamic tabs)
The document outlines strategies for implementing multi-tasking in ADF applications using dynamic tabs with the UIshell framework. It covers usability enhancements, transaction management, and the creation of dynamic tab classes and associated managed beans. Additionally, it emphasizes the importance of properly handling data control scopes and transactions for improved user experience.
More Related Content
Similar to Empowering Multi-tasking with an ADF UI Powerhouse (UIShell with dynamic tabs)
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 withADF 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 relatedusability 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 relatedusability 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
- 6. Dynamic Tabs UIShell Functional UI Pattern 6
- 7. UIShell – DynamicTabs with Tree Menu 7
- 8. Dynamic Tabs withTree Menu - Implementation UI Shell – Page Template Dynamic Tabs XMLMenuModel Tree ADF Region 8
- 9.
- 10. Tree Menu –XMLMenuModel 10
- 11. Tree Menu –MenuModel Managed Bean 11
- 12. Dynamic Tabs PageTemplate – Tree Menu 12
- 13. Adding and SelectingDynamic 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 classand 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 DynTabmanaged 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 andmanaged 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 DynamicTabs • 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
- 18.
- 19. Navigating Using DynamicTabs • 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
- 20. DynTabManager – Launchtab 20
- 21. DynTabManager – Addtab 21
- 22. Dynamic Tabs withTree Menu - Implementation UI Shell – Page Template Dynamic Tabs XMLMenuModel Tree ADF Region 22
- 23. Dynamic Tabs PageTemplate – Dynamic Tabs 23
- 24. Dynamic Tabs DeclarativeComponent 24
- 25. UIShell Page Definition– MultiTaskFlow binding new in Jdev 11.1.2 25
- 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 AdditionalRequirements • 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 Scopeand 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 TabDirty – 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
- 30. Pass DynTabManager asTask Flow Parameter 30
- 31. Custom Page ControllerClass 31
- 32. Custom Page ControllerClass – setTabDirtyState 32
- 33. Alert for PendingChanges 33
- 34.
- 35. Showing dirty tablabel 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
- 36. Showing dirty tablabel in italics 36
- 37. Opening a TabFrom 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
- 38. Opening a TabFrom Within Other Tab 38
- 39. Opening a TabFrom 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
- 40. Opening a TabFrom Global Search 40
- 41.
- 42.
- 43. Update browser window/tabtitle • Add method to DynTabManager, called when selecting another tab. 43
- 44. Summary • Use dynamictabs 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 • Downloadsample 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
- 46.