Experience shows again and again that using prototyping in software development allows shaving hours, days or even months from release schedule.
From various types of concepts and prototypes UI prototypes are most difficult and if missed could kill any project down the road.

Setting proper UI expectations, creating reference materials for your project plan, getting earlier feedback from potential or existing customers – benefits are many.

How elements are placed on the screen? What themes/colors/styles are to be used? How screen is changed following workflow? How dialogs are organized?
Questions asked and answered earlier can become crucial for the project as early as getting a “GO” and as late as releasing version 1.0 and being forced to roll it back.

Do not underestimate power of the visualization!

Designing UI

There are plenty of tools around which give you some infrastructure to do UI prototypes.
To mention few:

• Microsoft Visio – among others there is a Wireframe Diagram, Storyboards, workflow diagrams
• FrameMaker
• PowerPoint
• Photoshop
• OmniGraffle for Mac or iPad
• WireframeSketcher plugin for Eclipse – basic wireframes with sequencing
• Balsamiq Mockups – cross platform, community supported device elements library
• Axure - web-oriented, interactive
• MockupScreens - slightly outdated
• Remember PVCS? Serena offers Serena Prototype Composer - activity flow and UI elements integration

Stick with what you have or Visio stencils

There could be many options, but I like to stick with what I am most familiar or have in my reach. So I choose Visio 2010 (part of MSDN).

By default however, Visio provides only with basic controls, toolbars, dialogs. What missing are actual stencils (collection of shapes) to be used to do UI design for the target platform.

Designing for Windows is different from designing for Android, iPhone or iPad and availability proper UI elements in our disposal is important.

No One is Left Behind

Internet is powerful thing and most of the time someone already went on the journey of helping others.
Problem is that it is difficult to find libraries for Visio. There is an option though – exporting from OMNIGRAFFLE in XML format for Visio.

Let’s list some:

• Y! Design Stencil- Enabled for Visio 2010 redesigned from Yahoo Stencil Kit
• Nice iPad styled stencils for OMNIGRAFFLE
• Long list of different libraries available in different formats which is useful and starting point

Day ago while waiting for delayed flight on United, I was doing some follow up on the discussion about my Theme for Gallery 3 and was asked if I could add support for Keyboard navigation.

In general, it is easy topic, especially when jQuery is supported for the web-site.

An objective is to allow visitor use keyboard to navigate. In my case it is applied to Gallery pagination enabling use of Left/Right/Up keys to move between photos or album pages.

While being simple in implementation, it adds a convenience for the end user enabling keyboard navigation versus mouse clicks.

So let’s add it…

First, we need some “anchors” on the page to find dynamically what our keys would do when pressed.

In case of my theme, I have paginator control allowing user navigate first/prev/next/last or go level up in the gallery structure (small arrow buttons/links), but it could be anything.

If we are to be W3C-friendly, then <link> tag in the header is more appropriate, but I am not going to use it in the example below. So let’s assume we have 5 links as following

<a title="First (Ctrl+Left)" id="g-navi-first" href="/first.html">First</a>
<a title="Prev (Left)" id="g-navi-prev" href="/prev.html">Prev</a>
<a title="Parent (Ctrl+Up)" id="g-navi-parent" href="/parent.html">Parent</a>
<a title="Next (Right)" id="g-navi-next" href="/next.html">Next</a>
<a title="Last (Ctrl+Right)" id="g-navi-last" href="/last.html">Last</a>

As you can see we have 5 different actions to take and we have selected key combinations we are going to use.
Code above by itself, would only work with mouse click.
What we need next is very small jQuery code to bring life into it and add desired keyboard sensitivity.
Please notice that it would override default arrow key based scroll support of the browser. So if you want to keep both then simply adjust code below to your liking.

There goes the code. Simply dump it into JS file and add reference in your page:

