Tag Archives: adf ui

Oracle ADF 11gR2 Development Beginner’s Guide – Published!!


Book Details

Language : English
Paperback : 330 pages [ 235mm x 191mm ]
Release Date : April 2013
ISBN : 1849689008
ISBN 13 : 9781849689007

Reviewed by : Frank Nimphius, Sten E. Vesterli
Author(s) : Vinod Krishnan

Topics and Technologies : All Books, Oracle Applications, Beginner’s Guides, Enterprise, Oracle

This book is intended for beginners who know a little about Java programming and would like to learn how to develop rich web applications using the Oracle Application Development Framework.

http://www.packtpub.com/oracle-adf-11gr2-development-beginners-guide/book

Chapter 1, Installing and Configuring Jdeveloper IDE – This is the first time you are working with Jdeveloper, Where do you start?  – In this chapter you will learn how to install and configure Jdeveloper IDE, how to work with the IDE.

Chapter 2, Getting Started with ADF – you don’t know what is ADF? You would love to see a running example – You will learn the basics of Model-View-Controller Architecture, How ADF fits into the MVC patter, learn the components of ADF, building a simple ADF application.

Chapter 3, Understanding the Model Layer– Do you know how Business components work, can we explore? – You will learn about ADF Business components and how it works, familiarize with the components..

Chapter 4, Validating and Using the Model data– How will you do validation for your model? Learn how to write business logic declaratively, learn the groovy expressions, and manage transactions and exposing the data.

Chapter 5, Binding the Data– Do you know how to expose the model data to the UI layer? This chapter teaches how to use the data control and bind the data for the user interface.

Chapter 6, Displaying the Data– Do you want to design your page? You will learn how to display the data in the UI using layers and components.

Chapter 7, Working with Navigation Flows–  You would love to pass information from one page to another, but how? – Learn how to use the page flows and activities pass parameters and about ADF lifecycle.

Chapter 8, Layout with Look & Feel – Do you see your page good for the user? You will learn how to style the page and make it presentable.

Chapter 9, Implementing Security – You would love to secure your page, don’t you? This chapter will help in securing the page that you have created, Allow and restrict access for different roles and groups.

Chapter 10, Deploying the ADF Application – How do you make your application available to your friend? This chapter will help you deploy the application to the server.

Chapter 11, Advanced Features of ADF – Now you know the basics, what’s next? – Advanced features of the ADF11gR2 framework is explained in this chapter.

SOA – a quick view


What is SOA?

SOA is standard based method of system development and integration

What are the benefits?

  • Reusability
  • Integration
  • Interoperability
  • Agile development
  • Scalability
  • Cost Efficient

What are all the ways to implement services?

  • Point to point approach
  • Vendor specific implementation
  • CORBA
  • Web services
  • SCA-style implementation

What are Services?

  • Building blocks of SOA
  • Interface and message structure definitions
  • Standard protocol for interoperability

What are SOA standards?


What is SCA [Service Component Architecture]?

SCA provides a programming model for building applications using SOA

What are the difference between SOA and SCA?

  • SOA is an approach or implementation style and SCA uses SOA to build a composite application
  • SOA is architectural style but SCA is assembly model and defines/design

What are the elements of SCA?

What is SDO [Service Data Object]?

  • Representation of data source in XML format and specifes methods to create, delete and modify data
  • Simplify and unify the way in which applications handles the data

What is EDN [Event Driven Network]?

  • To handle asynchronous messaging arising from a business event
  • Supports publish and subscribe model
  • Aligns with Event driven Architecture [EDA]



How to add FavIcon to the ADF page


I bet this is a common question among ADF developers who wish to have their own favicon for their page

Please follow the steps to achieve the same

add the following facet to the af:document tag of your adf page

<af:document id="d1">
..
..
..
<f:facet name="metaContainer">
 outputText escape="false"
 value='png" href="#{facesContext.externalContext.requestContextPath}/favicon.ico">' id="o1"/>
 </f:facet>
</af:document>


please note that the favicon specified in the value attribute in the outputext should be in the root-level of your web application

How to check pending changes in the page when browser back button is clicked


set the following property in the af:document tag of your page

<af:document id="d1" uncommittedDataWarning="on">

uncommittedDataWarning - Specifies whether users should be warned about uncommitted data when navigating off the page or region. Setting this property to ‘on’ will enable the warnings.
we can also call

ViewPortContext.isDataDirty();

to check for any uncommitted data

Show dialog when a page is fully loaded


1. Add popup and outputText component at the end of your page (make sure popup is before outputText in the page structure)

2. Create bean binding for popup as well as outputText.

3. In the getter of outputText, launch popup programatically.

4. Set visible=false for outputText

Javascript code to fire the event


The following function can be called using the af:clientListener on any event

function showMenu(event){
 var adfRichMenu = event.getSource();
 adfRichMenu.getPeer().show(null,true);

}

