It is becoming an epidemic. More banks and employers are making changes to their web applications that they think are protecting both your and their interests but in practice, this is actually doing quite the opposite.

If your bank or employer is a well-known business, it is likely a frequent target for phishing attacks.  More people are relying on Google searches and other websites that generate “tiny” URLs (long URLs are redirected through a third party with a short URL that can easily be typed in a chat client, email, etc.).  This means that people aren’t using bookmarks to access their banks or companies which means if a website looks familiar to you, you aren’t going to pay close attention to the URL in your browser’s address bar.  On the same token, it is easy for fat fingers to slightly mistype a URL that you know by heart so you can easily go to a website different than what you intended and will fall victim to a phishing attack.  More and more banks and employers are becoming paperless so any interaction that is requested of the user comes from email.  An email has many ways to fool the user into believing that it and the links provided in the email are authentic.

How are my banks and my employer putting my security (and theirs) at risk?

The reason is that they are implementing various mechanisms to prevent your browser from saving and recalling stored user names and passwords.  This can be achieved by either adding autocomplete=”off” to the input fields or to the form that wraps these inputs.  Another mechanism that is becoming more prevalent is the technique of asking for your user name in one screen and then your password in a second screen after the first screen is submitted.  These mechanisms break the password storage and retrieval features of your browser.

Why does denying password saving put us at risk?

There are two reasons why this is very bad.  Both reasons come from human error:

1. Requiring that a human type in the user name and password means that the human must concentrate on typing in the data rather than analyzing whether the website is authentic.  If the browser populated the user name and password fields, you know immediately that the website is the correct one.  If the fields are blank and the user knows that the password should have been recalled by the browser’s saved password mechanism, the user becomes surprised and starts to question if they are visiting the correct page.  If the browser never saves the password, the user no longer has a fast and accurate way to know that the website is authentic.
2. Requiring that a human type in the user name and password encourages the user to have a password that is as easily memorized and typed as possible.  This makes it an easier password to guess; fewer iterations to attempt before success.  It may also force the user into reusing the same password for every website.  Reusing passwords is bad because if one website is compromised, all other websites are wide open.  If the user is conscientious about using unique passwords, they are then forced to write down the passwords and post them in an easily-accessible but also vulnerable location in their cubicle at work or desk at home where everyone in your office or everyone who visits or breaks into your home can access it.

With the Oracle ADF Faces Rich Client, have you ever wanted to divide a stretchable box into tiles?

Divided in Half

Let’s say you just wanted to divide a stretchable area in half, the top half gets 50% of the space and the bottom half gets the other 50%.  If your stretchable area is one created by a component that stretches its children (please read Layout Basics if this term doesn’t mean anything to you), you achieve this half-and-half layout by using a panelStretchLayout:

<af:panelStretchLayout id="half" topHeight="50%">
  <f:facet name="top">
    <!-- top half component rooted here -->
  </f:facet>
  <f:facet name="center">
    <!-- bottom half component rooted here
         (the center facet gets the remaining space) -->
  </f:facet>
</af:panelStretchLayout>

Remember, avoid inlineStyle if at all possible; do you see any inlineStyle values here?

Divided into Thirds

What if you wanted it to be divided into thirds?  Just add one more facet to the panelStretchLayout like this:

<af:panelStretchLayout id="thirds" topHeight="33%" bottomHeight="33%">
  <f:facet name="top">
    <!-- top third component rooted here -->
  </f:facet>
  <f:facet name="center">
    <!-- middle third component rooted here
         (the center facet gets the remaining space) -->
  </f:facet>
  <f:facet name="bottom">
    <!-- bottom third component rooted here -->
  </f:facet>
</af:panelStretchLayout>

Divided into Quarters

Okay so now what are you gonna do–the panelStretchLayout doesn’t have any more facets to choose from that would appear below “bottom”?!

Well, now you need to nest panelStretchLayouts where the inner panelStretchLayout uses 3 facets (space divided into thirds) and an outer panelStretchLayout that uses 2 facets (space divided into 25% and 75%) like this:

<af:panelStretchLayout id="outer" topHeight="25%">
  <f:facet name="top">
    <!-- first quarter component rooted here -->
  </f:facet>
  <f:facet name="center">
    <af:panelStretchLayout id="inner" topHeight="33%" bottomHeight="33%">
      <f:facet name="top">
        <!-- second quarter component rooted here -->
      </f:facet>
      <f:facet name="center">
        <!-- third quarter component rooted here
             (the center facet gets the remaining space) -->
      </f:facet>
      <f:facet name="bottom">
        <!-- fourth quarter component rooted here -->
      </f:facet>
    </af:panelStretchLayout>
  </f:facet>
</af:panelStretchLayout>

These all line up vertically, what if I wanted horizontal tiles?

Instead of using “top” and “bottom” facets, use “start” and “end”.

What if I don’t have a stretchable area?

Without being stretchable, you cannot evenly distribute space.  You would then use something like an Apache MyFaces Trinidad trh:tableLayout (as seen in the Tiled Flowing demo or even a layout=”vertical” af:panelGroupLayout.

Are there any other tiled layout solutions?

Yes, for the stretchable area case, you could:

• Use panelSplitters instead of panelStretchLayouts though splitter panels don’t use percentage units–only pixels, or
• Use grid structure to generate the tiles as seen in the Tiled Stretching demo.

For more info, refer to the demos, documentation, forums, news, etc. on the Oracle ADF Faces Rich Client Components page on the Oracle Technology Network:

• http://www.oracle.com/technology/products/adf/adffaces/index.html

The folks at webkit.org are adopting animation support that has been present in mobile Safari since iPhone 2.0. They are also proposing specs for CSS-based transforms, transitions, and animations:

• http://webkit.org/specs/CSSVisualEffects/CSSTransforms.html
• http://webkit.org/specs/CSSVisualEffects/CSSTransitions.html
• http://webkit.org/specs/CSSVisualEffects/CSSAnimation.html

See some animations in action using the latest nightly WebKit at:

• http://webkit.org/blog/324/css-animation-2/

Firefox 3.1 is also adopting WebKit’s proposal for supporting transforms too:

• https://developer.mozilla.org/web-tech/2008/09/12/css-transforms/

And of course there is also the cryptic filters that IE supports for transforms:

• http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx

It will be nice to have all of these varying implementations conform to a standard.

There is now a tutorial for migrating from Sun’s Woodstock JSF component into Oracle ADF Faces Rich Client components:

http://www.oracle.com/technology/products/adf/adffaces/woodstock2adfMatix.html

Dear US Auto Makers,

Here’s some ideas to help attract buyers:

• iPod/iPhone docks with Bluetooth phone connectivity to the audio system
• Smaller, 40-60 MPG cars
• Adopt styling from vehicles made by Acura and Honda

Best regards,
Matt (soon to be in the market for a new car)

Since the way web browsers deal with width and height is so non-intuitive, I’ve created this a handy guide showing how the CSS (Cascading Style Sheets) box model applies widths and heights when scrolling, margins, borders, and padding are involved:

Oracle JDeveloper 11g is now production.

The Oracle ADF Faces Rich Client Demos are also now available online.