/**
*
* Copyright (c) 2010 Serguei Dosyukov, http://blog.dragonsoft.us
*
*/
$.fn.KbdNavigation = function() {
  $(this).bind("keydown", function(event) {
    var lnk = "";
    var lnk_first, lnk_prev, lnk_parent, lnk_next, lnk_last;
    lnk_first  = $("#g-navi-first").attr("href");
    lnk_prev   = $("#g-navi-prev").attr("href");
    lnk_parent = $("#g-navi-parent").attr("href");
    lnk_next   = $("#g-navi-next").attr("href");
    lnk_last   = $("#g-navi-last").attr("href");
   
    switch(event.keyCode) {
      case 0x25: // Ctr+Left/Left
        if(event.ctrlKey) { lnk = lnk_first; } else { lnk = lnk_prev; }
        break; 
      case 0x26: // Ctrl+Up
        if(event.ctrlKey) { lnk = lnk_parent; }
        break;
      case 0x27: // Ctrl+Right/Right
        if(event.ctrlKey) { lnk = lnk_last; } else { lnk = lnk_next; }
        break; 
    }
   
    if(lnk) {
      window.location = lnk;
      return true;
    }
   
    return true;
  });
}
$(document).ready( function() {
  $(document).KbdNavigation({});
});

Same time I do not like to give my photos to someone else to host, so I have my gallery.

It runs on Menalto’s Gallery 3 engine – nice, open source, PHP based with MySQL back-end.

Not my primary programming language, but allows me to host and enhance my blog, keep my gallery and small web-site.

Last night, while bringing some old photos over from my backup gallery (G3 is still under development and I do not want to recreate gallery if anything to happen, and it did – I killed the setup…), I noticed that import process start to fail. Several attempts to recover did not give much of the progress and I went digging error logs.

Some of it is expected since on initial start up, a number of Crystal assemblies and objects need to be created and this does take time.
I want to emphasize that discussion below is related to the first run of any reports. We have to actually restart/reset IIS to see problem again.

Note: There was a question about IIS’ Application Pools recycling which could cause similar effect. Make sure your application pool is set properly.

Setting up a playground

Let’s assume ASP.Net pages were already migrated to use .Net 3.x and look at what happen behind the scene.

Remember that after restart IIS starts from ground up. This means several things in respect to our page content:

• .Net assemblies need to be preloaded and validated if necessary.
  Since Crystal Reports 2008 comes as .Net 2.0-based core and we may already moved to .Net 3.x, CR2008 Engine and some additional files need to be loaded and validated aside from one which already used by any previously loaded pages.
• For each session engine would create a cached version of RPT file in temp folder.
• Some code would have to be brought to the client machine for Viewer to operate properly.
• Database connection established, data retrieved, processed, paged and sent to the client Viewer.

That about it, now we ready to work with reports. Please notice that after that initial load, any other reports would come up faster. We could even close the browser or use another browser (ex. go from IE to FF) and it would be still faster than the first time, so there is something important about the first step above…

Combing the sand

Let’s try to break the IIS initialization process to get more detailed view.

Since we already had some ASP.Net pages loaded before coming to CR related page, we could disregard .Net core initialization procedure. It is there on IIS side: used and ready.

Ok, next thing is CR engine related stuff. There is some 5Mb of files in crystalreportviewers12 folder to support CR Viewer in ASP.Net and we need to send some of them over the network. In addition to that there is Crystal Reports Engine assemblies which need to be loaded by IIS at the time of the first use. And this is our spot to dig.

If we try and trace what exactly going on we would notice that aside from IIS loading a few dozen assemblies, there is also process associated with trying connect to CRL.VERISIGN.NET.

What is it?

“Problem” is that assemblies are Authenticode signed and therefore need to be verified or it technical terms they need to be checked against Certificate Revocation List (CRL) by Publisher for Code Access Security (CAS).

Default behavior is that they need to be verified by the certificate authority. If certificate is not present on the same machine (I have my doubts that SAP doing anything about that, but I could be wrong), validation need to be done via central repository mentioned above, or if machine does not have network/internet access the .NET thread might timeout waiting to connect.

Yes, by performing strong name signing of assemblies or placing the CA certificate on the same machine issue would be avoided, but it seems not being a case.

Building the castle

Since assemblies are provided by SAP, we cannot remove digital signature and it is a hassle to keep certificates current by obtaining them from CA every time they expire. Let’s concentrate on the Publisher mentioned above and turn it off.

It is all-or-nothing solution since it would require turning off CRC for the entire IIS.

When working with regular .Net apps, it can be done on the app level (assuming we already have fix for .Net 2.0) by adding the following section in <Application>.exe.config

<configuration>
  <runtime>
    <generatePublisherEvidence enabled="false"/>
  </runtime>
</configuration>

This new element described in this MSDN article. Interesting note there (why not to turn it then by default? Oh, security concerns… UAC anyone?):

We recommend that services use the <generatePublisherEvidence> element to improve startup performance. Using this element can also help avoid delays that can cause a time-out and the cancellation of the service startup.

