Your SlideShare is downloading. ×
0
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How to Bring Common UI Patterns to ADF

1,680

Published on

When working with enterprise applications, you want to have the same user experience that you know from for instance office applications and browsers. People know how to use the features that can be …

When working with enterprise applications, you want to have the same user experience that you know from for instance office applications and browsers. People know how to use the features that can be found in browsers such as bookmarking, favorites, and working with tabs. The search mechanism provided by Google, that uses suggestions based on the text typed by the user, is so common that people expect this in every application. And there are more of these UI patterns. In this session, you will learn how to implement some of the common UI patterns in your ADF application.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,680
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
60
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  •  
  • Transcript

    • 1. ADFHow to Bring Common UI Patterns to ADFLuc Bors, AMIS, The NetherlandsWednesday, June 27, 2012ODTUG KScope 12San Antonio, Texas, USA
    • 2. UI PATTERNS
    • 3. FUSION APPS PATTERNS
    • 4. RECOGNIZE THESE ?
    • 5. RECOGNIZE THESE ?
    • 6. TABBED NAVIGATION
    • 7. TABBED NAVIGATION
    • 8. CLOSE ALL / CLOSE OTHERS
    • 9. CLOSE ALL / CLOSE OTHERS
    • 10. CLOSE ALL / CLOSE OTHERS• e
    • 11. CAN YOU DO THIS IN ADF ?
    • 12. CREATE THE CONTEXT MENU<af:popup id="contextMenu" contentDelivery="lazyUncached" eventContext="launcher" launcherVar="source"><af:menu id="men1" text="#{source.attributes.menuInvokedOnTab}"> <af:commandMenuItem id="cmi1" text="close“ actionListener="#{viewScope.jhsDynTabContext.closeThis}"> <af:setPropertyListener from="#{source.attributes.menuInvokedOnTab}" to="#{viewScope.jhsDynTabContext.menuInvokedOnTab}" type="action"/> </af:commandMenuItem> <af:commandMenuItem id="cmi2" text="close others“ actionListener="#{viewScope.jhsDynTabContext.closeOthers}">……. </af:commandMenuItem> <af:commandMenuItem id="cmi3" text="close all“ actionListener="#{viewScope.jhsDynTabContext.closeAll}"> …………….. </af:commandMenuItem> </af:menu></af:popup>
    • 13. INVOKING THE CONTEXT MENU<af:navigationPane ...........> <af:commandNavigationItem ...............> <f:attribute name="tabId" value="#{tab.id}"/> <af:clientListener method="showMenu" type="contextMenu"/> <af:clientAttribute name="menuInvokedOnTab" value="#{tab.id}"/> </af:commandNavigationItem></af:navigationPane >function showMenu(evt) { var popup = AdfPage.PAGE.findComponent("pt:contextMenu"); …………….. popup.show(hints); evt.cancel();}
    • 14. USE EXISTING FUNCTIONALITY
    • 15. CLOSE THIS TABpublic void closeThis(ActionEvent action) { String id = getMenuInvokedOnTab(); List<String> tabsToRemove = new ArrayList(); for (DynTab t : getActiveTabList()) { String x = t.getId(); if (id == x) { tabsToRemove.add(x); } } for (String t : tabsToRemove) { removeTab(t); }}
    • 16. CLOSE OTHER TABSpublic void closeOthers(ActionEvent action) { String id = getMenuInvokedOnTab(); List<String> tabsToRemove = new ArrayList(); for (DynTab t : getActiveTabList()) { String x = t.getId(); if (id != x) { tabsToRemove.add(x); } } for (String t : tabsToRemove) { removeTab(t); }}
    • 17. CLOSE ALLpublic void closeAll(ActionEvent action) { List<String> tabsToRemove = new ArrayList(); for (DynTab t : getActiveTabList()) { tabsToRemove.add(t.getId()); } for (String t : tabsToRemove) { removeTab(t); }}
    • 18. CLOSE ALL / CLOSE OTHERS
    • 19. MOST RECENTLY USED (..HISTORY)
    • 20. IMPLEMENTATION• Record activities – Use setPropertyListeners• Historybean (session scope) that manages the collection of navigation events – Display Label, Entity Type and Primary Key – bean calls …• BusinessService to record event in database for this user – (Optional) Also remove events for deleted records!
    • 21. CREATE THE BEAN • Create History bean<managed-bean id=“1"> <managed-bean-name id=“2"> recentHistoryBean</managed-bean-name> <managed-bean-class id=“3"> nl.amis.jsf.history.beans.RecentHistoryBean </managed-bean-class> <managed-bean-scope id=“3">session</managed-bean-scope></managed-bean>
    • 22. INTERCEPT ACTIVITY<af:commandLink id="ot3" text="#{row.LastName}" action="edit" actionListener="#{recentHistoryBean.add}"> <af:setPropertyListener from="#{row.EmployeeId}“ to="#{recentHistoryBean.entityInstanceIdentifier}" type="action"/> <af:setPropertyListener from="#{row.LastName}“ to="#{recentHistoryBean.entityInstanceDisplayLabel}" type="action"/> <af:setPropertyListener from="#{EMP}" to="#{recentHistoryBean.entityType}" type="action"/></af:commandLink>
    • 23. RECORD ACTIVITYpublic void add(ActionEvent actionEvent) { // Add event code here... recentHistory.add(new HistoryEvent(new oracle.jbo.domain.Date( , entityType , entityInstanceIdentifier , entityInstanceDisplayLabel)); HRServiceImpl hrAppMod = (HRServiceImpl) pageTemplateBc.getDataControl().getApplicationModule(); hrAppMod.recordAndPersistHistoryEntry(recentHistory.get(0));
    • 24. PERSIST ACTIVITYpublic void recordAndPersistHistoryEntry(HistoryEvent event) { String statement = "RECENT_HISTORY_MANAGER.RECORD_AND_PERSIST_ENTRY(?,?,?,?)"; callStoredProcedure(statement, new Object[] {event.getEntityType() , event.getKey().toString() , event.getDisplayLabel(), null}); }
    • 25. THE RESULT
    • 26. DO YOU RECOGNIZE THIS ??
    • 27. GOOGLE SEARCH
    • 28. ADF QUERY COMPONENT ……
    • 29. PREPARE THE DATABASE • Make sure that the HR user is allowed to use the ctxsys.ctx_ddl packagegrant EXECUTE on CTXSYS.CTX_DDL to HR
    • 30. CREATE A SEARCH PACKAGEfunction get_emp_search_item ( p_rowid in rowid ) returnvarchar2 asbegin for b in (select e.first_name , e.last_name , e.email , e.phone_number , j.job_title from employees e left join jobs j using (job_id) where e.rowid = p_rowid) loop return b.first_name || || b.last_name || ( || b.email || , || b.phone_number || , || b.job_title || ); end loop;end get_emp_search_item;
    • 31. CREATE THE ORACLE TEXT INDICES-- Configure preferences...ctx_ddl.create_preference(emp_datastore, user_datastore);ctx_ddl.set_attribute(emp_datastore, procedure , ot_search.create_emp_search_item);-- Create the indices... execute immediate create index emp_search_index on employees(last_name) indextype is ctxsys.context parameters (datastore emp_datastore wordlist wordlist lexer lexer stoplist stoplist sync (on commit));
    • 32. THE BASE CLASSES• OracleTextSearchSupport: • Converts the given user input (the search command): <code>searchValue</code> to an Oracle Text search-string.• BaseViewObjectImpl • overrides getCriteriaItemClause(ViewCriteriaItem vci)• BaseViewDefImpl • implementation to provide the following custom properties on ViewObjects: • ORACLE_TEXT_SEARCH_ATTRIBUTE: To mark the column in which the seach info is queried • ORACLE_TEXT_INDEX_ATTRIBUTE: To mark the database column on which the index was defined in the database.
    • 33. CREATE THE MODEL PROJECT
    • 34. CREATE THE MODEL PROJECT
    • 35. VIEWCONTROLLER : A BEAN<managed-bean-name id="1">departmentsQuickSearch</managed-bean-name> <managed-bean-class id="4"> adfplus.quicksearch.controller.bean.QuickSearchBean </managed-bean-class> <managed-bean-scope id="2">pageFlow</managed-bean-scope> <managed-property id=“8"> <property-name id=“10">iteratorBindingName</property-name> <property-class>java.lang.String</property-class> <value id="9">DepartmentsVO1Iterator</value> </managed-property> <managed-property id="11"> <property-name id="13">searchAttribute</property-name> <property-class>java.lang.String</property-class> <value id="12">DepartmentSearchString</value> </managed-property> <managed-property id="14"> <property-name id="15">searchIteratorBindingName</property-name> <property-class>java.lang.String</property-class> <value id="16">DepartmentsVO1IteratorQuickSearch</value> </managed-property>
    • 36. VIEWCONTROLLER : A SUBFORM<af:subform id="s1" defaultCommand="cb7"> <af:panelGroupLayout id="pgl4" layout="horizontal" inlineStyle="margin:10px;"> <af:inputText label="Search" id="it2“ value="#{pageFlowScope.departmentsQuickSearch.searchValue}"> <af:autoSuggestBehavior suggestItems= "#{pageFlowScope.departmentsQuickSearch.suggestItems}" maxSuggestedItems="10"/> </af:inputText> <af:commandButton text="Search" id="cb7" action="#{pageFlowScope.departmentsQuickSearch.go}" partialSubmit="true"/> </af:panelGroupLayout></af:subform>
    • 37. VIEWCONTROLLER : SEARCH METHODprivate synchronized List<SelectItem> search(String searchValue) { DCIteratorBinding iter = getSearchIteratorBinding(); applySearchCriteria(iter, searchAttribute, searchValue); translations.clear(); lastSuggestList = new ArrayList<SelectItem>(); lastSearchValue = searchValue; Row[] rows = iter.getAllRowsInRange(); for (Row row : rows) { String description = (String)row.getAttribute(searchAttribute); lastSuggestList.add(new SelectItem(description)); translations.put(description, row.getKey()); }return lastSuggestList; }
    • 38. THE RESULT
    • 39. REAL TIME UPDATES
    • 40. THE CONCEPT
    • 41. THE IMPLEMENTATION; THE DATABASEgrant change notification to <user>;
    • 42. REGISTER FOR DBQRCN (STEP 1)public void startChangeNotification(){ DatabaseChangeRegistration dcr = null; String query = "SELECT * from DEPARTMENTS"; Properties prop = new Properties(); prop.setProperty(OracleConnection.DCN_NOTIFY_ROWIDS ,"true");prop.setProperty(OracleConnection.DCN_QUERY_CHANGE_NOTIFICATION ,"true"); try { dcr = conn.registerDatabaseChangeNotification(prop); RdbmsChangeEventListener listener = new RdbmsChangeEventListener(this); dcr.addListener(listener); ………..
    • 43. REGISTER FOR DBQRCN (STEP 2)// second step: add objects in the registration: Statement stmt = conn.createStatement();((OracleStatement)stmt).setDatabaseChangeRegistration(dcr); ResultSet rs = stmt.executeQuery(query); while (rs.next()){} rs.close(); stmt.close();
    • 44. WHATS NEXT ….
    • 45. SETUP ACTIVE DATA COMPONENTpublic void setupActiveData() { ActiveModelContext context = ActiveModelContext.getActiveModelContext(); Object[] keyPath = new String[0]; context.addActiveModelInfo( this , keyPath , "activemessage"); System.out.println("add active bean as listener"); databaseNotificationProcessor.registerAsListener(this);}
    • 46. SETUP THE ACTUAL UPDATEpublic void triggerDataUpdate(String message) { this.message = message; counter.incrementAndGet(); ActiveDataUpdateEvent event = ActiveDataEventUtil.buildActiveDataUpdateEvent( ActiveDataEntry.ChangeType.UPDATE, counter.get(), new String[0], null, new String[] { "activemessage" }, new Object[] { message }); System.out.println("fireActiveDataUpdate"); fireActiveDataUpdate(event); }
    • 47. IMPLEMENTATION IN THE PAGE <af:activeOutputText value="#{pageFlowScope.trackChangesBean.updates}" id="aot1" visible="false"> <af:clientListener method="activeDataCallback" type="propertyChange"/></af:activeOutputText> <af:resource type="javascript"> activeDataCallback = function (event) { var button = AdfPage.PAGE.findComponentByAbsoluteId("pt1:r1:0:cb1"); button.setVisible(true); } </af:resource>
    • 48. THE RESULT
    • 49. PATTERNS UNDER INVESTIGATION• Grouping Tabs• Drag and Drop Tabs in UI Shell – dragSource and dropTarget• Duplicating Tabs – Restarting a new instance of a taskflow
    • 50. PATTERNS UNDER INVESTIGATION• Adding Sticky Notes – dragSource and dropTarget – Contextual events – Concept : http://technology.amis.nl • Search for: adf-11g-dragn-drop-and-contextual-events/
    • 51. RESOURCES
    • 52. RESOURCES
    • 53. SUMMARY
    • 54. ADFHow to Bring Common UI Patterns to ADFLuc Bors, AMIS, The NetherlandsLuc.Bors@amis.nlLucBors@gmail.comFollow me on Twitter : @lucb_Wednesday, June 27, 2012ODTUG KScope 12San Antonio, Texas, USA

    ×