help.borderHelp.html Maven / Gradle / Ivy
Preface
Borders represent the line/pattern around a component and optionally behind the component (in which case
it supercedes the other background definitions for the component). There are several types of borders detailed
bellow. Borders are usually drawn at the edge of the component space, unlike CSS which has a specific area
for border space CodenameOne uses the edge of the padding space for the border. This effectively means that a
theme must make sure to have component padding that is large enough to fit the border within it.
Empty/Null Border
This effectively indicates the component has no border, the main difference between empty border and null
border related to style inheritance. E.g. in the case of a Button a default border exists, if we were to define the
border as null the value would not override the buttons border.
However, defining the border as empty works as expected by removing the border from the button.
Bevel
The bevel border type presents a simple 3D style border that can appear lowered or raised thus
providing simple depth perception e.g. for button presses. The bevel border is comprised of 4 colors
representing its appearance, it can accept these in the color pickers or use the "theme colors" checkbox
to automatically derive colors from the theme (using the components foreground/background colors to
calculate a proper color for the border).
bevel lowered
bevel raised
Etched
The etched border type provides a look similar to an engraved line, like the bevel border it too can appear
raised or lowered. The etched border is comprised of 2 colors
representing its appearance, it can accept these in the color pickers or use the "theme colors" checkbox
to automatically derive colors from the theme (using the components foreground/background colors to
calculate a proper color for the border).
etched lowered
etched raised
Line
The line border just draws a rectangle around the component with the option of defining the thickness/color
of said rectangle. The line border can also use the "theme colors" checkbox
to use the components foreground color.
Round
The round border draws a rounded rectangle and optionally fills the background appropriately.
PERFORMANCE WARNING: the round border might be very expensive! A round border is
cheap for a completely opaque solid color. However, when using features such as gradients, images or
alpha channel the round border effect is calculated on the fly! This is hugely expensive, we recommend
trying to achieve these same effects with the image borders which are cheaper.
The round border allows defining its color (or using the theme color) it also allows defining the size
of the arcs rounding the border.
Image
The image border option will only appear when images exist in the resource file, you can read more
on creating image borders in the image border wizard. Image borders come in 4 flavors:
- 9 part - 9 or 8 images are used to represent the border for the component. using this structure:
Notice that the center image is optional... The top, bottom, left & right images are tiled while
the corners are kept in place. The center image (if defined) is also tiled. This allows CodenameOne to
resize the component without any scaling, degradation, performance cost, or memory overhead.
One limitation one should keep in mind is that drawing an image is an expensive operation and
so images in the image border shouldn't be too small e.g. a common designer mistake is to produce
a single pixel image for tiling, CodenameOne will seamlessly crop a tiled image so you should make an effort
to make it more reasonably sized (when in doubt use something in the area of 80-100 pixels).
-
3 part - The 3 part is somewhat unique to CodenameOne and relies on MIDP's fast rotation drawing, it assumes
perfectly rectangular images and draws the top left image rotated to produce all corners and does the
same for the top image (center is again optional and used as usual). Thus the 3 part border can produce
some attractive results in a smaller size.
-
Horizontal/Vertical - the image border is highly biased to symmetric shapes that can be enlarged
to all directions. However some shapes (such as the iPhone's angular back button) cannot be cut
into a 9 patch image without causing artifacts. The Horizontal and Vertical Image borders accept
3 images each and only grow on one axis. We don't recommend using them for most cases since
even when text (which can vary wildly in size) isn't used, one often needs to align to text thus requiring
such resizing.