• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Empowering Multi-tasking with an ADF UI Powerhouse (UIShell with dynamic tabs)
 

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

on

  • 5,461 views

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

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

Statistics

Views

Total Views
5,461
Views on SlideShare
5,346
Embed Views
115

Actions

Likes
5
Downloads
289
Comments
1

4 Embeds 115

http://loycodevt 98
http://www.docseek.net 8
http://www.linkedin.com 5
http://a0.twimg.com 4

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Superb...!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • <Insert Picture Here> Empowering Multi-tasking with an ADF UI PowerhouseSteven Davelaar twitter:@stevendavelaarTechnical Director blog: blogs.oracle.com/jheadstartOracle 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 TabsXMLMenuModel 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 TabsXMLMenuModel Tree ADF Region 22
    • Dynamic Tabs Page Template – Dynamic Tabs 23
    • Dynamic Tabs Declarative Component 24
    • UIShell Page Definition – MultiTaskFlow bindingnew 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 26
    • 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
    • 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 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
    • 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