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

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