Copyright (c) 2010, HexaTech, USA.
VIEWidget Documentation
Introduction
Tutorial Guide
Interaction with Databases
Objects
Methods Summary
Properties Summary
Events Summary
Summary by Category
Commercial Deployment Note
Tech Support
Introduction
Overview
VIEWidget is a javascript-programmable publishing and print preview control for producing
drawings and reports with book-quality layouts and prints. It is a cross-browser and
cross-webserver solution. Like YouTube, the only requirement is Flash Player 9 or later that
has the ubiquitous penetration rate of more than 99%. The only skill you need is basic javascript and html, and no Flash knowledge is needed. Instead of
programming against screen with pixels, you can now directly program against
paper with physical inch (or mm) length units as the x-y coordinates.
Usage Description
The control has a single absolute coordinate system, with (refMarginLeft,
refMarginTop) as the origin. It uses logical
points as units. By default, one inch equals 96 logical points so that you can
still use the familiar font size values for display (note: this does not affect
display or print resolution; the logical points are not pixels and can be
decimal numbers). You can program using inch via getInch
or millimeter via getMM.
Tutorial Guide
Quick Guide
Interaction with Databases
Quick Guide
Using VIEWidget is simple. You first create an empty <div> tag with id
("controlholder") to hold the control. Then modify Template Sample 1
below with three quick steps.
Step 1. include vwcontrol.js file with correct path.
Step 2. Modify the control constants in the template
Step 3. Write code to generate your report inside the generate_report function.
Template Sample 1
<html>
<head>
<!--***** Step 1: include vwcontrol.js with
correct path *****-->
<script src="vwcontrol.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
//***** Step 2: modify the following control constants *****
var screenSize = vwcontrol.get_screen_avail_size();
var CONTAINER_ID = "controlholder";
//your <div> tag id to hold the control
var CONTROL_SOURCE = "viewidget.swf"; //point to the control swf file
var CONTROL_ID = "control1";
//give the control an instance id
var CONTROL_WIDTH = 0.8*screenSize.width;
//specify the control width
var CONTROL_HEIGHT = 0.7*screenSize.height; //specify the control height
function control_start() {
vwcontrol.load(CONTAINER_ID, CONTROL_SOURCE, CONTROL_ID,
CONTROL_WIDTH, CONTROL_HEIGHT);
}
window.onload = control_start;
function vwcontrol_onload() {
var control1 = vwcontrol.get_control(CONTROL_ID);
generate_report(control1);
}
//***** Step 3: write code to generate report (may use separate js file if
extensive coding needed)*****
function generate_report(control1) {
//get length unit
var INCH = control1.getInch();
//create document
control1.startDoc();
control1.drawString(1*INCH, 1*INCH, "Hello World from Page 1");
//...draw other stuff here
//create 2nd page
control1.newPage();
control1.drawString(1*INCH, 1*INCH, "Hello World from Page 2");
//...draw other stuff here
//end document
control1.endDoc();
//preview first page (page index=0)
control1.setCurrentPage(0);
control1.preview();
}
</script>
</head>
<body>
<div id="controlholder" style="text-align:center"></div>
</body>
</html>
Interaction with Databases
VIEWidget is database neutral and is not tied to a particular database for
maximum flexibility. You use SQL to retrieve data from your databases and supply the data
to VIEWidget as strings. You can supply the data to the control
"on-demand" via Ajax, or "in-place" by storing the data in
the same web page. Here we discuss the latter only.
You can use a
hidden <textarea> tag to store the data . The following is an example.
<textarea id="dataholder" style="display: none">
<ProductCategory>Sports Shoes</ProductCategory>
<ProdcutTable>Product ID|Product Name|Price^1001|Tennis
Shoes|$199.95^1001|Soccer Shoes|$149.95^1001|Basketball
Shoes|$179.95</ProdcutTable>
</textarea>
In this example, the data is in flat XML format without parent node
(key-value pairs only) for easy generating by your web server and easy
parsing by the control.
You can use vwcontrol.xml_parse() to parse the data
to an object, and get the data items by key and supply them to
the control as shown below. The example draws a page title and 3 column x 3 row
table. As you can see, the report generating code is much
more succinct than the conversional HTML tag building approach.
var data = document.getElementById("dataholder").innerHTML;
var dataobj = vwcontrol.xml_parse(data);
var control1 = vwcontrol.get_control(CONTROL_ID);
var INCH = control1.getInch();
//generate a report with a title and a table
var format = "96|96|96";
control1.startDoc();
control1.drawPageBorder();
control1.drawPageHeader(dataobj["ProductCategory"], "fontSize=24;algin=center;marginTop=96");
control1.drawTable(2.25*INCH,2*INCH,dataobj["ProdcutTable"],
format);
control1.endDoc();
control1.preview();
The complete page is in Sample 2.
VIEWidget Objects
String, Text, and Table etc are treated as objects. Typically, A VIEWidget object has a surrounding rectangle border (the border is invisible if
border=0; note: boolean value can be either 1/0 or true/false). The following
are some of object properties:
border - Boolean switch for showing border
borderColor - object border color
background - Boolean switch for showing
background color
backgroundColor - Object background color
color - Color for text
algin - alignment
marginLeft - left margin
marginRight - right margin
marginTop - top margin
marginBottom - bottom margin
Object Properties
When you draw an object without specifying properties for it, the default
applicable global properties will be used for
the object.
For example,
drawString(INCH, INCH, "Hello
World", "fontSize=24") will use the object specific fontSize
property while
drawString(INCH, INCH, "Hello
World") will use the global default.
The property keywords are case-sensitive. The global properties can be
"get" and set via getProperty and setProperty.
Object Size Calculation
After you draw a text object, the object's w and h (width and height), and
position (x, y) as well as bottom-right corner (x2, y2) are automatically
calculated and returned. For example:
var obj= control1.drawString(INCH, INCH, "Hello World
from Line 1");
obj = control1.drawString(obj.x, obj.y2, "Hello World from Line 2");
You can also calculate a text object's size first before drawing it.
Methods Summary
calcImage
calcPolyObject
calcString
calcStringHtml
calcTable
calcTableHtml
calcTableRow
calcTableRowHtml
calcText
calcTextHtml
calcZoom
centerPagePoint
clear
drawArrow
drawCalcImage
drawCalcObject
drawCircle
drawCurve
drawEllipse
drawGrid
drawImage
drawLine
drawLine2
drawPageBorder
drawPageFooter
drawPageHeader
drawPageNumbering
drawPolyline
drawPolygon
drawPolyObject
drawRect
drawRoundRect
drawString
drawStringHtml
drawTable
drawTableHtml
drawTableRow
drawTableRowHtml
drawTableRowHtmlNext
drawTableRowNext
drawText
drawTextHtml
endDoc
getAvailPageSize
getCurrentPage
getInch
getMM
getPageCenter
getPageCount
getProperty
getToolbarVisible
getViewProperty
getZoom
newPage
preview
previewFit
previewFitPage
printPages
propertyExists
removeImage
removePage
setCurrentPage
setProperty
setToolbarVisible
setViewProperty
setZoom
startDoc
Properties Summary
(All property keywords are case-sensitive)
Document Properties:
align
arrowHeadLength
arrowHeadWidth
autoMarginBottom
autoMarginTop
autoPageAdvance
background
backgroundColor
border
borderColor
color
fontBold
fontItalic
fontName
fontSize
fontUnderline
instanceId
lineColor
lineSpacing
lineWidth
marginBottom
marginLeft
marginRight
marginTop
objectAlign
orientation
pageBorder
pageHeight
pageWidth
refMarginBottom
refMarginLeft
refMarginRight
refMarginTop
rotation
tableColSep
tableRowSep
textMouseEnabled
vAlign
unit
Viewer Properties:
ambientColor
ambientMarginHorz
ambientMarginVert
mouseScroll
mouseZoomMode
pageX
pageY
toolbarVisible
horzScrollbarVisible
vertScrollbarVisible
zoom
Events Summary
vwcontrol_calcImage_onload
vwcontrol_image_onload
vwcontrol_mouse_click
vwcontrol_mouse_doubleClick
vwcontrol_mouse_move
vwcontrol_mouse_down
vwcontrol_mouse_up
vwcontrol_mouse_out
vwcontrol_mouse_over
vwcontrol_onload
vwcontrol_print_onclick
Summary by Category
- Page Attributes and Control
- Preview Attributes and Control
- Print Attributes and Control
- Object Attributes and Control
- Drawing Attributes and Control
- Text Drawings (String,
Text, Table and Html)
- Graphics Drawings
- Bitmap
- Document Control
- Miscellaneous
Page Attributes and Control
clear
drawPageBorder
drawPageFooter
drawPageHeader
drawPageNumbering
getAvailPageSize
getCurrentPage
getInch
getMM
getPageCenter
getPageCount
newPage
removePage
setCurrentPage
autoMarginBottom
autoMarginTop
autoPageAdvance
orientation
pageBorder
pageHeight
pageWidth
refMarginBottom
refMarginLeft
refMarginRight
refMarginTop
unit
Preview Attributes and Control
calcZoom
centerPagePoint
getToolbarVisible
getViewProperty
getZoom
preview
previewFit
previewFitPage
setToolbarVisible
setViewProperty
setZoom
ambientColor
ambientMarginHorz
ambientMarginVert
mouseScroll
mouseZoomMode
pageX
pageY
textMouseEnabled
toolbarVisible
horzScrollbarVisible
vertScrollbarVisible
zoom
Print Attributes and Control
printPages
vwcontrol_print_onclick
align
marginBottom
marginLeft
marginRight
marginTop
objectAlign
rotation
vAlign
Drawing Attributes and Control
background
backgroundColor
border
borderColor
lineColor
lineWidth
Text Drawings (String,
Text, Table and Html)
calcString
calcStringHtml
calcText
calcTextHtml
calcTableRow
calcTableRowHtml
drawCalcObject
drawString
drawStringHtml
drawTable
drawTableHtml
drawTableRow
drawTableRowHtml
drawTableRowHtmlNext
drawTableRowNext
drawText
drawTextHtml
color
fontBold
fontItalic
fontName
fontSize
fontUnderline
lineSpacing
tableColSep
tableRowSep
calcPolyObject
drawArrow
drawCircle
drawCurve
drawEllipse
drawGrid
drawLine
drawLine2
drawPolyline
drawPolygon
drawPolyObject
drawRect
drawRoundRect
arrowHeadLength
arrowHeadWidth
Bitmap
calcImage
drawCalcImage
drawImage
removeImage
vwcontrol_image_onload
vwcontrol_calcImage_onload
clear
endDoc
getProperty
propertyExists
setProperty
startDoc
unit
[Methods below]
calcImage Method
Description
Calculates the width and height of an image. The image loading (download ) is an
asynchronous process. The calculated result will not be returned from the
method. Instead, when the download is completed, the vwcontrol_calcImage_onload
event will be fired and you obtain the result from the event.
Syntax
Object calcImage(String id, String data, String prop="")
where
id: an id string you assign to the image.
data: url of the image
prop: a string containing properties for the object.
See Also
vwcontrol_calcImage_onload,
drawCalcImage, removeImage
Example
See example in vwcontrol_calcImage_onload.
calcPolyObject Method
Description
Calculates a poly object, which may consist of one or more polygon and polylines.
The object can be transformed by translating, scaling and rotating. You may use
this method to calculate the destination position of a certain point on the
object after the transformation.
Syntax
Object calcPolyObject(Number x, Number y, Number w, Number h, String data, String
prop, String attr, Number angle, Number xRef, Number yRef, Number xCalc, Number
yCalc)
where
x, y: x and y coordinates of the destination position of a reference
point on the object. The reference point is specified by the xRef and yRef
arguments. After the transformation, the reference point will be translated to (x,y)
position.
w, h: width and height of the poly object.
If w>0 and h<0, w is used and the height is adjusted to keep the original aspect ratio;
If w<0 and h>0, h is used and the width is adjusted to keep the original aspect ratio;
If w>0 and h>0, the object is scaled to w and h.
data: poly object data.
data = subObject_1 | subObject_2 | ...|subObject_n
witn each subObject = polyString_1;polyString_2;...;polyString_n
and each polyString_i = a polygon or polyline string containing a sequence of X,
Y coordinates, separated by comma.
prop: a string containing properties to be applied to all sub objects.
attr: a string containing properties to be applied to individual sub objects. If
missing, the prop above will be used for all sub objects.
attr = subAttr_1 | subAttr_2 | ....|subAttr_n
with each subAttrib = prop_1;prop_2;...prop_n
and each prop_i = an applicable properties for the sub object.
angle: rotation angle in degrees with positive value for clockwise rotation. The
rotation is performed around the reference point (xRef, yRef).
xRef, yRef: x and y coordinates of a reference point on the object.
xCalc, yCalc: a point of the object to be calculated.
Return
Returns an object with calcX, calcY properties for the transformation result of
the point being calculated; x, y, w, h properties for the object's bounding
rectangle; and xp1,yp1,xp2,yp2,xp3,yp3,xp4,yp4 for four corner coordinates of
the bounding rectangle.
See Also
drawPolyObject
Example
See example in drawPolyObject.
calcString Method
Description
Calculates width and height for a single line string. After the
calculation, the object is stored in memory and you can draw the object at a
particular location with drawCalcObject. If you
have calculated an object and want to draw it, you should use drawCalcObject
instead of drawString for better performance (do
the same with other object types such as Text and TextHtml
etc).
Syntax
Object calcString(String data, String prop="")
where
data: a string to be calculated.
prop: an optional string containing properties to be used for drawing the object.
Return
Returns an object with w and h property as
the calculated width and height.
See Also
drawCalcObject.,
drawString
Example
//Calculate a string width and height
var INCH = control1.getInch();
var obj =
control1.calcString("This is a String object", "fontSize=24;fontBold=1");
control1.drawCalcObject(INCH+obj.w, INCH+obj.h);
calcStringHtml Method
Description
Calculates width and height for a single line html string. After the
calculation, the object is stored in memory and you can draw the object at a
particular location with drawCalcObject.
Syntax
Object calcStringHtml(String data, String
prop="", String css="")
where
data: a string to be calculated.
prop: an optional string containing properties to be used for drawing the object.
css: an optional string containing CSS style sheet string.
Return
Returns an object with its w and h property as
the calculated width and height.
See Also
drawCalcObject.,
drawStringHtml
Example
//Example 1
var obj = control1.calcStringHtml("This is a
<b>StringHtml</b> object", "fontSize=14",
"");
var objectWidth = obj.w;
var objectHeight = obj.h;
//Example 2 - use css style sheet
var css = ".cssred{color:#ff0000;font-size:14}
.cssblue{color:#00ff00;font-size:18}";
var data = "<span class='cssred'>This is a StringHtml
object</span>";
var obj = control1.calcStringHtml(data, "", css);
var objectWidth = obj.w;
var objectHeight = obj.h;
calcTable
Method
calcTableHtml
Method
Description
These are not implemented methods. Instead, use drawTable
or drawTableHtml with calc=true in the
object property settings.
See Also
drawTable
drawTableHtml
calcText
Method
Description
Calculates height for a text object. After the calculation, the object is
stored in memory and you can draw the object at a particular location with drawCalcObject.
Syntax
Object calcText(Number w, String
data, String prop="")
where
w: desired width for the text object.
data: text data to be calculated.
prop: an optional string containing properties to be used for drawing the object.
Return
Returns an object with its h property as the
calculated height.
See Also
drawCalcObject.,
drawText
Example
var INCH = control1.getInch();
var obj = control1.calcText(INCH, "This is a text
object", "fontSize=24;fontBold=1");
control1.drawCalcObject(INCH+obj.w, INCH+obj.h);
calcTextHtml
Method
Description
Calculates height for a text html object. After the calculation, the
object is stored in memory and you can draw the object at a particular location
with drawCalcObject.
Syntax
Object calcTextHtml(Number w, String
data, String prop="", String css="")
where
w: desired width for the text object.
data: text data to be calculated.
prop: an optional string containing properties to be used for drawing the object.
css: an optional string containing CSS style sheet string.
Return
Returns an object with its h property as the
calculated height.
See Also
drawCalcObject.,
drawTextHtml
Example
var INCH = control1.getInch();
var obj = control1.calcTextHtml(INCH, "This is a
<b>text html</b> object");
var objectHeight = obj.h;
//css style sheet example
see calcStringHtml
calcTableRow
Method
Description
Calculates width and height for a table row object. After the
calculation, the object is stored in memory and you can draw the object at a
particular location with drawCalcObject.
Syntax
Object calcTableRow(String data, String format, String prop="", String
attr="")
where
data: specifies text data to be calculated.
data=column_1_text|column_2_text|...|column_n_text.
format: specifies format for the column widths.
format=column_1_width|column_2_width|...|column_n_width.
prop: an optional string containing properties applied to all cells in the row.
If missing, the global properties will be used.
attr: an optional string containing properties applied to individual cells in
the row. If missing, the prop properties above will apply to all cells. attr=column_1_attr|column_2_attr|...column_n_attr.
If column_i_attr is empty, the object's prop will apply to the cell.
Return
Returns an object with its w and h
property as the calculated width and height.
Object Specific Properties
tableSepCol - Separator for parsing table
column data strings. Default is pipe |.
tableSepRow - Separator for parsing table row
data strings. Default is ^.
See Also
drawCalcObject.,
drawTableRow
Example
The following illustrates a 3-column row with cell widths being 1, 2, and 1
inches.
var data = "col21|col22|col23";
var format = "96|192|96";
var prop = "border=1;marginLeft=20;marginRight=20;";
var attr = "color=#ff0000;align=left|color=#00ff00;align=center|color=#0000ff;align=right";
var obj = control1.calcTableRow(data, format, prop, attr);
var objectHeight = obj.h;
calcTableRowHtml Method
Description
Calculates width and height for a table row html object. After the
calculation, the object is stored in memory and you can draw the object at a
particular location with drawCalcObject.
Syntax
Object calcTableRowHtml(String data, String format, String prop="",
String attr="")
where
data: specifies text data to be calculated.
data=column_1_text|column_2_text|...|column_n_text.
format: specifies format for the column widths.
format=column_1_width|column_2_width|...|column_n_width.
prop: an optional string containing properties applied to all cells in the row.
If missing, the global properties will be used.
attr: an optional strings containing properties applied to individual cells in
the row. If missing, the prop properties above will apply to all cells. attr=column_1_attr|column_2_attr|...column_n_attr.
If column_i_attr is empty, the object's prop will apply to the cell.
Return
Returns an object with its w property and h
property as the calculated width and height.
Object Specific Properties
tableSepCol - Separator for parsing table
column data strings. Default is pipe |.
tableSepRow - Separator for parsing table row
data strings. Default is ^.
See Also
drawCalcObject.,
drawTableRowHtml
Example
The following illustrates a 3-column row with cell widths being 1, 2, and 1
inches.
var data =
"col21|<b>col22</b>|col23";
var format = "96|192|96";
var prop = "border=1;marginLeft=20;marginRight=20;";
var attr = "";
var obj = control1.calcTableRowHtml(data, format, prop, attr);
var objectHeight = obj.h;
calcZoom
Method
Description
Calculates page zoom value taking consideration of the page orientation.
Syntax
Number calcZoom(Number pageViewWidth)
where
pageViewWidth: page preview width in pixels
Return
Returns the calculated zoom value.
See Also
setZoom
Example
var zoom = control1.calcZoom(800);
control1.setZoom(zoom);
control1.preview(); //update view
centerPagePoint
Method
Description
Centers a point on the current page within the viewer (excluding the
toolbar).
Syntax
centerPagePoint(Number x, Number y)
where
x, y: specify a point on the current page.
See Also
setZoom
Example
var INCH = control1.getInch();
control1.centerPagePoint(4*INCH, 5*INCH);
clear Method
Description
Removes all pages from the document.
Syntax
clear()
Example
control1.clear();
control1.preview(); //update view
drawArrow
Method
Description
Draws an arrow from point (x1,y1) to point (x2, y2).
Syntax
drawArrow(Number x1, Number y1, Number x2, Number y2, String prop="")
where
x1, y1: arrow starting point
x2, y2: arrow ending point
prop: a string containing property settings to be used for drawing. It is
optional.
Object Specific Properties
arrowHeadLength - Arrow head width
arrowHeadWidth - Arrow head length
Example
var INCH = control1.getInch();
control1.drawArc(INCH, INCH, 2*INCH, 3*INCH, "arrowHeadLength=10;arrowHeadWidth=6;background=1");
drawCalcImage Method
Description
Draws an image that has been previously calculated by calcImage.
Syntax
drawCalcImage(String id, Number x, Number y, Number w, Number h)
where
id: a string id that is specified in calcImage.
x, y: top-left position of the image
w: width of the image. if w<0, the width will be adjusted to keep the
original aspect ratio.
h: height of the image. if h<0, the height will be adjusted to keep the
original aspect ratio.
See Also
calcImage, vwcontrol_calcImage_onload
Example
See the example in vwcontrol_calcImage_onload.
drawCalcObject Method
Description
Draws the most recent calculated object for String, Text and TableRow
(applicable to methods in See Also below). After an object is calculated,
use this efficient method instead the regular draw method (which will
re-calculate and draw).
Note
Do not use this method for drawing whole table (use drawTable
or drawTableHtml instead).
Syntax
Object drawCalcObject(Number x, Number y)
where
x, y: specifies the location of the object
Return
Returns an object with x, y, w, h properties for the object's x, y, and width
and height.
See Also
calcString, calcStringHtml,
calcText, calTextHtml, calcTableRow,
calcTableRowHtml
Example
var INCH = control1.getInch();
var obj = control1.calcString("Hello World",
"fontSize=24;fontBold=1");
control1.drawCalcObject(INCH+obj.w, INCH+obj.h);
drawCircle Method
Description
Draws a circle.
Syntax
drawCircle(Number x, Number y, Number radius, String prop="")
where
x, y: center of the circle
radius: radius of the circel
prop: a string containing property settings to be used for drawing. It is
optional.
Example
var INCH = control1.getInch();
control1.drawCircle(INCH, INCH, 2*INCH, "lineColor=#ff0000");
drawCurve Method
Description
Draws a curve from starting point (x1,y1) to ending point (x2,y2) using the
control point (xc, yc). The curve drawn is a quadratic Bezier curve. Quadratic
Bezier curves consist of two anchor points (starting and ending) and one control
point. The curve interpolates the two anchor points and curves toward the
control point.
Syntax
drawCurve(Number x1, Number y1,Number xc, Number yc,Number x2, Number y2, String
prop="")
where
x1, y1: starting point of the curve
xc, yc: control point of the curve
x2, y2: ending point of the curve
prop: a string containing property settings to be used for drawing. It is
optional.
Example
var INCH = control1.getInch();
control1.drawCurve(INCH, INCH, 2*INCH, 0.5*INCH, 3*INCH,
INCH, "lineColor=#ff0000");
drawEllipse
Method
Description
Draws an ellipse.
Syntax
drawEllipse(Number x, Number y, Number w, Number h, String prop="")
where
x, y: x and y of the bounding rectangle
w, h: width and height of the bounding rectangle
prop: a string containing property settings to be used for drawing. It is
optional.
Example
var INCH = control1.getInch();
control1.drawEllipse(INCH, INCH, 2*INCH, 1*INCH, "lineColor=#ff0000");
drawGrid
Method
Description
Draws a grid.
Syntax
drawGrid(Number x, Number y, Number w, Number h, Integer horzCells, Integer
vertCells, String prop="")
where
x, y: top-left corner of the grid
w, h: width and height of the grid
horzCells: number of horizontal grid cells
vertCells: number of vertical grid cells.
prop: a string containing property settings to be used for drawing. It is
optional.
Example
var INCH = control1.getInch();
control1.drawGrid(0,0,8*INCH,10*INCH,8,10);
drawImage
Method
Description
Draws an image. The image loading (download ) is an asynchronous
process. When the download is completed, the vwcontrol_image_onload
event will be fired and you obtain the original image width and height from the
event.
Syntax
drawImage(Number x, Number y, Number w, Number h, String
data, String prop="")
where
x, y: top-left position of the image
w: width of the image. if w<0, the width will be adjusted to keep the
original aspect ratio.
h: height of the image. if h<0, the height will be adjusted to keep the
original aspect ratio.
data: specifies the url for the image
prop: a string containing property settings to be used for drawing. It is
optional.
See Also
vwcontrol_image_onload
calcImage
Example
//draw an image and adjust the image height to keep the original aspect ratio
var INCH = control1.getInch();
control1.drawImage(INCH,INCH,1*INCH,-1,"http://example.com/example.jpg");
drawLine
Method
Description
Draws a solid line from point (x1,y1) to point (x2,y2).
Syntax
drawLine(Number x1, Number y1,Number x2, Number y2, String prop="")
where
x1, y1: starting point of the line
x2, y2: ending point of the line
prop: a string containing property settings to be used for drawing. It is
optional.
See Also
drawLine2
Example
var INCH = control1.getInch();
control1.drawLine(INCH, INCH, 2*INCH, 2*INCH, "lineColor=#ff0000");
drawLine2
Method
Description
Draws a dashed line. You may also use the dashed line to mimic a dotted line as
shown below.
Note
Flash does not currently support dashed line. A workaround needs to be used, and the result
is not perfect. Unless you have to, use drawLine
instead.
Syntax
drawLine2(Number x1, Number y1,Number x2, Number y2, String prop="")
where
x1, y1: starting point of the line
x2, y2: ending point of the line
prop: a string containing property settings to be used for drawing. It is
optional.
Method Specific Properties
dashLength: dash length
gapLength: gap length between adjacent dash segments.
See Also
drawLine
Example
var INCH = control1.getInch();
control1.drawLine2(0*INCH, 0*INCH, 2*INCH,
2*INCH, "lineType=dash;dashLength=5;gapLength=5");
//use dashed line to mimic a dotted line
control1.drawLine2(0*INCH, 0*INCH, 2*INCH, 3*INCH, "lineType=dash;dashLength=1;gapLength=10");
drawPageBorder
Method
Description
Draws border for the page. The border is drawn in accordance with the reference
margins (refMarginLeft, refMarginTop,refMarginRight,
refMarginBottom).
Syntax
drawPageBorder(String prop="")
where
prop: a string containing property settings to be used for drawing. It is
optional.
See Also
drawPageHeader, DrawPageFooter
refMarginLeft, refMarginTop,refMarginRight,
refMarginBottom
Example
control1.drawPageBorder("lineWidth=1");
drawPageFooter
Method
Description
Draws a footer for the page..
Syntax
drawPageFooter(String data, String prop="")
where
data: a text string to be drawn
prop: a string containing property settings to be used for drawing. It is
optional.
See Also
drawPageHeader, DrawPageBorder,
drawPageNumbering
refMarginLeft, refMarginTop,refMarginRight,
refMarginBottom
Example
control1.drawPageFooter("Left Footer","align=left");
drawPageHeader
Method
Description
Draws a header for the page..
Syntax
drawPageHeader(String data, String prop="")
where
data: a text string to be drawn
prop: a string containing property settings to be used for drawing. It is
optional.
See Also
drawPageFooter, DrawPageBorder,
drawPageNumbering
refMarginLeft, refMarginTop,refMarginRight,
refMarginBottom
Example
control1.drawPageHeader("Center Header","align=center;marginTop=20");
drawPageNumbering
Method
Description
Draws page numbers for all pages. You typically use this method
immediately before endDoc.
Syntax
drawPageNumbering(String data="", String prop="")
where
data: specifies numbering label with pageNumber and pageCount placeholders. For
example, data = "%pageNumber% of %pageCount%";
or data = "Page %pageNumber%".
If missing, the default is data="%pageNumber%".
prop: a string containing property settings to be used for drawing. It is
optional.
Method Specific Properties
firstPageNumberVisible: specifies whether or not the page number will be drawn
for the first page. It is a boolean value (1/0 or true/false).
firstPageStartNumber:: specifies the starting number for the first page.
See Also
drawPageFooter, DrawPageBorder,
drawPageNumbering
refMarginLeft, refMarginTop,refMarginRight,
refMarginBottom
Example
control1.startDoc();
//....
control1.drawPageNumbering("%pageNumber% of %pageCount%",
"firstPageNumberVisible=1;firstPageStartNumber=1");
control1.endDoc();
drawPolyline Method
Description
Draws polyline.
Syntax
drawPolyline(String data, String prop="")
where
data: A string contains a sequence of x, y coordinates, in logical points, separated
by comma. The x,y sequence forms the polyline.
prop: a string containing property settings to be used for drawing. It is
optional.
See Also
drawPolygon
Example
control1.drawPolyline("96,96,192,192,288,96","lineWidth=1;lineColor=#0000ff");
drawPolygon
Method
Description
Draws polygon
Syntax
drawPolygon(String data, String prop="")
where
data: A string contains a sequence of x, y coordinates, in logical points, separated
by comma. The x,y sequence forms the polygon.
prop: a string containing property settings to be used for drawing. It is
optional.
See Also
drawPolyline
Example
control1.drawPolygon("96,96,192,192,288,96","lineWidth=1;lineColor=#0000ff;background=1;backgroundColor=#00ff00");
drawPolyObject
Method
Description
Draws a poly object, which may consist of one or more polygon and polylines. The
object can be scaled and rotated. You may use calcPolyObject to calculate the destination position of a certain point on the
object after the transformation.
Syntax
drawPolyObject(Number x, Number y, Number w, Number h, String
data, String prop="", String attr="")
where
x, y: x and y coordinates of the destination position of a reference
point on the object. The reference point is specified by objectRefX
and objectRefY in prop argument.
w, h: width and height of the poly object.
If w>0 and h<0, w is used and the height is adjusted to keep the original aspect ratio;
If w<0 and h>0, h is used and the width is adjusted to keep the original aspect ratio;
If w>0 and h>0, the object is scaled to w and h.
data: poly object data.
data = subObject_1 | subObject_2 | ...|subObject_n
witn each subObject = polyString_1;polyString_2;...;polyString_n
and each polyString_i = a polygon or polyline string containing a sequence of X,
Y coordinates, separated by comma.
prop: a string containing properties to be applied to all sub objects.
The string can contain transformation specific property keys, objectRefX,
objectRefY and objectRotation. A reference point on the
object can be defined by (objectRefX, objectRefY). If the point is missing, the
top-left corner of the bounding rectangle of the object will be the default
reference point. The reference point will be translated to the x, y position;
and the object will also be rotated around the reference point. The rotation
angle is specified by objectRotation in degrees with positive value for
clockwise rotation.
attr: a string containing properties to be applied to individual sub objects. If
missing, the prop above will be used for all sub objects.
attr = subAttr_1 | subAttr_2 | ....|subAttr_n
with each subAttrib = prop_1;prop_2;...prop_n
and each prop_i = an applicable properties for the sub object.
Other Method Specific Properties
polyType: specifies sub object type. polyType=polygon; or polyType=polyline.
Default is polygon.
See Also
calcPolyObject
Example
var INCH = control1.getInch();
//draw object
var data = "96,96,192,192,288,96|0,0,0,96,96,0|0,0,96,0,96,96";
var prop =
"border=1;background=1;backgroundColor=#ffff00;objectRefX=192;objectRefY=192;objectRotation=45";
var attr = "|background=1;backgroundColor=#00ff00|polyType=polyline;lineColor=#ff0000";
control1.drawPolyObject(2*INCH,
3*INCH, 2*INCH, 3*INCH, data, prop, attr);
//calculate object
var obj = control1.calcPolyObject(2*INCH, 3*INCH, 2*INCH, 3*INCH, data, prop,
attr, 45, 192, 192, 0 , 96);
control1.drawCircle(obj.calcX,obj.calcY,3,"lineColor=#ff0000");
control1.drawRect(obj.x,obj.y,obj.w,obj.h,"lineColor=#ff00ff");
control1.drawLine(obj.xp1,obj.yp1,obj.xp2,obj.yp2,"lineColor=#0000ff");
control1.drawLine(obj.xp2,obj.yp2,obj.xp3,obj.yp3,"lineColor=#0000ff");
control1.drawLine(obj.xp3,obj.yp3,obj.xp4,obj.yp4,"lineColor=#0000ff");
control1.drawLine(obj.xp4,obj.yp4,obj.xp1,obj.yp1,"lineColor=#0000ff");
drawRect Method
Description
Draws a rectangle.
Syntax
drawRect(Number x, Number y, Number w, Number h, String prop="")
where
x, y: top-left corner coordinates of the rectangle
w, h: width and height of the rectangle
prop: a string containing property settings to be used for drawing. It is
optional.
See Also
drawRoundRect
Example
var INCH = control1.getInch();
control1.drawRect(INCH, INCH, 2*INCH, 1*INCH, "lineColor=#ff0000");
drawRoundRect
Method
Description
Draws a round rectangle.
Syntax
drawRoundRect(Number x, Number y, Number w, Number h, Number w2, Number h2, String prop="")
where
x, y: top-left corner coordinates of the bounding rectangle
w, h: width and height of the bounding rectangle
w2, h2: width and height of the ellipse used to draw the rounded corners.
prop: a string containing property settings to be used for drawing. It is
optional.
See Also
drawRect
Example
var INCH = control1.getInch();
control1.drawRoundRect(INCH, INCH, 2*INCH, 1*INCH,
0.2*INCH, 0.2*INCH, "lineColor=#ff0000");
drawString
Method
Description
Draws a single line string. After drawing the object, the method returns
information about the position and size of the object.
Syntax
Object drawString(Number x, Number y, String data, String prop="")
where
x: x coordinate of the object
y: y coordinate of the object
data: a string to be drawn.
prop: a string containing property settings to be used for drawing. It is
optional.
Return
Returns an object with x, y, w and h
properties for x, y, width and height of the object. The returned object also
contains the bottom-right corner coordinates in x2 and y2 properties.
See Also
drawStringHtml
Example
//Draw two strings. The second string is immediately below the first string.
var INCH = control1.getInch();
var obj =
control1.drawString(INCH, INCH, "Hello World", "fontSize=14");
obj
= control1.drawString(INCH, INCH+obj.h, "Hello World 2", "fontSize=14");
drawStringHtml Method
Description
Draws a single line html string .After drawing the object, the method
returns information about the position and size of the object.
Note
A subset of HTML tags are supported (not the full HTML specification).
Syntax
Object drawStringHtml(Number x, Number y, String data, String prop="",
String css="")
where
x: x coordinate of the object
y: y coordinate of the object
data: an html string to be drawn
prop: a string containing property settings to be used for drawing the object.
It is optional.
css: a string containing CSS style sheet. It is optional.
Return
Returns an object with x, y, w and h
properties for x, y, width and height of the object. The returned object also
contains the bottom-right corner coordinates in x2 and y2 properties.
See Also
drawString
Example
//Example 1
var INCH = control1.getInch();
var obj = control1.drawStringHtml(INCH, INCH,
"This is a <b>StringHtml</b> object", "fontSize=14");
obj = control1.drawStringHtml(INCH, INCH + obj.h, "This is a <b>StringHtml</b>
object 2", "fontSize=14");
//Example 2 - use css style sheet
var css = ".cssred{color:#ff0000;font-size:14} .cssblue{color:#00ff00;font-size:18}";
var data = "<span class='cssred'>This is a StringHtml
object</span>";
var data2 = "<span class='cssred'>This is a StringHtml object
2</span>";
var obj = control1.drawStringHtml(INCH, INCH, data, "", css);
obj = control1.drawStringHtml(INCH, INCH + obj.h, data2, "", css);
drawTable
Method
Description
Draws a table. After drawing the object, the method returns information
about the position and size of the object. To calculate a table, use calc=true
in the prop argument as shown in the example below.
Syntax
Object drawTable(Number x, Number y, String data, String format, String
prop="", String attr="")
where
x: x coordinate of the object
y: y coordinate of the object
data: specifies text data for the table. data=row_1_data^row_2_data^...^row_n_data.
row_i_data=column_1_text|column_2_text|...|column_n_text.
format: specifies format for the column widths.
format=column_1_width|column_2_width|...|column_n_width.
prop: an optional string containing properties applied to all cells in a row. If
missing, the global properties will be used.
attr: an optional string containing properties applied to individual cells in a
row. If missing, the prop properties above will apply to all cells. attr=column_1_attr|column_2_attr|...column_n_attr.
If column_i_attr is empty, the object's prop will apply to a column cell.
Return
Returns an object with x, y, w and h
properties for x, y, width and height of the object. If autoPageAdvance
is set to true and the table overflows at the page bottom, multiple pages
may be automatically generated to fit the table. In this case, the returned
object also contains a pageCount property and y2 property for the bottom y
coordinate of the table on the last page.
Object Specific Properties
tableSepCol - Separator for parsing table
column data strings. Default is pipe |.
tableSepRow - Separator for parsing table row
data strings. Default is ^.
autoPageAdvance
- a boolean value specifying whether multiple pages will be automatically
created and drawn if the table overflows across page bottom.
See Also
drawTableRow, drawTableHtml,
autoPageAdvance,
autoMarginTop, autoMarginBottom
Example
The following example first draws a 3-column x 3-row table with column widths
being 1, 2, and 1 inches. A caption is also drawn for the table at its bottom.
//Draw table
var INCH = control1.getInch();
var data = "col11|col12|col13^col21|col22|col23^col31|col32|col33";
var format = "96|192|96";
var prop = "border=1;marginLeft=20;marginRight=20;";
var attr = "";
var obj = control1.drawTable(INCH, INCH, data, format, prop, attr);
control1.drawString(obj.x, obj.y2, "3 cols x 3 rows table");
//Calculate table
var prop2 = prop + ";calc=true";
obj = control1.drawTable(INCH, INCH, data, format, prop2, attr);
control1.drawString(obj.x, obj.y2, "3 cols x 3 rows table");
drawTableHtml Method
Description
Draws a table with its html cell text. After drawing the object, the
method returns information about the position and size of the object. To
calculate a table, use calc=true in the prop argument as shown in the example
below.
Note
A subset of HTML tags are supported (not the full HTML specification).
Syntax
Object drawTableHtml(Number x, Number y, String data, String format, String
prop="", String attr="")
where
x: x coordinate of the object
y: y coordinate of the object
data: specifies text data for the table. data=row_1_data^row_2_data^...^row_n_data.
row_i_data=column_1_text|column_2_text|...|column_n_text.
format: specifies format for the column widths.
format=column_1_width|column_2_width|...|column_n_width.
prop: an optional string containing properties applied to all cells in a row.
If missing, the global properties will be used.
attr: an optional string containing properties applied to individual cells in a
row. If missing, the prop properties above will apply to all cells. attr=column_1_attr|column_2_attr|...column_n_attr.
If column_i_attr is empty, the object's prop will apply to a column cell.
Return
Returns an object with x, y, w and h
properties for x, y, width and height of the object. If autoPageAdvance
is set to true and the table overflows at the page bottom, multiple pages
may be automatically generated to fit the table. In this case, the returned
object also contains a pageCount property and y2 property for the bottom y
coordinate of the table on the last page.
Object Specific Properties
tableSepCol - Separator for parsing table
column data strings. Default is pipe |.
tableSepRow - Separator for parsing table row
data strings. Default is ^.
autoPageAdvance
- a boolean value specifying whether multiple pages will be automatically
created and drawn if the table overflows across page bottom.
See Also
drawTableRowHtml, drawTable,
autoPageAdvance,
autoMarginTop, autoMarginBottom
Example
The following example first draws a 3-column x 3-row table with column widths
being 1, 2, and 1 inches. A caption is also drawn for the table at its bottom.
var INCH = control1.getInch();
var data =
"<b>col11</b>|<b>col12</b>|<b>col13</b>^col21|col22|col23^col31|col32|col33";
var format = "96|192|96";
var prop = "border=1;marginLeft=20;marginRight=20;";
var attr = "";
var obj = control1.drawTableHtml(INCH, INCH, data, format, prop, attr);
control1.drawString(obj.x, obj.y2, "3 cols x 3 rows table");
//Calculate table
var prop2 = prop + ";calc=true";
obj = control1.drawTableHtml(INCH, INCH, data, format, prop2, attr);
control1.drawString(obj.x, obj.y2, "3 cols x 3 rows table");
drawTableRow
Method
Description
Draws a table row. After drawing the object, the method returns
information about the position and size of the object. You can draw a subsequent
row with the same row properties with drawTableRowNext.
Syntax
Object drawTableRow(Number x, Number y, String data, String format, String
prop="", String attr="")
where
x: x coordinate of the object
y: y coordinate of the object
data: specifies text data for the row. data=column_1_text|column_2_text|...|column_n_text.
format: specifies format for the column widths.
format=column_1_width|column_2_width|...|column_n_width.
prop: an optional string containing properties applied to all cells in the row.
If missing, the global properties will be used.
attr: an optional string containing properties applied to individual cells in
the row. If missing, the prop properties above will apply to all cells. attr=column_1_attr|column_2_attr|...column_n_attr.
If column_i_attr is empty, the object's prop will apply to the cell.
Return
Returns an object with x, y, w and h
properties for x, y, width and height of the object.
Object Specific Properties
tableSepCol - Separator for parsing table
column data strings. Default is pipe |.
tableSepRow - Separator for parsing table row
data strings. Default is ^.
See Also
drawTableRowNext drawTableRowHtml
Example
The following first draws a 3-column row with cell widths being 1, 2, and 1
inches. Two subsequent rows are then drawn with drawTableRowNext.
var INCH = control1.getInch();
var data = "col11|col12|col13";
var format = "96|192|96";
var prop = "border=1;marginLeft=20;marginRight=20;";
var attr = "";
var data2 = "col21|col22|col23";
var data3 = "col31|col32|col33";
var obj1 = control1.drawTableRow(INCH, INCH, data, format, prop, attr);
obj2 = control1.drawTableRowNext(data2);
obj3 = control1.drawTableRowNext(data3);
control1.drawString(obj1.x+obj1.w, obj1.y, "<--This is row 1");
control1.drawString(obj1.x+obj1.w, obj2.y, "<--This is row 2");
control1.drawString(obj1.x+obj1.w, obj3.y, "<--This is row 3");
drawTableRowHtml
Method
Description
Draws a table row with cell text as html. After drawing the object, the
method returns information about the position and size of the object. You can
draw a subsequent row with the same row properties with drawTableRowHtmlNext.
Note
A subset of HTML tags are supported (not the full HTML specification).
Syntax
Object drawTableRowHtml(Number x, Number y, String data, String format, String
prop="", String attr="")
where
x: x coordinate of the object
y: y coordinate of the object
data: specifies text data for the row. data=column_1_text|column_2_text|...|column_n_text.
format: specifies format for the column widths.
format=column_1_width|column_2_width|...|column_n_width.
prop: an optional string containing properties applied to all cells in the row.
If missing, the global properties will be used.
attr: an optional string containing properties applied to individual cells in
the row. If missing, the prop properties above will apply to all cells. attr=column_1_attr|column_2_attr|...column_n_attr.
If column_i_attr is empty, the object's prop will apply to the cell.
Return
Returns an object with x, y, w and h
properties for x, y, width and height of the object.
Object Specific Properties
tableSepCol - Separator for parsing table
column data strings. Default is pipe |.
tableSepRow - Separator for parsing table row
data strings. Default is ^.
See Also
drawTableRowHtmlNext drawTableRow
Example
The following first draws a 3-column row with cell widths being 1, 2, and 1
inches. Two subsequent rows are then drawn with drawTableRowHtmlNext.
var INCH = control1.getInch();
var data = "col11|<b>col12</b>|col13";
var format = "96|192|96";
var prop = "border=1;marginLeft=20;marginRight=20;";
var attr = "";
var data2 = "col21|<b>col22</b>|col23";
var data3 = "col31|<b>col32</b>|col33";
var obj1 = control1.drawTableRowHtml(INCH, INCH, data, format, prop, attr);
obj2 = control1.drawTableRowHtmlNext(data2);
obj3 = control1.drawTableRowHtmlNext(data3);
control1.drawString(obj1.x+obj1.w, obj1.y, "<--This is row 1");
control1.drawString(obj1.x+obj1.w, obj2.y, "<--This is row 2");
control1.drawString(obj1.x+obj1.w, obj3.y, "<--This is row 3");
drawTableRowHtmlNext
Method
Description
Draws a subsequent table row that has the same row properties as those of
the most recent drawTableRowHtml.
Syntax
Object drawTableRowHtmlNext(String data)
where
data: specifies text data for the row. data=column_1_text|column_2_text|...|column_n_text.
Return
Returns an object with x, y, w and h
properties for x, y, width and height of the object.
See Also
drawTableRowHtml
Example
See the example in drawTableRowHtml.
drawTableRowNext Method
Description
Draws a subsequent table row that has the same row properties as those of
the most recent drawTableRow.
Syntax
Object drawTableRowNext(String data)
where
data: specifies text data for the row. data=column_1_text|column_2_text|...|column_n_text.
Return
Returns an object with x, y, w and h
properties for x, y, width and height of the object.
See Also
drawTableRow
Example
See the example in drawTableRow.
drawText
Method
Description
Draws text. After drawing the object, the method returns information
about the position and size of the object.
Syntax
Object drawText(Number x, Number y, Number w, String data, String
prop="")
where
x: x coordinate of the object
y: y coordinate of the object
w : your desired width for the object.
data: text data to be drawn.
prop: an optional string containing properties to be used for drawing the
object.
Return
Returns an object with x, y, w and h
properties for x, y, width and height of the object.
See Also
calcText,
drawTextHtml, drawString
Example
var INCH = control1.getInch();
var obj = control1.drawText(INCH, INCH,
INCH,"This is a text object", "fontSize=14");
obj = control1.drawText(INCH, obj.y + obj.h, INCH,"This is a text object
2", "fontSize=16");
drawTextHtml
Method
Description
Draws html text. After drawing the object, the method returns
information about the position and size of the object.
Note
A subset of HTML tags are supported (not the full HTML specification).
Syntax
Object drawTextHtml(Number x, Number y, Number w, String data, String
prop="", String css="")
where
x: x coordinate of the object
y: y coordinate of the object
w : your desired width for the object.
data: html text data to be drawn.
prop: an optional string containing properties to be used for drawing the
object.
css: an optional string containing CSS style sheet info.
Return
Returns an object with x, y, w and h
properties for x, y, width and height of the object.
See Also
calcTextHtml,
drawText, drawString
Example
//Example 1
var INCH = control1.getInch();
var obj = control1.drawTextHtml(INCH, INCH,
INCH,"This is a <b>TextHtml</b> object", "fontSize=14");
obj = control1.drawTextHtml(INCH, obj.y + obj.h, INCH,"This is a <b>TextHtml</b>
object 2", "fontSize=14");
//Example 2 - use css style sheet
var css = ".cssred{color:#ff0000;font-size:14}
.cssblue{color:#00ff00;font-size:18}";
var data = "<span class='cssred'>This is a TextHtml
object</span>";
var data2 = "<span class='cssblue'>This is a TextHtml object
2</span>";
var obj = control1.drawTextHtml(INCH, INCH, INCH, data, "", css);
obj = control1.drawTextHtml(INCH, obj.y+obj.h, INCH, data2, "",
css);
endDoc
Method
Description
Tells the control that the document ends and has no more page. You need
to call this method before you can preivew or print.
After you end the document, you can still go back to a particular page and draw
additional objects.
Syntax
end()
See Also
startDoc,
getPageCount, preview,
printPages
Example
See the example in
startDoc.
getAvailPageSize
Method
Description
Gets the available page size. The available page area excludes the
reference margins specified by refMarginLeft, refMarginTop,
refMarginRight, refMarginBottom.
The method will take consideration of the page orientation.
Syntax
Object getAvailPageSize()
Return
Returns an object with w and h properties for the available page width and
height.
See Also
refMarginLeft, refMarginTop,
refMarginRight, refMarginBottom,
orientation
Example
var obj = control1.getAvailPageSize();
var availablePageWidth = obj.w;
var availablePageHeight = obj.h;
getCurrentPage
Method
Description
Gets 0-based page index for current page.
Syntax
Integer getCurrentPage()
Return
Returns an integer for the current page index.
See Also
setCurrentPage
Example
var pageindex = control1.getCurrentPage();
getInch Method
Description
Gets number of logical points per inch.
Syntax
Number getInch()
Return
Returns a value for logical points per inch.
See Also
getMM, unit
Example
var INCH = control1.getInch();
control1.startDoc();
control1.drawString(INCH,
INCH, "Hello World");
control1.endDoc();
control1.preview();
getMM Method
Description
Gets number of logical points per millimeter (mm).
Note
You may change the default reference margins: refMarginLeft,
refMarginTop, refMarginRight,
refMarginBottom
Syntax
Number getMM()
Return
Returns a value for logical points per mm.
See Also
getInch, unit
refMarginLeft, refMarginTop,
refMarginRight, refMarginBottom
Example
var MM = control1.getMM();
control1.startDoc();
control1.drawString(25.4*MM,
25.4*MM, "Hello World");
control1.endDoc();
control1.preview();
getPageCenter
Method
Description
Gets x and y coordinates of the available page area. This method takes
consideration of the page orientation
Syntax
Object getPageCenter()
Return
Returns an object with x and y properties for the page center.
See Also
getAvailPageSize
refMarginLeft, refMarginTop,
refMarginRight, refMarginBottom,
orientation
Example
var obj = control1.getPageCenter();
var centerX = obj.x;
var centerY = obj.y;
getPageCount Method
Description
Gets page count in the document.
Syntax
Integer getPageCount()
Return
Returns an integer for page count.
Example
var pageCount = control1.getPageCount();
getProperty
Method
Description
Gets a global (document level) property by property keyword. For the
viewer properties, you may use getViewProperty.
Syntax
getProperty(String key)
where
key: the property keyword. It is case-sensitive.
Return
Returns a property value associated with the keyword.
See Also
propertyExists,
setProperty, getViewProperty
Example
var fontSize = control1.getProperty("fontSize");
getToolbarVisible
Method
Description
Gets a boolean value indicating whether the toolbar is visible or not.
Syntax
Boolean getToolbarVisible()
Return
Returns true for visible or false for invisible.
See Also
setToolbarVisible
Example
var visible = control1.getToolbarVisible();
getViewProperty
Method
Description
Gets a viewer property by property keyword. For the document properties,
you may use getProperty
Syntax
getViewProperty(String key)
where
key: the property keyword. It is case-sensitive.
Return
Returns a property value associated with the keyword.
See Also
setViewProperty, getProperty
Example
var ambientMarginHorz = control1.getProperty("ambientMarginHorz");
getZoom
Method
Description
Gets current zoom value of the viewer.
Syntax
Number getZoom()
Return
Returns a zoom value.
See Also
setZoom
Example
var zoom = control1.getZoom();
newPage
Method
Description
Creates a new page.
Syntax
Integer newPage()
Return
Returns a 0-based page index for the new page.
See Also
startDoc
Example
var INCH = control1.getInch();
//create a document and a first page
control1.startDoc();
control1.drawString(INCH, INCH, "Hello World from Page 1");
//create the second
page
var pageIndex = control1.newPage();
control1.drawString(INCH, INCH, "Hello World from Page 2");
control1.endDoc();
control1.preview();
preview
Method
Description
Previews the current page and updates the view..
Syntax
preview()
See Also
setCurrentPage, previewFit,
previewFitPage
Example
//Preview the first page
control1.setCurrentPage(0);
control1.preview();
previewFit Method
Description
Previews the current page and updates the view. The zoom value is
automatically adjusted to fit the page width within the viewer.
Syntax
previewFit()
See Also
setCurrentPage, preview,
previewFitPage
Example
//Preview the first page
control1.setCurrentPage(0);
control1.previewFit();
previewFitPage Method
Description
Previews the current page and updates the view. The zoom value is
automatically adjusted to fit both page width and height within the viewer.
Syntax
previewFitPage()
See Also
setCurrentPage, preview,
previewFit
Example
//Preview the first page
control1.setCurrentPage(0);
control1.previewFitPage();
printPages Method
Description
Prints multiple pages.
Syntax
printPages(Integer fromPageIndex, Integer toPageIndex)
where
fromPageIndex: starting page index (0-based) for print
toPageIndex: Ending page index (0-based) for print
See Also
vwcontrol_print_onclick
getPageCount
Example
Example 1
control1.printPages(0,
1);
Example 2
Please see the example in vwcontrol_print_onclick
for landscape printing
propertyExists
Method
Description
Checks if a property exists.
Syntax
propertyExists(String key)
where
key: property keyword (case-sensitive).
See Also
getProperty, setProperty
Example
control1.printPages(0, 1);
removeImage
Method
Description
Removes an image loaded by calcImage. The
image loaded by calcImage is stored in memory. If you
do not use it (draw it), you may remove it with this method.
Syntax
removeImage(String id)
where
id: an string id that is specified in calcImage.
See Also
calcImage
Example
control1.removeImage("image1");
removePage
Method
Description
Removes a page from the document.
Syntax
removePage(Integer pageIndex)
where
pageIndex: 0-based page index.
See Also
getPageCount
Example
control1.removePage(1);
setCurrentPage
Method
Description
Sets a current page.
Syntax
setCurrentPage(Integer pageIndex)
where
pageIndex: 0-based page index.
See Also
getCurrentPage, getPageCount
Example
control1.setCurrentPage(1);
setProperty
Method
Description
sets a global (document level) property by property keyword. For the
viewer properties, you may use setViewProperty.
Syntax
setProperty(String key, value)
where
key: the property keyword. It is case-sensitive.
value: the property value.
See Also
propertyExists, getProperty,
setViewProperty, preview
Example
control1.setProperty("fontSize",
14);
control1.setProperty("pageBorder",
true);
setToolbarVisible
Method
Description
sets the boolean visible switch for toolbar. You may use preview
to update the display.
Syntax
setToolbarVisible(Boolean visible)
where
visible: true for visible or false for invisible.
See Also
getToolbarVisible
Example
control1.setToolbarVisible(false);
setViewProperty
Method
Description
sets a viewer property by property keyword. For the document properties,
you may use setProperty. After the setting, you may
use preview to update the display.
Syntax
setViewProperty(String key, value)
where
key: the property keyword. It is case-sensitive.
value: the property value.
See Also
getViewProperty, setProperty,
preview
Example
control1.setViewProperty("ambientColor",
"#ff0000");
setZoom
Method
Description
sets a zoom value. You may use preview to update
the display.
Syntax
setZoom(Number zoom)
where
zoom: a percentage value for zooming.
See Also
getZoom, preview
Example
control1.setZoom(100);
startDoc
Method
Description
starts a document and creates the first page. You can the document with endDoc.
Syntax
startDoc()
See Also
endDoc
Example
var INCH = control1.getInch();
//create a document and a first page
control1.startDoc();
control1.drawString(INCH, INCH, "Hello World from Page 1");
//create the second
page
var pageIndex = control1.newPage();
control1.drawString(INCH, INCH, "Hello World from Page 2");
control1.endDoc();
control1.preview();
[Document Properties below]
align Property
Description
A property for text or object alignment.
Type
String
Value
left, center, right
See Also
getProperty, setProperty
vAlign, objectAlign
Example
var INCH = control1.getInch();
control1.drawText(INCH, INCH, INCH, "Hello World",
"border=1;align=center");
arrowHeadLength Property
autoMarginBottom Property
autoMarginTop Property
Description
Specifies the top or bottom margin associated with auto page advance for
large table that may cross multiple pages.
See Also
getProperty, setProperty,
autoPageAdvance
Example
var INCH = control1.getInch();
control1.setProperty("autoMarginTop", 0.5*INCH);
control1.setProperty("autoMarginBottom",
0.5*INCH);
autoPageAdvance Property
Description
Specifies whether or not you want the control to automatically break a
large table into multiple pages.
See Also
getProperty, setProperty,
autoMarginTop, autoMarginBottom
Example
control1.setProperty("autoPageAdvance", false);
background Property
Description
Specifies a boolean switch for drawing background color.
See Also
getProperty, setProperty,
backgroundColor
Example
var INCH = control1.getInch();
control1.drawRect(INCH, INCH, 2*INCH, INCH, "background=1;backgroundColor=#ff0000");
backgroundColor Property
Description
Specifies background color.
See Also
getProperty, setProperty,
background
Example
var INCH = control1.getInch();
control1.drawRect(INCH, INCH, 2*INCH, INCH, "background=1;backgroundColor=#ff0000");
border Property
Description
Specifies a boolean switch for drawing border.
See Also
getProperty, setProperty,
borderColor
Example
var INCH = control1.getInch();
control1.drawString(INCH, INCH, "Hello World", "border=1;borderColor=#ff0000");
borderColor Property
Description
Specifies border color.
See Also
getProperty, setProperty,
border
Example
var INCH = control1.getInch();
control1.drawString(INCH, INCH, "Hello World", "border=1;borderColor=#ff0000");
color Property
Description
Specifies text color.
See Also
getProperty, setProperty
Example
var INCH = control1.getInch();
control1.drawString(INCH, INCH, "Hello World", "border=1;borderColor=#ff0000;color=#0000ff");
fontBold Property
fontItalic Property
fontUnderline Property
Description
Specifies a boolean value (1/0 or true/false) for text properties.
See Also
getProperty, setProperty,
color, fontName, fontSize
Example
var INCH = control1.getInch();
control1.drawString(INCH, INCH, "Hello World", "color=#0000ff;fontBold=1;fontItalic=1;fontUnderline=true");
fontName Property
Description
Specifies font name for text.
See Also
getProperty, setProperty,
color, fontSize
Example
var INCH = control1.getInch();
control1.drawString(INCH, INCH, "Hello World", "fontName=Times
New Roman;color=#0000ff;fontBold=1");
fontSize Property
Description
Specifies font name for text.
See Also
getProperty, setProperty,
color, fontName
Example
var INCH = control1.getInch();
control1.drawString(INCH, INCH, "Hello World", "fontSize=24;fontName=Times
New Roman;color=#0000ff;fontBold=1");
instanceId Property
Description
This property is used to store the instance id for the control object. By
default, the control events have a prefix vwcontrol_.
If you have multiple control instances on the same web pages, you
then specify an instance id for each instance. The instance id can then be used
as the prefix for events for the respective instance. You typically set the
property when the vwcontrol_onload
event is fired.
See Also
vwcontrol_onload, vwcontrol_print_onclick
Example
//Define event prefixes for two control instances on the
same page
//control onload event
function vwcontrol_onload(id, obj) {
switch(id) {
case "control1":
var control1 =
vwcontrol.get_control(id);
control1.setProperty("instanceId",
"control1");
break;
case "control2":
var
control2 = vwcontrol.get_control(id);
control2.setProperty("instanceId",
"control2");
break;
}
}
//print event for control1 instance
function control1_print_onclick() {
//your event handling code here
}
//print event for control2 instance
function control2_print_onclick() {
//your event handling code here
}
lineColor Property
Description
Specifies line color for drawing.
See Also
getProperty, setProperty,
lineWidth
Example
var INCH = control1.getInch();
control1.drawRect(INCH, INCH, 2*INCH, INCH, "lineWidth=1;lineColor=#ff0000");
lineSpacing Property
Description
Specifies line spacing between text lines. The spacing is the distance in
logical points between adjacent lines.
See Also
getProperty, setProperty
Example
var INCH = control1.getInch();
var data = "The spacing is the distance in logical points between
adjacent lines.";
control1.drawText(INCH, INCH, 1*INCH, data, "fontSize=12;lineSpacing=12");
lineWidth Property
Description
Specifies line width for drawing.
See Also
getProperty, setProperty,
lineColor
Example
var INCH = control1.getInch();
control1.drawRect(INCH, INCH, 2*INCH, INCH, "lineWidth=1;lineColor=#ff0000");
marginLeft Property
marginRight Property
marginTop Property
marginBottom Property
Description
Specifies margins for an object.
See Also
getProperty, setProperty
align, vAlign
Example
See example in drawTable.
objectAlign Property
Description
A property for text object alignment relative to a positioning point.
Type
String
Value
left, center, right
See Also
getProperty, setProperty
align, vAlign
Example
//Horizontally center the text object box at x, y.
var INCH = control1.getInch();
var x = INCH;
var y = INCH;
var obj = control1.drawString(x, y, "Hello World",
"border=1;objectAlign=center");
//The returned obj.x is updated accordingly
orientation Property
Description
Specifies page orientation. The value can be portrait and landscape. If
you want to set the orientation, you should do it before startDoc
and newPage.
Note 1
Flash does not currently support printing mixed orientation in a document.
Note 2
Flash dose not currently allow programmatically setting the orientation for the
printer. If you use landscape, you may remind the user to select the correct
orientation before the print dialog is shown.
See Also
getProperty, setProperty,
printPages
Example
control1.setProperty("orientation ", "portrait");
or
control1.setProperty("orientation
", "landscape");
pageBorder Property
Description
Specifies a boolean switch for automatically drawing the page border when
a new page is created.
See Also
getProperty, setProperty,
drawPageBorder
Example
control1.setProperty("pageBorder
", true);
pageHeight Property
pageWidth Property
Description
Specifies page width or height in logical points. For printing
application, you set the size to match the target paper size.
See Also
getProperty, setProperty,
unit
Example
var pageWidth = control1.getProperty("pageWidth");
var pageHeight=
control1.getProperty("pageHeight");
refMarginLeft Property
refMarginTop Property
refMarginRight Property
refMarginBottom Property
Description
Specify the reference margins for drawing on page. (refMarginLeft, refMarginTop)
will be the coordinate origin. All drawing coordinates are relative to this origin. This
allows you to easily reposition the whole page content.
See Also
getProperty, setProperty,
unit
Example
var MM = control1.getMM();
control1.setProperty("refMarginLeft", 12.5*MM);
control1.setProperty("refMarginTop",
12.5*MM);
control1.setProperty("refMarginRight",
12.5*MM);
control1.setProperty("refMarginBottom",
12.5*MM);
rotation Property
Description
Specify the rotation angle in degrees for an object of applicable type. A positive angle
is for clockwise rotation and negative for counter-clockwise.
See Also
getProperty, setProperty
Example
var INCH = control1.getInch();
control1.drawString(INCH, INCH, "Hello World",
"rotation=45.0;fontSize=24");
tableColSep Property
tableRowSep Property
Description
Specify the column separator and row separator for parsing data string for table
and table row. By default, tableColSep="|", and tableRowSep="^".
See Also
getProperty, setProperty
drawTable, drawTableRow
Example
var tableColSep = control1.getProperty("tableColSep");
var tableRowSep = control1.getProperty("tableRowSep");
textMouseEnabled Property
vAlign Property
unit Property
Description
Specifies the unit for drawing. The control uses logical points as units. By
default, 1 inch = 96 logical points so that the logical units match the pixel
values for font size on screen. The logical points are not pixels and can be
decimal numbers. The selection of the default logical unit does not affect the
screen or printer resolution.
See Also
getProperty, setProperty
drawTable, getMM
Example
var unit = control1.getProperty("unit");
[View Properties below]
ambientColor Property
Description
Specifies color for the area surrounding the preview page.
See Also
getViewProperty, setViewProperty
Example
var ambientColor = control1.getViewProperty("ambientColor");
ambientMarginHorz Property
ambientMarginVert Property
Description
Specifies horizontal or vertical margin for the area surrounding the preview
page.
See Also
getViewProperty, setViewProperty,
ambientColor
Example
var ambientMarginHorz =
control1.getViewProperty("ambientMarginHorz");
var ambientMarginVert =
control1.getViewProperty("ambientMarginVert");
zoom Property
Description
Specifies zoom value. You are suggest to use getZoom and setZoom
instead.
See Also
getViewProperty, setViewProperty
getZoom and setZoom
Example
var zoom =
control1.getZoom();
var zoom =
control1.getViewProperty("zoom");
mouseScroll Property
Description
Specifies a boolean switch for allowing scrolling (panning) the preview page
with mouse.
See Also
getViewProperty, setViewProperty
Example
//Disable mouse scrolling/panning for preview page
control1.setViewProperty("mouseScroll",
false);
mouseZoomMode Property
Description
Specifies the mode for zooming in and zooming out with mouse.
Type
String
Values
singleClick: specifies page zoom-in and zoom-out by mouse single click
(Ctrl-click for zoom-in; and Alt-click for zoom-out).
doubleClick: specifies page zoom-in and zoom-out by mouse double click
(double-click for zoom-in; and Ctrl-double click for zoom-out).
none: disables page zooming by mouse.
See Also
getViewProperty, setViewProperty
Example
//Disable mouse scrolling/panning for preview page
control1.setViewProperty("mouseZoomMode",
"none");
pageX Property
pageY Property
Description
Specify the x and y position of the top-left corner of the preview page. The
coordinates are relative to the top-left corner of the page container (the
viewer excluding the toolbar area).
See Also
getViewProperty, setViewProperty,
centerPagePoint
Example
//Disable mouse scrolling/panning for preview page
var pageX
= control1.getViewProperty("pageX");
var pageY = control1.getViewProperty("pageY");
toolbarVisible Property
Description
Specifies a boolean switch for showing or hiding the toolbar. You are suggest to
use getToolbarVisible and setToolbarVisible
instead.
See Also
getViewProperty, setViewProperty
getToolbarVisible, setToolbarVisible
Example
var visible =
control1.getToolbarVisible();
var visible =
control1.getViewProperty("toolbarVisible");
horzScrollbarVisible Property
vertScrollbarVisible Property
Description
Specifies a boolean switch for showing or hiding the horizontal or vertical
scroll bar.
See Also
getViewProperty, setViewProperty
Example
var horzScrollbarVisible
= control1.getViewProperty("horzScrollbarVisible");
var vertScrollbarVisible = control1.getViewProperty("vertScrollbarVisible");
[Events below]
vwcontrol_calcImage_onload event
Description
This event is fired when the image download initiated by calcImage
is completed.
Syntax
function vwcontrol_calcImage_onload(String id, Object obj)
where
id: an id string that is specified in calcImage.
obj: the original width and height of the image are returned in obj.width and
obj.height.
See Also
instanceId, calcImage, drawCalcImage
Example
var INCH = control1.getInch();
control1.calcImage("image1", "../images/logo.jpg");
window.control1= control1;
function vwcontrol_calcImage_onload(id, obj) {
var INCH =
control1.getInch();
control1.drawCalcImage("image1", INCH ,
INCH , INCH , -1);
}
vwcontrol_image_onload event
Description
This event is fired when the image download initiated by drawImage
is completed.
Syntax
function vwcontrol_image_onload(String id, Object obj)
where
id: an id assigned by the control if you do not specify it in the properties of
drawImage.
obj: the original width and height of the image are returned in obj.width and
obj.height.
See Also
instanceId, drawImage
Example
var INCH = control1.getInch();
control1.drawImage(INCH, INCH, INCH, -1, "../images/logo.jpg",
"id=image1");
window.imageDownloadCount = 0;
function vwcontrol_image_onload(id, obj) {
window.imageDownloadCount +=1;
}
vwcontrol_mouse_click event
vwcontrol_mouse_doubleClick event
vwcontrol_mouse_down event
vwcontrol_mouse_up event
vwcontrol_mouse_over event
vwcontrol_mouse_out event
vwcontrol_mouse_move
event
Description
One of these events is fired when an mouse action occurs for the current preview
page.
Syntax
function vwcontrol_mouse_click(String id, Object obj)
function vwcontrol_mouse_doubleClick(String id, Object obj)
function vwcontrol_mouse_down(String id, Object obj)
function vwcontrol_mouse_up(String id, Object obj)
function vwcontrol_mouse_over(String id, Object obj)
function vwcontrol_mouse_out(String id, Object obj)
function vwcontrol_mouse_move(String id, Object obj)
where
id: event id.
obj: the x and y of the mouse on the page are returned in obj.x and obj.y.
See Also
instanceId
Example
//Center the point clicked by the mouse
function vwcontrol_mouse_click(id, obj) {
var x = obj.x;
var y = obj.y;
control1.centerPagePoint(x, y);
}
vwcontrol_onload event
Description
This event is fired when the control has been loaded and ready for programming.
The control will call this function when the control is ready. You place this
javascript function in your web page or in a dedicated javascript file.
Syntax
function vwcontrol_onload(String id, Object obj)
where
id: the control id.
obj: not used.
See Also
instanceId
Example
See example in Sample 1.
vwcontrol_print_onclick event
Description
This event is fired when the print button on the toolbar is clicked. You place this
javascript function in your web page or in a dedicated javascript file. The
control will call this place holder function when the event is fired.
Syntax
function vwcontrol_print_onclick()
Return
If you let this function return true, the control will proceed to show the print
dialog and do the default printing. Otherwise, if you let it return false, the
control will do nothing, and you call the printPages
yourself.
See Also
printPages
instanceId
Example
//This example shows an alert box to remind the user to select landscape in the
print dialog, and cancels the default print and issues a custom print job with
printPages.
function vwcontrol_print_onclick() {
if (
control1.getProperty("orientation")=="landscape"
) {
alert("Please select landscape
orientation in the print dialog next");
}
control1.printPages(0, 3);
return false;
}
Interaction with Database: your web server stores the data in an
hidden <textarea> tag, and the control grabs the data and generates the
report.
<html>
<head>
<script src="vwcontrol.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
////////////////////////////////////////////////////////////////////////////////////////////////////////
var screenSize = vwcontrol.get_screen_avail_size();
var CONTAINER_ID = "controlholder"; //your <div> tag id to hold the control
var CONTROL_SOURCE = "viewidget.swf"; //point to the control swf file
var CONTROL_ID = "control1"; //give the control an instance id
var CONTROL_WIDTH = 0.8*screenSize.width; //specify the control width
var CONTROL_HEIGHT = 0.7*screenSize.height; //specify the control height
function control_start() {
vwcontrol.load(CONTAINER_ID, CONTROL_SOURCE, CONTROL_ID,
CONTROL_WIDTH, CONTROL_HEIGHT);
}
window.onload = control_start;
function vwcontrol_onload() {
var control1 = vwcontrol.get_control(CONTROL_ID);
generate_report(control1);
}
////////////////////////////////////////////////////////////////////////////////////////////////////////
function generate_report(control1) {
var data = document.getElementById("dataholder").innerHTML;
var dataobj = vwcontrol.xml_parse(data);
var control1 = vwcontrol.get_control(CONTROL_ID);
var INCH = control1.getInch();
//generate a report with a title and a table
var format = "96|96|96";
control1.startDoc();
control1.drawPageBorder();
control1.drawPageHeader(dataobj["ProductCategory"], "fontSize=24;algin=center;marginTop=96");
control1.drawTable(2.25*INCH,2*INCH,dataobj["ProdcutTable"], format);
control1.endDoc();
control1.preview();
}
////////////////////////////////////////////////////////////////////////////////////////////////////////
</script>
</head>
<body>
<textarea id="dataholder" style="display: none">
<ProductCategory>Sports Shoes</ProductCategory>
<ProdcutTable>Product ID|Product Name|Price^1001|Tennis Shoes|$199.95^1001|Soccer Shoes|$149.95^1001|Basketball Shoes|$179.95</ProdcutTable>
</textarea>
<p align=center>VIEWidget Sample 2</p>
<div id="controlholder" style="text-align:center"></div>
</body>
</html>
Commercial Deployment Note
If you use the control for commercial deployment, you may need to place your
serial number and deployment domain name (e.g. example.com) as shown below.
function vwcontrol_onload() {
var control1 = getControl("control1");
control1.setProperty("serialNumber", "your_serial_number_here");
control1.setProperty("domain", "your_deployment_domain_name");
control1.startDoc();
//...
}
Tech Support
If you have technical questions, please send email to: support@hexatech.com
Web site: www.hexatech.com
HexaTech, 357 Castro Street, Ste. 7, Mountain View, CA 94041, U.S.A.
[end of documentation]