CSS Shorthand Tokens

Posted on

In CSS, you will come across some shorthand notation for the margin, border-color, border-style, border-width, and padding properties. It isn’t obvious or easy to remember which token in the value applies to which side of the element so here’s a handy list of the 4 possible varieties:

  1. One token — all-sides-use-the-same-value
  2. Two tokens — top-and-bottom right-and-left
  3. Three tokens — top right-and-left bottom
  4. Four tokens — top right bottom left

At least the four-token example can be remembered by associating the element with a clock where time progresses clockwise.

HiDPI Images in MAF or ADF Mobile Applications

Posted on Updated on

Whether you are developing a MAF (or ADF Mobile) application or a classic ADF Faces application, it is becoming more and more important to support HiDPI screens (high resolution or “retina” displays). There is no easier way to make your application look out-dated than to use grainy, unprofessional image assets or use them improperly.

In HTML, the “px” unit (sometimes referred to as a “dp” or density-independent pixel) corresponds to the same amount of space regardless of the DPI of your screen (however, the number of screen pixels may vary). The original iPhone models did not have HiDPI displays. Each point of color on those screens corresponds to one HTML CSS “px” unit. Newer iPhone models introduced a HiDPI (or “retina”) display that has 4 screen pixels in the same amount of space that 1 screen pixel used to take up (2 screen pixels wide by 2 screen pixels tall); on these new screens, the width and height “px” values use twice the amount of screen pixels.

Why is this a common problem? Since MAF (or ADF Mobile) uses HTML, displaying an image is not as simple as just specifying the source path and magically hoping the browser will know that you are using a high resolution image. You must specify dimensions to go along with the source path.

Let’s work with an example. You have an image named “image-64.png”. This image has a size of 64 by 64 individual dots of color (individual points of color information). If you coded your page like the following, the image will be shown with a width of 64px and a height of 64px (one color dot per “px”):

<amx:image id="i1" source="images/image-64.png"/>

This would look just fine on a classic low-DPI display. However, on a HiDPI display, it still takes up the same space but since there are more screen pixels, the image will look very grainy.

