Empowering Multi-tasking with an ADF UI Powerhouse (UIShell with dynamic tabs)
8 likes5,036 views
Presentation explains how to set up an ADF application using a UI Shell with dynamic tabs to enable end user multi-tasking.
![iPhone Programming [7/17] : Behind the Scene](https://cdn.slidesharecdn.com/ss_thumbnails/07-behindthescene-key-130115102951-phpapp02-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
Similar to Empowering Multi-tasking with an ADF UI Powerhouse (UIShell with dynamic tabs) (20)
More from Steven Davelaar (11)
Ad
Recently uploaded (20)
Ad
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
- 6. Dynamic Tabs UI Shell Functional UI Pattern 6
- 7. UIShell – Dynamic Tabs with Tree Menu 7
- 8. Dynamic Tabs with Tree Menu - Implementation UI Shell – Page Template Dynamic Tabs XMLMenuModel Tree ADF Region 8
- 9. UIShell Page 9
- 10. Tree Menu – XMLMenuModel 10
- 11. Tree Menu – MenuModel Managed Bean 11
- 12. Dynamic Tabs Page Template – Tree Menu 12
- 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
- 18. TabNavigationHandler 18
- 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
- 20. DynTabManager – Launch tab 20
- 21. DynTabManager – Add tab 21
- 22. Dynamic Tabs with Tree Menu - Implementation UI Shell – Page Template Dynamic Tabs XMLMenuModel Tree ADF Region 22
- 23. Dynamic Tabs Page Template – Dynamic Tabs 23
- 24. Dynamic Tabs Declarative Component 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 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
- 30. Pass DynTabManager as Task Flow Parameter 30
- 31. Custom Page Controller Class 31
- 32. Custom Page Controller Class – setTabDirtyState 32
- 33. Alert for Pending Changes 33
- 34. DynTabManager Remove Tab 34
- 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
- 36. Showing dirty tab label in italics 36
- 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
- 38. Opening a Tab From Within Other Tab 38
- 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
- 40. Opening a Tab From Global Search 40
- 41. Auto-closing a tab 41
- 42. Initially Displayed Tabs 42
- 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
- 46. 46