Copyright (c) 2018, HexaTech, USA.    Tech support: support@hexatech.com

rReport Documentation

Introduction
Quick Guide
Interaction with Databases

rReport Objects
Overview
Object Properties Summary

rreport.document Class
Overview
Methods Summary

rreport.viewer Class
Overview
Methods Summary





Introduction


Overview

rReport is a javascript-based report generator and print preview component as a flexible RAD (Rapid Application Development) tool for report with PDF output. It can radically speed up your sophisticated report development.

Instead of programming against screen with pixels, you can directly program against paper with physical inch (or mm) length units  as the x-y coordinates.
rReport lets you freely place predefined objects or drawing your own objects. After creating your report, you can go back to change the report by adding, removing, modifying or drawing new objects.

rReport also provides a browser-based report designer to let you visually create your report templates and fill them out at runtime.


Application Areas

rReport can be used as a powerful report, drawing, and designer engine for a wide variety of reporting applications. The following is just a partial list.



Usage Description


The control has a single absolute coordinate system, with page top-left corner (0,0) as the origin . It uses logical points as units. One logical point is set to equal one point; and one inch equals 72 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 getUnit or millimeter.

Home Menu


Quick Guide



Using rReport is simple. Just modify Template Sample 1 below with three quick steps:

Step 1. Include rreport js file with correct path.

Step 2. Define an empty div tag with id=report_viewer_holder to hold the report viewer

Step 3. Write code to generate your report.



Template Sample 1
<!DOCTYPE html>
<html>
<head>
    <title>rReport Sample 1</title>  
      
    <!--***** Step 1: include rreport js file *****--> 
     <script type="text/javascript" src="lib/rreport.min.js"></script>

</head>
<body>

    <!--***** Step 2: define div tag to holder report viewer *****--> 
      <div id="report_viewer_holder" style="margin-top:3em;"></div>

      <script type="text/javascript"> 

    <!--***** Step 3: write code to generate report (may use separate js file if extensive coding needed)*****-->
       ///////////////////////////////////////////////////////
       function generate_report() {

            //---create viewer
            var options = { container: "report_viewer_holder", width: window.screen.width / 2, height: window.screen.height / 2, toolbar: true };
            var viewer = rreport.viewer(options);

            //---create document and attach it to viewer
            var document = rreport.document();
            viewer.setDocument(document);

            //---generate report content
           //Use inch
            var INCH = document.getUnit();
           //or Use mm
           //var MM = INCH/25.4;

           //page 1
            var attr = { "font-size": 10, "font-family": "helvetica" };
            document.drawString(INCH, INCH, "Hello World from Page 1", attr);

           //page 2
            document.addPage();
            document.drawString(INCH, INCH, "Hello World from Page 2", attr);

            //---preview page 1 (pageIndex = 0)
            viewer.preview(0);
       }

       ///////////////////////////////////////////////////////

       window.onload = function () {
           generate_report();
       };

       ///////////////////////////////////////////////////////


    </script> 
</body>
</html>


Home Menu


Interaction with Databases



rReport 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 rReport 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="data_holder" style="display: none">
[
    ["Sports Shoes"],
    ["Product ID", "Product Name", "Price"],
    ["1001","Tennis Shoes","$199.95"],
    ["1001","Soccer Shoes","$149.95"],
    ["1001","Basketball Shoes","$179.95"]
]
</textarea>

In this example, the data is in JSON format. The example draws a table with the data. As you can see, the report generating code is much more succinct than the conversional HTML tag building approach.


       function generate_report(data) {

           //---create viewer
           var options = { container: "report_viewer_holder", width: 0.5 * window.screen.width, height: 0.6 * window.screen.height, toolbar: true };
           var viewer = rreport.viewer(options);

           //---create document and attach it to viewer
           var document = rreport.document();
           viewer.setDocument(document);

           //---generate report content
           var INCH = document.getUnit();
   
           //draw page border
           document.drawPageBorder();

           //draw table
           var attr = {
               rows: ["row0", "row1", "row1", "row1", "row1"],

               map: {
                   "row0": [{ width: 3 * INCH, style: "cell0" }],
                   "row1": [{ width: INCH, style: "cell1" }, { width: INCH, style: "cell1" }, { width: INCH, style: "cell1" }],
                   "cell0": { "text-align": "center", "font-size": 24, "font-family": "helvetica", padding: 5 },
                   "cell1": { "text-align": "left", "font-size": 10, "font-family": "helvetica", padding: 2, border: true }
               },

               border: false
           };
        
           document.drawTable(2.75 * INCH, 2 * INCH, data, attr);

           //---preview current page (page 1; pageIndex = 0)
           viewer.preview();
       }


       window.onload = function () {
           var v = document.getElementById("data_holder").value;
           var data = JSON.parse(v);
           generate_report(data);
       };



The complete web page is in Sample 2.

Home Menu




Object Overview



Text and Table etc are treated as objects. Typically, an rReport object has a surrounding rectangle border (the border is invisible if border=0; note: boolean value can be either 1/0 or true/false). Objects may have properties/attributes. You can calculate an object's size first for string, text, and table, before drawing it.

For example:


    var attr = { "font-size": 32, "font-family": "helvetica" };
    var line1 = "Hello World from Line 1"; 
    var line2 = "Hello World from Line 2"; 
    var size = doc.calcString(line1, attr);
    var y = INCH;
    doc.drawString(INCH, y, line1, attr);
    doc.drawString(INCH, y + size.height, line2, attr);

Home Menu


Object Properties/Attributes Summery


For primitives (rect, circle, etc)

"fill": "#ffffff" (fill color)
"stroke": "#000000" (stroke color)
"stroke-width": 1

For string, text, table

"color": "#00ff00" (text color)
"font-family": "helvetica|times"
"font-size": 10
"font-style": "italic|normal"
"font-weight": "bold|normal"

For text, table

"background-color": "#ffff00"
"border": true|false|0|1
"line-spacing": 2.0 (Spacing for text lines; 2.0 for 200%)
"padding-bottom": 5
"padding-left": 5
"padding-right": 5
"padding-top": 5
"text-align": "left|center|right"
"vertical-align": "top|middle|bottom"

Remarks

For some object types, there are object specific properties. See individual draw method for specific info.

Home Menu




document Overview



Class: rreport.document

Description

This is the rReport document class for creating pages, and adding, drawing or manipulating objects. An rReport document contains pages stored in a page array. When you draw objects, they are drawn to the current page,

Syntax

rreport.document()

Return

Returns a new instance of document object.

See Also

setPageSize  setName

Example


    //create new document
    var doc = rreport.document();
    doc.setName("report1");

Home Menu



document Methods Summary

Document Attributes and Control

getGrid
getMargin
getName
getPageSize
getUnit
exportPdf
exportPdfObject
exportDoc
importDoc
save
savePdf
setGrid
setMargin
setName
setPageSize

Page Attributes and Control

addPage
clear
clearPage
getPageCount
getPageIndex
removePage
setPageIndex

Object Attributes and Control

addObject
calcString
calcTable
calcText
drawArrow
drawCircle
drawEllipse
drawImage
drawLine
drawLines
drawPageBorder
drawPageFooter
drawPageHeader
drawRect
drawString
drawTable
drawText
getObject
getObjectCount
getObjectId
getObjectIndex
getUniqueId
objectExists
removeObject

Home Menu



getGrid

Description

Gets a boolean value for placing grid on each page or not.

Syntax

getGrid()

Return

Returns a boolean value.

See Also

setGrid

Example


    var bGrid = doc.getGrid();

Document Attributes and Control


getMargin

Description

Gets margin object for document page. For more info, see setMargin.

Syntax

getMargin()

Return

Returns a margin object.

See Also

setMargin 

Example


    var margin = doc.getMargin();
    var top = margin.top;
    var bottom = margin.bottom;
    var left = margin.left;
    var right = margin.right;

Document Attributes and Control


getName

Description

Gets document name.

Syntax

getName()

Return

Returns a name in string.

See Also

setName

Example


    var documentName = doc.getName();

Document Attributes and Control


getPageSize

Description

Gets page size.

Syntax

getPageSize()

Return

Returns a size object.

See Also

setPageSize

Example


    var size = doc.getPageSize();
    var width = size.width;
    var height = size.height;

Document Attributes and Control


getUnit

Description

Gets logical points corresponding to one inch. One logical point is set to equal one point.

Syntax

getUnit()

Return

Returns logical points for one inch.

See Also

rreport.document

Example


    var INCH = doc.getUnit();
    var MM = INCH/25.4;

    //draw in inch
    doc.drawString(INCH, INCH, "Hello World");
    
    //draw in mm
    doc.drawString(MM, MM, "Hello World");

Document Attributes and Control


exportPdf

Description

Exports pdf document as string. You may save the string to pdf file in the local computer with save; or submit the string to your web server via ajax.

Syntax

exportPdf()

Return

Returns a pdf document as string.

See Also

save 

Example


    var pdfString = doc.exportPdf();

    ...

    //1) submit pdfString to your web server by ajax
    
    //or
  
    //2) directly save pdfString to local computer 
    //as pdf file with doc.save(...) placed inside a user click/touch HTML element DOM event:

    document.getElementId("saveButton").oncllick = function() {
        doc.save("reportName1.pdf", pdfString);
   };
 

Document Attributes and Control


exportPdfObject

Description

Exports pdf document as object. You may hold the object in memory for saving it to local pdf file with savePdf.

Syntax

exportPdfObject()

Return

Returns a pdf document as object.

See Also

savePdf  exportPdf 

Example


    var pdfObject = doc.exportPdfObject();

    ...

    //save pdfObject to local computer 
    //as pdf file with doc.savePdf(...) placed inside a user click/touch HTML element DOM event:

    document.getElementId("saveButton").oncllick = function() {
        doc.savePdf("reportName1.pdf", pdfObject);
   };
 

Document Attributes and Control


exportDoc

Description

Exports document in rReport format as string. You may save the document string to local file with save; or submit it to your web server via ajax. Later you may import the rReport document with importDoc. This way, you may pre-create a report as template and dynamically fill the report later with data.

Syntax

exportDoc()

Return

Returns document in rReport format as string.

See Also

save  importDoc 

Example


    var docString = doc.exportDoc();

    ...

    //1) submit docString to your web server by ajax
    
    //or
  
    //2) directly save docString to local computer 
    //as rReport format file with doc.save(...) placed inside a user click/touch HTML element DOM event:

    document.getElementId("saveButton").oncllick = function() {
        doc.save("rReportName1.rr.txt", docString);
   };

Document Attributes and Control


importDoc

Description

Imports document in rReport format. Your may retrieve your prevously saved rReport document from your web server; or get it from local file system; and then import it with this method. You may use the rReport document as tempalte; and dynamically fill out the report with data.

Syntax

importDoc(docString)

where
docString: document string in rReport format

See Also

exportDoc 

Example


    
    //get docString from your web server by ajax or from local file system with your dialog UI.
    //then import it:
    
    doc.importDoc(docString);

Document Attributes and Control


save

Description

saves data to local file. Please note that a browser does not allow you to silently save to local file unless you place the statement inside a user initiated click/touch HTML DOM event.

Syntax

save(fileName, data)

where
fileName: a string for output file name.
data: data in string data type to be saved to local file.

Example

See examples in exportPdf  exportDoc 

Document Attributes and Control


savePdf

Description

saves pdf object to local pdf file. Please note that a browser does not allow you to silently save to local file unless you place the statement inside a user initiated click/touch HTML DOM event.

Syntax

savePdf(fileName, pdfObject)

where
fileName: a string for output file name.
pdfObject: pdf object obtained by exportPdfObject.

Example

See example in exportPdfObject 

Document Attributes and Control


setGrid

Description

Specifies the placement of grid on each page or not.

Syntax

setGrid(flag)

where
flag: A boolean flag. true - place grid; false - do not.

See Also

getGrid 

Example


	doc.setGrid(true);

Document Attributes and Control


setMargin

Description

Sets margin object for document page. The margin object defines top, bottom, left and right margins for page border, page header and footer as well as for table that may be split across multiple pages.

Syntax

setMargin(margin)

where
margin: a margin object (see example below)

See Also

getMargin  drawPageBorder  drawPageHeader  drawPageFooter  calcTable

Example


    var INCH = doc.getUnit();
    var INCH4 = INCH/4;
    var margin = { top: INCH4, bottom: INCH4, left: INCH4, right: INCH4 };    
    doc.setMargin(margin);

Document Attributes and Control


setName

Description

Sets document name

Syntax

setName(name)

where
name: A string for document name.

See Also

getName 

Example


	doc.setGrid("Report1");

Document Attributes and Control


setPageSize

Description

Sets page size for the document.

Syntax

setPageSize(format)
setPageSize(size)

where
format: A string for paper size (format="letter" for Letter size; format="a4" for A4 size)
size: a size object with size.width and size.heigt for width and height.

See Also

getPageSize 

Example


    //specify for Letter paper size
    doc.setPageSize("letter");

    //specify for A4 paper size
    doc.setPageSize("a4");

    //specify for custom paper size
    var INCH = doc.getUnit();
    var size = { width: 6*INCH, height: 4*INCH };
    doc.setPageSize(size);

Document Attributes and Control



