[Tutorial]Creating a Document Viewer in 9 Steps

Discussions about document viewing.
Post Reply
SamiKharma
Posts: 352
Joined: Tue Sep 27, 2011 11:47 am

[Tutorial]Creating a Document Viewer in 9 Steps

Post by SamiKharma » Mon Jun 25, 2012 2:24 pm

Hi All,

Ok, this is going to be a big one. In this tutorial, we shall show you how easy it is to use GdPicture to make your own Document Viewer.
We will start right from showing you how to download GdPicture, through starting your Visual Studio Application, all the way to adding the navigation buttons.

Nine Steps, here we go:

Step 1: Downloading and Installing GdPicture.NET on your computer.
You will need to go to our download page:
http://www.gdpicture.com/download.php
When there, click the download button, then click on (Download EXE file).
Once downloaded, Run it, and go through the easy to use installation wized.

Step 2: Requesting a Trial Key Through the LicenseManager.
GdPicture 9 has a new method of requesting Trial Keys or Registering Commercial Keys:
Upon installing GdPicture.NET, you will be prompted to the Run the LicenseManager.EXE tool. There you shall find two buttons:
a. Request a Trial Key - If you choose this one, you need to fill in your information, which will be used to create a Support Account for you at our Support Platform
http://support.gdpicture.com
b. Register a License - If you choose this one, you will need to fill in your commercial key which you have obtained upon purchasing a GdPicture.NET toolkit.

For more detailed information and illustrationgs, please refer to:
http://www.gdpicture.com/evaluate/sdk-evaluation.php

Step 3: Starting a New Visual Studio Project.
- Start Visual Studio
- Go to File -> New -> Project
For VB.NET:
Other Languages -> Visual Basic -> Windows: Windows Forms Application
VBProj.png
For C#:
Other Languages -> Visual C# -> Windows: Windows Forms Applications
C#Proj.png
- Name your application and select the directory you want it in.
- Press OK

Step 4: Adding Gdpicture.NET visual controls to the toolbox.
• Right-click into the Toolbox Items and select "Add/Remove Items" for Visual Studio 2003 or "Choose Items" for Visual Studio 2005 & later.
ToolBox1.png
• Select the .NET Framework Components tab
ToolBox2.png
• Click on the Brows... button
• Select the GdPicture.NET dll which can be found on C:\Program Files\GdPicture.NET %VersionNumber%\Redist\Framework X.X\GdPicture.NET.dll
ToolBox3.png
• Now you will be able to select a GdViewer Item from the Toolbox in order to draw it within your forms.

Do not forget to add a reference to GdPicture.NET.dll in your project. If you do not know how to, please refer to:
http://guides.gdpicture.com/v8/html/con ... e_NET.html

Step 5: Unlocking the control (with the LicenseManager class) in the form load event
Before GdPicture object of any kind is initialized, you need to call the Method RegisterKey of a LicenseManager object with your commercial or demo key. This is best done on the load of the form:
The code in your application should look something like this:
VB.NET

Code: Select all

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
       Dim oLicenseManager As New GdPicture.LicenseManager 
        oLicenseManager.RegisterKEY("MY_GDPICTURENET9_KEY") 
End Sub
C#

Code: Select all

 private void Form1_Load(System.Object eventSender, System.EventArgs eventArgs)
        {
            LicenseManager oLicenceManager = new LicenseManager(); 
            oLicenceManager.RegisterKEY("MY_GDPICTURENET9_KEY");
        } 
Please note that if you have commercial keys, you will need to register the toolkit key first, and then call the same function ResgisterKEY again and pass the plugin keys to it.
If you have an upgrade, you need to use two calls also, one with the old key, and the second with the upgrade key.
All is explained here:
http://guides.gdpicture.com/v8/html/con ... NET__.html

Step 6: Drawing a GdViewer on the Form
Drawing a GdViewer is extremely simple.
- Select GdViewer in the Toolbox
- Drag it and Drop it on the Form
- Position it and resize it as you wish
GdViewer.png
- In the Properties Menu, go to Name and type "myGdViewer".
NOTE: You do note have to rename it if you wish, you can use the default name, but we will use this name in this tutorial.

Step 7: Creating an Open Image Button with the code behind
- Same way you drew the GdViewer, draw a button on the form.
- In the Properties Menu, go to Text and type: "Open Image"
- Double click on the button, this will initialize a Button_Click event for you, in which you will call the Display Function of the GdViewer. Your code should look something like this:
VB.NET:

Code: Select all

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
   myGdViewer.DisplayFromFile("")
End Sub
C#:

Code: Select all

private void button1_Click(object sender, EventArgs e)
{
  myGdViewer.DisplayFromFile("");
}
OpenImageButton.png
Now, Run your program. Once you click on the Open Image Button, an Open Dialog will open. Select any image and it will be displayed in your Viewer. Let's carry on.

8- Adding Page Navigation Buttons (prev, next, first, last)
Same way we added the OpenImage Button. Now we shall add four buttons for page display in multipage files.
All you have to do is:
- Draw the Button
- Write the Text in the Properties Menu that corresponds to it.
- Double Clik on it
- Call the function in myGdViewer that does what you need
- Repeat four times

We will show you the code of the Previous Page, and give you the functions of the other Page Navigation buttons.
1. Previous Page:
VB.NET:

Code: Select all

    Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click
        myGdViewer.DisplayPreviousPage()
    End Sub
C#:

Code: Select all

private void button2_Click(object sender, EventArgs e)
{
   myGdViewer.DisplayPreviousPage();
}
2. Next Page:

Code: Select all

myGdViewer.DisplayNextPage()
3. First Page:

Code: Select all

myGdViewer.DisplayFirstPage()
4. Last Page:

Code: Select all

myGdViewer.DisplayLastPage()
Step 9: Closing the Document
- Also add another button
- in the Text property write "Close Document"
- Double Click on it
- in the Event call the function:

Code: Select all

myGdViewer.CloseDocument()
Here is the final look:
Final.png
Now this is overly simple. Many of our customers have achieved beautiful sophisticated looking Document Viewer applications using our GdViewer and GdPicture in general. Take your time, and explore all the features available to you before you set yourself on a specific design.

Hope this was not too long for you people.
Best of luck,
Sami

Gabriela
Posts: 423
Joined: Wed Nov 22, 2017 9:52 am

Re: [Tutorial]Creating a Document Viewer in 9 Steps

Post by Gabriela » Wed Jan 30, 2019 10:09 am

Hello,

Now you can find different demo samples shipped with the installation package now, please see them listed here:
http://guides.gdpicture.com/content/web ... rview.html
Kind regards,

Gabriela
GdPicture Team

Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest