steven davelaar - dynamic tabs
DESCRIPTION
Deze presentatie heeft Steven Davelaar tijdens de Oracle OpenWorld Preview sessie bij AMIS verzorgd.TRANSCRIPT
![Page 1: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/1.jpg)
<Insert Picture Here>
Empowering Multi-tasking with an ADF UI Powerhouse
Steven Davelaar twitter:@stevendavelaarTechnical Director blog: blogs.oracle.com/jheadstartOracle Consulting
![Page 2: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/2.jpg)
Agenda
• Multi-tasking
• Options with ADF applications
• Using UIShell with dynamic tabs
• Additional usability requirements
• UIShell with dynamic tabs implementation
• Implementing additional requirements
2
• Implementing additional requirements
![Page 3: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/3.jpg)
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
3
• Open new tab within ADF application
• Options to meet additional requirements
![Page 4: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/4.jpg)
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
4
• 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
![Page 5: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/5.jpg)
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
5
• 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
![Page 6: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/6.jpg)
Dynamic Tabs UI Shell Functional UI Pattern
6
![Page 7: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/7.jpg)
UIShell – Dynamic Tabs with Tree Menu
7
![Page 8: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/8.jpg)
Dynamic Tabs with Tree Menu - Implementation
UI Shell – Page TemplateDynamic Tabs
8
XMLMenuModel Tree ADF Region
![Page 9: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/9.jpg)
UIShell Page
9
![Page 10: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/10.jpg)
Tree Menu – XMLMenuModel
10
![Page 11: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/11.jpg)
Tree Menu – MenuModel Managed Bean
11
![Page 12: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/12.jpg)
Dynamic Tabs Page Template – Tree Menu
12
![Page 13: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/13.jpg)
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
![Page 14: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/14.jpg)
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)
14
• Task flow parameters (optional)
• For each menu item, a managed bean using DynTab
class is defined
![Page 15: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/15.jpg)
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
![Page 16: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/16.jpg)
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
• Mark current tab dirty
![Page 17: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/17.jpg)
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
![Page 18: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/18.jpg)
TabNavigationHandler
18
![Page 19: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/19.jpg)
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
![Page 20: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/20.jpg)
DynTabManager – Launch tab
20
![Page 21: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/21.jpg)
DynTabManager – Add tab
21
![Page 22: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/22.jpg)
Dynamic Tabs with Tree Menu - Implementation
UI Shell – Page TemplateDynamic Tabs
22
XMLMenuModel Tree ADF Region
![Page 23: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/23.jpg)
Dynamic Tabs Page Template – Dynamic Tabs
23
![Page 24: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/24.jpg)
Dynamic Tabs Declarative Component
24
![Page 25: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/25.jpg)
UIShell Page Definition – MultiTaskFlow binding
new in Jdev 11.1.2
25
![Page 26: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/26.jpg)
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
regions, only one rendered at a time
![Page 27: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/27.jpg)
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
27
• Initially displayed tabs
• Update browser window title
![Page 28: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/28.jpg)
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
28
default, but can be changed using Transaction setting
![Page 29: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/29.jpg)
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
29
DynTabManager
• Configure custom page controller class in page
definition
• Show dialog when closing dirty tab
• Show dirty tab label in italics
![Page 30: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/30.jpg)
Pass DynTabManager as Task Flow Parameter
30
![Page 31: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/31.jpg)
Custom Page Controller Class
31
![Page 32: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/32.jpg)
Custom Page Controller Class – setTabDirtyState
32
![Page 33: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/33.jpg)
Alert for Pending Changes
33
![Page 34: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/34.jpg)
DynTabManager Remove Tab
34
![Page 35: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/35.jpg)
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
• Use separate af:forEach loop to render the regions
![Page 36: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/36.jpg)
Showing dirty tab label in italics
36
![Page 37: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/37.jpg)
Opening a Tab From Within Other Tab
• Set up EditEmployee task flow for deeplinking
37
• 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
![Page 38: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/38.jpg)
Opening a Tab From Within Other Tab
38
![Page 39: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/39.jpg)
Opening a Tab From Global Search
39
• 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
![Page 40: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/40.jpg)
Opening a Tab From Global Search
40
![Page 41: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/41.jpg)
Auto-closing a tab
41
![Page 42: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/42.jpg)
Initially Displayed Tabs
42
![Page 43: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/43.jpg)
Update browser window/tab title
• Add method to DynTabManager, called when
selecting another tab.
43
![Page 44: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/44.jpg)
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
44
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
![Page 45: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/45.jpg)
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
45
• Building Highly Reuseable ADF Task Flows
Wednesday 10.15-11.15
Mariott Marquis Golden Gate A
![Page 46: Steven Davelaar - Dynamic tabs](https://reader034.vdocuments.site/reader034/viewer/2022051323/54820bdab47959e70c8b46d2/html5/thumbnails/46.jpg)
46