addPage

Description

Adds a new page to document.

Syntax

addPage()

Return

Returns page count of the document.

See Also

getPageCount 

Example


	var pageCount = doc.addPage();

Page Attributes and Control


clear

Description

Removes all pages in the document.

Syntax

clear()

See Also

addPage  clearPage 

Example


	doc.clear();

Page Attributes and Control


clearPage

Description

Removes all object in the current page.

Syntax

clearPage()

See Also

clear 

Example


	doc.clearPage();

Page Attributes and Control


getPageCount

Description

Gets page count of the document.

Syntax

getPageCount()

Return

Returns page count of the document.

See Also

addPage 

Example


	var pageCount = doc.getPageCount();

Page Attributes and Control


getPageIndex

Description

Gets current page index.

Syntax

getPageIndex()

Return

Returns a page index for current page.

See Also

setPageIndex 

Example


	var pageIndex = doc.getPageIndex();

Page Attributes and Control


removePage

Description

Removes a page from the document.

Syntax

removePage(pageIndex)

where
pageIndex: 0-based page index for the page to be removed.

See Also

getPageCount 

Example


    //remove page with page index = 2
	doc.removePage(2);

Page Attributes and Control


setPageIndex

Description

Sets current page for drawing or modifying objects.

Syntax

setPageIndex(pageIndex)

where
pageIndex: 0-based page index.

See Also

getPageIndex 

Example


    //set page with page index = 2 as current page 
	doc.setPageIndex(2);

Page Attributes and Control



addObject

Description

Adds an object to the current page. Each object has its short form of draw method. For example drawString is the short form for object type of string.

Syntax

addObject(id, type, x, y, width, height, data, attr)

where

id: id name in string for the object.

type: object type using one of the following strings.
arrow
circle
ellipse
image
line
lines
rect
string
table
text

x, y: object x and y in logical unit (point).

width, height: object width and heihgt in logical unit (point).

data:
For object type of string, text, and table, this is the same as the data parameter of drawString, drawText, and drawTable, respectively.

For image object, it is the dataURL for base64 image data.

For lines object, it is an array of points forming the lines.

For other object types, it is not used.

attr:
A javascript object specifying properties/attriubtes for the rReport object.
See example below, and also see Object Properties/Attributes.

Object Types and Short Forms

See Also

Object Properties/Attributes

Example



    var INCH = doc.getUnit();
    doc.setPageIndex(0);

    //---add string object
    var attr = { "font-size": 10, "font-family": "helvetica" };
    doc.addObject("strObject1", "string", INCH, INCH, 0, 0, "My String", attr);
    
    //---add text object
    var attr = { "font-size": 10, "font-family": "helvetica", "line-spacing": 1.5 };
    doc.addObject("txtObject2", type, INCH, 2*INCH, INCH, 0, "My Text 1, My Text 2", attr);
   
    //---add table object
    var attr = {
        rows: ["row0","row1"],

        map: {
            "row0": [{ width: INCH, style: "cell0" }, { width: INCH, style: "cell0" }, { width: INCH, style: "cell0" }],
            "row1": [{ width: INCH, style: "cell1" }, { width: INCH, style: "cell1" }, { width: INCH, style: "cell1" }],
            "cell0": { "text-align": "center", "font-size": 12, "font-family": "helvetica", "font-weight": "bold", "background-color": "#ffff00" },
            "cell1": { "text-align": "left", "font-size": 10, "font-family": "helvetica"}
        },

        border: true
    };

    var data = [
        ["Header1", "Header2", "Header3"],
        ["col1", "col2", "col3"]
    ];

    doc.addObject("tblObject3", "table", INCH, 3*INCH, 0, 0, data, attr);

    //---add image object   
    var attr = { type: "jpg" };
    doc.addObject("imgObject4", "image", INCH, 4*INCH, 1.5*INCH, INCH, dataURL, attr);

    //---add line object   
    var attr = { "stroke": "#000000","stroke-width": 1 };
    doc.addObject("linObject5", "line", INCH, 5*INCH, 2*LINE, 6*INCH, "", attr);

    //---add lines object   
    var attr = { "stroke": "#000000","stroke-width": 1 };
    var data = [[INCH, INCH], [1 * INCH, 2 * INCH], [2 * INCH, 1 * INCH]];
    //or
    //var data = [INCH, INCH, 1 * INCH, 2 * INCH, 2 * INCH, 1 * INCH];
    doc.addObject("lnsObject6", "lines", 0, 0, 0, 0, data, attr);

    //---add rect object
    var attr = { "stroke": "#000000", "fill": "#ffffff" };
    control.addObject("rctObject7", "rect", INCH, 7*INCH, 2*INCH, 1*INCH, "", attr);

    //---add circle object
    var attr = { "stroke": "#000000", "fill": "#ff0000" };
    doc.addObject("cirObject8", "circle", INCH, 8*INCH, INCH, INCH, "", attr);

    //---add ellipse object
    var attr = { "stroke": "#000000", "fill": "#ff0000" };
    doc.addObject("elpObject9", "ellipse", INCH, 9*INCH, 2*INCH, INCH, "", attr);

    //---add arraw object
    var attrLine = { fill: "#ff0000", stroke: "#000000" };
    var attr = { line: attrLine, start: attrLine, end: attrLine, headWidth: INCH * 0.25, headLength: INCH * 0.25 };
    doc.addObject("arrObject10", "arrow", INCH, INCH, 2 * INCH, 3 * INCH, "", attr);

document: Object Attributes and Control


calcString

Description

Calculates a string.

Syntax

calcString(data, attr)

where parameters are the same as those in drawString.

Return

Returns a size object with its width and height property as the calculated width and height.

See Also

drawString  addObject 

Example


    var attr = { "font-size": 10, "font-family": "helvetica" };
    var data = "Hello World";
    var size = doc.calcString(data, attr);
    var width = size.width;
    var height = size.height;

document: Object Attributes and Control


calcTable

Description

Calculates a table.

Syntax

calcTable(data, attr)

where parameters are the same as those in drawTable.

Return

Returns a size object with its width and height property as the calculated width and height.

Remarks

For table that may be across multiple pages, see example below and the full example in ../examples/table_split.html

See Also

addObject  drawTable 

Example


    
    //---calculate table that remains on a single page
    //see data, attr in addObject example
    var size = doc.calcTable(data, attr);
    var width = size.width;
    var height = size.height;

    //---calculate table that is split into multiple pages
    //see data, attr in addObject example
 
    //specify y postion for the first part of the table 
    attr.y = 3 * INCH;

    //specify that the table will be split if needed 
    attr.split = true;
    var tables = doc.calcTable(data, attr);

    //draw sub-tables on multiple pages
    var c = tables.length;
    var x = 0.5 * INCH;
    for (var i = 0; i < c; i++) {
        var table = tables[i];
        if (i > 0) {
            doc.addPage();
        } 
        doc.drawTable(x, table.y, table, attr);
    }

