NextAge Consulting Blog

5 Minute Demo Video Showing Dynamic Selection Browse and Intelligent lookup fields

Pete Halsted - NextAge — Sun, 27 May 2012 18:01:16 +0000

5 minute video showing a dynamic lookup using some of the techniques for dynamic browses from Glenn Rathke’s training class.

If you type in a valid branch code, it links it up and your done

If you type in a partial name instead then it does a like statement to find matching records, if it finds only 1 then it links it up and your done

If it finds multiple records it pops up a selection list for you to select from.

The select screen is generic and displays what ever records and values you need. Its a very handy way to have a lookup without doing a bunch of traditional browse screens

What the Video

Pete Halsted - NextAge

Pete Halsted has been developing custom business management applications for small to medium-sized companies, since 1987. His focus is on client/server, distributed and cloud based development utilizing WinDev, WebDev, and PostgreSQL. Pete is a Clarion Certified Developer with 25 years in the industry, has spoken at several Developers conferences, and provided Developer training and mentoring on a one on one basis. He has served companies both large and small as Project Manager, Lead Architect, Lead Developer and Chief Technology Officer. Pete tours the country full-time by motor home with his wife and dog, enjoying the freedom provided by cloud based technologies. Pete is available for Project Management, Custom Design, Development, Training, and Speaking assignments. For more information please visit www.thenextage.com or follow his blog at www.thenextage.com/wordpress

Uncle Pete Presenting at WxDevCon 2012

Pete Halsted - NextAge — Thu, 10 May 2012 17:45:44 +0000

I am very excited to be presenting at the WxDevCon in Nashville, TN – Novemeber 7-11,2012. This is a very unique format that include over the should developer session between now and the event, and the source code for an entire suite of applications that we will be building for the non profit sector over next six months. Read on for more information or if you are in a hurry and want to make sure you get a seat for this great event head on over to their website now.

This year WinDev-US is joining forces with seasoned developers from the WX community to present a unique training format! The training begins with virtual “look over the shoulder” online highlight sessions during the next six months which cumulate in Nashville in a live training event – In addition to the live training event, you would also have the opportunity to register and attend the training virtually!

By signing up early, you wiill have access to watch these early broadcasts of work sessions as the presenters work through the development of this project using WinDev, WebDev and WinDev Mobile. Watch snapshots of activities as the developers build the full-blown project from scratch. Regular progress reviews will be broadcasted on Sunday afternoons for registered attendees.

At the conclusion of the Nashville training, attendees will have access to all the streaming recording and source code for their own development efforts. Sign up early to have access to these virtual sessions from the beginning and get the most bang for your training buck.

Vision Statement
Our intention is to create a full real life solution using WinDev, WebDev and WinDev Mobile applications. In doing so, we will set standards and create generic components that are reusable by this project and other developers. Our target example application is one that will assist a non-profit entity manage their organizational informational processes.

We will provide the ability to “watch and learn” as we develop the system using all the features of WX17. This will provide a fantastic opportunity for developers to “catch up” if they are using an older version, or converting from another language and an EXCELLENT method to “fast track” their learning experience.

Mission and Guidelines
We will be using a hypothetical non-profit as our model, but the goal is to create an application that is suitable for all nonprofits.

The application will provide the following functions (Tentative):

General Organization Management
Contact Management System
Membership
Mailing/Email List
Templates
Schedule Maintenance
Both Internal Schedule and Items that will show on Event Calendar
Document Management
Website
Event Calendar
Donation Acceptance
Mobile Applications
Silent Auction App
QR codes for each item
Scan QR and place your bid

We held a Kick-Off online meeting on Sunday 5/6/2012. If you missed the live meeting, you can access the recording at www.wxlive.us.

Soft Design Consulting is offering a special rate on their excellent training for conference attendees.

Early Bird Registration Ends 8/31/2012 so hurry over and sign up.

Pete Halsted - NextAge

Quick Tip from Your Uncle Pete (HotKey on a Window)

Pete Halsted - NextAge — Thu, 26 Apr 2012 03:25:28 +0000

My application has a “hidden” hotkey that opens up a special User Activity screen anytime the user presses Control F12, while on the main menu. In clarion I did this by setting an alert key for the window, then in the Events.AlertKey embed point I tested to see if the Control F12 was pressed and opened the window. Like this:

IF Keycode() = CtrlF12
 Start(BrwUserActivity,25000)
END

So I do that in WinDev? Buttons can have shortcut keys so that’s a start. I created a button, and on the GUI tab, sat its shortcut key to Control F12. I placed my code on the button and it fired whenever the user pressed Control F12.

So then I hid the button, after all the goal was a “hidden” feature. And that is when I found out that the shortcut key is not active when the button is hidden. hmm…. That’s ok, it just so happens that you can place a control off of the window in WinDev and it doesn’t display and you don’t have to set it to not visible. Sure enough that worked, no button showing and my code fired on Control F12. Then I maximized the window……

And my button appeared.. ahhhrrrggg…..

After a brief tantrum I realized if I placed the button to the right of the window, and set the anchor to move to the right then the button would always remain off the window.

And tada!!!! I had it, a hidden hotkey feature.

So brief recap; place a button to the right of the window, set its anchor to move to the right, set the shortcut key to the key you want, and place your code on the button. That’s all there is to it.

Now, back to your regular schedule program….

Quick Tip from Your Uncle Pete (Database Field as Text)

Pete Halsted - NextAge — Mon, 23 Apr 2012 23:40:27 +0000

When I want to display a database field as text (not an entry field) I’ve been creating a static control and then to setting the value in the code by doing something similar to:

STC_Field = MyTableField

Then I remembered “If it seems hard, you are probably doing it wrong!” and decided that style system probably has a better way. Sure enough, there is even a default style for it!!! So now I just create an entry field linked to the database field and chose the “EDT_No_Bckgrd” style, no code, no fuss!

