This document discusses several features in Oracle ADF (Faces) that provide useful but overlooked functionality. It highlights the rich table and auto suggest components, which allow dynamic table configuration and suggestions based on user input. It also mentions using page templates to define common layout patterns and structure pages in a reusable way.

1. Gold Nuggets in Oracle ADF (Faces) Lucas Jellema – AMIS (Nieuwegein, The Netherlands) ADF EMG Community Day - Oracle Open World 2011

3. Overview IDE favorites Fool’s Gold UI (tw)Highlights The Whole Wide World

4. What is a gold nugget? Unexpected benefit Underused, overlooked feature Small – frequently useful Huge – unexplored concept or area of infrastructure Potentially useful to large community Not too much a niche option

5. Nugget cloud Skin editor VO Updateable Lookup EL Tree Select Hot Reload Change Persistence Rich Table Auto Suggest Customization setPropertyListener Refresh after insert PanelCollection Decoupled Development & Reuse TaskFlow, Region, UIShell, Declarative Components, ADF Library, … Java/JEE Bean Data Control Popup PPR JHeadstart Mobile Fusion Applications Groovy EMG and wider community server event & listener Multi Browser Support Selenium so aDF DVT active rowkey Programmatic VO Active Data Service for Push OraFormsFaces PanelDashboard List validator prepareSession ADFContext Page Template WebLogic Server Save Points FormatString OPSS/ADF Security

6. ADF in Larry’s Keynote on Oracle Open World 2009 and 2010

7. Fusion Applications – biggest proof point in the world

8. ADF powers the user interface of almost any Oracle product

9. ADF powers the user interface of almost any Oracle product (2)

10. the table ADF Faces Rich Table (& Panel Collection) Displays ADF Model data bound collection, bean array, List, ResultSet, RowSet and more Dynamic Table Configuration & Change Persistence Rearrange, resize, hide/show columns, freeze columns Post-load or Lazy Data Fetch Fetch data rows upon scroll Filter & Sort Read-Only and Click-to-edit [single or multiple] Row and Column Selection Header, Footer, Column Grouping, DetailStamp Many, many predefined facets Export data set, Email & Print mode

11. Active row key Property on table that is ‘click to edit’ EL expression that resolves to the primary key of the row that should be displayed as editable Table will scroll that row into view

12. "Smart" Completion Insight Ctrl-Space (x 2)

13. publicclassAppModuleImplextendsApplicationModuleImpl { publicBookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); } }

14. publicclassAppModuleImplextendsApplicationModuleImpl { publicBookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); } publicvoiddoSomething() { } }

15. publicclassAppModuleImplextendsApplicationModuleImpl { publicBookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); } publicvoiddoSomething() { this. } } Ctrl Space

16. publicclassAppModuleImplextendsApplicationModuleImpl { publicBookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); } publicvoiddoSomething() { this. } }

17. publicclassAppModuleImplextendsApplicationModuleImpl { publicBookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); } publicvoiddoSomething() { this.getB } }

18. publicclassAppModuleImplextendsApplicationModuleImpl { publicBookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); } publicvoiddoSomething() { this.getBookingView1Impl() } }

19. publicclassAppModuleImplextendsApplicationModuleImpl { publicBookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); } publicvoiddoSomething() { ? = this.getBookingView1Impl() } } Ctrl Space x 1

20. publicclassAppModuleImplextendsApplicationModuleImpl { publicBookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); } publicvoiddoSomething() { this.getB } } Ctrl Space x 1 Ctrl Space x 2

21. publicclassAppModuleImplextendsApplicationModuleImpl { publicBookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); } publicvoiddoSomething() { this.getB } }

22. publicclassAppModuleImplextendsApplicationModuleImpl { publicBookingsViewImpl getBookingsView1() { return (BookingsViewImpl)findViewObjects("BookingsView1"); } publicvoiddoSomething() { BookingsViewImplbookingsView = this.getBookingsView1(); } }

23. Jdeveloper Go to Shortcuts Go to Class: CTRL - Go to File: CTRL ALT - Find usages: CTRL ALT u For class, method, EO and VO Attribute, …

24. More best short cuts… CTRL Shift Space: parameter insight CTRL = : list of recently opened files CTRL Space: completion insight CTRL Space (2x): declaration insert CTRL /: selection commented CTRL Shift C:copy file path toClipboard Alt Home : selectfile in ‘tree’

25. Data Visualization

26. The Right Mouse Click ContextMenu client listener and Popup (menu and window)

27. Popup magic

28. Example: Adding fancy balloon help Create a popup with a noteWindow child to contain the fancy help content Add a showPopupBehavior tag to the inputTextthat we want to add the help to

29. Fusion Apps – ‘UI design pattern’

30. Expression Language IoC: Injection of Value and Listener into page Dynamic, context sensitive behavior Extension points Custom Functions invoked from EL Integration of Spring Beans Custom EL Resolver To resolve values from property files, …. #{user.settings['NAME']}