In order to look crisp and professional, you need to set a size so that each dot of color corresponds to at least one screen pixel. For a HiDPI display, this means your image needs a width and a height specified such that you use 2 dots of image color information per HTML CSS “px” unit (e.g. a 64 by 64 sized image should be specified to use a width of 32px and a height of 32px. In code, your page should look like this:

<amx:image id="i1" inlineStyle="width:32px;height:32px" source="images/image-64.png"/>

Even if you still want to support legacy screens for your application, this same image (with the same specified width and height) will look beautiful on low-DPI screens because of how images are processed modern browsers.

If for some reason you really needed or wanted to specify alternate images for each kind of screen, you have the option to use a screen properties EL variable to toggle the rendered state of alternate amx:image components or simply use that EL to alter the inlineStyle and the source path as desired.

PNG vs. SVG?

Consider whether using PNG is really the right choice to begin with. SVG (scalable vector graphics) files tend to be smaller file sizes when created without excessive anchor points, no embedded bitmap data, reduced decimal number precision, excess whitespace removed, and comments removed. If the resolution of your display gets better, the SVG will look that much better; you don’t need multiple resolution versions of the same image resources. If the SVG was given the proper width/height to begin with by its creator, you won’t even need to muck with inlineStyles since the image will naturally be displayed at the proper size.

Oracle ADF Mobile Mock Component Gallery Demo

Posted on Updated on

Demo running in mobile Safari

In the past I posted a link to the Oracle ADF Faces Rich Client demos (server-based web applications). Now that the Oracle ADF Mobile framework for native iOS and Android applications has been released, a similar demo is now available: the Oracle ADF Mobile mock component gallery.

This mock component gallery is based on the real component gallery application bundled with the ADF Mobile JDeveloper extension. The recommended best place to view this demo is using the mobile Safari or Chrome browsers on your iOS and Android devices. Doing that will give you the closest experience to how the components will appear and behave in real ADF Mobile applications. However, you can also view the demo using desktop Safari and Chrome for an approximate experience when access to a mobile device is not available.

Keeping your iTunes Library Fresh (iTunes Match version)

Posted on Updated on

Back in 2009, I posted an article titled “Keeping your iTunes Library Fresh” that showed how to create a smart playlist that would improve over a simple shuffle of your music library. Based on your ratings, it would play the music you like more often than the music you like less.

If you have tried out the new iTunes Match service from Apple, you may be disappointed that these playlists are not synced to iCloud (you see a little cloud icon next to your playlist name with a slash through it that clicked tells you it is ineligible for iCloud):

The playlist needs to be refactored so that it doesn’t depend on other playlists.

Unfortunately iTunes does not let you construct a single playlist that matches exactly to what was created in my old post (you can’t set a “limit to” number of songs for a single matching subsection–only to entire playlists). However, as a next-best thing, you can take advantage of the “Last Skipped” clause to help minimize the occurrence of poorly-rated music. The following is a single stand-alone playlist that corresponds to the “Good Mix” playlist from the old post (hold down the Option/Alt key when clicking the “+” button to create one of the indented “All”/”Any” subsections):

Here’s another single stand-alone playlist that corresponds to the “Christmas Mix” playlist from my old post:

Adjust the time values to your preferences.  The reason why the no-star ratings are given equal weight as the 5-star songs is that it is likely that it is music that you just purchased and thus want to hear it frequently until you make a decision on what other rating you want to give it or it will help encourage you to rate all of your music.  If you have a ton of unrated music simply make a zero-star-rated playlist and work your way through it.

ADF Client Performance Optimization Tips

Posted on

If you are noticing client-side performance issues in your ADF Faces application and must support legacy browsers like Internet Explorer 7 and Internet Explorer 8, there are many techniques available to help optimize your application for these browsers:

  1. If you use af:region and the jsff page fragment files have more than 1 root component, optimize it by arranging these components with a single root component. For example, if you want your region contents to stretch, you might have one visible content component and a series of popup components, put the visible content component inside of a “center” facet of an af:panelStretchLayout and put all of those popups in the “bottom” facet but also make sure to assign bottomHeight=”0px”. If you don’t want the contents to stretch, simply wrap these components with an af:panelGroupLayout layout=”vertical”.
  2. Avoid using a af:panelStretchLayout where topHeight, bottomHeight, startWidth, or endWidth is set to “auto”.
  3. Minimize uses of af:panelAccordion in discloseMany=”true” mode if possible.
  4. Minimize use of components that provide overflow popups, e.g. af:panelAccordion, af:panelTabbed, af:toolbar, af:breadCrumbs, af:menuBar. If you have to use these components, make sure that your target screen size can accommodate the content without having to invoke overflow.
  5. Minimize use of components that provide custom title text truncation, e.g. af:panelHeader and af:showDetailHeader. If you have to use these components, make sure that your target screen size can accommodate the title text without having to truncate.
  6. Minimize use of af:carousel, af:table, af:tree, af:treeTable.
  7. Avoid complex user interfaces. Users will struggle to process complex application structures. Legacy browsers will struggle with processing of complex content. Keep the number of tabs simple (use less than 10). Keep the number of columns in a table small (use less than 10).
  8. Finally, don’t ignore the warnings that JDeveloper gives you.

BIDI via EL in ADF Faces

Posted on

At some point, you may have an inlineStyle whose value is BIDI sensitive; in LTR (left-to-right) mode, you may want a “left” style but in RTL (right-to-left) mode, you may want a “right” style.  You don’t have to write a managed bean to give you the corresponding style, you can use EL (expression language).

Here’s an example assigning a padding for the “start” side of 10px:

inlineStyle="padding-#{adfFacesContext.rightToLeft?'right':'left'}:10px;"
See oracle.adf.view.rich.context.AdfFacesContext for other properties.

How to Edit a Gradient with the Eye Dropper Tool in Illustrator

Posted on

Adobe Illustrator CS4 has a very frustrating object gradient editing tool.  Chances are that you already have the colors of your gradient somewhere in your artwork but not necessarily have spent the time to create a swatch for it.  It would be much easier if Illustrator actually let you choose your color stop colors with an eye dropper tool.  Actually it does–but it isn’t very obvious.  Here are the steps:

Step 1 – Select your shape with the selection tool.

Step 2 – Open the gradient palette and select the color stop whose color you wish to change (notice the triangle above the color has a black fill).

Step 3 – Change to the eye dropper tool (or press “i”)

Step 4 – It is very important that you hold down the shift key when you click to pick up a color or else the gradient will be replaced with a solid color but now the color stop is using your newly-chosen color!

How to Apply a Gradient to a Shape’s Stroke in Illustrator

Posted on

Adobe Illustrator CS4 does not let you directly apply special styling such as a gradient on the stroke of a shape but there is a workaround.  This post walks you through the process to get it done.

Step 1 – Draw the shape.

 

Step 2 – Add a stroke to the shape by choosing Effect – Path – Outline Stroke.

 

Step 3 – The stroke appears with a solid color.

 

Step 4 – Convert the solid stroke into a separate object by choosing Object – Path – Outline Stroke.

Step 5 – You now have separate objects so you can select the stroke separately to make changes.

 

Step 6 – Finally, you can apply a gradient style on the separated stroke object and can apply other effects like a drop shadow.  Rearrange the order of the 2 objects so that the drop shadow of the stroke does not cover up the inner shape.

Mac OS X 10.6 Snow Leopard Disappearing Dock Icons

Posted on Updated on

I occasionally see one or two icons in my Mac OS X 10.6 Snow Leopard dock show up as completely transparent.  I can still click in that area to launch the application but that slot in the dock shows up empty.

I found a solution that brings the icons back (this could just be a temporary fix):

  1. Right-click the icon and choose Options – Show In Finder so that you can easily locate it in a future step.
  2. Drag the transparent icon away from the dock so that it turns into a puff of smoke.
  3. Open Applications – Utilities – Terminal then type “killall Dock” to restart the Dock
  4. From the window opened in step 1, drag the icon back into the dock where it was before