|
ProEssentials WebForm interfaces may be used to serve up dynamically generated images and ActiveX binary states. The dynamic images have the option of supporting image maps. Because content is streamed directly to the browser, ProEssentials can be used within scalable WebFarm environments without dealing with complexities such as session states and dynamic file names.
Because the WebForm interfaces can serve ActiveX binary states, we recommend that you also review the standard ASP/ActiveX technical information.
ASP.NET development is very similar to standard ASP development. Generally, you will implement server side behavior in pairs of files much like standard ASP development. One file, either .HTM, .ASP or .ASPX will contain an image tag or ActiveX object tag with source attributes pointing to a secondary .ASPX page which will dynamically generate the respective content.
We often get asked why two webform pages are needed. The answer is that the first webform renders as viewable ascii html and the second webform renders as non-viewable binary data streamed directly to the browser. This architecture allows for scalability and efficient processing without the need for passing large amounts of viewstate information back and forth between the client and server. The first form usually contains a ProEssentials object with the RenderingType set to ImageMap or ActiveX. The second form then respectively has a ProEssentials object with the RenderingType set to BinaryImageStream or BinaryActiveXStream. The two forms work in unison to provide the complete ProEssentials implementation. Note the first form can include a ProEssentials object, or if a simple image is needed, can optionally contain an IMG tag pointing the second form with the ProEssentials object's RenderingType set to BinaryImageStream. Similarly, the first form can optionally contain the simple Class ID to our ActiveX and the second form would then contain a ProEssentials object with its RenderingType set to BinaryActiveXStream.
To see a similar pre-built example (in VB.NET) within the included ASP.NET_WebDemo project. See example 1, 2 and 3, with related files within the Walk-Through, Walk-Through2, and Walk-Through3 folders.
The ProEssentials WebForm interfaces have a few key properties and one event which will control server-side specific functionality. These are as follows:
|
RenderingType |
This property controls
how this instance of the control is rendered.
Possible settings are:
- ImageMap, the control is rendered as an image tag followed by
an ImageMap tag.
- ActiveX, the control is rendered as an ActiveX object tag.
- BinaryImageStream, render as binary data representing image data.
- BinaryActiveXStream, render as binary data representing an ActiveX
state.
- BinaryDataStream, used with client side ActiveX LoadFromUrl method to update chart without refreshing page.
|
|
RenderedImageType |
When RenderingType
is set to BinaryImageStream, this property controls the format of the
binary image data. Possible settings are PNG, and JPEG. |
|
ImageUrl |
When RenderingType
is set to ImageMap, this property must point to a URL identifying an .ASPX
page containing a ProEssentials control with its RenderingType property
set to BinaryImageStream.
When RenderingType is set to ActiveX, this property must point to a URL
identifying an .ASPX page containing a ProEssentials control with its
RenderingType property set to BinaryActiveXStream. |
|
CodebaseUrl |
When RenderingType is set to ActiveX, this property
may optionally be used to point to a CAB file containing the ActiveXs
and DLL to support automatic installation onto the client system. |
Also,
there is one Event and one EventArgs which is used to implement image
map support.
|
PeImageMap |
This event is only used when the RenderingType property
is set to ImageMap.
This event will be triggered (generally multiple occurrences) during the
image generation process when hot spots have been enabled via properties
found within the PeUserInterface.HotSpot namespace. |
|
ImageMapEventArgs |
This object is passed to the PeImageMap event to communicate
parameters with the developer.
Members include these properties:
- HotSpotType, defined as Gigasoft.ProEssentials.Enums.HotSpotType.
- Data1, its meaning is dependent upon HotSpotType.
- Data2, its meaning is dependent upon HotSpotType.
Members also include these write only properties:
- ToolTip, optionally set to assign tool tip text to image map area.
- Href, optionally set to assign a URL to image map area.
- Attributes, optionally set to assign attributes to map area such
as VBScript. |
Walk-Through:
The
following information demonstrates how to create your first ASP.NET /
ProEssentials implementation using the Visual Basic language. It discusses
using ASP.NET to serve up a dynamically generated PNG image. Other examples
are provided within the product/evaluation.
Also refer to the "ReadMe.htm", "AspReadMe.htm", and
"AspReadMe.htm" files installed onto your system with the eval/product
(accessible via Start menu).
1) Start Visual Studio.NET and create a new
project targeting an ASP.NET Web Application using VB as our language.
Accept the default name of [WebApplication1].
2) When the new project opens, you will be
presented the design view of "Webform1.aspx". Right click anywhere
inside the form, select [Properties], change the [Page
Layout] setting to FlowLayout.
This is generally recommended as only advanced browsers support GridLayout.
select [Ok]
button to close property page.
If you have already installed the ProEssentials
WebForm interfaces, skip to step 4.
| Customize
Toolbox... Dialog |
Adding
ProEssentials to Visual Studio.NET... |
|
3) Installing WebForm interfaces into Visual Studio.NET
VS2005 Instructions
- Under the Tools menu, select [Choose Toolbox Items...],
-
If not selected, left click the [.NET Framework Components] tab,
-
Left click the [Browse...] button and find the file "Gigasoft.ProEssentialsWeb.dll" found in the DotNet20 subdirectory where you installed ProEssentials. By default, this should be located at "C:\ProEssentials6\DotNet20\",
-
Select the file "Gigasoft.ProEssentialsWeb.dll" and close the [Open File] dialog,
-
The [Choose Toolbox Items] dialog should now show 6 highlighted controls: Pe3doWeb, PegoWeb, PepcoWeb, PepsoWeb, PesgoWeb, and PEBaseWeb.
-
Deselect the control PEBaseWeb as it should not be used for development,
-
Close the dialog and the 5 new ProEssentials components will be at the bottom of the toolbox.
VS2003 and Earlier Instructions
-
Double check that the [Web Forms] tab on the tool box is active (Pointer, Label, TextBox... should be visible),
-
Right click anywhere in the toolbox and select [Customize Toolbox...
or Add/Remove Items...],
-
Left click the [.NET Framework Components] tab,
-
Left click the [Browse...] button and find the file "Gigasoft.ProEssentialsWeb.dll" found in the DotNet subdirectory where you installed ProEssentials. By default, this should be located at "C:\ProEssentials6\DotNet\",
-
Select the file "Gigasoft.ProEssentialsWeb.dll" and close the [Open File] dialog,
-
The [Customize Toolbox] dialog should now show 6 highlighted controls: Pe3doWeb, PegoWeb, PepcoWeb, PepsoWeb, PesgoWeb, and PEBaseWeb.
-
Deselect the control PEBaseWeb as it should not be used for development,
-
Close the [Customize Toolbox] dialog and the 5 new ProEssentials components will be at the bottom of the toolbox.
|
| WebForm1.aspx... |
Adding
ProEssentials to a Form... |
|
4) Double click the [PegoWeb]
tool within the toolbox. This places an instance of the PegoWeb component
within "Webform1.aspx". The adjacent image shows what you see.
This
represents the default state of a ProEssentials Graph. The default state
has one subset with four data points. In the course of constructing your
own charts, you'll set the properties PeData.Subsets
and PeData.Points which define the quantity of data your chart
will hold. You'll then pass data via the PeData.Y(subset, point)
two dimensional property array. The following section shows example code
of passing data.
ProEssentials uses the terms Subsets and
Points but you can think of these as Rows and Columns. Passing data is
as simple as filling each Subset with Points worth of data.
|
|
|
Adjusting
design time settings... |
|
5) Double check that the RenderingType property within the Properties window shows
the default state of ImageMap.
6) Within the Properties window, change the
ImageUrl
property to "Webform2.aspx"
7) Within Visual Studio's main menu, select
[Project]
and then [Add Webform...] Accept the default name of "Webform2.aspx"
and left click the [Open] button.
8) Repeat the steps to change the page layout:
right click anywhere inside the form, select [Properties], change the [Page
Layout] setting to FlowLayout.
This is generally recommended as only advanced browsers support GridLayout.
Select [OK]
button to close property page. |
|
