How to Bring Common UI Patterns to ADF
-
Upload
lucbors -
Category
Technology
-
view
1.687 -
download
3
description
Transcript of How to Bring Common UI Patterns to ADF
ADFHow to Bring Common UI Patterns to ADF
Luc Bors, AMIS, The NetherlandsWednesday, June 27, 2012 ODTUG KScope 12San Antonio, Texas, USA
UI PATTERNS
Pattern Name
Problem statement
Use when ?Solution
Examples
Pattern Description
FUSION APPS PATTERNS
RECOGNIZE THESE ?
ADF Train Taskflow
RECOGNIZE THESE ?
ADF Breadcrums
TABBED NAVIGATION
TABBED NAVIGATION
ADF UI Tabshell
CLOSE ALL / CLOSE OTHERS
CLOSE ALL / CLOSE OTHERS
CLOSE ALL / CLOSE OTHERS
• e
CAN YOU DO THIS IN ADF ?
Create the menu
Invoke the menu
Close the tab(s)
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>
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();}
USE EXISTING FUNCTIONALITY
CLOSE THIS TAB
public 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); }}
CLOSE OTHER TABS
public 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); }}
CLOSE ALL
public void closeAll(ActionEvent action) {
List<String> tabsToRemove = new ArrayList();
for (DynTab t : getActiveTabList()) { tabsToRemove.add(t.getId()); } for (String t : tabsToRemove) { removeTab(t); }}
CLOSE ALL / CLOSE OTHERS
MOST RECENTLY USED (..HISTORY)
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!
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>
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>
RECORD ACTIVITY
public 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));
PERSIST ACTIVITY
public 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}); }
THE RESULT
DO YOU RECOGNIZE THIS ??
GOOGLE SEARCH
ADF QUERY COMPONENT ……
I want 1 search field !
Use Oracle Text
PREPARE THE DATABASE
• Make sure that the HR user is allowed to use the ctxsys.ctx_ddl package
grant EXECUTE on CTXSYS.CTX_DDL to HR
CREATE A SEARCH PACKAGE
function get_emp_search_item ( p_rowid in rowid ) return varchar2 as begin 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;
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)'')';
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.
CREATE THE MODEL PROJECT
CREATE THE MODEL PROJECT
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>
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>
VIEWCONTROLLER : SEARCH METHOD
private 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; }
THE RESULT
REAL TIME UPDATES
THE CONCEPT
THE IMPLEMENTATION; THE DATABASE
grant change notification to <user>;
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); ………..
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();
WHATS NEXT ….
Database is prepared
Queries are registered
Now its time for the UI
SETUP ACTIVE DATA COMPONENT
public 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);}
SETUP THE ACTUAL UPDATE
public 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); }
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>
THE RESULT
MAGIC
PATTERNS UNDER INVESTIGATION
• Grouping Tabs• Drag and Drop Tabs in UI Shell
– dragSource and dropTarget
• Duplicating Tabs– Restarting a new instance of a taskflow
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/
RESOURCES
RESOURCES
SUMMARY
If you really want it …..…ADF can do it
Think out of the box
ADFHow to Bring Common UI Patterns to ADF
Luc Bors, AMIS, The Netherlands
[email protected]@gmail.comFollow me on Twitter : @lucb_
Wednesday, June 27, 2012 ODTUG KScope 12San Antonio, Texas, USA