document: Object Attributes and Control


calcText

Description

Calculates text.

Syntax

calcText(data, width, attr)

where parameters are the same as those in drawText.

Return

Returns a size object with its width and height property as the calculated width and height.

See Also

addObject  drawText 

Example


    var INCH = doc.getUnit();

    //specify text widht (paragraph width)
    var width = INCH;

    var data = "long text to be wrapped into multiple text lines via text object width.";
    var attr = { "font-size": 10, "font-family": "helvetica", "line-spacing": 1.5 };
    var size = doc.calcText(data, width, attr);

    //width already known
    //var width = size.width;

    var height = size.height;

document: Object Attributes and Control


drawArrow

Description

Draws an arrow from point (x1,y1) to point (x2, y2). It is a short form of addObject.

Syntax

drawArrow(x1, y1, x2, y2, attr)

where

x1, y1: arrow starting point

x2, y2: arrow ending point

attr: a javascript object specifying properties for drawing the object. See Object Properties.

Object Specific Properties

attr.line: Attributes for drawing connection line for arrow

attr.start: Attributes for drawing start arrow head. If null, start arrow head will not be drawn.

attr.end: Attributes for drawing end arrow head. If null, end arrow head will not be drawn.

headWidth: Arrow head width in logical unit (point).

headLength: Arrow head length in logical unit (point).

See Also

addObject 

Example


    var INCH = doc.getUnit();
    var attrLine = { fill: "#ff0000", stroke: "#000000" };
    var attr = { line: attrLine, start: attrLine, end: attrLine, headWidth: INCH * 0.25, headLength: INCH * 0.25 };
    doc.drawArrow(INCH, INCH, 2 * INCH, 3 * INCH, attr);

document: Object Attributes and Control


drawCircle

Description

Draws a circle. It is a short form of addObject.

Syntax

drawCircle(x, y, width, attr)

where

x, y: top-left corner of bounding square for the circle

width: width of bounding square for the circle

attr: a javascript object specifying properties for drawing the object. See Object Properties.

See Also

addObject 

Example


    var INCH = doc.getUnit();
    var attr = { fill: "#ff0000", stroke: "#000000" };
    doc.drawCircle(INCH, INCH, 0.5*INCH, attr);

document: Object Attributes and Control


drawEllipse

Description

Draws an ellipse. It is a short form of addObject.

Syntax

drawEllipse(x, y, width, height, attr)

where

x, y: top-left corner poistion of bounding rectangle for the ellipse

width, height: width and height of bounding rectangle for the ellipse

attr: a javascript object specifying properties for drawing the object. See Object Properties.

See Also

addObject 

Example


    var INCH = doc.getUnit();
    var attr = { fill: "#ff0000", stroke: "#000000" };
    doc.drawEllipse(INCH, INCH, 2*INCH, 1*INCH, attr);

document: Object Attributes and Control


drawImage

Description

Draws an image. It is a short form of addObject.

Syntax

drawImage(x, y, width, height, dataURL, attr)

where

x, y: top-left corner poistion of image

width, height: width and height of image

dataURL, dataURL of image.
You may use your ajax to get image's dataURL from your web server.

attr: a javascript object specifying properties for drawing the object. See Object Properties.

Object Specific Properties

attr.type: a string for specifying image type. attr.type="jpg" or attr.type="png". Only jpg or png can be used.

See Also

addObject 

Example



    //retrieve your image's dataURL with ajax from your web server
    
    //for your convenience
    //rr.action.getDataURL(imageURL, funciton(dataURL){
    //    //your code here for what to do with the dataURL
    //});


    var INCH = doc.getUnit();
    var attr = { type: "jpg" };
    doc.drawImage(INCH, INCH, 2*INCH, , 1*INCH, dataURL, attr);

document: Object Attributes and Control


drawLine

Description

Draws a line from point (x1,y1) to point (x2, y2). It is a short form of addObject.

Syntax

drawLine(x1, y1, x2, y2, attr)

where

x1, y1: line start point

x2, y2: line end point

attr: a javascript object specifying properties for drawing the object. See Object Properties.

See Also

addObject  drawLines 

Example


    var INCH = doc.getUnit();
    var attr = { stroke: "#000000", "stroke-width": 2 };
    doc.drawLine(INCH, INCH, 2*INCH, 1*INCH, attr);

document: Object Attributes and Control


drawLines

Description

Draws lines. It is a short form of addObject.

Syntax

drawLines(data, attr)

where

data: array for points that form the lines.
data = [x1,y1,x2,y2,....];
or
data = [[x1,y1],[x2,y2],....];

attr: a javascript object specifying properties for drawing the object. See Object Properties.

Object Specific Properties

attr.closed: a boolean value with true for lines closed and false for lines opened.

See Also

addObject  drawLines 

Example


    var INCH = doc.getUnit();
    
    //closed lines (first and last points connected)
    var attr = { fill: "#ff0000", stroke: "#000000", closed: true };

    //open lines (first and last points not connected)
    //var attr = { fill: "#ff0000", stroke: "#000000", closed: false };

    var data = [[INCH, INCH], [1 * INCH, 2 * INCH], [2 * INCH, 1 * INCH]];
    //or
    //var data = [INCH, INCH, 1 * INCH, 2 * INCH, 2 * INCH, 1 * INCH];

    doc.drawLines(data, attr);

document: Object Attributes and Control


drawPageBorder

Description

Draws page border. The page border is formed by margins set via setMargin.

Syntax

drawPageBorder(attr)

where

attr: a javascript object specifying properties for drawing the object. See Object Properties.

Object Specific Properties

attr["border-top"]: a boolean value for drawing top border.
attr["border-bottom"]: a boolean value for drawing bottom border.
attr["border-left"]: a boolean value for drawing left border.
attr["border-right"]: a boolean value for drawing right border.
attr.border: a boolean value for drawing all borders.

See Also

setMargin 

Example


    
    //draw top and bottom borders
    var attr = { stroke: "#000000", "border-top": true, "border-bottom": true};

    doc.drawPageBorder(attr);

document: Object Attributes and Control


drawPageFooter

Description

Draws page footer. The page footer position is corresponding to margin-bottom set by setMargin.

Syntax

drawPageFooter(data, attr)

where

data: array specifying left, center, and right footer text
data = ["leftText", "centerText", "rightText"];

attr: a javascript object specifying properties for drawing the object. See Object Properties.

Object Specific Properties

attr.yShift: shift distance along y direction in logical unit (point) relative to the default y position.

