Category Archives: Blog


Customize your Auto Suggest behavior List of Values

Posted by in Blog | November 11, 2016

Customizing input components to improve user experience is useful and, in most cases, necessary. Several interesting concepts for customization of list of values using auto suggest behavior are explored in this blog post.

Introduction

Using List of Values in conjunction with Auto Suggest Behavior is a common practice, but their customization has a couple of quirks that may deter you from using them. The following topics are explored in this blog post:

  • Auto Suggest Behavior list customization
  • Creating and changing View Criteria programmatically

Examples in this blog post are tied to the default HR schema found in Oracle XE.

Components

The simplest use case that showcases everything mentioned in the introduction is a .jsf page with following page code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!--?xml version='1.0' encoding='UTF-8'?-->
<!DOCTYPE html>
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
   <af:document title="KickStartAutoSuggest.jsf" id="d1">
       <af:messages id="m1"/>
       <af:form id="f1">
           <af:panelFormLayout id="pfl1" maxColumns="2">
               <f:facet name="footer"/>
           </af:panelFormLayout>
           <af:panelGroupLayout id="pgl1" layout="horizontal">
               <af:inputComboboxListOfValues id="jobTitleId"
                                             popupTitle="Search and Select: 
                                                         #{bindings.JobTitle.hints.label}"
                                             value="#{bindings.JobTitle.inputValue}"
                                             label="#{bindings.JobTitle.hints.label}"
                                             model="#{bindings.JobTitle.listOfValuesModel}"
                                             required="#{bindings.JobTitle.hints.mandatory}"
                                             columns="#{bindings.JobTitle.hints.displayWidth}"
                                             shortDesc="#{bindings.JobTitle.hints.tooltip}"
                                             binding="#{AutoSuggestBean.autoSuggestComponent}"
                                             partialTriggers="b1"
                                             searchDialog="none"
                                             autoSubmit="true"
                                             autoTab="true">
                   <f:validator binding="#{bindings.JobTitle.validator}"/>
                   <af:autoSuggestBehavior
                                   maxSuggestedItems="-1"
                                   suggestedItems="#{AutoSuggestBean.customSuggestedItems}"/>
               </af:inputComboboxListOfValues>
               <af:spacer width="10"
                          height="10"
                          id="s1"/>
               <af:button text="Remove"
                          id="b1"
                          actionListener="#{AutoSuggestBean.removeSelectedFromList}"/>
           </af:panelGroupLayout>
       </af:form>
   </af:document>
</f:view>

Result of above code is shown in Figure 1 – Page Components.

result_1

Figure 1 – Page Components

The “JobTitle” combo box with list of values is bound to an entity-based view object JobsVO with JobTitleLOV set as a List of Values parameter of the JobTitle attribute. Figure 2 – JobsVO View Object Attributes shows Attribute List and Attribute on which List of Values is applied while Figure 3 – List of Values definition shows how the List of Values is bounded with the specific Attribute.

editor_1_1

Figure 2 – JobsVO View Object Attributes

editor_2

Figure 3 – List of Values Definition

In order to do sorting of data on specific List of Values defined for specific View Object, and at the same time avoid doing sorting globally for List of Values and all its references View Accessor of View Object should be accessed and edited as in Figure 4 – Sorting View Accessor. In same way default View Criteria, Parameter Values and event Tuning can be achieved for specific View Accessor.

editor_3

Figure 4 – Sort of View Accessor

af:inputComboboxListOfValues’ dropdown menu shows all available JobTitleLOV members. Usage is displayed in following Figure 4 – Dropdown List

editor_4

Figure 5 – Dropdown List

af:autoSuggestBehavior shows the JobTitleLOV members that contain the string user has inputted. Usage is presented in Figure 4 – Auto Suggest Behaviour. That behavior is customizable and explained in this blog post.

editor_5

Figure 6 – Auto Suggest Behavior

 

af:button “Remove” is the main focus of this blog post. It removes the currently selected value from both the af:inputComboboxListOfValues and the af:autoSuggestBehavior by constructing and applying custom view criteria programmatically. It can be used multiple times to remove multiple values.

Implementation

Auto Suggest Behavior list customization
af:autoSuggestBehavior’s backing bean method is shown below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public List customSuggestedItems(String string) {
// getting the view object
AppModuleImpl am = getAppModule();
JobsVORowImpl vr = (JobsVORowImpl) am.getJobsVO1().getCurrentRow();
RowSet rs = vr.getJobTitleLOV1();
JobTitleLOVImpl jo = (JobTitleLOVImpl) rs.getViewObject();
 
// filtering view object's rows and generating a suggested item list
Row[] rows = jo.getAllRowsInRange();
String title = "";
List l = new ArrayList();
for (Row r : rows) {
title = r.getAttribute("JobTitle").toString();
if (title.toUpperCase().contains(string.toUpperCase())) {
SelectItem si = new SelectItem();
si.setLabel(title);
si.setValue(title);
l.add(si);
}
}
return l;
}

