Oracle Forms LAF project – the CSS file description
Most of the Look and Feel properties are read from a tagged CSS file.
It intends to be used as a HTML Cascading Styled Sheet, and try to keep
a very close syntax.
It can be modified as many times you want and allow changing the look of
your application without recompilation.
It contents
five sections, each one dedicated to a particular area.
The first
four are dedicated to the table-block decoration
The last one
is used to store various GUI elements setting.
1.
Introduction
Every block
decoration’s properties are read from an external CSS file.
The name of
this file is read from the PM$CSS_FILENAME
form parameter.
The default
value is: c:\forms.css
The file is
opened with the PKG_Look_And_Feel.Open_Css() library’s
function that returns TRUE is the file has been correctly read.
If PKG_Look_And_Feel.Open_Css( ‘c:\forms1.css’ ) Then
… we can continue
End if ;
There are 4
sections used to decorate the form module:
One for the
current canvas and three for the block itself (title, header and body)
The default
values can be read from the form parameters:
·
Canvas section : PM$CANVAS
·
Block title section : PM$TITLE
·
Block header section : PM$HEADER
·
Block body section : PM$BODY
The Visual
Attribute used to decorates the block table’s lines is read from the PM$VA parameter.
The current
canvas decoration is done with the PKG_LOOK_AND_FEEL.Paint_Canevas() library’s procedure.
PKG_LOOK_AND_FEEL.Paint_Canevas('.canvas1', 'CTRL.BEAN' ) ;
The first
parameter is the CSS section that contains the tags.
The second
parameter indicates the bean area which the Implementation Class property is
set to : oracle.forms.fd.DrawLAF
The canvas
to decorate is the one attached to the bean area.
The block
decoration is done through the PKG_LOOK_AND_FEEL.Paint_Block() library’s procedure.
Procedure Paint_Block
(
PC$Block IN Varchar2, -- the block name to decorate
PC$BeanName IN Varchar2, -- the associated bean area
PC$VA_Name IN Varchar2, -- the visual attribute
associated
PC$HeadClass IN Varchar2, -- the table header CSS class
name
PC$BodyClass IN Varchar2, -- the table body CSS class name
PC$TitleClass IN Varchar2 Default
Null, -- the table title CSS class name
PC$Title IN Varchar2 Default Null, -- the block title
PB$ScrollBar IN Boolean Default True -- scrollbar exists on block true/false
)
Finally, you
can set some general GUI properties grouped in the tag for GUI
elements.
If PKG_Look_And_Feel.Open_Css( 'c:\forms.css' ) Then
PKG_LOOK_AND_FEEL.Set_GUI_Properties( '.GUIPropertiesORACLE', 'BL.LAF' ) ;
End if;
2.
Tags used to draw on the canvas
.canvas1 {
gradient-colors:
r170g250b190,r255g255b255,.2
gradient-vcycle: /2
gradient-hcycle: /2
gradient-linear:0,0,WIDTH/2,HEIGHT,UpToDown,20%-60%-20%,r50g50b50-r255g255b255-r255g255b255-r50g50b50-r50g50b50-r255g255b255,.6
image1[2[n]]: /env-64.gif,1,1,.3
}
Gradient-colors can
contains the 2 colors used to construct a gradient
background, and also a possible transparency factor between 0 and 1
The colors are of type RxGxBx and
separated by a comma.
The first color is the gradient start color.
The second color is the gradient end color.
The transparency factor, optional, must be between 0 (full transparent) and 1
(full opaque).
Gradient-vcycle could contain an integer value expressed in pixel
(e.g. 20) or a quotient (e.g. /4) to set a vertical cycle to the gradient.
If the value
equals 0 (zero) or is not provided, then gradient has no cycle (repetition).
Gradient-hcycle could contain an integer value expressed in pixel
(e.g. 20) or a quotient (e.g. /4) to set a horizontal cycle to the gradient.
If the value
equals 0 (zero) or is not provided, then gradient has no cycle (repetition).
Image tag allow to draw images on the canvas. You can have as many
as you want.
Each image
is coded with the keyword : image followed by an
incremented number:
The value is
composed by an image name, an X and Y position and finally a transparency
level.
Image_name,X pos,Y
pos[,Transparency[,width,height[,image_sensitive_value]][mirrored_image]]
gradient_linear
permit to draw multi-stops sized linear gradient on the canvas (see the
ADD_LINEAR_GRADIENT method in the DrawLAFBeanProperty documentation).
Image_name
can be one of the following :
·
Stored in the jar file : /image.gif
·
Stored on the local machine drive :
c:/image.jpg
·
Stored on an internet URL : http://..../image.jpg
X pos and Y
pos are expressed in pixel coordinates
Transparency level must be a real value between
0 and 1
Width and
height can be used to “stretch” the image to the desired size (both have to
be provided).
The -1 special value
can be set to the width or height parameter to keep the aspect ratio.
image_sensitive_value
is the name of the image that will be sent to the Bean Area when the image is
clicked.
Providing
this value turns the simple image into a “sensitive” area.
If you do
not want to provide the third previous parameters (transparency, width en
height) put a – instead the values.
mirrored_image,
if set to true add a reflected image to under the main image.
Examples:
Image1:
/image1.gif,1,1,.5
Image2:
c:/images/image2.jpg,100,1,.5
/* image
scaled to 300 pixels width and keep aspect ratio on height axis */
Image2:
c:/images/image2.jpg,100,1,.5,300,-1
/* image
with no transparency, no scale, but sensitive feature */
Image2:
c:/images/image2.jpg,100,1,-,-,-,image value
/* image
with no transparency, no scale, no sensitive feature but mirrored image */
Image2: c:/images/image2.jpg,100,1,-,-,-,-,true
…
1.
Tags for the block title
.tableTitle {
font-family:Arial
font-size:16
font-weight:bold
line-color: r0g255b0
line-dash:
16,8
line-cap:
square
line-join: miter
line-transparency:.8
shadow-line-color: r200g200b200
shadow-line-transparency:.8
line-width:4
text-transparency:.8
text-color:none
text-gradient:
r0g255b0,r0g100b0
text-align:
center
text-line-Hoffset: 0
text-line-Voffset: 8
title-head-offset:
-15
}
Font-family
indicates the name of the font used to draw the title
Font-size indicates the
font size in points
Font-weight
can take one of the following values:
·
Plain
·
Bold
·
Italic
·
Bolditalic
Line-color indicates the RGB color of the main separation
line
Line-cap indicates the
kind of end of line used
·
Square
·
Round
·
Butt
Line_join indicates the kind of line join used:
·
Bevel
·
Round
·
Miter
Line-dash allows to indicate the dashed values. The 2 integer values are
separated by a comma.
First
integer indicates the number of pixels visibles.
Second
integer indicates the number of pixels invisible (gap).
For
example, 10,10 will draw the following dashed
line: -- -- --
-- -- -- --
20,10 will draw : ---- ----
---- ---- ----
Line-transparancy indicates the transparency level (between 0 and 1)
Line-width
indicates the width of the line in pixels
Text-transparancy indicates the transparency level of the title (between 0 and 1)
Text-color indicates the RGB value of the title (none or missing if you use a
gradient title)
Test-gradient
gives the 2 colors of the text gradient
Text-align
can take one of the following values:
·
Left
·
Center
·
Right
Text-line-Hoffset
Text-line-Voffset
Title-head-offset
2.
Tags for the block table header
.tableHeader1
{
font-family:
Arial;
font-size:12
font-weight:bold
frame-color:r135g55b255
inside-color:r243g236b255
font-color:r0g0b255
font-gradient:
r0g0b255,r155g50b255
frame-gradient:
r255g0b0,r255g255b255
frame-gradient-direction:
UpToDown
shade-color:r160g160b160
frame-width:1
frame-rounded-border:
10
transparency:.8
text-align:left
text-align-offset:5
}
Font-family
indicates the name of the font used to draw the title
Font-size indicates the
font size in points
Font-weight
can take one of the following values:
·
Plain
·
Bold
·
Italic
·
Bolditalic
Frame-color indicates
the color of the frame (draw)
Inside-color indicates
the color inside the frame (fill)
Font-color indicates
the header title font color
Font-gradient indicates the header title font
gradient colors
Frame-gradient indicates the frame inside gradient
colors
Frame-gradient-direction indicates the gradient
direction:
·
LeftToRight
(default)
·
UpToDown
Shade-color indicates
the color of the shade behind the frame
Frame-width indicate the frame width in pixels
Frame-rounded-border allows to have rounded frames. The
value must be between 0 and 25.
Transparency indicates the frame inside color transparency
Text-align can be:
·
Left
·
Center
·
Right
Text-align-offset indicates the offset between the
cell border and the text
3.
Tags for the block table body
.tableBody1
{
font-family:Arial
font-size:8
font-weight:bold
frame-color:r135g55b255
inside-color:r243g236b255
shade-color:r160g160b160
frame-width:1
frame-rounded-border:
10
transparency:.8
odd-foreground-color:r128g128b255
even-foreground-color:r0g0b255
odd-background-color:r240g225b255
even-background-color:r255g255b255
}
Font-family
indicates the name of the font used to draw the title
Font-size indicates the
font size in points
Font-weight
can take one of the following values:
·
Plain
·
Bold
·
Italic
·
Bolditalic
Frame-color indicates
the color of the frame (draw)
Inside-color indicates
the color inside the frame (fill)
Frame-width indicate the frame width in pixels
Frame-rounded-border allows to have rounded frames. The
value must be between 0 and 25.
Transparency indicates the frame inside color transparency
Odd-foreground-color
indicates the foreground color for odd lines
even-foreground-color
indicates the foreground color for even lines
Odd-background-color
indicates the background color for odd lines
even-background-color
indicates the background color for even lines
4.
Tags for the GUI elements
.GUIPropertiesOracle {
type:gui
scheme:silver
enhanced-lists:true
tlist-multi-selection:true
tlist-sorted:false
tlist-orientation:vertical
poplist-settimekeyselect:8000
/*
/* menu, window caption and status bar */
/*
light-color-scheme:true
menu-use-scheme:true
window-use-scheme:true
status-use-scheme:true
/*
/* tab properties */
/*
tab-use-scheme:false
tab-selected-colors:r255g255b255,r51g102b153
tab-colors:r0g0b204,r255g255b120
/*
/* dialog properties */
/*
dialog-use-scheme:true
dialog-font:Verdana,14
/*
/* frames properties */
/*
frame-use-scheme:true
frame-font:Verdana,B,12
frame-title-position:top,left
frame-opaque:false
/*frame-background-colors:r0g0b255
frame-colors:r255g255b0
frame-gradient-orientation:
frame-round-border:true
frame-title-colors:r0g0b255
/*
/* other GUI element properties */
/*
element1:TextField,Tahoma,B,12,r0g128b255
element2:Button,Tahoma,B,12,r0g128b255
element3:CheckBox,Tahoma,B,12,r0g128b255
element4:RadioB,Tahoma,B,12,r0g128b255
element5:Tree,Tahoma,B,12,r0g128b255
element6:ComboBox,Tahoma,B,12,r0g128b255
element7:Tree,Tahoma,B,12,r0g128b255
element8:MenuBar,Tahoma,B,12,r255g128b0,r200g255b150
element9:MenuOption,Tahoma,B,14,r0g185b90,r255g255b150
element10:Status,Tahoma,B,12,r255g255b255,r0g185b90
element11:Window,Verdana,BI,16,r255g255b128
item-focus-background:true
}
light-color-scheme
allows switching to lighter colors
menu-use-scheme indicates if the menu is painted with the current selected scheme colors
window-use-scheme indicates if the window caption bar is painted with the current
selected scheme colors
status-use-scheme indicates if the status bar is painted with the current selected scheme
colors
tab-use-scheme indicates if the tabs are painted with the current selected scheme colors
dialog-use-scheme indicates if the input dialog boxes is painted with the current
selected scheme colors
frame-use-scheme indicates if the frames are painted with the current selected scheme colors
elementX is used to define some particular GUI element settings:
·
TextField single-line text item
·
TextArea multi-line text item
·
Button Push button
·
CheckBox Check box
·
RadioB Radio Group
·
Tree Tree
·
ComboBox Combo box
·
PopList Pop lists
·
Tlist T lists
·
MenuBar the popup menu
·
MenuOption the menu options
·
Status status bar
·
Window window title caption
X is an incremental number that does not contain gaps.
If
you don’t put properties to specific elements, reorder the list so that there
is not gap between two numbers:
e.g.:
element1:TextField,Tahoma,B,12,r0g128b255
element2:Status,Tahoma,B,12,r255g255b255,r0g185b90
element3:Window,Verdana,BI,16,r255g255b128
item-focus-background indicates if the Text Items have the background painted when they get
the focus.
summary figure that shows the common block
tags:
