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.

Home


Tutorial Guide


Quick Guide
Interaction with Databases

Tutorial Guide


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>


Tutorial Guide


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.

Home


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.  

Home




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

Home




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

Home




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

Home




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

Home


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


Summary by Category


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

Summary by Category


Print Attributes and Control

printPages
vwcontrol_print_onclick

Summary by Category


Object Attributes and Control

align
marginBottom
marginLeft
marginRight
marginTop
objectAlign
rotation
vAlign

Summary by Category


Drawing Attributes and Control

background
backgroundColor
border
borderColor
lineColor
lineWidth

Summary by Category


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

Summary by Category


Graphics Drawings

calcPolyObject
drawArrow

drawCircle
drawCurve
drawEllipse
drawGrid
drawLine
drawLine2
drawPolyline
drawPolygon
drawPolyObject
drawRect
drawRoundRect

arrowHeadLength
arrowHeadWidth

Summary by Category


Bitmap

calcImage
drawCalcImage
drawImage

removeImage

vwcontrol_image_onload
vwcontrol_calcImage_onload


Summary by Category


Document Control

clear
endDoc
getProperty
propertyExists
setProperty
startDoc
unit

Summary by Category


Miscellaneous

instanceId

Summary by Category




[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,   drawCalcImageremoveImage


Example

See example in vwcontrol_calcImage_onload.

Home


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.

Home


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);

Home


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;


Home


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


Home


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);



Home


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

Home


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; 

 

Home


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; 


Home


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

Home


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);


Home


clear Method

Description
Removes all pages from the document.

Syntax
clear()


Example


control1.clear();
control1.preview();  //update view


Home


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");


Home


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
calcImagevwcontrol_calcImage_onload


Example


See the example in vwcontrol_calcImage_onload

 

Home


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);

Home


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");

Home


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");

Home


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");

Home


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);

 

Home


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");

Home


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");

Home


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");

Home


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
drawPageHeaderDrawPageFooter
refMarginLeft, refMarginTop,refMarginRight, refMarginBottom


Example


control1.drawPageBorder("lineWidth=1");

Home


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

drawPageHeaderDrawPageBorder,  drawPageNumbering
refMarginLeft, refMarginTop,refMarginRight, refMarginBottom


Example


control1.drawPageFooter("Left Footer","align=left");


Home


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

drawPageFooterDrawPageBorder,  drawPageNumbering
refMarginLeft, refMarginTop,refMarginRight, refMarginBottom



Example


control1.drawPageHeader("Center Header","align=center;marginTop=20");

Home


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

drawPageFooterDrawPageBorder,  drawPageNumbering
refMarginLeft, refMarginTop,refMarginRight, refMarginBottom

Example

control1.startDoc();
//....

control1.drawPageNumbering("%pageNumber% of %pageCount%", "firstPageNumberVisible=1;firstPageStartNumber=1");
control1.endDoc();

Home


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");

Home


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");

Home


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");

Home


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");

Home


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");

Home


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");

Home


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);


Home


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,   drawTableHtmlautoPageAdvance,   autoMarginTopautoMarginBottom

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");

 

Home


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,   drawTableautoPageAdvance,   autoMarginTopautoMarginBottom

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");


Home


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");

Home


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");

Home


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.

Home


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.

Home


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
calcTextdrawTextHtmldrawString

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");

Home


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
calcTextHtmldrawTextdrawString

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);

Home


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
startDocgetPageCount,  preview,  printPages

Example

See the example in
startDoc.

Home


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, refMarginBottomorientation

Example

var obj = control1.
getAvailPageSize();
var availablePageWidth = obj.w;
var availablePageHeight = obj.h;

Home


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();

Home


getInch Method

Description
Gets number of logical points per inch.

Syntax

Number getInch()

Return
Returns a value for logical points per inch.

See Also
getMMunit

Example

var INCH = control1.
getInch();
control1.startDoc();
control1.drawString(INCH, INCH, "Hello World");
control1.endDoc();
control1.preview();

Home


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
getInchunit
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();

 

Home


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, refMarginBottomorientation

Example

var obj = control1.
getPageCenter();
var centerX = obj.x;
var centerY = obj.y;


Home


getPageCount Method

Description
Gets page count in the document.

Syntax

Integer getPageCount()

Return
Returns an integer for page count.

Example


var pageCount = control1.
getPageCount();

Home


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
propertyExistssetProperty,  getViewProperty

Example


var fontSize = control1.
getProperty("fontSize");

Home


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();

Home


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
setViewPropertygetProperty

Example


var ambientMarginHorz = control1.
getProperty("ambientMarginHorz");

Home


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();

Home


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();

Home


preview Method

Description
Previews the current page and updates the view..

Syntax

preview()

See Also
setCurrentPagepreviewFitpreviewFitPage

Example


//Preview the first page
control1.setCurrentPage(0);
control1.preview();

Home


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
setCurrentPagepreviewpreviewFitPage

Example


//Preview the first page
control1.setCurrentPage(0);
control1.previewFit();


Home


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
setCurrentPagepreviewpreviewFit

Example


//Preview the first page
control1.setCurrentPage(0);
control1.previewFitPage();

Home


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


Home


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);





Home


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");

Home


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);

Home


setCurrentPage Method

Description
Sets a current page. 

Syntax

setCurrentPage(Integer pageIndex)

where
pageIndex: 0-based page index.

See Also
getCurrentPagegetPageCount

Example


control1.
setCurrentPage(1);


Home


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
propertyExistsgetPropertysetViewPropertypreview

Example


control1.
setProperty("fontSize", 14);
control1.setProperty("pageBorder", true);

Home


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);

Home


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
getViewPropertysetProperty, preview

Example


control1.
setViewProperty("ambientColor", "#ff0000");

Home


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
getZoompreview

Example


control1.
setZoom(100);

Home


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();

Home




[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");

Home


arrowHeadLength Property

arrowHeadWidth Property

Description
Specifies head length or width of an arrow.

See Also
drawArrow
getProperty, setProperty

Example


See example in drawArrow.


Home


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);

Home


autoPageAdvance Property

Description
Specifies whether or not you want the control to automatically break a large table into multiple pages.

See Also
getPropertysetPropertyautoMarginTopautoMarginBottom

Example


control1.setProperty("autoPageAdvance", false);

Home


background Property

Description
Specifies a boolean switch for drawing background color.

See Also
getPropertysetPropertybackgroundColor

Example


