This document discusses how to implement multi-tasking in an ADF application using dynamic tabs in the UIShell framework. It describes setting up classes and managed beans to handle dynamic tabs as ADF regions. It also covers considerations for data control scope, transactions, marking tabs as dirty, and passing a tab manager between task flows to support features like opening tabs from other tabs or global search. The presentation provides an overview and implementation steps for building a dynamic tab interface with additional requirements like pending changes alerts and auto-closing 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