See Also

drawPageHeader  setMargin 

Example


    
    var data = ["leftText", "centerText", "rightText"];
    var attr = { "font-size": 10, "font-family": "helvetica", yShift: 0 };
    doc.drawPageFooter(data, attr);

document: Object Attributes and Control


drawPageHeader

Description

Draws page header. The page header position is corresponding to margin-top set by setMargin.

Syntax

drawPageHeader(data, attr)

where

data: array specifying left, center, and right header text
data = ["leftText", "centerText", "rightText"];

attr: a javascript object specifying properties for drawing the object. See Object Properties.

Object Specific Properties

attr.yShift: shift distance along y direction in logical unit (point) relative to the default y position.

See Also

drawPageFooter  setMargin 

Example


    
    var data = ["leftText", "centerText", "rightText"];
    var attr = { "font-size": 10, "font-family": "helvetica", yShift: 0 };
    doc.drawPageFooter(data, attr);

document: Object Attributes and Control


drawRect

Description

Draws a rectangel. It is a short form of addObject.

Syntax

drawRect(x, y, width, height, attr)

where

x, y: top-left corner of rectangle.

width, height: width and height of rectangle.

attr: a javascript object specifying properties for drawing the object. See Object Properties.

Object Specific Properties

attr.r: radius of round corners for round rectangle in logical unit (point).

See Also

addObject 

Example


    var INCH = doc.getUnit();
    var attr = { fill: "#ff0000", stroke: "#000000" };
    doc.drawRect(INCH, INCH, 2*INCH, 1*INCH, attr);

document: Object Attributes and Control


drawString

Description

Draws a string. It is a short form of addObject.

Syntax

drawString(x, y, data, attr)

where

x, y: object x and y in logical unit (point);.

data: a string to be drawn.

attr: a javascript object specifying properties for drawing the object. See Object Properties.

Object Specific Properties

attr.rotation: rotation angle in degree for rotating the string.

See Also

addObject  calcString 

Example


    var INCH = doc.getUnit();
    var attr = { "font-size": 10, "font-family": "helvetica", rotation: 0 };
    doc.drawString(INCH, INCH, "Hello World", attr);

document: Object Attributes and Control


drawTable

Description

Draws a table. It is a short form of addObject.

Syntax

drawTable(x, y, data, attr)

where

x, y: object x and y (top-left corner of table) in logical unit (point).

data: array containing text to be drawn.

attr: a javascript object specifying properties for drawing the object. See Object Properties.

Object Specific Properties

attr.border: a boolean value for drawing table border or not.

attr.rows: array specifying row names for row attribute definition lookup.
Each row name in attr.rows is corresponding to each row in the data array. If the data array has more rows than attr.rows, the attributes of the last row in attr.rows will be used for the rest of rows in the data array.

attr.map: a javascript object as a lookup map for attributes of table rows and cells.

See Also

addObject  calcString 

Example



    var INCH = doc.getUnit();

    var attr = {
        rows: ["row0","row1"],

        map: {
            "row0": [{ width: INCH, style: "cell0" }, { width: INCH, style: "cell0" }, { width: INCH, style: "cell0" }],
            "row1": [{ width: INCH, style: "cell1" }, { width: INCH, style: "cell1" }, { width: INCH, style: "cell1" }],
            "cell0": { "text-align": "center", "font-size": 12, "font-family": "helvetica", "font-weight": "bold", "background-color": "#ffff00" },
            "cell1": { "text-align": "left", "font-size": 10, "font-family": "helvetica"}
        },

        border: true
    };

    var data = [
        ["Header1", "Header2", "Header3"],
        ["col1", "col2", "col3"]
    ];

    doc.drawTable(INCH, 3*INCH, data, attr);

document: Object Attributes and Control


drawText

Description

Draws text (paragraph). It is a short form of addObject.

Syntax

drawText(x, y, width, data, attr)

where

x, y: object x and y in logical unit (point).

width: object width in logical unit (point).

attr: a javascript object specifying properties for drawing the object. See Object Properties.

See Also

addObject  drawString 

Example



    var INCH = doc.getUnit();

    //note: width may not be set to too small to cause possible text wrapping issue.
    var width = INCH;

    var attr = { "font-size": 10, "font-family": "helvetica", "line-spacing": 1.5 };
    var data = "text that may be wrapped.";
    doc.drawText(INCH, 2*INCH, width, data, attr);

document: Object Attributes and Control


getObject

Description

Gets object by id string from current page.

Syntax

getObject(id)

where

id: object id string

Return

Returns an object.

See Also

addObject 

Example



    //---fill out report template by setting new data

    //name
    var o = doc.getObject("name");
    o.set("data", "New name here");

    //address
    var o = doc.getObject("streetAddress");
    o.set("data", "New street address here");
 

document: Object Attributes and Control


getObjectCount

Description

Gets object count for current page.

Syntax

getObjectCount()

Return

Returns object count.

Example



    //loop through each object
    var count = doc.getObjectCount();
    for (var i=0; i < count; i++) {
        var id = doc.getObjectId(i);
        var o = doc.getObject(id);
    }

document: Object Attributes and Control


getObjectId

Description

Gets object id by index for current page.

Syntax

getObjectId(index)

where
index: 0-based index for object.

Return

Returns object id string.

See Also

getObjectCount 

Example

See example in getObjectCount 

document: Object Attributes and Control


getObjectIndex

Description

Gets object index by object id for current page.

Syntax

getObjectIndex(id)

where
id: object id string.

Return

Returns 0-based object index.

Example


	var index = doc.getObjectIndex("addressId");

document: Object Attributes and Control


getUniqueId

Description

Gets unique id name. The returned id may be used in addObject or set to attr.id for an object draw method.

Syntax

getUniqueId(prefix)

where
prefix: optional string as the prefix for the id.

Return

Returns a unique id string.

See Also

addObject 

Example


    var id = doc.getUniqueId("str");

    var INCH = doc.getUnit();

    var attr = { "font-size": 10, "font-family": "helvetica" };
    var data = "Hello World";
    doc.addObject(id, "string", INCH, INCH, 0, 0, data, attr); 

    //or
    attr.id = id;
    doc.drawString(INCH, INCH, data, attr);
  
    //get object
    var o = doc.getObject(id);

document: Object Attributes and Control


objectExists

Description

Checks if object exists in the current page.

Syntax

objectExists(id)

where
id: object id string.

Return

Returns a boolean value for existence or absence.

See Also

addObject 

Example


	var exist = doc.objectExists("addressId");

document: Object Attributes and Control


removeObject

Description

Removes object from current page.

Syntax

removeObject(id)

where
id: object id string.

See Also

addObject 

