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
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]]]
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
They can also
include the following special keywords:
For X_Pos:
-
LEFT
-
CENTER
-
RIGHT
-
IMAGEWIDTH
-
IMAGEWIDTH/2
For Y_Pos:
-
TOP
-
CENTER
-
BOTTOM
-
IMAGEHEIGHT
-
IMAGEHEIGHT/2
For instance,
to center an image at the exact center of the canvas, provide parameters as
follows:
CENTER-IMAGEWIDTH/2,CENTER-IMAGEHEIGHT/2
Keywords and
numbers can be mixed with the + or – sign:
RIGHT-IMAGEWIDTH-10,LEFT+15
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.
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
…
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