Skip to main content

ADF 11g Quicky 4 : Where is my cursor ?

In my current project I encountered a usability issue. The users where unable to see where the cursor was located. It was flickering, but on a page with ,multiple input components it was very difficult to locate the field where the cursor was located. I decided to help them out and that proofed to be both very simple and in the end very helpful. I used skinning to give the active field a colored background.



First I defined a skin in my trinidad-config.xml

 <?xml version="1.0" encoding="windows-1252" ?> 
 <skins xmlns="http://myfaces.apache.org/trinidad/skin">
  <skin>
  <id>custom.desktop</id>
  <family>custom</family>
  <extends>fusion.desktop</extends>
  <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
  <style-sheet-name>skin/custom.css</style-sheet-name>
  </skin>
  </skins>

Next I made sure that the application uses the skin by defining it in the trinidad-config.xml
 <?xml version="1.0" encoding="windows-1252"?>
   <trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
    <skin-family>custom</skin-family>
   </trinidad-config>

Finally I created the corresponding style sheet and added entries for focus pseudoclass.
   
   af|inputText::content:focus {background-color:rgb(214,214,255);}
   af|inputDate::content:focus {background-color:rgb(214,214,255);}
   af|inputListOfValues::content:focus {background-color:rgb(214,214,255);}

The result is highlighted fields whenever the cursor is in it.
For an LOV field:

For a date field:

For an inputtext field:


Imagine the effect on a page with several dozens of inpt fields....
Labels:

Comments

Minsoo Jo said…
good tip. but I wonder how do you know this af|inputDate::content:focus is the skin selector?
3:33 AM
Post a Comment

Popular posts from this blog

ADF 11g popup and panelwindow: Open wikipedia in a modal popup.

This post was more or less inspired by the noteWindow example on Oracles tag demo site. When hovering the highlighted text in this example the user gets extra information about the subject. I wanted to give the end user the opportunity to get even more information, for instance by invoking a wikipedia page about the subject. The catch here is that I wanted this information to be shown in a modal popup, and one that is not prohibited by popup blockers. Luckily ADF 11g provides javascript popups that can also be made modal, so the user has to close the popup before returning to the application. This post describes how I used an in a to open the correct wikipedia in a modal popup. Step 1: Create the plain text that invokes the noteWindow. This is taken directly from the mentioned Oracle example. <p style="margin-left:30px;width:500px;margin-right:30px;line-height:16px"> Vultures are scavenging birds, feeding mostly on the carcasses of dead animals...
7 comments
Read more

ADF 12.1.3 : Implementing Default Table Filter Values

In one of my projects I ran into a requirement where the end user needs to be presented with default values in the table filters. This sounds like it is a common requirement, which is easy to implement. However it proved to be not so common, as it is not in the documentation nor are there any Blogpost to be found that talk about this feature. In this blogpost I describe how to implement this. The Use Case Explained Users of the application would typically enter today's date in a table filter in order to get all data that is valid for today. They do this each and every time. In order to facilitate them I want to have the table filter pre-filled with today's date (at the moment of writing July 31st 2015). So whenever the page is displayed, it should display 'today' in the table filter and execute the query accordingly. The problem is to get the value in the filter without the user typing it. Lets first take a look at how the ADF Search and Filters are implemented by...
6 comments
Read more

ADF 11g : Printing Directly From Your Application

Last week I was asked this question : "Can we print directly from within our ADF Application, without invoking the printer dialog ?" I wasn't sure but after some investigation the answer was clear. Yes you can ! Here is how... I decided to create a print start up form where I can select printers and print the document. Most of the functionality needed is provided by the Java Print Service API. Selecting available printers I start with a way to show all printers available to the session. For that I simply use the PrinterServiceLookup. PrintService[] printers = PrintServiceLookup.lookupPrintServices(null, null); The result I can now use to create an Array of SelectItems in order to make the list available in the application. 1: public SelectItem[] getAllPrinters() { 2: if (allPrinters == null) { 3: PrintService[] printers = 4: PrintServiceLookup.lookupPrintServices(null, null); 5: allPrinters = new SelectItem[printers.length]; 6: for (int i = 0; i ...
18 comments
Read more