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/

"Develop User Interface Services – Not Pages" Steven Davelaar, Oracle Consulting

Information Architecture : User Interface Shell UsageGuidelines

Oracle UX : Work Area

Easy and intuitive access to services/menu options

Old New

Demo

Information Architecture : Implementation

ADF Template

ADF Pages

ADF Pages

ADF Pages

Information Architecture : Implementation

1. Use Out-Of-Box Templates

2. Create custom Templates

More info: http://www.oracle.com/webfolder/ux/applications/fusiongps/guidelines/content/guidelines/workareamodels/index.htm

Oracle UX: Work Areas

Oracle UX : No- Tabs Work Area Model

No- Tabs Work Area Model

DynamicTabs Work Area Model

Demo

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

Using a Bounded Task Flow

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

Demo

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);

Accelerators -- unseen by the novice user -- may often speed up the

interaction for the expert user

Flexibility and efficiency of use

Tab will move forward one field

+ Will move backward one field

+ =

Demo

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 : Focus

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

"Develop User Interface Services – Not Pages" Steven Davelaar, Oracle Consulting

Blog : plinioa.blogspot.comEmail : parbizu@spsolutions.com.mx