31. Extend EL to support custom functions with multiple parameters Create the static methods that implement the custom EL functions Configure <function> elements in a custom tag library descriptor Associate the tag library to the JSF page Use the function in expressions such as:

32. Create the static methods

33. Configure the function elements in a Tag Library Descriptor file

34. Associate tag library with page and use tag library’s functions

35. No coding quick start adf - leveraging best practices & uniform UI patterns

36. Even more Declarative ADF development – with JHeadstart

37. Programmatic cross tier interaction Web Browser JEE Application Server

38. Client JavaScript Components manipulate component user action JavaScript Function component clientListener component userorprogrammaticaction partialSubmitautoSubmit Load JSON, CSS, Image, XML, JS property change Requestdata orPush message poll setPropertyListener partial triggers, added targets Queue Custom Event serverListener activeOutputText ERKS ‘ppr script’ partial page refresh Full pagereload push add JS toexecute (ERKS) Server (middle tier) component activeOutputText component add componentsas partial target actionListener, valueChangeListener, …Listener Bean serverListener Active DataModel Object Components Beans & Objects push (DB QRCN) Database Client Server interactions vv.

39. Use setPropertyListenerto push data to the server The setPropertyListener will pass from value to the to target when type event occurs on parent A very simple way to inform the server about an event and the data associated with the event Supported types: action, focus, poll, query, rangeChange, selection, sort, rowDisclosure, valueChange and many more <af:image id="removeFromSetImage“ source="/images/removeFromSet.png“ shortDesc="Remove from Shopping Basket"/> <af:setPropertyListener from="#{item}“ to="#{shoppingBasket.itemToRemove}" type="action"/> </af:commandLink>

40. ServerListener for custom AJAX (background client to server push) A serverListener associates a server side method with a client side custom event This allows JavaScript functionsto call a server side method by queuing an event A custom event carries a payload

41. ADF Active data service – server push to client Push: server sends messages to client ADF Active Data Service enables UI components to be ‘automaticallyrefreshed’ when server sideeventsoccur Active UI ComponentsincludeTable, Image, OutputText, DVT Components Basedon BAM Data Control BasedonCustomBeansthatextendActiveAdapter Nudge: push-to-refresh Note: client-2-client pushcaneasilybeimplementedas client-to-server-followed-by-server-to-client push Web Browser JEE Application Server

42. Auto-PPR for immediate refresh of Data Bound components To have ADF automatically refresh data bound components when underlying value binding has changed its value Set changeEventPolicy=ppr on iterator Refresh as piggy back on any request cycle No partialTriggers attribute required!

43. Cross Tier Push Web Browser table activeOT Cache refresher JEE Application Server evtlsnr servlet RDBMS job trg

44. Push to the limit – rich and pro-active user interfaces with ADF Session Plug – Session Plug – Session Plug – Session Pl Wednesday, 5-6 PM, Mariott Marquis, Golden Gate A Oracle Open World 2011

45. The “History” feature in JDeveloper Quick comparison of file with previous states Can leverage Source Code Control system (Subversion, CVS) but also maintains local file history The compare feature is ‘XML aware’ Revert to a previous state of a file

46. Marrying forms and ADF together – migrate with (i/o from) forms to adf OraFormsFaces leveraging the JavaScript-Applet bridge for two-way event exchange

47. ADF BC Properties Property Inspector

48. Library Private

49. The World wide Advanced Developers Family

50. The World wide Advanced Developers Family ADF Enterprise Methodology Group OTN Discussion Forum OTN and ADF Resources Documentation, samples, tutorials, testimonials, virtual developer days, rea.oracle.com Blog-o-sphere Conferences around the globe OOW, ODTUG Kaleidoscope, UKOUG, OBUG, AUSOUG/OAUG/ODTUG 20:20, DOAG, … Books and articles Oracle Press, Packt Publishing, … Oracle Magazine, ODTUG Technical Journal, … Also: Leverage Java/JEE community and resources

51. Java and JEE ADF is a framework on top of Java, JEE and JVM Anything that is/extends/runs on one of these is potentially usable with and relevant for ADF Zillion frameworks and libraries iText (PDF), Apache POI (Excel), Jasper Reports, BIRT Spring (IoC, AOP, Acegi/Security, Social, ..) Apache Commons, Google Collections, Joda Time Software Engineering Test (Junit, EasyMock), build (Ant, Maven), check/QA (FindBugs, CheckStyle, Sonar), JEE facilities in WLS including JMS, WS* & RS, JMX… Dynamic JVM languages: Groovy, Scala, JRuby, … Java 7 SE and beyond Java FX?

52. Prepare session Before any other database communication is performed during the processing of a request … ADF BC will execute the prepareSession() method that you can override in ApplicationModuleImpl This is the perfect place to Reset package state Set application and client info Set application context User details, current session context, view filter conditions(real or poor man VPD) Fetch any events published inside the database ADF BC AppMod Database

53. Challenge Create a Sliding Tile puzzle that tiles up an image in a configurable number of tiles Using drag and drop, the user can reassemble the image

