Thursday, December 2, 2010

Convert field to Uppercase automatically

Create a new javascript file /add to existing
function toUpperCase(evt) {
   var _filterField = evt.getCurrentTarget();
   var _value = _filterField.getSubmittedValue();
   _filterField.setValue(_value.toUpperCase());
   }
Add a javascript function to the template page
If not already in the template drop a resource from the operation palette on the page and set it to javascript. Add the source file in the properties window.
Add a client listener to the field you wish to have in uppercase and add the javascript function and use keyUp as the Type

Every time you type a letter it is converted instantly to Uppercase as the keyUp action is completed.

Add a Glass Pane to a long running DB job using a Page Template and Page Fragments

Extension to ADF Code Corner 027
“How-to show a glasspane and splash screen for long running queries”
A Glass Pane is a pop-up that prevents user-input while a large database job or query is running in the background. It uses a splash screen with an animated image giving the impression of activity while the job completes.
As an extension to ADF code Corner 027 the Pages are built with a Page Template and use Page fragments.

Elements


The Glass Pane will consist of a pop-up that is activated by a javascript function included in the page-template
Ø  glasspane.js
o   enforcePreventUserInput
o   handleBusyState
 AdfPage.PAGE.findComponentByAbsoluteId is used to “find” the glass pane popup and to do so the address of the popup needs to be configured correctly.
The exact path through the containers to the popup is required.
The popup is created as the first item in the page fragment. The page fragment is dropped as a region on the page built using the page template.
 The address is therefore   ‘TemplateId:RegionID:PopupId’  in this case ‘pt1:r1:p1’ where
Ø  pt1 is the page template
Ø  r1 is the region
Ø  p1 is the popup



Javascript File


Create the javascript file glasspane.js and save it under public-html\js (create the folder js)
function enforcePreventUserInput(evt) {
            var popup = AdfPage.PAGE.findComponentByAbsoluteId('pt1:r1:p1');
            if (popup != null)
               { AdfPage.PAGE.addBusyStateListener(popup, handleBusyState);
                  evt.preventUserInput();
                }
        }
 function handleBusyState(evt) {
            var popup = AdfPage.PAGE.findComponentByAbsoluteId('pt1:r1:p1');
            if (popup != null)
                 { if (evt.isBusy())
                     { popup.show();}
                else { popup.hide();
                          AdfPage.PAGE.removeBusyStateListener(popup, handleBusyState);
                         }
                 }
        }


Add Javascript File to Page Template

Include this file in the Template by using a Resource from the Operations Component panel.
 Drop the Resource onto the Template Page


Select javascript as the type and in the properties window set the source to be /js/glasspane.js






Display Glass Pane


To display a glass pane we require a pop-up and a client listener.

Pop-Up

On the Page fragment where the glass pane will be displayed add a popup as the first item in the structure window under the jsp:root




In the Popup add a dialog window .



Add an image item and an animated image (to give the impression of progress)
Add an Output Text field value and set the value = .....please wait.

Set the Popup properties in the Properties Window

Common – ContentDelivery  =  immediate
Advanced- ClientComponent = true




Client Listener


On the button that calls the query or database job add a clientListener.

Add enforcePreventUserInput as the method (the javascript function we created earlier)


Ensure the PartialSubmit of the button is set to true (the default)




Thursday, August 19, 2010

Add a SelectOneChoice List to a non-database item

The problem I was faced with was to move a set of records from one "master" record to another "master" record. For example move all employees from one department to another department. The method is simple enough, select all the employee records and change the Foreign Key to point to the new department, the Foreign key is the Primary key of the master record and is a Database generated sequence number.

In forms I would have used a non-database drop-down list item displaying a list of departments with the description displayed in the list and the Primary key as the value selected allowing the user to make the selection easily.

To achieve the same result in my ADF application I devised this approach.
Step 1


       Create a Read-Only View of the table the list will be based on i.e. Departments

       Go to the bindings Tab of the page that will contain the drop down list.


       Select the Green + icon in the bindings section and select the tree binding from the list.


                        This will present you with the Create Tree Binding Screen


                        In the Root Data Source Select Add and choose the read only view you created earlier.


      Select the Green + icon next to the Tree Level Rules and choose AddRule, this will create a rule entry for the top-level View Object.


Shuttle both of the attributes from the available list to the display list if not already there.
Press OK. 
We have now created our List of Values. 


Step 2
The next step is to add this LOV to our SelectOneChoice list.


Drop a SelectOneChoice component on the page and click Finish without any configuration.
In the Structure window remove the f:selectitems component from the SelectOneChoice.


On the right-click menu choose Insert inside af:selectOneChoice component, ADF faces - For each.


Select the af:forEach  component and in the properties window we need to set the Items property to the tree binding-rangeSet method entry.


Select the arrow next to the Items Property and in the Expression Builder choose

  • bindings
  • <<read only view name.>>
  • rangeSet

the result should be similar to #{bindings.ViewDept1.rangeSet}
Set the Var property to be lov. This defines the name of the variable at runtime that is used to populate the list. 


Select the af: forEach component and insert inside a JSF Core : Select Item (not Select Items).


In the Structure Window select the f: selectItem component and edit its label and value properties.


label = #{lov.DepartmentName}
value= #{lov.DepartmentPrimaryKey}

We have now designed our Drop Down List.


If we run the page we can now select from our list. 


The last thing we have to do is to set the Value item in the properties of the SelectOneChoice field. This will be the field that will hold the "value" of the SelectOneChoice field.


I am using a Number variable deptPrimaryKey in a backing bean {backingbeanscope.backing_dept.deptPrimarykey} but equally I could also set it to a parameter #{pageFlowScope.deptPrimaryKey} if passing control to another page.


Now as you select the Department in the drop down list the value is available in the backing bean or pageFlowScope parameter. 










Sunday, August 15, 2010

Pass a parameter to a Page in ADF and execute a query.

Having worked with Oracle Forms for 20 years I have become accustomed to developing forms and applications in a certain manner. My progression to Jdeveloper ADF has meant that a lot that I took for granted about how to build forms and add functionality to them is no longer the case and I must use different methods to achieve the desired result.

To execute a query with a passed parameter in forms I would use a pre-query trigger to copy the parameter to the requisite field and then execute the query.

In ADF I can use the ExecuteWithParameters operation but only if I have first created the view with a bind-variable that I intend to use. So far OK.

The standard way we are instructed to do this is to add an action binding in the page definition to the ExecuteWithParameters operation, set the parameter we are going to use and use an invokeAction in the executables to bind to the action and fire on page-loading.

I am using a Bounded task flow with page fragments. The page I am calling can be called from numerous points in the Bounded task flow, each point setting a parameter (in my case {pageFlowScope.<>>}.
No matter which way I passed the parameter to the ExecuteWithParameters  action it failed to recognise or use the parameter, executing with a null value or whatever default value I set for the bind-variable.

The solution, dispense with the ExecuteWithparameters and invokeAction on the page and use a method call bound to executeWithParameters call on the page instead. It works perfectly.

I'm not sure if this is a bug or just something I was doing but I shall use the Method Call in my bounded taskflow in future.