BTW, remember it will still be editable, so be sure to set the State to Read-only on the GUI tab of the control.

Don’t know if this is really a tip, or just shows how thick skulled I am.

Now, back to your regular schedule program….

Quick Tip from your Uncle Pete (TableSelectPlus)

Pete Halsted - NextAge — Sun, 22 Apr 2012 22:01:28 +0000

You can select a specific row of a table control via WX code as follows:

TableSelectPlus(TableControl,5)

The only problem is that if you have any code in the “Row Selection” process for the table control (for instance to enable/disable buttons based on values from the table), it does not get executed. The online documents do point this out in the notes section, however they don’t tell you how to get your code to execute. You might be tempted to just repeat the code from “row selection” after you do a TableSelectPlus, or (and let’s hope this is the case) you are a little better programmer and decide to refactor the code as a local procedure and call it from both places. Well there is an even easier option! The ExecuteProcess function forces an action to take place, so we change our code to:

TableSelectPlus(TableControl,5)
ExecuteProcess(TableControl,trtSelection)

Now the code selects row 5 of the table, then it forces a Row Selection event to be triggered forcing our code in “Row Selection” to be executed.

Now, back to your regular schedule program….

Quick Tip from your Uncle Pete (NumToString)

Pete Halsted - NextAge — Sat, 14 Apr 2012 15:30:47 +0000

Since WX treats screen controls as strings (including columns of a table)

Trace(NumToString(COL_HstInvHdrSysId,"012d"))

does not work. You don’t get an error, it just doesn’t do anything because it’s not a number. So if COL_HstInvHdrSysId contains 123456 the result will be 123456.

instead you have to do:

nHstInvHdrSysId is int = COL_HstInvHdrSysId
Trace(NumToString(nHstInvHdrSysId,"012d"))

Now you will get expected result of 000000123456

Now, back to your regular schedule program….

Spending a Day with Windows 8 and Visual Studio 11 Betas

Pete Halsted - NextAge — Sat, 14 Apr 2012 14:06:06 +0000

Photo by simply.jessi

I spent yesterday at .Net developers conference (or behind the walls of the evil empire). The workshop I attended was an introduction to developing business applications for Windows 8 Metro using Visual Studio 11. Read on for my take away from the workshop

Let me start by saying I am a 4/5 GL developer and have been for well over 20 years. Yesterday was not about converting me, or convincing me that Visual Studio and .NET is the way to salvation. I attended for two main reasons: first, the description of the workshop said Business Applications for Metro, I am not interested in the 100th demo of building cut the rope for Metro, that’s not what I do. Second they were going to use ASP.net Web API Services (or whatever MS is calling it this week) to expose the data to the client. OK, there may have been another reason, did I mention the free food and a Friday off of work?

So with all that being said, please don’t read this article and flame me for not telling everyone to rush out and become VS developers. This article is for WX developers to give them a few insights into what’s going on elsewhere and some Windows 8 bit and pieces.

So what did I learn from my day of hanging out with the guys from the evil empire….

Windows 8 is not as scary as it has been made out to be. I was under the impression that Metro is windows 8 but it’s not, it’s really just a touch friendly launcher on top of Windows 8. The desktop etc. are still there, unless your on a tablet/phone then Metro is your only interface, which makes sense.

VS 11 Beta is pretty impressive compared to what it was the last time I look at it, back in the days of VB (pre .Net) The environment is doing a lot of the intelligent things that we have in WX, like knowing your variables etc. It can do some of the nice things like rename your variable throughout the project, but the interface to get to that is a lot tougher.

The debugger in 11 seemed as good as WX, which based on the reaction of the crowd is a new development.

Its biggest strength is also its biggest issue. It really is a collection of several (read a butt load) of frameworks and class libraries. There is some really nice stuff in there, but even our speaker who was a MS MVP struggled to remember what library functions were in when they are 3 and 4 levels deep. By the way a big thanks to Shawn Weisfeld of Usergroup.tv for giving a great presentation and making sure a non .Net developer didn’t fall behind and get lost.

At the end of the day… I could code in VS C# if I had to. But I sure don’t want to. The foundations and classes do must of the plumbing for you but your still “coding” I am not sure what we do in WX but it’s not the same thing. We are organizing, directing or something, it’s a higher level function. Even though the foundation in .Net does most of the plumbing for you, your still down there banging your head on the pipes to get your work done.

I am sure .Net developers will be happy to point out that if I buy this widget or that I don’t have to be down there in the basement, but that brings up my next issue. The naturally had a few .Net magazines they were giving away, I flipped through them last night and every other page is an ad for this a control, or foundation add-on, or IDE for over the top of .Net that will make life wonderful. It starts feeling a little like the Emu ecosystem to me, I can raise Emu’s and sell them and make a great profit as long as I can convince people that they can make money, raising and selling Emu’s.

Pete Halsted - NextAge

Issues with Storing Window Position With Multiple Monitors

Pete Halsted - NextAge — Tue, 21 Feb 2012 22:07:02 +0000

Photo by SOYBEANTOWN

While working on the Document Viewer Component I ran into a few issues with the standard WinDev window position restore logic with dual monitors, so I created a couple global procedure to work around the issues.

WinDev will save the size and position of each window in your application. This allows end users to adjust the size and position and those setting be remembered, personalizing the application for their use. While working on the Document Viewer Component I ran into a few issues with this not working correctly with Dual Monitors. Even when I moved the document viewer to the second monitor, it would always reopen on the primary monitor. So I did a little investigation in how WinDev does their Window Restore logic and created some of my own to supplement it for dual monitors.