54. The PanelDashboard component Renders a ‘portal-like’ dashboard – as a grid of PanelBox-components Configurable number of columns row height Collapsible (boxes) Supports drag & drop for reorganization And change persistence to remember (per user) Very easy to use

55. Steps Create Servlet that produces tiles from a JPEG image Parameters: image name, tile factor, x and y Create PanelDashboard with panelBoxes with richImage components That request their source from the servlet corresponding to their position in the grid Bind the PanelDashboard and dynamically create the panelBox components Allow user to set the tile factor and choose the image Use a Carousel for image selection

56. demo

58. BAM Data Control

59. Human Task UI

60. ADF BC SDO Service

62. Programmatic View Object It walks, talks and looks like a ‘regular’ View Object (regular being based on Entity Objects or SQL Query) But it is entirely fueled by custom written overridden Java methods – possibly without database connection A bit like a View with Instead Of trigger – against a Collection based Table Function and PL/SQL API Programmatic View Objects can be used as normal in a Data Control for binding ADF Faces components Normal rich declarative ADF BC data binding can be provided to UI developers for data sources such as WebService, JMS Queue, Memory Grid, Document Management System, Email, cross session data, … Note: with the evolution of the Bean Data Control, some of the use cases will fade away

63. the root of Ajax Suggestions

64. Auto Suggestions User is entering a field As she types characters, suggestions can be presented for what the full entry should read Based on a list of allowable values, based on previous (popular) entries or anything really User can pick a suggestion for ‘short-cut typing’ Auto suggestions can be model-driven (declarative) or custom And can do things beyond plain list based suggestions

65. Intro Google Suggest set off the AJAX hype in anger Many implementations for a ‘suggestions’ feature in ADF 10g and 11g have been created Using custom JavaScript or libraries like Jquery With PS1, ADF 11g introduced a native component for ‘auto suggestions’ The <af:autoSuggestBehavior> component, to be included in inputText or inputListOfValues orinputComboboxListOfValues

66. Model Driven Suggestions The suggestions can be derived declaratively from List of Values reference on a VO Attribute Steps: On ViewObject Create ViewAccessor (for list values) Create List of Values for Attribute Link LoV to ViewAccessor In Page Add InputListOfValues component based on attribute Add af:autoSuggestBehavior with suggestions based on List of Values Binding’s suggestedItems

69. In Page:

70. Custom Suggestions Auto Suggestions can be provided by managed bean that implements signature: List getSuggestions( String currentValue) And the List returned is really List<SelectItem> Potential use cases Based on some (application wide) cached collection (of previously entered ?) values Retrieve values from WebService, file, … Use common abbreviations, codes Country code, airport Show translations in other languages

71. Static List of Countries Suggestions

72. Suggestions … or? Suggested Values do not need to be suggestions in a very literal sense What you see may not be what you get The SelectItem as a label (WYS) and a value (ISWYG) Examples: Add words to field instead of replacing value Perform selected operation on value Show an updated indicator based on the value

73. Mix Model Driven with Custom Create a managed bean that accesses ViewObject to retrieve values Use custom code to execute special queries using INSTR, LIKE or other conditions Have managed bean return items to display in the list of suggestions Based on special ordering or fuzzy logic, Suggestions

74. Candidate Managers filtered on First Name, Last Name & Job Suggestions

75. Underlying View Object

76. Page template Turns page layout inside out: the page references the template the page template determines the overall structure the page provides the content for the designated areas in the template (through the facets) Can be dynamically, context-sensitively selected using an EL expression Can also be used for areas within a page With multiple page templates used within the same page More an area template than a page template to define UI Design Patterns Tree-with-Detail-Form, Table-and-Chart, Master-Form-Detail-Table, Search block-Resultstable…

77. Using multiple page templates Two templates: mainpage and Table-Form template

78. Other page consuming the template(s)

79. Changing the micro-template

80. Summary Twinkle, twinkle little stars… #1 nugget #2 nugget #3 nugget Don’t give up [too soon] There is more in ADF than meets the eye There is a world of Java/JEE to leverage There is a community to lean on Scan release notes and monitor blog-o-sphere for valuable new (and re-discovered) nuggets Share! Yes, you too! Your findings are just as valuable. Participate in EMG and OTN Forum discussions, write blog articles, present in conferences, …

81. Session Plugging Tuesday – Reaching Out from PL/SQL (S08625 )10.15-11.15, Mariott Marquis, Salon 7 Tuesday – (JavaOne) Cross Tier Push Architecture (Don’t call us, we’ll push you) (S24722)4.30-5.15 PM, Hotel Nikko, Monterey I/II Wednesday – Push to the Limit: Rich and Proactive User Interfaces with Oracle ADF (S08620)5-6 PM, Mariott Marquis, Golden Gate A Thursday –Instant Agility in Oracle Fusion Middleware through Design Time @ Run Time (S08623)4-5 PM, Moscone West – 2020