Since there is no such config file for our ASP.Net app (web.config would not work here, because it defines settings that are only AppDomain wide and we need process wide for aspnet_isapi.dll being the hosting environment for the runtime), we would have to turn code access security (CAS) publisher policy off for the entire IIS.
There are two options:

• Create a file called w3wp.exe.config (for IIS6, or aspnet_wp.exe.config for IIS5). This will affect all .NET based web applications on the system.
• Or to specify this in machine.config, but then this affects every .NET application on the machine and is not available for override in individual Apps.

Adding the summer cabin

There is one more step which could be taken to improve performance by preloading some of the core assemblies while site visitor is doing something else.
I wouldn’t go into much details here, since it is implementation/application environment specific, but just give a hint:

• some other place in application, create a background process which would create CR document object, load some not essential report file, retrieve some data and then disapear without the trace. This would allow Crystal Reports Engine being initialized in the background offsetting time needed for the actual CR related page load. Don’t force garbage collection though, this may cancel desired effect.

Results

In some situation I observed 50% to 70% drop in start-up time…
Have fun!

Google has changed how Google Docs are exposed. As result method discussed in this article is no longer applicable. Please explore other options (ex: Google Sites). Thank you.

There are plenty of presentations, documents, and spreadsheets we may want to share with the world.

We can use homegrown document handling solutions, use commercial 3rd party solutions or… utilize power provided by Google Docs.

When storing articles on Google Docs you are provided with the option to share them with some people only or with everyone. I like to have option to link my articles from anywhere but I also like to have not just plain page, but a page embedded into my web-site pages.

What it means is that instead of external page, I want to put it in my own box.

There was time when it wasn’t as easy because of the additional code Google was injecting into articles, but time changed and now it is fairly easy and strait forward.

Goals

• Embed Google Docs document into existing page
• PHP. This is not really a requirement per se, it is just code below is PHP.
• Retain copyright information

Solution

The following code snippet allows to get a desired result

// id parameter is used to pass Google Docs arcticle id
// Example: mydocview.php?id=nnnnnnnnnnnnnnnn
$id    = $_REQUEST['id'];
if ($id) {
  $started = "0";
  echo('<div class="googledocs" >Stored and managed via <a title="Learn more about Google Docs" href="http://docs.google.com" target="_blank">Google Docs &copy; -- Web word processing, presentations and spreadsheets.</a></div>');
  // Read document content, parse to normalize and output
  $file = fopen ("http://docs.google.com/View?id=" . $id, "r");
  while (!feof ($file)) {
    $line = fgets ($file, 4096);
    // Parse header info out
    if ($started == "0") {
      if (substr($line, 0, 5) == '<body') { $started = "1"; }
      else { continue; }
    }
    // Parse body content until document content block is detected
    if ($started == "1") {
      if (strstr($line, '<div id="doc-contents">')) { $started = "2"; }
      else { continue; }
    }
    // Output document content
    if ($started == "2") {
      // Stop processing, end of content reached
      if (strstr($line, '<div id="google-view-footer">')) { break; }
      // Normalize image links to keep link back to google docs
      $line = str_replace('src="File?id', 'src="http://docs.google.com/File?id', $line);
      // Normalize links to other articles
      $line = str_replace('href="View?docid=', 'href="/mydocview.php?id=', $line);
      $line = str_replace('href="View?id=', 'href="/mydocview.php?id=', $line);
      $line = str_replace('href="View?docID=', 'href="/mydocview.php?id=', $line);
      $line = str_replace('href="View?', 'href="/mydocview.php?', $line);
      // Output result
      echo($line);
    }
  }
  fclose($file);
}

Sample page:

<html>
<head></head>
<body>
<? // Include code above here
?>
</body>
</html>

I think this topic run into the ground, but it seems to come back again and again. I guess the reason for that is “default” state set for the environment…

After upgrade of operating system to Vista IIS 7 would be installed. This brings some “inconveniences” into usual development process. Aside from worrying about disabling UAC, few other things usually breaks.

One of them is that setup package for ASP.Net application created in Visual Studio starts to fail with the error that installer session closed improperly and process has to be restarted (or similar).

If we look into installer log (check here on how to enable debug mode) the following error could be found:

