Empowering Multi-tasking with an ADF UI Powerhouse (UIShell with dynamic tabs)

6,661 views
6,375 views

Published on

Presentation explains how to set up an ADF application using a UI Shell with dynamic tabs to enable end user multi-tasking.

1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total views
6,661
On SlideShare
0
From Embeds
0
Number of Embeds
123
Actions
Shares
0
Downloads
368
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Empowering Multi-tasking with an ADF UI Powerhouse (UIShell with dynamic tabs)

  1. 1. <Insert Picture Here> Empowering Multi-tasking with an ADF UI PowerhouseSteven Davelaar twitter:@stevendavelaarTechnical Director blog: blogs.oracle.com/jheadstartOracle Consulting
  2. 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. 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. 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. 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. 6. Dynamic Tabs UI Shell Functional UI Pattern 6
  7. 7. UIShell – Dynamic Tabs with Tree Menu 7
  8. 8. Dynamic Tabs with Tree Menu - Implementation UI Shell – Page Template Dynamic TabsXMLMenuModel Tree ADF Region 8
  9. 9. UIShell Page 9
  10. 10. Tree Menu – XMLMenuModel 10
  11. 11. Tree Menu – MenuModel Managed Bean 11
  12. 12. Dynamic Tabs Page Template – Tree Menu 12
  13. 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. 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. 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. 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. 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. 18. TabNavigationHandler 18
  19. 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. 20. DynTabManager – Launch tab 20
  21. 21. DynTabManager – Add tab 21
  22. 22. Dynamic Tabs with Tree Menu - Implementation UI Shell – Page Template Dynamic TabsXMLMenuModel Tree ADF Region 22
  23. 23. Dynamic Tabs Page Template – Dynamic Tabs 23
  24. 24. Dynamic Tabs Declarative Component 24
  25. 25. UIShell Page Definition – MultiTaskFlow bindingnew in Jdev 11.1.2 25
  26. 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. 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. 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. 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. 30. Pass DynTabManager as Task Flow Parameter 30
  31. 31. Custom Page Controller Class 31
  32. 32. Custom Page Controller Class – setTabDirtyState 32
  33. 33. Alert for Pending Changes 33
  34. 34. DynTabManager Remove Tab 34
  35. 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. 36. Showing dirty tab label in italics 36
  37. 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. 38. Opening a Tab From Within Other Tab 38
  39. 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. 40. Opening a Tab From Global Search 40
  41. 41. Auto-closing a tab 41
  42. 42. Initially Displayed Tabs 42
  43. 43. Update browser window/tab title• Add method to DynTabManager, called when selecting another tab. 43
  44. 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. 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. 46

×