Creating Flash Templates    8-3
Building a Flash Template
This section describes how to build a Flash template and includes the following topics:
Adding the Data Source
Creating the Layout
Data Binding
Adding the Data Source
To add the data source: 
1. 
Generate a sample data file from your report data model as follows: 
From the Data Model Editor, select the Get XML Output toolbar button. From the 
Report Viewer, select the number of rows to return and then click Run. From the 
Actions toolbar list, select Export XML and save the results as an XML file to a local
directory. 
This example is based on the following data:
<ROWSET>
<ROW>
<NAME>Neena Kochhar</NAME>
<FIRST_NAME>Neena</FIRST_NAME>
<LAST_NAME>Kochhar</LAST_NAME>
<SALARY>17000</SALARY>
<ANNUAL_SALARY>204000</ANNUAL_SALARY>
<FED_WITHHELD>57120</FED_WITHHELD>
<JOB_TITLE>Administration Vice President</JOB_TITLE>
<DEPARTMENT_NAME>Executive</DEPARTMENT_NAME>
<MANAGER>Steven King</MANAGER>
</ROW>
<ROW>
...
</ROWSET>
This data is generated from the following simple query-based report:
Convert pdf to website html - Convert PDF to html files in C#.net, ASP.NET MVC, WinForms, WPF application
How to Convert PDF to HTML Webpage with C# PDF Conversion SDK
converting pdf to html email; how to convert pdf into html code
Convert pdf to website html - VB.NET PDF Convert to HTML SDK: Convert PDF to html files in vb.net, ASP.NET MVC, WinForms, WPF application
PDF to HTML Webpage Converter SDK for VB.NET PDF to HTML Conversion
convert pdf to html5; convert pdf to html file
8-4    Oracle Fusion Middleware Report Designer's Guide for Oracle Business Intelligence Publisher
select
e.first_name || ' ' || e.last_name name,
e.first_name,
e.last_name,
e.salary,
e.salary*12 ANNUAL_SALARY,
e.salary*12*0.28 FED_WITHHELD,
j.job_title,
d.department_name,
m.first_name || ' ' || m.last_name manager
from employees e,
employees m,
departments d,
jobs j
where e.department_id = d.department_id
and j.job_id = e.job_id
and e.manager_id = m.employee_id
2. 
Open the Flex IDE and create a new Flex Project; select the "Basic" data access 
method, as shown in the following example.
In the next dialog, give the project a name as shown in the following example. The 
name you use here will be assigned to the template file name you are going to 
create.
C# HTML5 Viewer: Deployment on DotNetNuke Site
RasterEdge.XDoc.PDF.dll. RasterEdge.XDoc.PDF.HTML5Editor.dll. Set Website: Click Site->Settings, set website running port and .NET Framework Version.
change pdf to html; converter pdf to html
C# HTML5 Viewer: Deployment within SharePoint Site
PDF pages, VB.NET comment annotate PDF, VB.NET delete PDF pages, VB.NET convert PDF to SVG. RasterEdge.XDoc.PDF.HTML5Editor.dll. Now you can visit this website.
convert pdf to html5 open source; convert from pdf to html
Creating Flash Templates    8-5
Click Finish.
The IDE creates the Flex template definition file, which is an MXML file. An MXML 
file is an XML format. Following is a sample: 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute">
</mx:Application>
You can now update it manually or by using the visual builder.
3. 
Connect the XML you downloaded from your report data model:
To connect the data, use the XML data services that Flex supports and embed the 
sample data into the MXML file. 
The sample MXML file with the connected data is shown. See the following section 
for a description of the file components.
C# PDF: C# Code to Create Mobile PDF Viewer; C#.NET Mobile PDF
compatible with most mobile browsers; Convert mobile device package, activated C#.NET mobile PDF document viewer Start a Website project in Visual Studio 2005
best pdf to html converter online; convert pdf to html online for
C# Image: How to Integrate Web Document and Image Viewer
RasterEdgeImagingDeveloperGuide8.0.pdf: from this user manual, you can your existing one from where the website is ready Next, add the following HTML into your
convert pdf to html code for email; convert pdf to html open source
8-6    Oracle Fusion Middleware Report Designer's Guide for Oracle Business Intelligence Publisher
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
public var dataXML:XML = 
<ROWSET>
<ROW>
<NAME>Neena Kochhar</NAME>
<FIRST_NAME>Neena</FIRST_NAME>
<LAST_NAME>Kochhar</LAST_NAME>
<SALARY>17000</SALARY>
<ANNUAL_SALARY>204000</ANNUAL_SALARY>
<FED_WITHHELD>57120</FED_WITHHELD>
<JOB_TITLE>Administration Vice President</JOB_TITLE>
<DEPARTMENT_NAME>Executive</DEPARTMENT_NAME>
<MANAGER>Steven King</MANAGER>
</ROW>
<ROW>
...
</ROWSET>;
]]>
</mx:Script>
</mx:Application>
The XML portion should look familiar as the data you downloaded. The additional 
components to note are:
<mx:Script> — This denotes the start of the template scripting code. There is 
also a closing </mx:Script> statement.
[Bindable] — This denotes that the following variable is bindable to a layout 
component.
public var dataXML:XML — This is the data variable declaration:
public — The value of the variable is available to the whole template.
var — Declares there is a variable in the report.
dataXML — The name of the variable. Note this is a compulsory name. You
must use this name to use the template with BI Publisher.
:XML — Declares that the variable is an XML type.
; — Notice the semicolon after the end of the XML data you provided.
At runtime the BI Publisher server will generate the runtime data from the report 
and inject it into the Flex template replacing the sample data held within the 
dataXML variable. This feature allows the Flex report to be distributed to users 
without needing to connect to the server.
VB.NET PDF Library SDK to view, edit, convert, process PDF file
Able to render and convert PDF document to/from supported offers robust APIs for editing PDF document hyperlink provide quick access to the website or other
convert pdf into webpage; convert pdf to html code c#
VB.NET PDF Convert to Images SDK: Convert PDF to png, gif images
Our website offers PDF to Raster Images Conversion Control developers are able to load target PDF document from local file or stream and convert it into
convert pdf to web; how to change pdf to html
Creating Flash Templates    8-7
Creating the Layout
The Flex IDE creates a default canvas for you to drop objects onto. You can modify the 
canvas as required to suit your report.
Important: If you intend to embed the Flash output in a PDF document,
you must set the Width and Height of the template in the Size region of
the Layout properties. Even if you wish to accept the default size, you 
must explicitly enter values in these fields.
Create the layout by adding report objects to the layout palette. This example uses the 
Flex Design tab to add the objects to the layout. Click the Design tab to see the 
available objects in the Component Navigator pane.
The following figure shows an example of the available objects in the Component 
Navigator pane:
These objects can be dragged and dropped to the design palette.
1. 
Start by dragging a Panel object from under the Layout node to the design palette. 
Notice as you drag the panel around the edge of the palette, the guidelines are 
displayed in blue. Use these guides to aid you in aligning objects.
2. 
Drop the panel onto the top left hand corner of the palette.
C# Image: Tutorial for Document Viewing & Displaying in ASP.NET
Following are detailed steps for website configuration Controls to Viewer. Add two HTML buttons, btnFitToWidth & profession imaging controls, PDF document, tiff
convert pdf into html email; converting pdf to html format
VB.NET Word: How to Create Word Online Web Viewer in VB.NET
NET project reference; Copy package folder "RasterEdge_Imaging_Files" to your created VB.NET website Application; Add reference
convert pdf to webpage; converting pdf to html code
8-8    Oracle Fusion Middleware Report Designer's Guide for Oracle Business Intelligence Publisher
3. 
Now drag the bottom right edge of the panel across to the right hand side of the 
palette.
4. 
Then drag it down to about half the height of the palette. Alternatively, use the 
property palette on the right hand side to set the size of the panel.
5. 
Now select a Datagrid object. This is the object to render the data in a tabular 
format. Drop it onto the panel you created in Step 1. The Datagrid is now a child of 
the panel; you can resize it as needed. The end result is shown in the following 
figure:
By default three columns are generated. In the next section, Binding the Layout 
code.
Adding a Chart
If you have purchased the charting option you can add charts to your layout.
1. 
First make some room for the chart in your layout. Highlight the Datagrid object 
and pull the top edge down to about half the height of the hosting panel.
2. 
For this example, select and drag a Column Chart from the design palette and drop 
it onto the hosting panel. Use the guidelines to align it.
3. 
Once you drop it, notice that the default size overlaps the Datagrid and that the 
VB.NET Word: VB Code to Create Word Mobile Viewer with .NET Doc
Directly convert your Android, iOS or Windows mobile device prorgam, please link to see: PDF Document Mobile Begin a website project with Visual Basic language
convert pdf to web page; how to convert pdf to html email
C# TIFF: C#.NET Mobile TIFF Viewer, TIFF Reader for Mobile
most mobile browsers like iOS and Android; Convert your mobile Viewer in C#.NET. As creating PDF and Word Create a website project in Visual Studio 2005 and name
convert pdf to html link; adding pdf to html
Creating Flash Templates    8-9
chart legend is in the top left-hand corner. Resize the chart and move the legend to 
the right to look similar to the following figure:
This is a sample chart. You will bind it to the data in the next section.
Binding the Layout Objects to the Data Source
Now that the layout is complete, bind the layout objects to the data source. Flex offers 
some help through the property palette of the objects to define the binding, but not 
enough to complete the task. Therefore you must update the MXML directly using the 
Source editor.
Binding the DataGrid
To bind the DataGrid:
1. 
Start by highlighting the DataGrid in the design palette, and then click the Source 
tab to display the MXML source. You will see that the first line of the DataGrid code
has been highlighted for you. This is a useful feature if you have built complex Flex 
templates and need to locate the code easily.
The DataGrid code is as follows:
<mx:DataGrid x="10" y="160" width="476" height="152">
<mx:columns>
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
8-10    Oracle Fusion Middleware Report Designer's Guide for Oracle Business Intelligence Publisher
Notice that the code defines the relative x,y position of the grid within its parent 
container and its width and height. The next element defines the columns with 
attributes for the header label and the data fields.
The goal is to achieve a table that looks like the following figure:
2. 
Make the DataGrid aware of the data source by adding an attribute to the 
<mx:DataGrid> element as follows:
dataProvider="{dataXML.ROW}"
This attribute defines the data object to be used at runtime to populate the grid. 
Remember that in this example, the XML data variable was defined as "dataXML"; 
now use that definition followed by "ROW" (that is, dataXML.ROW). ROW is the 
repeating group in the data set. Note that the syntax requires the curly braces to let 
the Flex engine know it is a data source.
3. 
Bind the columns. In the basic structure provided, replace the values for 
dataField with the appropriate element name from your data source. Also 
replace headerText values with the desired column heading names. For example,
for the first column, replace 
<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
with
<mx:DataGridColumn headerText="Employee" dataField="NAME" />
This defines the first column header name as "Employee" and binds the column 
data to the "NAME" element in the XML data source. 
The completed DataGrid sample code follows:
Creating Flash Templates    8-11
<mx:DataGrid x="10" y="160" width="476" height="152" 
dataProvider="{dataXML.ROW}"> 
<mx:columns>
<mx:DataGridColumn headerText="Employee" dataField="NAME" />
<mx:DataGridColumn headerText="Title" dataField="JOB_TITLE"/>
<mx:DataGridColumn headerText="Monthly Salary" 
dataField="SALARY"/>
<mx:DataGridColumn headerText="Annual Salary" 
dataField="ANNUAL_SALARY"/>
</mx:columns>
</mx:DataGrid>
4. 
You can now preview the template with your sample data. Select Run, then Run 
EmployeeReport. This will open a new browser window and render the table with 
your sample data.
Binding the Chart
To bind the chart:
1. 
From the Design tab, highlight the chart. Next, switch back to the Source view to 
find the chart code:
<mx:ColumnChart x="10" y="10" id="columnchart1" width="476" 
height="142">
<mx:series>
<mx:ColumnSeries displayName="Series 1" yField=""/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{columnchart1}" x="383" y="10"/>
2. 
To bind the data source to the chart object, add the dataProvider attribute to the 
<mx:ColumnChart> element as follows:
dataProvider="{dataXML.ROW}"
3. 
Next add in the binding for the horizontal axis and the column series. Refer to the 
Flex help files for more details. 
To create a chart showing salary by employee, similar to the following example:
make the following updates to the code:
Add a <horizontalAxis> element to define the element from the data source
8-12    Oracle Fusion Middleware Report Designer's Guide for Oracle Business Intelligence Publisher
that will be used for the horizontal axis of the chart. Use the categoryField 
attribute to assign the data element value. In this example, the data element 
NAME is assigned.
Modify the <series> group to bind the SALARY value to each employee 
NAME to create a bar for each employee.
Following is the sample code:
<mx:ColumnChart x="10" y="10" id="columnchart1" width="476" 
height="142" dataProvider="{dataXML.ROW}"> 
<mx:horizontalAxis>
<mx:CategoryAxis  categoryField="NAME" />
</mx:horizontalAxis>
<mx:series >
<mx:ColumnSeries xField="NAME"  yField="SALARY" 
displayName="Salary"/>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{columnchart1}" x="383" y="10"/>
Note in the preceding sample, the <mx:horizontalAxis> element has been 
added and the categoryField attribute has the NAME data element assigned. 
This element is required to render the chart.
The <mx:series> element has been updated binding the SALARY value to each 
employee NAME to create a bar for each employee.
You do not need to update the legend code. Notice the id attribute of the  
<mx:ColumnChart>element matches the dataProvider attribute value of the 
<mx:Legend> element.
4. 
You can now run the template using your sample data. You should get an output 
showing the chart above the tabulated data as shown in the following figure:
Documents you may be interested
Documents you may be interested