27 September 2006

Snipperoo widget

The Snipperoo widget management system is in beta. It lets you turn any code snippet into a "widget". One or more widgets are then placed on a "panel". Snipperoo then provides a JavaScript "codeline" for you to copy into your site, blog, etc.

You can see an example Snipperoo widget - my Space Browse viewer - at the bottom of this blog post, using this codeline:
<script type='text/javascript' src='http://codelines.snipperoo.com/chriscant/snipperooney/codeline.js'></script>
Note that blogger will not let you place this codeline within a blog post - it has to be in the template. I have code the template so that the Snipperoo widget only shows when the specific blog post is shown, as follows:
<b:if cond='data:blog.url == "http://chriscant.phdcc.com/2006/09/snipperoo-widget.html"'>
</b:if>



To make a Snipperoo widget, register for their beta program. Make a new panel with dimensions 300x280. Make a new module. To make a Space Browse viewer widget, use this widget code:
<iframe src="http://www.spacebrowse.com/gadget/SpaceBrowseViewer.aspx?Caller=SN" frameborder="0" scrolling="no" style="border:0px;padding:0px;margin:0px;width:100%;height:240px;"> </iframe>
Click on the (+) icon to add it to your panel. Click on "show codeline" to get the JavaScript code to paste into your site.

The above widget code can be customised as described in the Space Browse viewer mashup guide.

25 September 2006

Netvibes IFRAME mini module

This post describes how to put together a Netvibes.com Mini Module that shows an existing web page within an IFRAME. My Space Browse viewer example is listed in the Netvibes ecosystem gallery. You can also install it by clicking here: Add to Netvibes  (Note that this image link uses addApiModule.php not subscribe.php.)

You can see the complete code for this module if you go here and then view source. Simply viewing the page shows the Edit options.

A Netvibes Mini Module is a public web page. My technique is to keep the module web page separate from the web page that does the main work. This lets me have one viewer page that I can share across various mashup scenarios such as gadgets, widgets or plain IFRAMEs.

It is assumed that you have a web page available that is designed to display output in a small space. This might be existing gadget/widget code or perhaps PDA output.

The core of an IFRAME module is this JavaScript onload handler in the header which creates an IFRAME and adds it to the module:
<script type="text/javascript">
var url = "http://www.spacebrowse.com/gadget/SpaceBrowseViewer.aspx?Caller=NV";
NV_ONLOAD = function()
{
  var m_iframe = document.createElement("iframe");
  m_iframe.scrolling = "no";
  m_iframe.frameBorder = "0";
  m_iframe.src = url;
  m_iframe.width="100%";
  m_iframe.height="240px";
  m_iframe.border="0px";
  m_iframe.padding="0px";
  m_iframe.margin="0px";
  m_iframe.overflow="hidden";
  NV_CONTENT.appendChild(m_iframe);
}
</script>

An IFRAME is a rectangular window on a web page that displays the contents of another URL. The web page at this other URL only sees the (small) rectangular window it is given, and cannot interact with anything else on the page including your module code.

Note that the IFRAME is given a fixed height but 100% width. Your web page can find the actual width that you have available in document.body.scrollWidth.

If your page is configurable then add a form with class "configuration" to the body of your module, eg to add a search parameter:
<form class="configuration" method="post" action="">
  <label>Search:</label>
  <input name="Search" type="text" value="" />
</form>


The user's preferences are available using the Netvibes getValue() JavaScript function. You can then add any received value to your IFRAME URL as follows:
  var SearchWord = getValue("Search");
  if( SearchWord && SearchWord!="undefined")
    url += "&Search="+SearchWord;

You could also add a "Height" parameter and use it to change the IFRAME height.

Your module page should also include a definition of an icon to display in the module header, eg as follows:
<link rel="icon" type="image/png" href="http://www.spacebrowse.com/gadget/SpaceBrowseNetvibesIcon.png" />
The icon should be 16x16. The icon can be truncated in height so concentrate the image towards the top.

If you submit your module to the Netvibes then it is a good idea to have a screenshot available. I think that this is shown reduced to 160x120, with a link to a full size image.

21 September 2006

CSS liquid captioned image list

Despite being an aged programmer (I used punched cards while at school!), I find it difficult to get to grips with XHTML page layout using CSS. I find it very hard to get the effect that I want to achieve. It was generally a lot easier when using tables. Perhaps we need a new tag or attribute that works like a table but is ignored by accessibility browsers.

Anyway, I like (a) liquid flows and (b) specifying fonts without using fixed point sizes.

My latest task was to show a lot images. I wanted them to fill all the available screen space, so a liquid layout was called for. If I simply used a series of IMG tags then this would work immediately. However I also wanted to show a caption underneath (and make the image a link).

My own attempts to make this work failed. I nearly resorted to using a non-liquid table layout. Eventually a search found Mark Newhouse's guide (which is one of those annoying sites which come up with a smaller font than normal). The basic idea is to have each photo/caption block in a DIV that floats to the left. If you add lots of these then each DIV goes to the right of the previous one if there is room, and onto the next line if not. You need to round it off with a DIV style clear:both. Thanks Mark.

My eventual solution can be seen here. Even this solution has its problems, stemming from the fact that the caption text is of variable length. If I set a fixed style height then FF and O would truncate the text, even with overflow:visible set. So I guessed a suitable min-height. The problem remains that picture/caption blocks have different heights. So when a block floats down, it may display at the block that sticks down the most - which is not necessarily at the start of the line. You can see this after a row or three using the above link.