Example


	doc.removeObject("addressId");

document: Object Attributes and Control




viewer Overview



Class: rreport.viewer

Description

Provides functions to view an rReport document.

Syntax

rreport.viewer(options)

where
options = {container: viewerContainerId, width: viewerWidth, height: viewerHeight, toolbar: viewerToolbar }

viewerContainerId: id of an html div element that will hold the viewer.

viewerWidth, viewerHeight: viewer width and height in pixels.

viewerToolbar: a boolean value or javascript object for specifying toolbar for the viewer.
viewerToolbar=true for displaying the toolbar; viewerToolbar={"saveButton": true} will display a toolbar button that saves rReport format document to local file system.
Alternatively, you may implement your own toolbar for the viewer. The viewer class provides necessary methods and events for you to do so.

Return

Returns a new instance of viewer object.

See Also

setDocument 

Example


    //create new instance of viewer
    var options = { container: "report_viewer_holder", width: window.screen.width / 2, height: window.screen.height / 2, toolbar: true };
    //var options = { container: "report_viewer_holder", width: window.screen.width / 2, height: window.screen.height / 2, toolbar: {"saveButton" : true} };
    var viewer = rreport.viewer(options);


    //create and attach document to viewer
    var doc = rreport.document();
    viewer.setDocument(doc);

Home Menu



viewer Methods Summary

Viewer Attributes and Control

calcZoom
clear
clientToPage
getClientSize
getDocument
getHitObject
getMouseScroll
getObjectEdit
getScrollPos
getViewSize
getUnit
getZoom
pageToClient
preview
renderClear
setClientSize
setCursor
setDocument
setInteractive
setMouseScroll
setObjectEdit
setScrollPos
setViewSize
setZoom

Viewer-as-Designer Attributes and Control

addObject
getSelectedObjects
selectAll
selectObject
selectObjects
storePage
toBack
toFront
updateInteractive
updateObject

Viewer Events

setListener

Viewer Util

getToolbar
getWaitTip

Home Menu



calcZoom

Description

Calculates a zoom value for page preview width or height.

Syntax

calcZoom(size)

where
size: a size object for specifying how to zoom the page for preview.
size = {width: pagePreviewWidth} will set page preview width to pagePreviewWith in pixels;
size = {height: pagePreviewHeight} will set page preview height to pagePreviewHeight in pixels;
size = {width: -1} will set page preview width to fit viewer's width;
size = {height: -1} will set page preview height to fit viewer's height.

Return

Returns a zoom value to be used by setZoom.

See Also

setZoom 

Example


	
    //set preview page width
    var size = {width: screen.width};

    //set preview page height
    var size = {height: screen.height};
  
    //fit preview page width to viewer's width
    var size = {width: -1};

    //fit preview page height to viewer's height
    var size = {height: -1};
    
    var zoom = viewer.calcZoom(size);
    viewer.setZoom(zoom);

Viewer Attributes and Control


clear

Description

Removes document-associated objects from the preview screen. The objects are not removed from the document and still remain in memory.

Syntax

clear()

See Also

preview 

Example


	viewer.clear();

Viewer Attributes and Control


clientToPage

Description

Converts a point's page screen coordinates (in pixels) to page physical coordinates (in logical units/points).

Syntax

var point = clientToPage(xc, yc)
var pArray = clientToPage([c0,c1,c2,...])

where

xc, yc: (x,y) coordinates relative to page top-left corner on the screen in pixels.

point: returned point object with point.x and point.y as page coordinates in logical units.

[c0,c1,c2,...]: array of values relative to page top-left corner on the screen in pixels.

pArray: returned array with pArray=[p0,p1,p2,...] as page coordinates in logical units.

Return

Returns an point object or an array.

See Also

pageToClient 

Example


    var point = viewer.clientToPage(100, 200);
    var xp = point.x;
    var yp = point.y;

    var pArray = viewer.clientToPage([100, 200]);
    var xp = pArray[0];
    var yp = pArray[1];


Viewer Attributes and Control


getClientSize

Description

Gets preview page size with its width and height properties in pixels.

Syntax

getClientSize()

See Also

setClientSize 

Example


    var size = viewer.getClientSize();
    var width = size.width;
    var height = size.height;

Viewer Attributes and Control


getDocument

Description

Gets document attached to the viewer.

Syntax

getDocument()

Return

Returns the document object.

See Also

setDocument 

Example


	var doc = viewer.getDocument();

Viewer Attributes and Control


getHitObject

Description

Gets an object with its bounding rectangle being intersected by a given point.

Syntax

getHitObject(x, y)

where
x, y: (x, y) coordinates of a point in logical units (points).

Return

Returns an object if there is a hit or null otherwise.

See Also

document.getObject 

Example


    var INCH = doc.getUnit();
    var o = viewer.getHitObject(INCH, INCH);
    if (o) {
        var id = o.getId();
        var data = o.get("data");
    }

Viewer Attributes and Control


getMouseScroll

Description

Gets a boolean flag for scrolling preview page by dragging the page with mouse or not. The boolean flag is set by setMouseScroll.

Syntax

getMouseScroll()

Return

Returns a boolean value.

See Also

setMouseScroll

Example


	var mouseScroll = viewer.getMouseScroll();

Viewer Attributes and Control


getObjectEdit

Description

Gets a boolean flag for enabling the viewer as object editing control or not. The boolean flag is set by setObjectEdit.

Syntax

getObjectEdit()

Return

Returns a boolean value.

See Also

setObjectEdit setInteractive

Example


	var objectEdit = viewer.getObjectEdit();

Viewer Attributes and Control


getScrollPos

Description

Gets a javascript object containing scroll positions of horizontal and vertical scroll bars for the preview page.

Syntax

getScrollPos()

Return

Returns a javascript object containing scroll positions.

See Also

setScrollPos

Example


    var pos = viewer.getScrollPos();

    //horizontal scroll position in the range of 0 and 1.0.
    var horizontalPos = pos.horz;

    //vertical scroll position in the range of 0 and 1.0.
    var verticalPos = pos.vert;

Viewer Attributes and Control


getViewSize

Description

Gets a viewer size with its width and height properties in pixels.

Syntax

getViewSize()

Return

Returns a viewer size object.

See Also

setViewSize

Example


    var size = viewer.getViewSize();
    var width = size.width;
    var height = size.height;

Viewer Attributes and Control


getUnit

Description

Gets pixels corresponding to one inch for the current preview zoom value.

Syntax

getUnit()

Return

Returns a value in pixles.

See Also

clientToPage pageToClient

Example


    //get inch in pixels
    var INCH = viewer.getUnit();

Viewer Attributes and Control


getZoom

Description

Gets current zoom value with 1.0 for 100% zoom.