Since I am piggy backing my solution on top of WinDev’s existing logic, the first thing to do is enable their logic. On the Window Description, go to the GUI tab, and turn on “Store the size and position of the window”.

Next we need to look at what WinDev is storing in the registry, but where does WinDev store the information? Turns out it depends on whether you running the compiled EXE or using the run-time testing. Fortunately WinDev gives us a function to tell us the registry branch that the application is using.

ProjectInfo(piRegistry)

Using this funcition I discovered that in run-time mode the branch used is HKEY_CURRENT_USER\SOFTWARE\PC SOFT\WinDev\16.0\ModeTest\ApplicationName, and when running the compiled EXE it is HKEY_CURRENT_USER\SOFTWARE\Applications WinDev\ApplicationName. ApplicationName is the actual name of you application. So let’s take a look at what they are storing in the registry:

Ah, should have seen that one coming, the keys are in French, so after a quick trip over to google translate and I learned that:

MaximiseeOuverture = Maximized Opening
PositionOuverture = Opening Position
TailleOuverture = Opening Size

You might notice that there is a third value stored on Opening Position, and it seems to correspond to the monitor number, but in my testing it never seemed to work. I created a global procedure called RestoreWindowPosition and then called it from the Initialization arae of the Window Code. See Below:

//Open the image in the current display mode
IF gsCurrentFileName <> "" THEN
   InitImage(gsCurrentFileName)