There are also printing problems. IE only shows one page of floating DIVs before giving up. FF does display all the DIVs but those at the bottom of the page are often not shown in their entirety.

Any better suggestions appreciated.

15 September 2006

Find-in-Files for ascx.cs in Visual Studio

Just a quick warning to say that Visual Studio 2005 (and probably 2003) Find-in-Files will not by default find text in *.aspx.cs files if you use the standard file types spec: *cs;*.vb;*.resx;*.xsd;*.wsdl;*.htm;*.html;*.aspx;*.ascx;
*.asmx;*.asax;*.config;*.asp;*.asa;*.css;*.xml
even though *cs is in the spec.

I reported this here in Microsoft Connect Feedback but Microsoft insist that it is by design. Weird!

Anyway, make sure that you add *.aspx.cs and other variants (eg *.asmx.cs) to your file spec, separated by semi-colons. I also add *.js;*.master

Actually, I've just noticed that the standard file spec has *cs. If you change this to *.cs with a period then it also works.

12 September 2006

Tag aware widget

This posts shows an example of a widgetbox tag aware widget - using my Space Browse virtual tour widget.

This blog entry contains a standard widgetbox DIV to place the widget and an extra A tag to define the tag. The tag is "hoff" which tells Space Browse to search for a virtual tour that contains the word "hoff". Here's the HTML:
<div class="wbx-widget" id="f3a39c0a-cbf9-4c51-92fa-d1cf6abfe54f"></div>
<a rel="wbx-keywords" title="hoff"></a>


You should always see the virtual tour called "Rock climbing at The Hoff" here.



Here's the widgetbox docs for tags:

08 September 2006

Tabindex order accessibility issues

I released a new version of the Space Browse viewer yesterday. This was a major update because it made the viewer more accessible to keyboard users. However there are some unresolved issues... so any help appreciated.

The viewer has various tool button images used for navigation etc, as can be seen on the right in the "Space Browse widget". The previous viewer version used DIV HTML elements with onclick handlers added. The new version uses INPUT TYPE="image" elements (with onclick handlers) that let users use the tab key to move between focus elements on the page, thereby hopefully improving accessibility.

The new viewer INPUT elements all have TABINDEX attributes to set the order of the controls. For the viewer I started the TABINDEX values at 200. This helps the overall page layout:
  • Master page header: tabindex values start at 1
  • Page before viewer: tabindex values start at 100
  • Viewer: tabindex values start at 200
  • Page after header: tabindex values start at 300
  • Master page footer: tabindex values start at 400


I had to be careful with the INPUT image element borders. Originally I had border:1px solid gray;. However this did not work well in IE because it shows the element with the focus by giving it a gray dashed 1px border - this did not show up. So I used other colours.

Issue 1: tab order of elements added in JavaScript
My new viewer code adds some INPUT elements in JavaScript after the static elements have loaded. These added INPUT elements do have TABINDEX values in the correct order. However browsers do not respect these values - instead the elements are treated as if they had no TABINDEX, ie the user tabs to them after all the items that do have a TABINDEX. Tested in IE6, FF1.5 and O9 in Windows XP.

Issue 2: IE added elements invocation
Once you have tabbed to aan element in Internet Explorer you can press either Space or Enter to "click" it. When I added INPUT elements in JavaScript I saw a weird bug. If you use Space then the correct element is "clicked". However, if you use Enter then the wrong element is "clicked", ie the first added element is always "clicked". Tested in IE6 in Windows XP.

This is the code that I use:
fInput["onclick"] = function() { return space_gotoFrame(this.alt,true,null); }
where fInput is the INPUT element. When clicked, this.alt should be the filename of the photo to go to.

Issue 3: Opera tabbing
If appropriate, the viewer removes various INPUT elements by setting display:none;. In Opera 9 in Windows XP this caused problems with the tab order: Opera does not skip such elements, instead it goes back to the start of the page and so does not let you tab to all page elements.

Regards other browsers: FireFox was best at tabbing because the focus element stayed the same after a "click" even if the element was disabled. Interner Explorer always loses the focus element if it is disabled.

Later: ASP.NET asp:TreeView TabIndex
The ASP.NET asp:TreeView server control has a TabIndex property. However it does not implement it very well. The TreeView is implemented as a DIV with tables inside. The DIV is given the specified TabIndex; however the links inside are not, so those links appear at the wrong place in the tab order

07 September 2006

Space Browse viewer Google gadget

The Space Browse virtual tour viewer Google gadget is now listed in the Google content directory. Click on the "Add it now" button to add it to your personalised home page. As yet, I haven't been able to find out which directory category it has been put in.

I spotted the directory entry after I'd signed up for a Google Pages account. The Space Browse gadget works fine there, as can be seen here: jchriscant.googlepages.com. To add to your Pages site you must have the Experimental features enabled. Then edit a page, click in an editable field then press "More". With "Standard gadgets" selected, search for "space browse". Click on "Space Browse virtual tour", then "Add Gadget >>" and agree "OK".

I have improved the Space Browse gadget since my previous post. It now fits into the given space better and has various parameters. I noticed that you can resize the rectangle for the gadget in Google Pages, so I will have to add in parameters to let you set the display size.

As an aside, I have been working on version 2 of the viewer/gadget/widget. This uses proper HTML INPUT fields to show the navigation controls. This makes the viewer more accessible to keyboard users. When this is done I will be able to submit it to the Windows Live gallery.