Action 11:18:53: WEBCA_SetTARGETSITE.
Action start 11:18:53: WEBCA_SetTARGETSITE.
MSI (c) (B4:A4) [11:18:53:657]: Note: 1: 2235 2: 3: ExtendedType 4: SELECT `Action`,`Type`,`Source`,`Target`, NULL, `ExtendedType` FROM `CustomAction` WHERE `Action` = ‘WEBCA_SetTARGETSITE’
MSI (c) (B4:A4) [11:18:53:661]: Creating MSIHANDLE (1) of type 790542 for thread 4260
MSI (c) (B4:4C) [11:18:53:662]: Invoking remote custom action. DLL: C:\Users\SDOSYU~1\AppData\Local\Temp\MSI2978.tmp, Entrypoint: SetTARGETSITE
MSI (c) (B4:F0) [11:18:53:666]: Cloaking enabled.
MSI (c) (B4:F0) [11:18:53:666]: Attempting to enable all disabled privileges before calling Install on Server
MSI (c) (B4!14) [11:18:53:726]: Creating MSIHANDLE (2) of type 790531 for thread 4116
INFO   : [01/02/2009 11:18:53:726] [SetTARGETSITE ]: Custom Action is starting…
INFO   : [01/02/2009 11:18:53:727] [SetTARGETSITE ]: CoInitializeEx – COM initialization Apartment Threaded…
ERROR  : [01/02/2009 11:18:53:729] [SetTARGETSITE ]: FAILED: -2147221164
ERROR  : [01/02/2009 11:18:53:730] [SetTARGETSITE ]: Custom Action failed with code: ’340′
INFO   : [01/02/2009 11:18:53:731] [SetTARGETSITE  ]: Custom Action completed with return code: ’340′

Very informational… Who would guess that it simply comes to support for IIS 6 API. In IIS 7 it called “IIS 6 Management compatability”.

Usually this module is not installed by default and we have to actually enable it.
Very simple and very quick solution is to go “Control Panel\Programs and Features\Turn Windows features on or off” and then click the check box.

There is one more problem which may be encountered on 64 bit machine – support for 32 bit assemblies is disabled by default. To reenable, change Application Pool Defaults for your IIS 7 installation:

There are plenty of 3rd party solutions on the market which would help you include some kind of charting support with your ASP pages and WinForms applications – ChartFX, ComponentArt’s Charting, Dundas Chart - these are just few from many available on the market today.

As it turned out, Microsoft has decided to add out-of-the-box support for Charting as well - <asp:chart runat=”server”/>.
Read about it here - New ASP.NET Charting Control: <asp:chart runat=”server”/> by Scott Guthrie – everything you need to know about the .Net 3.5 framework new addition.

For  additional information also visit Alex Gorev’s blog.

Note 1: Even though caption says it is ASP.Net solution, in the original you would find link to WinForms sample as well.
Note 2: Do not worry about Dundas copyright – “Microsoft acquired Dundas Data Visualization Intellectual Property in April 2007.”

With recent release of 2.3 version, I have updated my installation as well.

Few bug fixes may not worth mentioning, but noticeable change is in slide show plug-in. Starting this version slide show uses Cooliris’s PicLens. You can see a sample here.

Why would I want to mention it?

Aside from being nice piece of software, CoolIris was a place where Danny Thorpe was working for some time.

“Was” because Danny is back at Microsoft (see some notes in his blog above).

NOTE: This only applies to Internet Explorer 6 with XP SP2 and later.

Once in a while you would like to become a tyrant when it comes to what your site’s visitors can do with the content, file links in particular.

OK, not a tyrant per se, but you want to limit operations for some file types.

• Can user open a file from IE after download?
• Can user save a file from IE after download?

“Why would I want to do that?” – you may ask.

There is a small example for you:

Opening of CSV file in Excel and saving it after would actually adjust file structure since Excel treats some of the values differently which otherwise present in the CSV file. 0 (zero) may be converted and saved as an empty space, etc.

What can you do?

Remember, IE saves a temporary copy of the file in TEMP location and then open it from there. Your visitor may not be to comfortable looking for the file in some “strange” places. So, to avoid situation above you just have to be that “tyrant” and not allow opening a file without saving it first in proper place.

From this MSDN article:

To Hide “Open” button in “File Download” dialog place the following META tag into your page header:

<head>
<meta name="DownloadOptions" content="noopen" />
</head>

Similarly you can hide “Save” button

<head>
<meta name="DownloadOptions" content="nosave" />
</head>