How to: |
Active Technologies for Adobe Flash Player allow you to customize the way that the containers for the various parts of an application are displayed on an active report or active dashboard. For example, you can define the visual characteristics of the container (the component) that holds the contents of an application report or the contents of an application window. You can also customize how the dashboard bar appears on an active dashboard.
All the styling options for the containers and dashboard bar are stored in the irpfsty.js file, found in the \home\etc directory of the WebFOCUS Reporting Server. You can copy this file to your application folder and edit the contents to customize the containers or dashboard bar for your application.
Upgrade requirement: If an irpfsty.js file created prior to WebFOCUS Reporting Server Version 7 Release 7.04 already exists in your application folder, you must replace it with the latest version of irpfsty.js that is supplied with the product. This requirement applies to other JavaScript files as well, including irpstd.js and irpfstd.js. Use the files from the WebFOCUS Reporting Server (\home\etc directory), and apply your customization changes to them.
This should be the same directory as the location of the active report or active dashboard. For example, from the Projects on localhost area of the Developer Studio Desktop, paste irpfsty.js in the Other subfolder of the project folder.
The section of the irpfsty.js file that controls how a report container is styled is as follows.
.arReportObject { borderColor: #b7babc; dropShadowEnabled: true; shadowDistance: 10; shadowDirection: right; dropShadowColor: #666666; fontSize: 12; borderStyle: solid; verticalGap: 0; backgroundColor: white; horizontalAlign: center; }
dropShadowEnabled: false;
In this example, do the following:
The code looks like this:
dropShadowEnabled: true; . . . dropShadowColor: #009dff
On the following sample active dashboard, there is a blue shadow behind all report containers.
The section of the irpfsty.js file that controls how a window container is styled is as follows.
.arWindow{ dropShadowEnabled: true; shadowDistance: 10; shadowDirection: right; dropShadowColor: #666666; fontSize: 12; }
Adjust the values for the properties as desired. For example, you can:
dropShadowEnabled: false;
In this example, do the following:
The code looks like this:
dropShadowEnabled: true; . . . dropShadowColor: #b60cb0;
On the following sample active dashboard, there is a magenta shadow behind the container for the filter selection window.
The default section of the irpfsty.js file that controls how the dashboard bar is styled is as follows.
.arDashboardBar { backgroundColor: #ffffff; borderColor: #cccccc; selectionColor: #7FCEFF; color: #003300; textRollOverColor: #0b333c; textSelectedColor: #0b333c; themeColor: #009dff; fontSize: 12; fontWeight: bold; textAlign: left; paddingTop:2; paddingBottom:2; paddingLeft:4; paddingRight:4; borderStyle: outset; borderThickness: 10; }
By default, an active dashboard displays a shadow underneath the dashboard bar. You can add the following line of code to the .arDashboardBar section of the irpfsty.js file to suppress the shadow:
dropShadowEnabled: false;
For the purpose of this example, suppress the shadow underneath the dashboard bar by adding the preceding line of code to the irpfsty.js file.
The code looks like this:
.arDashboardBar { backgroundColor: #ffffff; borderColor: #cccccc; dropShadowEnabled: false; . . .
Based on the sample values used in this procedure, there is:
If you had also chosen to suppress all the shadows behind the report containers and the window containers (dropShadowEnabled: false;), the dashboard would look like the following.
WebFOCUS |