Syntax

getZoom()

Return

Returns current zoom value.

See Also

setZoom

Example


    var zoom = viewer.getZoom();

Viewer Attributes and Control


pageToClient

Description

Converts a point's page physical coordinates (in logical units/points) to page screen coordinates (in pixels).

Syntax

var point = pageToClient(xp, yp)
var cArray = pageToClient([p0,p1,p2,...])

where

xp, yp: (x,y) coordinates relative to page top-left corner on the physical page in logical units (points).

point: returned point object with point.x and point.y as page screen coordinates in pixels.

[p0,p1,p2,...]: array of values relative to page top-left corner on the physical page in logical units (points).

cArray: returned array with cArray=[c0,c1,c2,...] as client coordinates in pixels.

Return

Returns an point object or an array.

See Also

clientToPage 

Example


    var point = viewer.pageToClient(100, 200);
    var xc = point.x;
    var yc = point.y;

    var cArray = viewer.pageToClient([100, 200]);
    var xc = cArray[0];
    var yc = cArray[1];

Viewer Attributes and Control


preview

Description

Previews a page.

Syntax

preview()
preview(pageIndex)

where

pageIndex: 0-based page index for the page to be previewed. The previewed page will become the current page. If there is no argument for the method, the curret page will be previewed.

Example


    
    //preview current page
    viewer.preview();

    //preview page with pageIndex = 3 and set the page as current page
    viewer.preview(3);

Viewer Attributes and Control


renderClear

Description

Removes other elements besides document related objects from the preview screen.

Syntax

renderClear()

See Also

clear  preview 

Example


	viewer.renderClear();

Viewer Attributes and Control


setClientSize

Description

Sets preview page size.

Syntax

setClientSize(size)

where
size: preview page size with size.width and size.height in pixels.

See Also

getClientSize 

Example


    var width = 800;
    var height = (11/8.5) * width;
    var size = { width: width, height: height };
    viewer.setClientSize(size);

Viewer Attributes and Control


setCursor

Description

Sets cursor for the preview page.

Syntax

setCursor(cursor)

where
cursor: an html supported cursor name.

See Also

setListener 

Example


	viewer.setCursor("pointer");

Viewer Attributes and Control


setDocument

Description

Attaches an rReport document to the viewer.

Syntax

setDocument(doc)

where
doc: an instance of rReport document.

See Also

rreport.document 

Example


    //create a new instance of document
    var doc = rreport.document();

    //attach document to viewer
    viewer.setDocument(doc);

Viewer Attributes and Control


setInteractive

Description

Initializes the viewer as an interactive control for report designer or object-clicking by mouse.

Syntax

setInteractive(flag)

where
flag: a boolean value. true for making the viewer interactive or false for otherwise.

See Also

setObjectEdit 

Example


	viewer.setInteractive(true);

Viewer Attributes and Control


setMouseScroll

Description

Sets a boolean flag for enabling the scrolling of preview page by dragging the page with mouse or not.

Syntax

setMouseScroll(flag)

where
flag: a boolean value for enabling preview page scroll by mouse dragging of the preview page.

See Also

getMouseScroll

Example


	viewer.setMouseScroll(true);

Viewer Attributes and Control


setObjectEdit

Description

Sets a boolean flag for enabling the viewer as object editing control or not. If you want to develop your own custom report designer with the viewer, this flag needs to be turned on.

Syntax

setObjectEdit(flag)

where
flag: a boolean value for enabling the viewer as object editing control.

See Also

getObjectEdit setInteractive

Example


	viewer.setObjectEdit(true);

Viewer Attributes and Control


setScrollPos

Description

Sets scroll positions of horizontal and/or vertical scroll bars for the preview page.

Syntax

setScrollPos(scroll)

where
scroll: an object for setting scrollbar positions.
scroll = { horz: horzPos, vert: vertPos } with horzPos and vertPos in the range of 0 and 1.0.
If horz or vert property is missing, the corresponding scroll bar position will not be set and updated.

See Also

getScrollPos

Example



    //set horz pos
    var scroll = { horz: 0.5 };
    viewer.setScrollPos(scroll);

   //set vert pos
    var scroll = { vert: 0.5 };
    viewer.setScrollPos(scroll);
  

    //set both horz and vert
    var scroll = { horz: 0.5, vert: 0.5 };
    viewer.setScrollPos(scroll);
 

Viewer Attributes and Control


setViewSize

Description

Sets viewer size.

Syntax

setViewSize(size)

where
size: viewer size.
size = { width: viewerWidth, height: viewerHeight }
with viewerWidth and viewerHeight in pixels.

See Also

getViewSize

Example


    var size = { width: screen.width/2, height: screen.height/2 };
    viewer.setViewSize(size);

Viewer Attributes and Control


setZoom

Description

sets zoom value for the previewed page with zoomVlaue=1.0 for 100% zoom. Before setting the zoom value, you may first calculate it with calcZoom

Syntax

setZoom(zoomVlaue)

See Also

calcZoom  getZoom

Example


    //set zoom to 200%
    var zoom = 2.0;
    viewer.setZoom(zoom);

Viewer Attributes and Control



addObject

Description

Adds an rReport object to the attached document as well as to the viewer.

Syntax

addObject(id, type, x, y, width, height, data, attr)

where
all the parameters are the same as those in rreport.document.addObject

See Also

rreport.document.addObject

Example


    var INCH = doc.getUnit();
    var attr = { "font-size": 10, "font-family": "helvetica" };
    viewer.addObject("strObject1", "string", INCH, INCH, 0, 0, "My String", attr);

Viewer-as-Designer Attributes and Control


getSelectedObjects

Description

Gets selected objects on the screen.

Syntax

getSelectedObjects()

Return

Returns an array containing selected rReport objects; or null if there is no selected object. Each object in the array is the same as in rreport.document.getObject

See Also

selectAll 

Example


    var items = viewer.getSelectedObjects();
    for (var i=0; i < items.length; i++) {
        var o = items[i];
        var id = o.getId();
        var data = o.get("data");
    }

Viewer-as-Designer Attributes and Control


selectAll

Description

Selects all objects for the current page on the screen.

Syntax

selectAll()

See Also

getSelectedObjects 

Example


    viewer.selectAll();
 

Viewer-as-Designer Attributes and Control


selectObject

Description

Selects an object on the screen by object id.

Syntax

selectObject(id)

where
id: object id string.

See Also

selectObjects 

Example


	viewer.selectObject("strObject1");

Viewer-as-Designer Attributes and Control


selectObjects

Description

Selects objects on the screen by object id array.

Syntax

selectObjects(ids)

where
ids: object id array.

See Also

selectObject 