END
RestoreWindowPosition() 
sStoredValue is string
sStoredValue = RegistryQueryValue(ProjectInfo(piRegistry)+ "\" + WinInput() + "\TBAR_Navigation","PositionOuverture")
IF sStoredValue <> "" THEN
   TBAR_Navigation..X = ExtractString(sStoredValue,1,",")
   TBAR_Navigation..Y = ExtractString(sStoredValue,2,",")
END

The first few lines is doing some work of the Document Viewer, the next line is the call to the global procedure. And the final lines are some extra code that I use to also position the Floating Toolbar at the correct location. I didn’t create a procedure for the floating toolbar, since I don’t use that many, but with the use of WinDev’s indirection ability, you could definitively create a procedure that would allow you to pass in the control name and reposition any control.

While working on this logic I tried to use the registry entries that WinDev was writing to but it seemed that WinDev was writing to them after any custom code that I could place. It was overwriting whatever I put in the values, so I had to add a few new entries to the Registry. On the closing code of the window we will call a global procedure named StoreWindowPosition:

StoreWindowPosition()

And the global procedure for Storing the Window Position:

PROCEDURE StoreWindowPosition()

RegistrySetValue(ProjectInfo(piRegistry)+ "\" + WinInput(),"WindowPosition",MyWindow..X + "," + MyWindow..Y)
RegistrySetValue(ProjectInfo(piRegistry)+ "\" + WinInput(),"Maximized",WinSize(WinInput()))

This code is storing two new entries in the same Registry location for the Window as WinDev. We are using the ProjectInfo(piRegistry) function so our code will work regardless of what branch of the Registry WinDev is currently using. WinInput() returns the name of the Window current running, which becomes part of the Registry branch. WindowPosition holds the X and Y coordinates of our window, we get those my using the X and Y properties of the Window and the special constant MyWindow which always refers to the active window. The X and Y coordinates are pixel locations and treat the entire space of all your monitors as one location. Depending on how your second monitor is configured the values will be slightly different. For instance in my configuration my second monitor is above my main monitor (not a lot of room to spread out in an RV!). When I place a Window on my second monitor the Y position becomes a negative number, representing the number of pixels above the main monitor. The second line is using the WinSize function to find out if the window is currently maximized. We will discuss this in more detail when we look at the code for Restoring the Window. Here’s a look at the Registry with the new entries added in.

Now for the code of the global procedure for Restoring the Window:

PROCEDURE RestoreWindowPosition()
StoredValue is string
nXPos is int
nYPos is int
x,y,x1,y1 is int

MyWindow..Visible = False

StoredValue = RegistryQueryValue(ProjectInfo(piRegistry)+ "\" + WinInput(), "WindowPosition")

IF StoredValue <> "" THEN
   nXPos = ExtractString(StoredValue,1,",")
   nYPos = ExtractString(StoredValue,2,",")
   IF RegistryQueryValue(ProjectInfo(piRegistry)+ "\" + WinInput(), "Maximized") = 2 THEN
      nXPos += 5
      nYPos += 5
      MyWindow..X = nXPos
      MyWindow..Y = nYPos
      x = ExtractString(WinScreenRectangle(MyWindow,screenAll),1,TAB)
      x1 = ExtractString(WinScreenRectangle(MyWindow,screenAll),3,TAB)
      y = ExtractString(WinScreenRectangle(MyWindow,screenAll),2,TAB)
      y1 = ExtractString(WinScreenRectangle(MyWindow,screenAll),4,TAB)
      MyWindow..X = x
      MyWindow..Y = y
      MyWindow..Width = Abs(x-x1)
      MyWindow..Height = Abs(y-y1)
      Maximize(MyWindow)
   ELSE
      MyWindow..X = nXPos
      MyWindow..Y = nYPos
   END
END
MyWindow..Visible = True

The first four lines are creating some local variables that we will be using. Next I hide the window, so the user isn’t distracted with screen flashing as we reposition the window.

Next we retrieve the values from WindowPosition from the Registry. WindowPosition is the entry that we added when the window was closed. Again we are using the ProjectInfo(piRegistry) function so our code will work regardless of what branch of the Registry WinDev is currently using. The IF statement skips all of our code if this is the first time the window has been ran and there are no entries in the Registry.

The next two lines extract the X and Y position from the string that we retrieved from the Registry. I have written about the ExtractString function before, its a very handy function that lets you extract entries from a delimited string based on their position.

Next we check to see if the window was maximized. I found the value stored by WinDev was not a 100% reliable so I added my own, which is what the second line of code in the Store Window Postion Function was doing. We need to know if the Window was maximized because we need to treat the restore a little different. First we add 5 to the X and Y positions, I don’t know why but if the window is Maximized the X and Y properties return a value that is 5 less than it should be. Then I set the X and Y properties with these new values. This repositions the window onto the correct monitor. The window is still not sized correctly, but once it is on the correct monitor, we use the WinScreenRectangle Function to get a tab delimited list of the coordinates of the monitor size. Notice we are using the ExtractString Function again, this time with the special constant Tab because our list is Tab delimited. Now we set the position of the window to the top left corner of the monitor and the height and width to use the entire monitor. Finally we use the Maximize function so the window will be treated as maximized, instead of just sized to fill the monitor. The reason I didn’t just use the Maximize function by itself is because it leaves an area of space to account for the windows task bar.

The ELSE statement handles repositioning the window if it was not maximized. We don’t need to adjust the size of the window here, because the WinDev code is doing it just fine. And then finally we make the window visible.

Summary

We now have a couple of global procedures that we can use with any application to correctly save and restore the window position even on a multiple monitor system. Your homework is to create a second group of functions using indirection so that you can pass in the name of any floating Toolbars and have them correctly relocated as well. As always if you have any questions please leave a comment below.

Pete Halsted - NextAge

Improving SEO with Dynamic Content Using Server Side Includes and PHP

Pete Halsted - NextAge — Mon, 20 Feb 2012 22:38:43 +0000

Photo by MoneyBlogNewz

In case you have been living under a rock, SEO (Search Engine Optimization) is a very important topic for any website. Having fresh content is a powerful method of improving SEO, such as adding a list of the most recent blob post to your home page. With a few simple changes to your Apache Config files, you can use Server Side Includes to run PHP code snippets inside your standard HTML files. Why would I want to do that? My main website (http://www.thenextage.com) is a simple HTML website that I maintain with Dreamweaver. Instead of converting the site to PHP or WebDev, I wanted to keep the site simple and easy to maintain. This article will explain how I am mixing PHP code into standard HTML files.

Feedburner has a great feature (BuzzBoost) that allows you to include a list of your blog post on the home page of your website, or anywhere else for that mater. I was using this to show the 5 most recent articles on my home page, as you can see in the screen shot below.

Feedburner makes this really simple, after setting a few configurations settings, they generate a JavaScript line for you to include on your site.

Very easy, so what’s the problem? Although the JavaScript method is quick and easy it is not “Search Engine Friendly”. The content generated by the JavaScript is not seen by the search engine crawlers, all they see is the script code from above which they completely ignore. So a JavaScript solution is out, if you want to improve your SEO!

I have another spot on my home page displaying upcoming technology events, in this article we are going to create a dynamic method to update that section, and keep it SEO friendly.

Unlike JavaScript, dynamic content generated by PHP is “Search Engine Friendly”, since what the browser and the crawlers see is the actual content generated not the PHP code. Changing the whole site to PHP would be over kill for this website, I want to keep this site in HTML for simplicity and maintainability sake, so including PHP code in my HTML files is the solution I want.

Before we get started a little technical information: my webserver is a virtual server hosted at rackspace with Centos Linux, Apache, PHP, and mySQL. Because I own the virtual server I have access to the Apache config files, etc. What follows is how I configured my system, if you don’t have access to the Config files you can accomplish this using .htaccess files. I am sure this can also be done on IIS but you will have to do some Google research to find the specifics.

We are going to use Server Side Includes (SSI). SSI is a simple technology that allows you to include external files inside another file. Here’s an example include statement:

However by default Apache will not process SSI, the statement will be treated as a comment and simply ignored. We have to change the Apache config file (or edit .htaccess file if you don’t have access to the config file). We need to add the “Options Includes” directive. This tell Apache that we are going to be using SSI, so it should look for them and process them. Below is the “” section of my config file. As you can see there are several different values available for Options so I just added Includes to the end.

    Options Indexes FollowSymLinks Includes
    AllowOverride All
    Order allow,deny
    Allow from all

At this point we have SSI working, but if we attempted to include a PHP file, the PHP code would just show on the website. We need to add a couple more lines to the config file to let Apache know that it should process the files with PHP. If you do some Google searching you will find several articles telling you how to change your config file so that all HTML files get processed via PHP, or to rename all of your files with a PHP extension. Both of these methods will cause every requested page of your website to be processed via PHP, which will add extra burden to your web server. If you have a low volume site that might not be an issue, but its always best to learn to do it right the first time.

So we add two more lines to the Apache config file, as below:

Addhandler applications.x-httpd-php .html .php
XBitHack on

The AddHandler line tell Apache that we want to process the .html files via PHP. XBitHack tells Apache that we only want HTML files that have the Execute attribute set, to be processed via PHP. So now our normal HTML files will works as before, but if we set the Execute attribute on the file, then it will be processed via PHP. Since our index.html file is where we are going to add our dynamic content we turn on the Execute attribute with the following command:

chmod +x index.html

Now we write a simple PHP script to create our content. I keep the a simple table of the events in a mysql database on the server. All I do is maintain the table, and the PHP script handles show the next three upcoming events. Here’s the PHP script:

localhost", "username", 'password');
$db_found = mysql_select_db("nextageevents", $db_handle);
if ($db_found) {
    $SQL = "SELECT * FROM events where enddate >= sysdate() order by startdate limit 3";
    $result = mysql_query($SQL);
    print "

“; print ”

” . $db_field['datetext'] . “

” . $db_field['description'] . ”
” . $db_field['location'] . ”

“; } print ”

“; print ”

";
    mysql_close($db_handle);
}
else {
   mysql_close($db_handle);
}
?>

The first line connects to the MySQL server. You will have to change the username and password based on your setup of course. Next we connect to the specific database that has the events table. The we execute a SQL statement to get the next 3 upcoming events from the table. The print lines are the lines that are actually outputing the content. I am using CSS classes to format the content as I need via my site’s standard CSS file. And finally we close the connection to the database. We will save this PHP script as “events.php”

All that’s left to do is use the SSI syntax to include our new PHP script in the appropriate spot of our index.html page using the following line:

And here is the screen shot of the results of our new home page:

Summary

With a few quick changes to our Apache config files, a simple PHP script and a MySQL database we have added some dynamic content to our home page, that will boost our SEO. There’s not maintenance of the HTML files, all we have to do is add records to the events table for any event we want include on the list. Now I am off to do the same thing for the Blog Post section and get rid of the FeedBurner JavaScript version that is not giving me any SEO boost.

Pete Halsted - NextAge

A Document Viewer Component using Native WinDev Functions

Pete Halsted - NextAge — Wed, 15 Feb 2012 21:53:00 +0000

Photo by PopCultureGeek.com

Early in my career I created a custom document storage solution as part of several of my applications. This led to the Clarion Imaging Templates and later the Imageman Templates, both using third party OCX’s. Recently one of those customers wanted some enhancements to their application, and I decided I would rather spend a couple of days converting the application into WinDev, than adding features in C6 that are built into WinDev. My first step was to explore the possibilities of using WinDev native functions to create a document viewer instead of using a third party library. I was pleasantly surprised at how easy it was and how much functionality was supported directly by WinDev. The resulting Document Viewer is very light weight and handles most of the normal requirements, its not as powerful as I would like, put it will do for this project until I create a Document Viewer using a third party .net library at some point in the future. At the end of the article you will find a download link for the Component and the source code.

Let’s establish the requirements for this project. It must be able to handle multiple page document files (TIF or PDF), it should be a stand-alone component that can be incorporated into any of my projects, to keep cost and complexity down it will only use Wlanguage native functions. This article will explain the Wlanguage features I used, how to create and use a component, using a floating toolbar, some specific issues with printing multiple page image files and my work around, as well as some issue I ran into with window position storing functions and how I resolved those.

WinDev ships with a TIF viewer demo and I used that as a starting point for the project, but there were several issues with it that kept if from fitting my needs. So let’s get started!

Viewer Window

We start with a window, that has a floating toolbar and an image control that is using all the space of the window:

We set the display mode for the image to Homothetic without increasing size and High Quality, position to Top Left, and anchoring to grow both in height and width. This assures that the document will always fit the screen when first opened, show in High Quality mode, and be positioned at the Top Left corner of the viewer window, and the image control will always fill the size of the window even when the window is resized.

We need to add a Floating Toolbar to the Window, we will go over adding the buttons as we go along. Use the Insert->Toolbar menu to create the toolbar. Set the position to Floating, and we also set the authorized positions to only floating as we do not want this to be a dockable toolbar.

Now that we have the general house keeping done let’s get to the coding! First we want to pass the name of the document to display to this procedure, remember we want this to be a stand-alone viewer. So we go to the code of our window and place the following line of code in the Global Declarations:

PROCEDURE WIN_TiffView(gsCurrentFileName is string = "C:\My Projects\DocumentViewer\Exe\LoremIpsum.tif")

Our window name is Win_TiffView (which is also our procedure name in WinDev), all we are doing is creating one parameter for our procedure, gsCurrentFilename, which is a string and has a default value of “C:\My Projects\DocumentViewer\Exe\LoremIpsum.tif”. Now when we open the window we can pass in the name of the document file we want to display. I gave it a default value as it made it easier for me when I was testing the procedure.

Next we have the following code in the Initialization section of the Window:

IF gsCurrentFileName <> "" THEN
   InitImage(gsCurrentFileName)
END

RestoreWindowPosition()

sStoredValue is string
sStoredValue = RegistryQueryValue(ProjectInfo(piRegistry)+ "\" + WinInput() + "\TBAR_Navigation","PositionOuverture")
IF sStoredValue <> "" THEN
   TBAR_Navigation..X = ExtractString(sStoredValue,1,",")
   TBAR_Navigation..Y = ExtractString(sStoredValue,2,",")
END

The first if statement is making sure that we did have a file name passed and if we do it calls our InitImage Local procedure. The rest of the code deals with some issues I ran into with the standard WinDev window position restore logic. We will tackle the window restore code at the end of the article. So for now lets look at the InitImage local procedure:

PROCEDURE InitImage(DocumentFileName is string)
gsCurrentFileName = DocumentFileName
IF gsCurrentFileName <> "" THEN
   IMG_View = gsCurrentFileName
   InitTittleBarandPageNumber()
   TBAR_Navigation..Visible = True
   IMG_View..Zoom = zoomAdaptSize
END

gsCurrentFileName is our parameter that we passed in, which also makes it a global variable, so why are we setting it to the DocumentFileName that was passed into the InitImage procedure? As we will see later we want to be able to change the document file that is being displayed without closing and reopening the window, so we will be calling the InitImage procedure from elsewhere to change the document name. This line of code makes sure that we get the correct image name in our global variable.

The IF statement is just my typical belt and suspenders way of coding. The next line sets the image control to the document file passed, this is how the image control knows which file to display. Next we call another local procedure InitTittleBarandPageNumber which is used to do some house keeping on the toolbar and the window tittle bar, we will look at that code in more detail in shortly. The next line makes sure that the toolbar is visible.

So does the final line do? Its sets the zoom level of the image. When I started this project, I used the properties of the image, and the window to figure out the correct ratio’s and did all the math to figure out what width and height to set the image control so that it would fit the window. Then I remembered what has become the Mantra of our Skype WinDev group “If it seems hard, you are probably doing it wrong!” and sure enough after some investigation in the help files, I found that WinDev has some special constants for the zoom property to make it fit the screen, fit width or fit height. So all I have to do is set the Zoom to “ZoomAdaptSize” and the document will be resized to fit the current size of the image control.

So let’s take a look at the code in the InitTittleBarandPageNumber local procedure:

PROCEDURE InitTittleBarandPageNumber()

IF gsCurrentFileName = "" THEN
   MyWindow..Caption = "Document Viewer"
   RETURN
END

//Display the page number and the total number of pages found in the image file
MyWindow..Caption = "Document Viewer - " + gsCurrentFileName + ": "+ StringBuild("%1/%2 pages",IMG_View..PageNumber, IMG_View..NumberPage)

BTN_PGDN..State = Grayed
BTN_PGUP..State = Grayed
IF IMG_View..PageNumber > 1 THEN
   BTN_PGDN..State = Active
END
IF IMG_View..PageNumber < IMG_View..NumberPage THEN
   BTN_PGUP..State = Active
END
EDT_PageNumber = IMG_View..PageNumber

The first IF statement checks that we have a filename and if we do not then it sets the tittle bar of the Window to “Document Viewer” and exits the procedure. If we do have a document name, then the next line changes the tittle bar to show the document name and which page is being displayed, and the total number of pages in the document. The “PageNumber” property of the image control contains the current page being displayed and the “NumberPage” property contains the total number of pages of the image. Not the best naming convention and I predict that like me you will probably mix that up a few times before it sticks. The StringBuild function is a very handy string function of WinDev that makes it easy to build strings containing several variables, and I strongly suggest you learn more about it via the help files.

Next we disable both the Page Up and Page Down buttons and then reenable them based on what page of the document we are currently displaying and how many pages are in the document. And then finally we update the edit control with the current page number displayed.

Toolbar

All that’s left for our viewer window is to add some buttons to our toolbar and place some code on them. Adding controls to the toolbar is like adding them to a window, except the controls automatically position themselves, it takes a little getting use to but once you use it for a few minutes, it makes sense. If you struggle with it, leave a comment and I will be glad to try to help you over the hurtle.

So what features are we going to have on the toolbar? Printing, Page Up, Page Down, displaying the current page and allowing the user to jump to any page, zoom in, zoom out, fit to screen, fit to width, fit to height, and close the viewer window. In an ideal world I would also like to include rotate left and right functions. Unfortunately, although version 16 has added Rotate functions for images, they don’t seem to work reliably with multiple page image files. There is also a demo app that uses the Windows API to rotate an image file, but again this does not seem to work reliably with multiple page images. This is one of the main reason that I will likely have to recreate this viewer at some point in the future using a third-party .net library.

Let’s skip the printing button for now and return to it later. So lets take a look at the Page Up and Down buttons.

The Page Up Code

IF IMG_View..PageNumber < IMG_View..NumberPage THEN
   IMG_View..PageNumber ++
   InitTittleBarandPageNumber()
END

The Page Down Code

IF IMG_View..PageNumber > 1 THEN
   IMG_View..PageNumber --
   InitTittleBarandPageNumber()
END

The code behind these buttons is very similar. The IF statement makes sure that we don’t go lower than page 1 or higher than the total number of pages in the document. The ++ and — are short hand syntax used in WinDev to subtract 1 or add 1 to the variable. It is the same as the statement: Variable = Varible + 1. The “PageNumber” property as you remember tells use the current page displayed, by changing this property we change the page being displayed. We also make a call to the InitTittleBarandPageNumber local procedure to do the housekeeping on the Window Tittle bar and toolbar controls.

By using an edit control to display the current page number, not only can we display the page number, but we can also allow the user to type in a page number and jump to that page. To accomplish that we place the following code for the edit control

IF EDT_PageNumber > 0 AND EDT_PageNumber InitTittleBarandPageNumber()
END

Again the IF statement makes sure that the user does not enter an invalid page number. As long as they have entered a valid page number, we change the PageNumber property to the value entered and call the InitTittleBarandPageNumber local procedure to do the housekeeping.

The Zooming code is all very simple code, consisting of one line each.

Zoom In Code

IMG_View..Zoom = IMG_View..Zoom * 1.5

Zoom Out Code

IMG_View..Zoom = IMG_View..Zoom / 1.5

Fit to Screen Code

IMG_View..Zoom = zoomAdaptSize

Fit to Width Code

IMG_View..Zoom = zoomAdaptWidth

Fit to Height Code

IMG_View..Zoom = zoomAdaptHeight

All of these use the “Zoom” property. The Zoom In and Out function simple increase or decrease the zoom by a factor of 50% and all three of the Fit buttons use the special WinDev constants that we already discussed to display the image as desired. Again I can not emphasize enough how incredible these special constants are! The code to do all the math and figure out the ratio’s is at least 20 lines of code and takes a while to work out, trust me I did it before reading the help files and finding these nifty shortcuts!!

And finally the close button, calls one line of code to close the viewer window.

Close()

Printing

So let’s discuss the Print Function. The example application that comes with WinDev creates a JPG file for each page of the document and then prints them directly. Regardless of the format chosen (JPG, BMP, etc) the quality of the document is reduced which would not work for my needs. So instead of using direct printing I am going to use a report. WinDev has the ability to use a PDF image as the background image of the report and chose which page to print, so we can use that ability to print our image. This still left me with a few issues. First my documents are stored in TIF format not PDF, and WinDev does not support using a multiple page TIF file as the background for a report, regardless of the pagenumber property it always prints page 1.

The other issue I ran into is that WinDev really intended for the multiple page PDF to be used as a report background when printing forms with the data overlaid. This means that they intended for you to set the PDF at design time not runtime, I got a few odd results because of this, so i got around this by creating a blank 2 page PDF file and using this as the background of the report.

So lets look at the code behind our print button first then we will move on to the Report procedure itself.

ImageInfo, Format are strings

ImageInfo = BitmapInfo(gsCurrentFileName)
Format = ExtractString(ImageInfo, 1)

IF Format = "TIF" THEN
   fDelete("printtif.pdf")
   IF NOT ExeRun("""" + fCurrentDir() +["\"]+ "Tiff2PDF.exe"" -o printtif.pdf -p A4 """ + gsCurrentFileName + """",exeIconize,exeWait) THEN
      Error(ErrorInfo())
   END
   iPreview(iPage,"Document Print")
   iPrintReport(RPT_PrintImage,fCurrentDir() +["\"]+ "printtif.pdf",IMG_View..NumberPage)
   fDelete("printtif.pdf")
ELSE
   iPreview(iPage,"Document Print")
   iPrintReport(RPT_PrintImage,gsCurrentFileName,IMG_View..NumberPage)
END

The BitmapInfo function returns a tab delimited string containing several pieces of information about an image file. The first piece of information is the Format of the Image. We use the ExtractString function to return the value in position 1 of the delimited string. ExtractString is another one of those handy WinDev functions that I strongly encorage you to read up on, it allows you to pull a value from a delimited string from any position in the list. The character used to delimited the string can be set (i.e. Tab,Comma,Semi-Colon,etc).

The IF statement test if the format of our document is TIF, if it is then we first delete the file “printtif.pdf” from the disk. Again this is my Belt and Suspenders style of coding, I just want to make sure the image has been deleted so it won’t give us any trouble in the next statement.

The next statement is calling a command line utility to convert a TIF image into a PDF image and naming the converted file “printtif.pdf”. EXERUN calls an external EXE and returns an error code if the command could not be ran. The fCurrentDir() function returns the current path of the application, which unless it has been changed elsewhere is where the .EXE is located. The rest is just building the string for the actual call to the command line utility. exeIconize and exeWait, tell WinDev that we would like the command to not open as a window, it will just be an icon on the taskbar, and that we want to halt execution of the application until the command line function finishes.

Next we setup the report to be displayed in the print preview and call our Report procedure with the name of the file and the number of pages in the document. In this case we pass in the “printtif.pdf” file name that we just created via the utility. We pass the total number of pages, because WinDev does not expose the “NumberPage” property for the background image of the report, so we get it from the property of the image control and pass it to the report. And then finally we delete the “printtif.pdf” file yet again, what can I say Belt and Suspenders has never failed me!

If our document is already in PDF format we can skip all the extra steps and just setup the report preview and call our Report procedure with the name of the document file and the number of pages.

Print Document Procedure

For our report procedure we create a report with no margins and just a body block. We set the background of the Report to the blank PDF mentioned earlier, and set it to use page 1.

In the opening code of the Report we redefine the procedure to accept the two parameters that we are going to pass (the Document File Name and Number of Pages), we also change the background image to the document file passed. You should notice that although we set the background image on the Report properties, the run-time property is actually associated with the Body block.

PROCEDURE RPT_PrintImage(ThisReportImage is string,gnPages is int)
RPT_PrintImage.BODY..Image = ThisReportImage

At this point our report would run and print our first page. In order to print the remaining pages of our document we add the following code to the Closing section of the Report

IF gnPages > 1 THEN
   nCount is int
   HourGlass(True)
   FOR nCount = 2 TO gnPages
      RPT_PrintImage..PageNumber = nCount
      iPrintBlock(BODY)
   END
   HourGlass(False)
END

The IF statement makes sure that we have multiple pages. If we do have multiple pages, we set the cursor to an hourglass, and loop from 2 to the total number of pages, changing the “PageNumber” property and reprinting the body block. Once completed we return the cursor to its normal state.

Global Procedure to Manage the Viewer Window

We now have both our viewer window and report and we are almost finished. Since we want to have the ability for the viewer window to stay open as we call it with different document files, we are going to create a global procedure to manage the call to the viewer window.

PROCEDURE DisplayDocument(DocumentFileName is string)

IF WinStatus(WIN_TiffView) = NotFound
   OpenSister(WIN_TiffView,DocumentFileName)
ELSE
   WIN_TiffView.InitImage(DocumentFileName)
END

This procedure accepts the document file name as a parameter. The IF statement checks to see if our Window is already open. If the window is not open it is opened using the OpenSister Function, passing the document file name as a parameter. The OpenSister function opens a non-modal Window that can be interacted with separately from the current window. This allows us to have our document viewer open on a second monitor and display the related document as we scroll through a list of documents displayed in our main window on the first monitor. If the Window is already open we call the InitImage local procedure of the window to change the image displayed. By using the context WindowName.LocalProcedureName we can call the local procedure of a window from elsewhere in the code, we can also perform actions on the controls of another window using the WindowName.ControlName syntax. Once mastered this ability opens up a world of possibilities for a WinDev developer.

Technically in today’s world I should have created this as a class instead of a global procedure, but its a simple one line procedure call and let’s face it I am an old school guy that goes for the simple and obvious solution when available.

Storing and Restoring the Window Position

WinDev offers the functionality to store the window position and size and then restore it at run-time by simply selecting a few options on the windows properties. This allows your application to remember the position and size of a window if the end-user resizes or moves the window. This seems to work well, unless the end-user is using dual monitors. For a document storage and viewing application, dual monitors are very helpful and allow you to have the viewer open on one monitor while working with the data on the other. Using the standard WinDev functions, my viewer window was not remembering to open on the secondary monitor. After some experimenting I created my own functions for storing the windows position and restoring it. The code is included in the component and source code of this project, I will be writing a separate blog article in the next few days explaining the code . That article will be located on the blog at http://www.thenextage.com/wordpress/

Creating a Demo procedure and executeable

In order to demo and test the viewer I create a simple procedure with few buttons on it to view documents and close the viewer. Nothing special there and I won’t go over the code, although it is included in the project for your use. At this point you can create an executable for the project the same as you would any other project. Again I won’t go in to the steps of how to create an executable. So go ahead and create the executable and play around with the interface. Once your done come on back and we will create a component.

Creating a Component

So now we have our handy viewer procedure and report and we could simply copy this into every project we need to use it in. But, what happens when we decide to add a feature to our document viewer? We would have to modify the procedure in every project. To avoid this issue we will create a Component. This is very similar to a .DLL, except it allows us to include documentation and store our component in the SCM so that it will automatically be updated in all of our projects when it is changed.

WinDev allows you to create multiple compilation configurations for one project. To get started use the Workshop->External Component->Define a new component from this project.

After the splash screen, the next screen will ask you for the Name and the Description of the component.

The next screen wants to know if our component is only used by WinDev and the target operating system.

The next screen want’s to know which elements we need to include in the component. Since we do not need the Win_Demo window we will uncheck it.

Next you get an “It’s Done” window, followed by the first screen of the generate component wizard. Skip both screens, and you get another Elements to Include screen, but notice this time that the Win_Demo window is not included in the list.

The next screen prompts for accessible elements, meaning which procedures are allowed to be called by programs using this component. As you see we are only exposing the report, viewer window and our global procedure. Notice that you expose a set of global procedures at once, if we only want to expose a particular global procedure we could create it in a separate set of global procedures and only expose that set.

The next two windows are for multilingual features so we will skip them. The next allows us to set a version number and allows us to keep track of any backward compatible version number if needed. We will just take the defaults here as well. The next screen allows us to include owner information for the component.

The next screen prompts for an image to be used by the component when it is displayed in the component pane.

The next screen prompts for overview information to be displayed in the component pane.

The next screen lets you know that documentation for the component is about to be generated, once we skip this screen we see the documentation that was automatically generated and can edit it as needed. This documentation will be included with your component so you should enhance it as needed to make it as easy as possible for other developers to use your component.

The next screen allows you to create a help system for the component, we will skip that step. The next is for User Macro-Code and we will skip it as well. Next, we reach a screen that wants to know if we want to publish the component to the SCM. By doing this it allows other developers and ourselves to retrieve the component from the SCM to use in other projects and anytime the version stored in the SCM is updated, the version used by the project will also be updated.

The next screen is for backups and we will skip it, and then finally we reach the “It’s Done” window and can create the component.

Next, you will get a couple of screens about checking things in and out of the SCM. Answer the prompts appropriately and you have created the component and included it in your SCM to be used by other projects and developers.

Using the component in another project

Now that we have created our component and added it to the SCM, its time to use it in another project. So we open the project that we want to use it in. For example purposes I want to include the document viewer in a project that display’s a list of invoice records and allows the user to view the scanned version of the image if they wish.

After opening the project we have to include the component. Use the Workshop->External Component->Import a Component into the project->From SCM menu option. After answering the prompts about where your SCM is located you will be able to view a list of the components in the SCM. After choosing the DocumentViewer component, we see the documentation for the component. This documentation should look familiar to you, its the documentation we edited earlier when creating the component. You can view the documentation anytime via the project explorer, by right clicking on the component and choosing description.

Once completed we can see the component in the project explorer under external components as well as the accessible elements of the component. This list corresponds to the list that we chose when we created the component.

Now its just a mater of using the component in our project. In our table I simply place the following code in the Row Display for the Table:

ImageFileName is string

IF WinStatus(WIN_TiffView) <> NotFound THEN
   IF TABLE_WIN_Inquiry.COL_HstInvHdrSysId > 999999 THEN
      ImageFileName = NumToString(TABLE_WIN_Inquiry.COL_HstInvHdrSysId/1000, "016.3f")
   ELSE
      ImageFileName = NumToString(TABLE_WIN_Inquiry.COL_HstInvHdrSysId/1000, "012.3f")
   END
   DocumentViewer.DisplayDocument("C:\temp\" + ImageFileName)
END

This code will execute anytime a user selects a new record in the table. If the ImageViewer has not been opened then we don’t execute the code. This allows the user to only display images when they wish. The rest of the code is just some magic I use to create the file names based on the sysid of the records. And then last line is the actual call to our DocumentViwer global procedure to display the Image.

Now we add a button to the toolbar for the window to allow the user to toggle the viewer on or off. Using the following code:

IF WinStatus(WIN_TiffView) = NotFound THEN
   IF TABLE_WIN_Inquiry.COL_HstInvHdrSysId > 999999 THEN
      ImageFileName = NumToString(TABLE_WIN_Inquiry.COL_HstInvHdrSysId/1000, "016.3f")
   ELSE
      ImageFileName = NumToString(TABLE_WIN_Inquiry.COL_HstInvHdrSysId/1000, "012.3f")
   END
   DocumentViewer.DisplayDocument("C:\temp\" + ImageFileName)
ELSE
   Close(WIN_TiffView)
END

This code is very similar to the last code, except if the window is not open then we do the work to determine the file name and open the window. If the window is currently open this we close the window.

Summary

You now have a simple document viewer component that can be used in any project by simply including the component and making the appropriate calls. If you would like to download the component it is located at http://www.thenextage.com/downloads/DocumentViewerComponent.zip and if you want the entire project so you can tinker with the code its located at http://www.thenextage.com/downloads/documentviewerproject.zip. Just be sure to share any improvements you make with the rest of us.

There is also a webinar that I did for our Skype Windev group that can be viewed at http://www.wxlive.us