Backing bean code is split into two main parts. The first part of the code gets the view object containing the list of values we want to use for the autosuggest behavior. The second part of the code simply filters all rows by comparing them to the string parameter (string parameter contains the value user has entered in the combo box). The simplest way to customize its behavior is to alter the “if” statement at line 49. The List should contain all values that will be presented to the user when they enter a String s value into the combo box.
NOTE: be vary of executing queries in this method because it executes each time a new character is entered into the combo box so it could be wise to consider a length of user input so that query will be executed after certain number of characters has been entered.

Creating and changing custom view criteria programmatically
The first step in creating and applying custom view criteria programmatically is creating a method in the application module implementation class. In this example, we will create view criteria that act like a dynamic SQL where clause with “NOT IN” operator and excludes any number of values from our list of values view object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
public void updateViewAccessor1(String s) {
    // getting the current view criteria
    JobsVORowImpl cro = (JobsVORowImpl) this.getJobsVO1().getCurrentRow();
    JobTitleLOVImpl clov = (JobTitleLOVImpl) cro.getJobTitleLOV1().getViewObject();
    ViewCriteria vco = clov.getViewCriteria("showCaseViewCriteria");
 
    // initial parameter, used only during first execution
    String newParameters = "'" + s + "'";
 
    // if view criteria already exists, find old parameters and append the new one
    if (vco != null) {
        List l = vco.getRows();
        Iterator i = l.iterator();
        while (i.hasNext()) {
            Row r = (Row) i.next();
            String viewCriteria = r.getAttribute(JobTitleLOVRowImpl.JOBTITLE).toString();
            String oldParameters =
                viewCriteria.substring(viewCriteria.indexOf("(", 1) + 1, viewCriteria.indexOf(")", 1));
            newParameters = oldParameters + ",'" + s + "'";
        }
    }
 
    // create the view criteria, apply it and execute query
    ViewCriteria vc = clov.createViewCriteria();
    vc.setName("showCaseViewCriteria");
    ViewCriteriaRow vcr = vc.createViewCriteriaRow();
    vcr.setAttribute(JobTitleLOVRowImpl.JOBTITLE, "NOT IN (" + newParameters + ")");
    vc.addElement(vcr);
    clov.applyViewCriteria(vc);
    clov.executeQuery();
}

In this case, the method takes a single parameter that is used for adding new values to the exclusion list. The exclusion list contains all values that we wish to exclude from combo box and auto suggest components. The following steps are implemented for achieving the desired behavior. First – getting the current state of the custom view criteria (named “showCaseViewCriteria”). Then, if that view criteria exist, reading the old parameter list from it (e.g. “’Manager’,’Accountant’”). After reading the old parameter list, the value from the String s parameter is appended to the list (e.g. “’Manager’,’Accountant’,’President’”). After the exclusion list has been modified, new custom view criteria is created, applied to the view object and its query is executed.

The final step in achieving the desired behavior is binding an action listener method to the “Remove” button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public void removeSelectedFromList(ActionEvent actionEvent) {
    // getting the currently selected value and adding it to view criteria
    String currentlySelected = this.getAutoSuggestComponent().getValue().toString();
    getAppModule().updateViewAccessor1(currentlySelected);
 
    // removing the currently inputed text
    this.getAutoSuggestComponent().setValue("");
 
    // refreshing the dropdown list in the combo box
    AppModuleImpl am = getAppModule();
    JobsVOImpl vo = (JobsVOImpl)am.getJobsVO1();
    JobsVORowImpl vr = (JobsVORowImpl) vo.getCurrentRow();
    RowSet rs = vr.getJobTitleLOV1();
    JobTitleLOVImpl voi = (JobTitleLOVImpl) rs.getViewObject();
    voi.clearCache(); 
}

The method shown above can be divided into three main parts as shown in the code comments. First part gets the currently selected value from the combo box component and calls the method that adds it to the exclusion list. Secondly, the box input field is emptied to indicate that the desired effect is achieved. The final part of this method clears cache to force af:ComboboxListOfValues component to update its dropdown list.

Conclusion

While the example shown in this blog post is very simple, this approach can be used to achieve the desired behavior in much more complex situations. Combo boxes and auto suggest behavior are an attractive combination because they are intuitive, quick and appealing to both new and experienced users. Applying the customizations described in this blog post can make them more convenient and more powerful.

You can download this demo project here.

Oracle Alta UI Looks & Implementation

Posted by in Blog | December 1, 2014

As we recently announced in our last blog post regarding new features of Application Development Framework, here are the details about Oracle’s new user interface Alta.

Introduction

So far Applications developed with Application Development Framework had a lot of specifics and ADF components have consisted of large number of parts. Each of these parts had his specific CSS class, which needed to be overridden in order to implement new design. Results were often large number of CSS classes regarding only one component.

To make things easier for developers, Oracle introduced some of default skins of applications and Skin Selector with their JDeveloper IDE. Skin Selector gave developers possibility to visually check out all components included in ADF and see of which parts are they assembled. In addition, Skin Selector allowed developers to change manually style of those components parts. Even with using predefined skins and Skin Selector developers often needed to check CSS in runtime to make additional changes to their CSS in order to fully implement their specific design. All mentioned often required a lot of time and even with successful implementation of design, ADF applications still looked dated. As Oracle saw the need for visual improvement of ADF applications, they introduced Alta User Interface.

Looks

Alta UI offers modern minimalistic design achieved through redesign of existing ADF components. To make such design possible component redesign needed to be somewhat radical. New redesign considerably lowered number of parts of which components consisted.

In addition, style attributes are added in runtime of application, meaning that while developing there is no way to see how included component would behave at runtime. Developers will end up looking at the page source and adjusting their CSS files accordingly. Oracle added whole set of components as show cases to introduce developers with their behavior and possibilities. Full list of components can be found at official link.

Alta UI also made an improvement regarding responsive design, therefore making higher availability of applications on desktop and on mobile devices such as tablets.
Important thing to note is that Oracle highly recommend not to use Alta UI with old applications as Alta UI is using different layout which, among other things, better covers responsive design and ensures vertical scrolling in case when large content is needed to be shown on smaller screen resolution. For developing Content Area, Oracle recommends using Panel Grid Layout.

Implementation

Even though Oracle does not recommend it and application will lose some of benefits given by Alta mostly regarding responsiveness of the design, developers can include Alta UI in their old applications. As Alta UI is available in latest edition of Oracle JDeveloper 12.1.3, application needs to be migrated into the new IDE and therefore certain changes needs to be made on application itself considering some of the components, and component properties were deprecated during improvement and new releases of Application Development Framework.

As for implementation of Alta UI itself there are not out-of-the-box support as there were with ADF skins in past. Currently Oracle provides Alta UI only by making certain changes in some of ADF configuration xml files. Even though process is not very intuitive, it is not very demanding for developers.

To include Alta UI into the application trinidad-config.xml file needs to be modified as on picture below.

Results are immediately visible in Skin Selector, but developers still can’t override CSS classes provided by Alta UI, that is, until they make certain changes in trinidad-config.xml and build their own CSS file. To override default Alta’s CSS trinidad-settings.xml should look like on the example below. On the example it is visible that ADF needs to be told which class will extend Alta’s and that class needs to be created before these changes.

After this, ADFSkin can be created, and in list of predefined skins, Alta’s skin will be provided as option, which needs to be chosen in order to have CSS file, which will override Alta’s CSS classes. After finishing creation of ADFSkin, trinidad-settings.xml will look like on the example below.

As mentioned earlier implementation of Alta UI on applications developed by earlier versions of Application Development Framework require some work regarding functionalities in case of very old applications and almost certainly visual polishing regardless of ADF version used for development. NEOS Ltd. successfully managed to migrated ADF Kickstart product to Alta UI, and now is in finishing stage of visual polishing process. Even though ADF Kickstart visual presentation does not have any influence over application developed using ADF Kickstart in NEOS Ltd. we are very keen to be in step with latest releases of Oracle and open source technologies and to use everything they can offer.

With introduction of Alta User Interface Oracle clearly made vast improvement in visual presentation of applications developed by Application Development Framework. Alta User Interfaces is definitely setting higher visual standards in enterprise application segment. Responsive design ensures higher availability of the application regardless of the device on which it is rendered. Minimalistic and simplified pages make them more appealing to the end-user while ensuring clear data presentation on modern user interface.

ADF KickStart: New features

Posted by in Blog | December 1, 2014

With release of Fusion Middleware 12c Oracle made sure to fix a numerous number of bugs that were noticed in previous versions of their integrated development environment JDeveloper. Beside bug fixes, Oracle introduced a number of enchantments for existing components therefore making available new usage of those components by making them more adjustable. We decided to describe shortly some of the mentioned components.
File Upload is now supporting transfer of large file uploads, multiple uploads, Drag and Drop functionality and progress bar.
Table has been given possibility for freezing right most columns so that a scroll bar appears on the left side of the frozen columns. Both Table, TreeTable, PivotTable and Gantt now allow configuration of paging vs. scrolling via the new scrollPolicy attribute. In addition, PivotTable now provides support for both row and column paging, Split View mode and Attachment mode.
This release also included support for Java Server Faces 2.0, which added new features to ADF, some of which are Facelets, Ajax, Get, new scopes, expression language methods with arguments and adding expression language inside page content.
In addition, Oracle has introduced a completely new palette of innovative components for Application Development Framework as part of their new Middleware. Below, you will find the list of new components with short description.
Treemap and Sunburst components are fresh addition to current Hierarchy Viewer component. They offer different visualization styles to display hierarchy.