Example


    var ids = ["objectId1", "objectId2", "objectId3"];
    viewer.selectObjects(ids);

Viewer-as-Designer Attributes and Control


storePage

Description

Saves on-screen updated objects to the attached document instance for the current page.

Syntax

storePage()

Example


	viewer.storePage();

Viewer-as-Designer Attributes and Control


toBack

Description

Sends an on-screen selected object to back. You may select an on-screen object by mouse.

Syntax

toBack()

See Also

toFront 

Example


	viewer.toBack();

Viewer-as-Designer Attributes and Control


toFront

Description

Brings an on-screen selected object to front. You may select an on-screen object by mouse.

Syntax

toFront()

See Also

toBack 

Example


	viewer.toFront();

Viewer-as-Designer Attributes and Control


updateInteractive

Description

Updates the interactive screen.

Syntax

updateInteractive()

See Also

updateObject 

Example


	viewer.updateInteractive();

Viewer-as-Designer Attributes and Control


updateObject

Description

Updates an on-screen object and repaints it.

Syntax

updateObject(id)

where
id: object id string.

See Also

addObject 

Example


	viewer.updateObject("strObject1");

Viewer-as-Designer Attributes and Control



Events

setListener

Description

Sets event handler for the viewer.

Syntax

setListener(handler)

where
handler: event handler.
handler = function(eventType, obj) {}
with eventType for identifying event type and obj for the event passed info.

Example



    var handler = function (eventType, obj) {

        switch (eventType) {
            case "mousemove":
                var control = viewer;
                //check mouse position if it hits an object, change the mouse cursor
                if (!control.getObjectEdit()) {
                    var o = control.getHitObject(obj.pos.x, obj.pos.y);
                    var cursor = o ? "pointer" : "default";
                    control.setCursor(cursor);
                }
                break;

            case "mousedown":
                var control = viewer;
                if (!control.getObjectEdit()) {
                    var o = control.getHitObject(obj.pos.x, obj.pos.y);
                    if (o) {
                        alert("click on " + o.getId());
                    }
                }
                break;

            case "mouseup":
                break;

            case "dblclick":
                break;
        }

    };


    //set event handler
    viewer.setListener(handler);

Viewer Events



getToolbar

Description

Gets toolbar object.

Syntax

getToolbar()

Return

Returns a toolbar object or null if there is no toolbar created via the viewer constructor.

See Also

viewer constructor 

Example



    //get toolbar
    var toolbar = viewer.getToolbar();

    //get document
    var doc = viewer.getDocument();

    //replace default event hander
    toolbar.listen(function (eventId, obj) {

        var pageIndex = doc.getPageIndex();
        var pageCount = doc.getPageCount();

        //control.clear();

        switch (eventId) {

            //downlad print button
            case "download_print":
                break;

            case "first":
                doc.setPageIndex(0);
                break;

            case "prev":
                pageIndex -= 1;
                doc.setPageIndex(pageIndex);
                break;

            case "next":
                pageIndex += 1;
                doc.setPageIndex(pageIndex);
                break;

            case "last":
                doc.setPageIndex(pageCount - 1);
                break;

            case "page_index":
                var index = obj.index;
                doc.setPageIndex(index);
                break;


            case "fitwidth":
                toolbar.setZoomIndex(0);
                var zoom = control.calcZoom({ width: -1 });
                control.setZoom(zoom);
                break;

            case "fitpage":
                toolbar.setZoomIndex(1);
                var zoom = control.calcZoom({ height: -1 });
                control.setZoom(zoom);
                break;

            case "zoom_index":
                var index = obj.index;
                if (!rr.string.isNumeric(index)) { return; }
                if (index == 0) {
                    var zoom = control.calcZoom({ width: -1 });
                    control.setZoom(zoom);
                }
                else if (index == 1) {
                    var zoom = control.calcZoom({ height: -1 });
                    control.setZoom(zoom);
                }
                else {
                    var zoom = rr.string.toFloat(obj.value) / 100;
                    control.setZoom(zoom);
                }
                break;
        }

        control.preview();

    });
    




Viewer Util


getWaitTip

Description

Gets wait tool tip object.

Syntax

getWaitTip()

Return

Returns a wait tool tip object or null if there is no toolbar created via the viewer constructor.

See Also

viewer constructor 

Example



    //get wait tool tip
    var waitToolTip = viewer.getWaitTip();

    //show tooltip
    waitToolTip.show( {label: "Please wait....", image: true} );

    //hide tooltip
    waitToolTip.hide();    

Viewer Util




Sample 2

Interaction with Database: your web server stores the data in a hidden <textarea> tag, and the control grabs the data and generates the report.


<!DOCTYPE html>
<html>
<head>
    <title>rReport Sample 2</title>
    

    <script type="text/javascript" src="lib/rreport.min.js"></script>


    <script type="text/javascript">

       ///////////////////////////////////////////////////////
       function generate_report(data) {

           //---create viewer
           var options = { container: "report_viewer_holder", width: 0.5 * window.screen.width, height: 0.6 * window.screen.height, toolbar: true };
           var viewer = rreport.viewer(options);

           //---create document and attach it to viewer
           var document = rreport.document();
           viewer.setDocument(document);

           //---generate report content
           var INCH = document.getUnit();
   
           //draw page border
           document.drawPageBorder();

           //draw table
           var attr = {

               rows: ["row0", "row1", "row1", "row1", "row1"],

               map: {
                   "row0": [{ width: 3 * INCH, style: "cell0" }],
                   "row1": [{ width: INCH, style: "cell1" }, { width: INCH, style: "cell1" }, { width: INCH, style: "cell1" }],
                   "cell0": { "text-align": "center", "font-size": 24, "font-family": "helvetica", padding: 5 },
                   "cell1": { "text-align": "left", "font-size": 10, "font-family": "helvetica", padding: 2, border: true }
               },

               border: false
           };
        
           document.drawTable(2.75 * INCH, 2 * INCH, data, attr);

           //---preview current page (page 1; pageIndex = 0)
           viewer.preview();

       }

       ///////////////////////////////////////////////////////

       window.onload = function () {
           var v = document.getElementById("data_holder").value;
           var data = JSON.parse(v);
           generate_report(data);
       };

       ///////////////////////////////////////////////////////

    </script> 

</head>


<body>
    <div id="report_viewer_holder" style="margin-top:3em;"></div>

    <textarea id="data_holder" style="display: none">

        [
            ["Sports Shoes"],
            ["Product ID", "Product Name", "Price"],
            ["1001","Tennis Shoes","$199.95"],
            ["1001","Soccer Shoes","$149.95"],
            ["1001","Basketball Shoes","$179.95"]
        ]    

    </textarea>

</body>
</html>

Home Menu






[end of documentation]