var INCH = control1.
getInch();
control1.drawRect(INCH, INCH, 2*INCH, INCH, "
background=1;backgroundColor=#ff0000");

Home


backgroundColor Property


Description
Specifies background color.

See Also
getPropertysetPropertybackground

Example


var INCH = control1.
getInch();
control1.drawRect(INCH, INCH, 2*INCH, INCH, "
background=1;backgroundColor=#ff0000");

Home


border Property

Description
Specifies a boolean switch for drawing border.

See Also
getPropertysetPropertyborderColor

Example


var INCH = control1.
getInch();
control1.drawString(INCH, INCH, "Hello World", "
border=1;borderColor=#ff0000");

Home


borderColor Property

Description
Specifies border color.

See Also
getPropertysetPropertyborder

Example


var INCH = control1.
getInch();
control1.drawString(INCH, INCH, "Hello World", "
border=1;borderColor=#ff0000");

Home


color Property

Description
Specifies text color.

See Also
getPropertysetProperty

Example


var INCH = control1.
getInch();
control1.drawString(INCH, INCH, "Hello World", "
border=1;borderColor=#ff0000;color=#0000ff");

Home


fontBold Property

fontItalic Property

fontUnderline Property


Description
Specifies a boolean value (1/0 or true/false) for text properties.

See Also
getPropertysetPropertycolorfontName, fontSize

Example


var INCH = control1.
getInch();
control1.drawString(INCH, INCH, "Hello World", "
color=#0000ff;fontBold=1;fontItalic=1;fontUnderline=true");

 

Home


fontName Property

Description
Specifies font name for text.

See Also
getPropertysetPropertycolor, fontSize

Example


var INCH = control1.getInch();
control1.drawString(INCH, INCH, "Hello World", "
fontName=Times New Roman;color=#0000ff;fontBold=1");

Home


fontSize Property

Description
Specifies font name for text.

See Also
getPropertysetPropertycolor, fontName

Example


var INCH = control1.getInch();
control1.drawString(INCH, INCH, "Hello World", "fontSize=24;
fontName=Times New Roman;color=#0000ff;fontBold=1");

Home


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
}


Home


lineColor Property

Description
Specifies line color for drawing.

See Also
getPropertysetPropertylineWidth

Example


var INCH = control1.
getInch();
control1.drawRect(INCH, INCH, 2*INCH, INCH, "
lineWidth=1;lineColor=#ff0000
");

Home


lineSpacing Property

Description
Specifies line spacing between text lines. The spacing is the distance in logical points between adjacent lines.

See Also
getPropertysetProperty

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");

Home


lineWidth Property

Description
Specifies line width for drawing.

See Also
getPropertysetPropertylineColor

Example


var INCH = control1.
getInch();
control1.drawRect(INCH, INCH, 2*INCH, INCH, "
lineWidth=1;lineColor=#ff0000
");

Home


marginLeft Property

marginRight Property

marginTop Property

marginBottom Property


Description
Specifies margins for an object.  


See Also
getPropertysetProperty
align, vAlign


Example


See example in drawTable.

 

Home


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

Home


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
getPropertysetPropertyprintPages

Example


control1.setProperty("orientation ", "portrait");
or 
control1.setProperty("orientation ", "landscape");

Home


pageBorder Property

Description
Specifies a boolean switch for automatically drawing the page border when a new page is created.

See Also
getPropertysetPropertydrawPageBorder

Example


control1.setProperty("pageBorder ", true);

Home


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
getPropertysetPropertyunit

Example


var pageWidth =
control1.getProperty("pageWidth");
var pageHeight= control1.getProperty("pageHeight");

Home


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
getPropertysetPropertyunit

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);

Home


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
getPropertysetProperty

Example


var INCH = control1.getInch();
control1.drawString(INCH, INCH, "Hello World", "rotation=45.0;fontSize=24");

Home


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
getPropertysetProperty
drawTable,  drawTableRow

Example


var tableColSep =
control1.getProperty("tableColSep");
var tableRowSep = control1.getProperty("tableRowSep");

 

Home


textMouseEnabled Property

Description
Specifies a boolean switch for enabling mouse for text object (string, text, html, table etc).

Type
Boolean

See Also
mouseZoomMode


Example


control1.setProperty("textMouseEnabled", true);

Home


vAlign Property

Description
A property for text vertical alignment. You may specify a height for an object by h property keyword in the object property settings, as seen in the example below.

Type
String

Value
top, middle or center, bottom

See Also
getProperty, setProperty
align, objectAlign

Example


var INCH = control1.
getInch();
var prop =
"border=true;align=center;vAlign=middle;h=" + INCH;
control1.drawText(INCH, INCH, INCH, "Hello World", prop);

 

 

Home


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
getPropertysetProperty
drawTable, getMM

Example


var unit =
control1.getProperty("unit");

Home





[View Properties below]


ambientColor Property

Description
Specifies color for the area surrounding the preview page.

See Also
getViewPropertysetViewProperty


Example


var ambientColor =
control1.getViewProperty("ambientColor");

Home


ambientMarginHorz Property

ambientMarginVert Property


Description
Specifies horizontal or vertical margin for the area surrounding the preview page. 

See Also
getViewPropertysetViewPropertyambientColor


Example


var
ambientMarginHorz = control1.getViewProperty("ambientMarginHorz");
var ambientMarginVert = control1.getViewProperty("ambientMarginVert");

 

Home


zoom Property

Description
Specifies zoom value. You are suggest to use getZoom and setZoom instead.

See Also
getViewPropertysetViewProperty
getZoom and setZoom

Example


var
zoom = control1.getZoom();
var zoom = control1.getViewProperty("zoom");

Home


mouseScroll Property

Description
Specifies a boolean switch for allowing scrolling (panning) the preview page with mouse.

See Also
getViewPropertysetViewProperty


Example


//Disable mouse scrolling/panning for preview page
control1.setViewProperty("mouseScroll", false);

Home


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
getViewPropertysetViewProperty


Example


//Disable mouse scrolling/panning for preview page
control1.setViewProperty("mouseZoomMode", "none");

Home


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
getViewPropertysetViewProperty, centerPagePoint


Example


//Disable mouse scrolling/panning for preview page
var pageX = control1.getViewProperty("pageX");
var pageY = control1.getViewProperty("pageY");

Home


toolbarVisible Property

Description
Specifies a boolean switch for showing or hiding the toolbar. You are suggest to use getToolbarVisible and setToolbarVisible instead.

See Also
getViewPropertysetViewProperty
getToolbarVisible, setToolbarVisible

Example


var
visible = control1.getToolbarVisible();
var visible = control1.getViewProperty("toolbarVisible");

Home


horzScrollbarVisible Property

vertScrollbarVisible Property


Description
Specifies a boolean switch for showing or hiding the horizontal or vertical scroll bar.

See Also
getViewPropertysetViewProperty


Example


var horzScrollbarVisible = control1.getViewProperty("horzScrollbarVisible");
var vertScrollbarVisible = control1.getViewProperty("vertScrollbarVisible");

Home




[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
instanceIdcalcImage, 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);
}

Home


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
instanceIddrawImage


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;
}

Home


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);
}

Home


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.

Home


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; 
}


Home




Sample 2

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>


Home


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();
//...

}

 

Home




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. 

Home






[end of documentation]