Picture 1. Treemap component
Picture 2. Sunburst component

Timeline component is an interactive data visualization that allows users to view events in chronological order. It is provided with navigation for showing specific timeframe.

Picture 3. Timeline component

PanelGridLayout is a more predictable and more efficient layout component that can be used to create all new layouts. This component generates the same markup that meets the CSS3 specs for grid layout so it can be optimized for layout performance. This is now a recommended UI layout component for most pages.
Panel Drawer component renders tabs attached to the side of container component. Clicking a tab opens the drawer containing defined content.

Picture 4. Panel Drawer

Panel Springboard is somewhat similar to Panel Drawer presenting toolbar navigation that can be displayed as tab strip or as grid of icons. Clicking an icon displays its content.

Picture 5. Panel Springboard

Code Editor allows displaying and editing text in a code editor format with line numbers and text highlighting.

Picture 6. Code Editor

Even though we have mentioned a quite number of changes, which came with new Application Development Framework, there are even more enchantments and components available for use, regarding not only ADF but also JDeveloper and more. Full list of changes is available on official documentation.
Latest highlight in 12c is concerning completely new visual representation of existing components. Oracle achieved this goal with introducing Oracle Alta UI in their new version of JDeveloper 12.1.3.0.0. Simple enablement makes it simple for use in development and to users of the application gives completely new impression of applications developed by Application Development Framework therefore setting higher standards for UI of enterprise applications. With Alta UI pages are simplified with emphasis on graphics which makes them more appealing while ensuring clear data presentation. More on Oracle Alta UI will be available in our next blog entry.

Agile Methodology

Posted by in Blog | December 21, 2012

Agile methodology is a collection of innovative, user-centered approaches to system development. It tries to define an overall system plan quickly, develop and release software quickly, and then continuously revise the software to add additional features. After the downsides of the traditional software development approaches were identified (too many documentations, all requirements must be known at the beginning of a project,…) it became obvious that we needed another approach. And that’s how Agile was created.

Read more ›

Facebook user authentication in Java web application

Posted by in Blog | June 21, 2012

Facebook is the biggest social networking website intended to connect friends, family, and business associates. With over 800 million users and counting, application developers are in need of user information integration with the biggest social network. That means using Facebook user data as the primary authentication mechanism in their applications and/or reading user data from Facebook so the user doesn’t have to fill out annoying registration forms.

Read more ›

ADF Runtime Installation

Posted by in Blog | February 27, 2012

Establishing production environment is the final, but probably the most important step in the application’s life cycle. Production environment for ADF application implies application server, but also various settings and resources. As each version of ADF becomes more demanding, it is necessary to follow certain procedures in establishing ADF production environment. This blog will describe the procedure of installation of ADF 11.1.2.1.0 on WebLogic 10.3.5.

Read more ›

Introduction to jBPM5

Posted by in Blog | January 19, 2012

If you are looking for a solution that offers a bridge between business and IT as well as improvement of enterprise performance by driving operational excellence and business agility, you should consider implementing  BPM (Business Process Management). Furthermore, if you aren’t afraid of a little bit of Java coding, you might pay attention to jBPM (Java Business Process Management).

Read more ›

Applying ADF Task Flow

Posted by in Blog | January 11, 2012

We have been using Oracle ADF Framework to develop applications since the version 10g. ADF Task Flow was introduced in version 11. In 10g version we can only use one large task flow for navigation between pages (like in JSF application).
How to switch to the ADF Task Flow after we have somehow got used to control execution of action in pageDef files or managed-beans and how much they have helped us in the work, read below.

Read more ›

Getting by with WebLogic JMX

Posted by in Blog | January 2, 2012

The development of application solutions in modern environments sooner or later will point up to the following dilemma: independently develop functionality or use the functionalities environment already provides. Developing application solution in ADF technology has proven to be in need for better control of session management. It seemed illogical to develop our own solution for functionality that has already been implemented in WebLogic. It was time to look into JMX.

Read more ›

Java/JEE software development frameworks

Posted by in Blog | December 19, 2011

In the past decade, investments in IT solutions based on Java technology have been counted in billions, and it is certain that in the coming years this trend will not be changed. If we consider that the major players in the IT market have recognized Java as the “de-facto” standard for enterprise scale product development, that Oracle got Java in the recent acquisition of SUN, that IBM made a huge investment in WebSphere middleware, and that Java middleware is the fastest-growing business of JBoss, it sounds unreasonable to start with development of new solutions and not think about Java as a candidate platform for development. So what about Java development on enterprise scale level? Are there any available “add-ons” (frameworks) that can help us in development process?

Read more ›