TECNICAS ADF PARA MEJORAR LA PRODUCTIVIDAD Y LA EXPERIENCIA DE
USUARIO
Plinio ArbizuOracle ACE Director
Plinio Arbizu
• Oracle ACE Director, Fusion UX Advocate for Oracle
• Certificado en ADF y WebCenter por Oracle.
• Proyectos en Perú, México y USA
• Coautor del libro Web 2.0 solutions withOracle WebCenter
• Fundador del Grupo de Usuarios Oracle en México (ORAMEX)
• Responsable Iniciativas de Portales y Aplicaciones en S&P Solutions de México
User Experience Benefits
• Job satisfaction• Increased usage and adoption• Employee time savings • Decreased training and support calls• IT savings • Decreased paper/printing costs
Principles, Usability guidelines & Best Practices
• Oracle Usability Heuristics (UX Direct)provides user experience expertise to Oracle customers and partners for their implementations
http://www.oracle.com/webfolder/ux/applications/uxd/assets/pdf/design/usability_heuristics.pdf
• Oracle Fusion Applications User Experience Patterns and Guidelines Scientifically proven and reusable usability solutions that Oracle uses to build Oracle Fusion
Applications
http://www.oracle.com/technetwork/topics/ux/applications/gps-1601227.html
• 10 Usability Heuristics for User Interface Design by JakobNielsenThe 10 most general principles for interaction design
http://www.nngroup.com/articles/ten-usability-heuristics/
Information Architecture : Implementation
ADF Template
ADF Pages
ADF Pages
ADF Pages
More info: http://www.oracle.com/webfolder/ux/applications/fusiongps/guidelines/content/guidelines/workareamodels/index.htm
Implementation : ADF TaskFlows
• Define flows of pages and methods
• Diagram your process
• Build reusable task flows
– In other flows, inside other pages
• Advance functionality in a declarative way
– Transaction, initialization
• An extension to the JSF page flow engine
http://www.oracle.com/technetwork/es/articles/adf/experiencia-de-usuario-ux-oracle-2220231-esa.html
ADF Implementation :
• Save your work in process.• Prevent losing work in case of
a power outage, or if you step away and your computer times out
ADF Implementation :
Adding Save Points to a Task Flow
• User Interface State• Managed Beans• ADF Model State
SavePointEntry savePointEntry = new SavePointEntry();savePointEntry.setId(savePointId);savePointEntry.setName(savePoint.getAttributes().getName());System.out.println(savePointId + " " + savePoint.getAttributes().getName());
savePoints.add(savePointEntry);
Flexibility and efficiency of use
Tab will move forward one field
+ Will move backward one field
+ =
Client Side
• Can’t read HTML code
• ADF Client Side use JavaScript
• Only components with behavior, like ADF Faces tables, have a default JavaScript object representation. For all other :
– A component has an af:clientListener tag added
– The component has its clientComponent property set to true
• Search from AdfPage.PAGE– findComponentByAbsoluteId : Searches by the component ID
• Client event listen and respond to component changes– value change, disclosure, query, focus, popup …
• Listened for with af:clientListener
Example: Validate birth date
function dobValidation(evt){
var comDOB = evt.getSource();
var birthYear = comDOB.getValue().getFullYear();
//get currentYear and valid Age for PageFlow bean
var currentYear= comDOB.getProperty("currentYear");
var validAge= comDOB.getProperty("validAge");
//calculate age
var age = parseInt(currentYear)-parseInt(birthYear);
// validate if under age per country
if (parseInt(age)>=parseInt(validAge))
{
var compAge= comDOB.findComponent('itAge');
compAge.setValue(age);
}else{
alert("Customer Under Age");
comDOB.focus();
}
}
id =itAge
id = itDOB
<af:inputDate lid="itDOB" >
<af:clientAttribute name="currentYear“ value="#{currentYear}" />
<af:clientAttribute name="validAge" value="#{validAge}"/>
<af:clientListener method="dobValidation" type="blur"/>
</af:inputDate>
MyLibrary.js
Server Side
• JSF supports:– Action events
• Occur when a command component is activated, such as when a user clicks a button or a link
• Return a control flow outcome
– Value change events• Occur when the local value of a input component
changes, such as when a user selects a check box
• Are used for managing UI elements
Using the ExtendedRenderKitService class, you can add JavaScript to an event response
Example: Validate CustomNumber
private transient RichInputText itCustomerNumber;
public void customerNumberChange(ValueChangeEvent valueChangeEvent){
String customerNumber = (String)ADFUtil.evaluateEL("#{customerNumber}");
boolean validCustomer = callMethodService(“validateCustomerNumber”);
if (validCustomer==false){
openPopup(ppError);
// clean values
ADFUtil.setEL("#{customerNumber}", "");
focusComponent(itCustomerNumber.getClientId());
}
}
public void focusComponent(String clientId) {
toSend.append("var clientId =
AdfPage.PAGE.findComponentByAbsoluteId('"+clientId+"');").
append("if(clientId != null){").
append("clientId.focus();").
append("}");
}
ExtendedRenderKitService erks =
Service.getService(context.getRenderKit(), ExtendedRenderKitService.class);
erks.addScript(context, toSend.toString());
}
autoSubmit="true“
valueChangeListener=“#{customerNumberChange}”
value = “#{customerNumber}”
binding= “#{itCustomerNumber}”
MyBean.java
Every extra unit of information in a dialogue competes with the relevant units of
information and diminishes their relative visibility
Hover Details
Oracle UX : Detail on Demand
Hide and Show Details
To customize a layout: do not change the renderer; ADF Faces provides CSS hooks instead
ADF binding
ADF data control
RDBMS
ADF BC Web Service BPEL …
Ajax Render Kit
UI component
“Bindings” objectExpr. Language
MODEL UI RENDERING
ADF Ajax Page Life Cycle
Client
ADF Faces Rich Client : Skins
Building Custom Skins• To build a good skin, perform the following:
1. Create a .css file under the root of your Web application.
2. Create a trinidad-skins.xml file in the WEB-INFdirectory.
3. Set the <skin-family> element value in trinidad-config.xml.
Example : Change width
<af:inputText clientComponent="true" rows="2" autoSubmit="true" editable="always">
<f:validator binding="#{row.bindings.Description.validator}"/>
<af:clientListener type="focus" method="onFocusDescription"/>
<af:clientListener type="blur" method="onBlurDescription"/>
</af:inputText>
Example : Multiple List
Iterator itr = selectedCategories.iterator();
while(itr.hasNext())
{
Object element = itr.next();
listCategories =listCategories+"'"+element+"',";
}
ViewObjectImpl productVO = getProductVO();
productVO.setWhereClause(
" CATEGORY_NAME in ("+ listCategories +")");
SELECT ProductsBase.COST_PRICE,
ProductsBase.CATEGORY_ID,
ProductsBase.ATTRIBUTE_CATEGORY,
ProductsBase.LIST_PRICE,
ProductsBase.MIN_PRICE,
ProductsBase.PRODUCT_ID,
ProductsBase.PRODUCT_NAME,
ProductsBase.PRODUCT_STATUS
FROM PRODUCTS_BASE ProductsBase
Error messages should be expressed in plain language (no codes), precisely
indicate the problem, and constructively suggest a solution
Blog : plinioa.blogspot.comEmail : [email protected]