Difference between commandToolBarbutton and commandButton


Ever wonder what is the difference between a commandToolBarButton and the commandButton

here it goes

CommandToolBarButton – partialSubmit – Default Value: true
whether the action should be done through a partial page submit or not. The default is true for commandToolBarButton, so be sure to specify partialTriggers if content needs to be updated.

CommandButton – partialSubmit – Default Value: false
whether the action should be done through a partial page submit or not. Default is false: no partial page submit; the full page will be refreshed. When set to true, the full page will not be refreshed. To re-render specific components on your page in response to the partial page submit, you have to tell ADF Faces. The easiest way to do this is with the partialTriggers attribute.

Placeholder Datacontrol


There are two types of development in ADF development using jdeveloper. ui-first approach and data-first approach.

ui-first approach – design the UI first and then the data

data-first approach – design the data first and then design the UI accordingly.

In the first approach, we are sure that its very hard to design a real-time web application without some data. For this purpose adf provides a placeholder datacontrol using which we can design the page accordingly. The placeholder datacontrol is a simulation of actual data control in realtime scenario and we have full options to design the page without the actual data using this.

To start with,

In the Application Navigator, right-click the project and choose New

In the New Gallery, expand Business Tier, select Data Controls and then Placeholder Data Control, and click OK

Enter the values for place holder name, Directory name, Description and click ok

Datacontrol.dcx, adfm.xml, placeHolder.xml file gets created

Now, right-click the created datacontrol in the panel and select ‘Create Placeholder data type

create the attributes and click ok

The created datacontrol is exposed in the panel like a normal datacontrol

The attributes that are exposed can be dragged and dropped to the page as usual

How to invoke method before the page loads in ADF?


Here is the tutorial on how to invoke a method before the page loads in ADF. Let’s assume that you have a method in the application module, which will have to be invoked before the page load. For this, you have to expose this method as a client method using the client interface option for the application module. Click the edit icon and you will see your method listed in the Available list. Shuttle the method to Selected list and press ‘ok’. After shuttling the method you will see that the method gets added to the client interface. The method that we added will be exposed to the view layer through the application module data control. You have to refresh the data control to see your method. Now to get the binding for our method we have to add a method action binding to the page definition file and select the method that is exposed in the data control. We select our method from the Operation and click ‘ok’. After that we have to create an invokeAction in the Executables section to invoke the method action. We select our method from the list for the Binds and select Refresh as ‘always’.

now the method action binding and the invoke action is added to the page definition file.By default the invokeAction binding is added as a last executable. But we want to invoke the action on page load, so we move the invoke action to the first place to execute initially before any other executable. This can be done by dragging the invokeAction to the first place. Now whenever you run your page you will see the control goes to the method automatically.

download the sample project from this location

Ways to setup Querymode programatically


How to set the query mode for the af:query component programatically?

The query component provides two ways of searching. BASIC and ADVANCED mode.
Basic mode renders the query panel with the viewcriteria defined and allows the user to search based on the query criteria
Advanced mode helps the user to provide advanced options for the user to search based on the operators. It also provides the user to add more fields to the query criteria.

public Boolean setAdvancedMode(){
String expression = "#{bindings.<searchregionbindingfrompagedef>.queryDescriptor}";
FacesContext facesContext = getFacesContext();
Application app = facesContext.getApplication();
ExpressionFactory elFactory = app.getExpressionFactory();
ELContext elContext = facesContext.getELContext();
ValueExpression valueExp =
elFactory.createValueExpression(elContext, expression,
Object.class);
QueryDescriptor descriptor =
(QueryDescriptor)valueExp.getValue(elContext)
;
descriptor.changeMode(QueryDescriptor.QueryMode.ADVANCED);
return true;
}

lets drill down deeply into the code to check what are we doing

String expression = "#{bindings.<searchregionbindingfrompagedef>.queryDescriptor}";
  • getting the expression for the query binding from the pagedef and storing it in a string
FacesContext facesContext = getFacesContext();
Application app = facesContext.getApplication();
ExpressionFactory elFactory = app.getExpressionFactory();
ELContext elContext = facesContext.getELContext();
  • getting the Facescontext reference from FacesContext.getCurrentInstance();
  • getting the application from the facesContext
  • getting the expresionFactory for the application
  • getting the elContext from the FacesContext
ValueExpression valueExp =
elFactory.createValueExpression(elContext, expression,
Object.class);

create a value expression by passing the elcontext and the expression where Object type is expected

QueryDescriptor descriptor =
(QueryDescriptor)valueExp.getValue(elContext);
descriptor.changeMode(QueryDescriptor.QueryMode.ADVANCED);

The value from the valueExpression object is casted to the QueryDescriptor object
As we got the reference to the QueryDescriptor, we call the changeMode method to change the mode to QueryDescriptor.ADVANCED