Empowering Multi-tasking with an ADF UI Powerhouse Steven Davelaar twitter:@stevendavelaar Technical Director blog: blogs.oracle.com/jheadstart Oracle Consulting
Agenda • Multi-tasking • Options with ADF applications • Using UIShell with dynamic tabs • Additional usability requirements
• UIShell with dynamic tabs implementation • Implementing additional requirements
2
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
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
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
Dynamic Tabs UI Shell Functional UI Pattern
6
UIShell – Dynamic Tabs with Tree Menu
7
Dynamic Tabs with Tree Menu - Implementation UI Shell – Page Template Dynamic Tabs
XMLMenuModel Tree
ADF Region
8
UIShell Page
9
Tree Menu – XMLMenuModel
10
Tree Menu – MenuModel Managed Bean
11
Dynamic Tabs Page Template – Tree Menu
12
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
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
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
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
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
TabNavigationHandler
18
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
DynTabManager – Launch tab
20
DynTabManager – Add tab
21
Dynamic Tabs with Tree Menu - Implementation UI Shell – Page Template Dynamic Tabs
XMLMenuModel Tree
ADF Region
22
Dynamic Tabs Page Template – Dynamic Tabs
23
Dynamic Tabs Declarative Component
24
UIShell Page Definition – MultiTaskFlow binding new in Jdev 11.1.2
25
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
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
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
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
Pass DynTabManager as Task Flow Parameter
30
Custom Page Controller Class
31
Custom Page Controller Class – setTabDirtyState
32
Alert for Pending Changes
33
DynTabManager Remove Tab
34
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
Showing dirty tab label in italics
36
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
Opening a Tab From Within Other Tab
38
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
Opening a Tab From Global Search
40
Auto-closing a tab
41
Initially Displayed Tabs
42
Update browser window/tab title • Add method to DynTabManager, called when selecting another tab.
43
Summary • Use dynamic tabs with UIShell to support multitasking • 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
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
Empowering Multi-tasking with an ADF UI Powerhouse
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. Dynamic Tabs UI Shell Functional UI Pattern. 6. Page 7. UIShell â Dynamic Tabs with Tree Menu. 7. Page 8 ...
Mar 19, 2006 - three-bedroom home in Van Nuys, Calif., but psychologically each ..... In lecture halls with wireless Internet access--now more than 40% of ...
Page 1 of 20. Family ties season 5.Americas got talents05.81117509705 - Download Eliciasolis multitasking.The Guinea Pig 5:Android ofNotre Dame.Any. product that which forevermoreshall beis being entered into the USAmarket forever shallencounter stif
adfexe.descargar libros deterroren pdf.descargar libro de biologiatercero ... counter strike 1.6 español.descargar serie naruto uzumakiespañollatino.descargar ... wars gratis.descargarares gratis paracelular lg android.descargar facebook.
networks work together without interference. ... five years, the company has turned to home automation ... to the data through the local mobile phone network:.
Empowering Secondary Teachers, Empowering You Action Instructions, England.pdf. Empowering Secondary Teachers, Empowering You Action Instructions, England.pdf. Open. Extract. Open with. Sign In. Main menu. Displaying Empowering Secondary Teachers, Em
Challenges. ⢠Manage tiny form factors. Deliver powerful data analytics that provide real insight into energy consumption and critical building functions without ...
There was a problem previewing this document. Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. Carnamah ...
Burdened by continual preparation and paperwork in case an inspector calls ... Empowering Primary Teachers, Empowering You Action Instructions England.pdf.
