Exploring Windows Desktop Gadgets #3 – settings storage

This is the third post in Exploring Windows Desktop Gadgets series and it will be devoted to improving our comments feed reader gadget by adding settings storage functionality.

Settings storage theory

Any desktop program has its own settings storage (ini files, xml files, etc.) or uses a global OS storage (registry).

But in web-applications everything’s different – part of the functionality is provided by client (browser) and another part – by the server. Although it’s dead easy to store data on the server, on the client-side you can’t get access neither to file system nor to registry. (You actually can in IE, but this will require ActiveX scripting and therefore will ask user for an explicit permission.)

Until very recent DOM Storage specification draft, in most browsers you could only use cookies for storing some data on client side. However, IE5 introduced support for true client-side only storage – DOM Storage predecessor – userData. So it took almost eight years for the whole browsers industry to define and support similar client-side storage approach. And right at the time as DOM Storage is being drafted by W3C, it gets support in IE8.

The reason I’m telling you about DOM Storage in IE8 is that I have a strong feeling that this DOM Storage is used by Gadgets Platform to allow storing settings data for each gadget.

Settings storage practice

Settings dialog is a modal window which opens on top of your gadget. As it’s modal, the only way you can close it is to press OK or CANCEL button in its UI. Similarly to the gadget itself, settings dialog is a HTML page displayed by MSHTML.

As it would be useful to have comments feed URL and refresh frequency configurable, this is what I’ll add to my gadget:

In the settings dialog only area outlined in red is actually a HTML file, title and OK/CANCEL buttons are provided by Gadgets Platform:

To add the settings dialog to our gadget we’ll have to create a HTML file, let’s call it “settings.html”. To save comments feed URL and refresh frequency, we only need two fields and couple of labels. This is what I came up with.

If  you look at the JS code, you’ll see that it does two things:

1. calls System.Gadget.Settings.read function to retrieve data from the Gadget settings storage
2. defines a handler for System.Gadget.onSettingsClosing event

There’s a complete reference of Gadget platform events and properties on MSDN, but for our simple case it’s enough to say that System.Gadget.Settings.read reads object from the storage by its name, System.Gadget.Settings.write writes object to the storage with its name and System.Gadget.onSettingsClosing event fires when the settings dialog is closing. Settings store is separate for each gadget so don’t be afraid that your settings names can be accessed from other gadgets.

So in the window.onload handler of settings.html I try to get the data from the storage and set inputs values accordingly, and when the gadget is closing, I check if OK was pressed (e.closeAction == e.Action.commit) and if so, save inputs values into the storage. Dead easy.

Now we have to attach settings.html page to our gadget. This is done by adding the following javascript code to main.html file:

System.Gadget.settingsUI = "settings.html";

Now our Gadget will show this button in the control area:

And if you click on it, you’ll see your settings.html page rendered in a nice UI:

So now we have a settings dialog that reads and writes data from the Gadget settings store.  What we also need to do is to make our main.html read comments feed URL and refresh frequency from settings store as well. If you look at this javascript, you’ll see how it’s changed from the previous version. Basically, I just did the following:

1. rss.js now doens’t have blog comments feed URL and refresh frequency hardcoded, instead, it reads these values from settings store:
   

   window.onload = function(){
   
     //read data from storage
     var data = getDataFromStorage();
   
     if ("" != data.url && 
         "" != data.frequency && 
         /^(\d*)(\.?)(\d*)$/.match(data.frequency)) startLoop(data);
     else document.body.innerHTML = "<b>Please make sure you"+
                                   "configured everything properly</b>";
   
   };

2. System.Gadget.onSettingsClosed event handler is used to restart main loop with new settings:
   

   System.Gadget.onSettingsClosed = function(){
     var data = getDataFromStorage();
     startLoop(data);
   };

3. And startLoop function has been rewritten to allow only one main loop (but that’s pretty irrelevant to Gadgets platform):
   

   var startLoop = function(data){

      //clear existing interval (if present)
      if ("undefined" != typeof arguments.callee.intervalHandler)
        window.clearInterval(arguments.callee.intervalHandler);

      //retrieve feed again
      getRSS(data.url);

      //set new main loop
      arguments.callee.intervalHandler = window.setInterval(
        function(){ getRSS(data.url); }, data.frequency * 1000
      );
   };

And here we go – gadget’s ready :)

Save it as rss-comments.gadget to your computer and install it – you will be able to set comments feed URL (so you can start using it to watch comments on your own blog) and refresh frequency in seconds.

In the next posts of this series I will cover flyouts, make the gadget look really slick with UI enhancements Gadget platform provides, show how debugging gadgets can be really effective and dive into more details of the Gadgets platform. Stay tuned for more interesting stuff!

Share :

Exploring Windows Desktop Gadgets #2 – security and limitations

In this post (second in Exploring Windows Desktop Gadgets series) I’m going to dive deeper into Windows Desktop Gadgets platform and cover its security model and some limitations.

First of all, let me repeat that gadget is a client-side web-application running in chromeless mode on your desktop. It’s similar to HTA but provides a whole new set of functionality and also has some restrictions compared to HTA.

Gadgets security model

IE has always been the de-facto-standard platform for building powerful applications that require access to file system, Cryptographic Service Provider, WMI and other OS functionality. This functionality is achieved by using ActiveX controls. But ActiveX can’t run without a user permission! So by default javascript in web-applications has quite strong security limitations. This security model can only be weaken by users choice – by allowing ActiveX controls to run or by adding a website to a trusted zone.

But as gadgets are installed by user, so it’s his choice to run them, all functionality that MSHTML can provide is enabled (*). MSDN says:

The MSHTML runtime is configured with the set of permissions given to HTAs or the Local Machine Zone security configuration.

This rises a very important point – don’t install gadgets from non trusted sources. Or if you do, please inspect the code before you install the gadget. As Gadget runs under current user account, it won’t be able to delete system32 directory or do any other critical damage to the system. But it will surely succeed in deleting your documents or photos.

And of course, as any other Microsoft technology, Gadgets can be fully controlled by Group Policy.

For more information on Gadgets security please read this and this MSDN article.

Gadgets limitations

The main limitation to me is that there’re no modal dialogs. No alerts, no window.confirm, nothing. So if you want to do a quick debug, you have to dump data to the document itself or use a script debugger.

In one of the next posts on this topic I will cover debugging gadgets.

Share :

Exploring Windows Desktop Gadgets

With this post I’m starting a series of posts about one great Microsoft technology – Windows 7 Gadgets. I’ve already created an introduction post earlier and I recommend you to read it to find out the history of desktop gadgets. But now I will describe the technology, its theory and practice in more detail.

First of all, let’s get our hands dirty and create a simple gadget.

Creating a simple gadget

One of the things that was always bothering me was checking comments to my blog entries. There’re usually two ways to check for new comments on your blog – either by subscribing to comments RSS feed or by going to admin web-interface of the blog and checking for comments there. I don’t like first option because I’m subscribed to more than a hundred feeds in my Outlook so I only read them at the weekends when I’ve got enough free time. And I don’t particularly fancy logging to my blog every three-four hours to check for new comments. So Windows 7 Desktop Gadget with my blog comments feed would perfectly suit my needs.

Although this might not sound as a killer app to you, but it does its job and also perfectly shows how simple it is to build a gadget.

First of all, as I’ve already said, Windows 7 Gadget is nothing more than just a HTML page with Javascript and CSS. So I use the same approach as if I had to parse my blog comments on a website – a simple HTML, a bit of CSS and a bit of AJAX. So gadget building comes down to building a client-side web-app and packing it.

Creating a web-app

I created a simple page with a pretty straight-forward javascript. If you take a look at window.onload js code, you’ll see the following:

window.setInterval( function(){ getRSS(url); }, 5*60*1000);

meaning that every five minutes getRSS function is called.

This is the “main loop” of our program. As our gadget is a desktop program written in javascript and since  Javascript blocks UI when being executed, setInterval/setTimeout is the only one way to set the “main loop”.

That’s how the javascript in this web-app works:

1. getRSS function creates XMLHTTPRequest object and sends HTTP GET request to http://sharovatov.wordpress.com/comments/feed/.
2. wordpress responds with XML file containing last ten comments from my blog
3. parseRSS function parses the XML and passes the resulting object to displayRSS which just dumps it to document.body

It takes 15-20 minutes to write such a tiny piece of code. So now we’ve got a small web-application which is a very basic version of RSS reader.

As you may notice, the script doesn’t work on sharovatov.ru. Cross-domain security restrictions is a reason for that – the script is located on one domain (sharovatov.ru) and it tries to request data from another domain (sharovatov.wordpress.com). However, if you save main.html page and rss.js file to your machine, run main.html from IE8 and confirm JS execution, you will see the comments feed displayed.

As we’re done with functionality, it’s time to convert our small client-side web-app to a gadget.

Converting to a gadget

All we need to do now is to add a special manifest file. It’s just an XML file with your gadget description. Here’s mine.

That’s all. Now we pack these three files into a zip archive and rename its extension to .gadget. Here’s a link to what I came up with. Save it as test.gadget and double-click on it. If you then confirm gadget installation prompt, it will appear on the screen and the feed is downloaded and displayed.

That’s the basics of creating a gadget, if you feel interested, read MSDN or follow my posts – I will keep on writing about gadgets and in the next post I’ll show what my comments reader gadget will look like eventually :)

This is the screenshot of a 20-minutes job:

Every five minutes the gadget is updated so I can clearly see whose comment is the last one and reply if needed. Very handy :)

Stay tuned and we’ll proceed.

Share :

ITIL Conference

Publishing this blogpost as yesterday – it’s been prepared and written yesterday, but I had time to reread it and amend only today.

So I visited OSPConf on business processes automation and ITIL. Was held at Radisson SAS hotel – quite a nice hotel, the launch was brilliant, the loos were not better than ***. But the conference was brilliant – there were top IT guys from HP, IBS, Megafon, Naumen, InlineGroup, IT Expert. Was really interesting to listen about the ITSM implementation in current investments-greedy crisis world. What I found out for myself was that if in your company and IT dept management is done properly, crisis won’t affect you or even if it does, you’ll be able to easily explain to business what value it will lose if they cut investments or stop projects. So all the management practices and tools are for making all the work really transparent so that managers and CEO can focus and spend more time on strategic decisions rather than on operational routines. I had all these thoughts flying in my head, but when I listened to speech of CBR IT chief, all the thoughts got sorted in a proper way.

And I also have to note that ITSM software is not that expensive for SME – excellent Omnitracker costs from €12000 and it’s got everything your company might need, plus API for integration, plus additional templates – it will automate everything. However, the consultancy will be around 10 times more expensive. But again – nothing stops your company to send your own IT guys for training and save a fortune :)

So thanks for all the interesting stuff, OSP! The conference was really worthy to visit! Will probably write a couple more blog posts on the topic as soon as I get all my thoughts in order :)

Some news

This week seems to be really interesting! At least it started so.

First of all, I’m starting a slight redesign + complete rebuild of CSS/HTML of our company website. I finally got time to make the HTML semantic and craft a proper CSS/JS. It will be fully cross-browser (trident, gecko, webkit and presto – all implementations with significant market share) and usable. You’ll see.

Tomorrow I’m attending OSPConf about ITIL and other interesting stuff, will create a separate blog post about this.

I’ve also started a couple of hobby projects that I don’t want to publish at the moment, but hopefully will finish them by the end of June. Fogbugz and beanstalk work fine, it’s really great that it’s online, I can switch from work PC to my laptop and just continue working.

Being a fan of all computerised stuff, I was thinking of getting an iRobot Roomba – nice vacuum cleaner robot. It’s going to be of a great help, but again I’m surprised by price difference – in USA roomba 530 costs $300, and in Saint Petersburg – $600. Sorry guys, 100% margin is too much.

I’m getting more and more news about widgets and gadgets, seems that HTML/CSS/JS will be a truly cross-platform environment for building web-service oriented software. In one of the future blog posts I’ll cover this in more detail.

I purchased custom CSS for my blog, so will have to devote an hour or two to modify journalist theme (the one my blog’s currently using) and make it look cleaner. It looks fine on netfront on my PSP, but could look better on S60 webkit.

Blogging gets more and more interesting! Damn, I’ve got 11 unfinished reasonably small blog posts (less than 10 Kbytes) and 4 quite big (more than 50 Kbytes). I should do my time-management better.

Hope things keep being that interesting! :) Have a good week, world!

Beanstalkapp and Fogbugz – free online bugtracking and version control

Once I tried Fogbugz bug tracking on-demand service and was amazed how cool it was and how easy it was to use it – no problems with installing and managing anything – just register and start working. And it’s not only a bug tracking software, but a full-fledged project management solution, and as the support cost is zero, it’s almost invaluable for small projects or your own start-up. It’s free for 2 users only, which is more than enough if you’re running a hobby project, but if you have a budget, you can easily afford $25 for each additional user.

But in proper development you also need source code management system (SCM). And Fogbugz allows for great level of integration with all popular SCM systems. But if you choose Fogbugz on-demand to avoid support costs of running it locally, does it sound logical to install SCM locally? Definitely not.

And here comes beanstalk – great hosted hassle-free version control service. It’s free for 3 users and a repository of up to 100Mbytes, and you can easily upgrade at any time. In most cases, free version should suit your hobby project or start up. Beanstalk runs subversion SCM which is almost a de-facto standard in project development and has client software for all platforms.

But the best thing in Beanstalk for me is that it provides integration with Fogbugz on-demand!

So you can have bug tracking/PM and version control software at no cost! It is just a dream for a hobby project or a small start-up.

The installation process is dead easy:

1. register at fogbugz.com for on-demand service and get yourproject.fogbugz.com address
2. register at beanstalkapp.com for a free account and get yourproject.beanstalkapp.com address and login there. You will be prompted to set your first repository. I assume that you’re just starting and don’t have SCM system yet, so just zip your working directory (where all your project files are) and upload it. Your first repository will be created.
3. go to your repository setup → integration → fogbugz. All you need to do is follow the instructions – but basically they will just need your fogbugz URL (yourproject.fogbugz.com) and username with password.
4. choose your subversion client, download it and install. All you’ll have to configure in the client is a repository URL (it will look something like this: http://yourproject.svn.beanstalkapp.com/myfirstrepo/) and your username/password (usually username is the email you entered when registering). That’s it, you can delete all files from the working directory on your computer (do a backup before deleting!) and check-out files from your repository there. I use tortoiseSVN so I just stopped IIS, removed everything from my c:\inetpub\testproject directory, right-clicked on it and chose “Check-out” from TortoiseSVN menu. In a minute I had all my files fetched from beanstalk repository. I started IIS and had my test project up and running, but now with full source control!
5. in Fogbugz – set “Source Control URL for logs” and “Source Control URL for diffs”. To do this, you need to go to your fogbugz account, to Settings → site → Main. Grab your repository URL from beanstalk, add “browse/^FILE” to it and set it as “Source Control URL for logs”. It should look something like that:  http://yourProject.beanstalkapp.com/yourRepository/browse/^FILE 

   And “Source Control URL for diffs” will be http://yourProject.beanstalkapp.com/yourRepositroy/diff/path/^FILE?from=^R2&to=^R1

Voila! Everything should be working.

So the workflow will be like that:

1. If you have a bug or a feature request, you enter it to Fogbugz, it will get a number assigned.
2. When you (or someone else) start working on a bug, you just edit your code and then commit it. When committing, you can add tags to a commit message. For example, if you do a commit with the following message:
   

   [case:34 status:resolved] 
   fixed IE5.5 lack of .toFixed() support

   Beanstalk will go to FogBugz, find bug #34, add the message to it and mark the bug as resolved. See here for more commit tags.

3. Then in Fogbugz bug#34 you will see that it’s been just resolved and you will be able to check what files were changed and look at the diff of the changes.

So that’s it, you’ve got your bug tracking and version control software set up and integrated. It’s working online so support cost is zero, and it’s completely free :)

P.S. What’s also great about Beanstalk is that it supports twitter integration – so if you have an open-source project, your users can follow it on twitter and see what you’re committing! It also supports web-hooks API so integration is limited to your fantasy only :)

P.P.S. The only thing that’s left is database versioning control – we need something like RoR migrations, but that’s a topic for another post :)

Share :

Universal Internet Explorer 6 CSS

Today I’ve read an interesting article by Andy Clarke here.

Here’s the author’s key points:

1. IE6 is hard to support
2. it’s so cool to write CSS for modern browsers only
3. sites shouldn’t look the same in different browsers
4. people come to websites for content

So by throwing these thoughts in he’s making a conclusion that IE6 should be supported in a limited way – i.e. by giving it a special “stripped” CSS. 

So let’s see.

IE6 is hard to support

From technical side it’s not hard, period. The amount of effort depends on the project peculiarities (to a degree).

It’s cool to write CSS for modern browsers only

Doing your work is not always doing cool stuff.

Sites shouldn’t look the same in different browsers

It fully depends on the project peculiarities.

People come to websites for content

It fully depends on the project peculiarities.

I do keep saying that all this depends on the project peculiarities.

And I can’t understand why it’s not obvious to Andy Clarke. When a project is planned, all the issues are taken into consideration. As websites are displayed in different browsers, three key factors matter:

1. nature of the website
2. market share of the browser
3. cost of supporting a browser

Do I need to explain in more detail?

P.S. Yes I think people should upgrade from IE6. But not because it has an outdated support for standards, but just because newer browsers provide much better user experience.

P.P.S. You know, Andy, I really appreciate what you’re doing. I urge you not to stop. I’ll be priced higher for the same skills that I have now just because you (and those whom you manage to convince) deliberately choose not to deliver what clients need :)

Share :

Googletranslateclient.com and Windows Accelerator Platform

Yesterday I’ve blogged about Accelerators Platform and now I’m looking at a website googletranslateclient.com which offers to download a standalone VB6 win32 application that uses google translate service to dynamically translate a selected text.

Funny thing is that this program implements what Accelerator Platform is invented for, but in a very limited and counter-productive way – its functionality is limited to only one service so nobody can enhance it!

I think the best thing Microsoft could do would be to create a program that would capture text select event in any window and add Accelerators group to the context menu of that program!

Or alternatively, if this is too much work, just show Accelerators icon ()  when any text is selected. I’m not much of a system application developer, so I’m not sure this is easy to do, but I’m sure people would benefit from it and developers wouldn’t need to add Accelerators API support in their apps!

Hope that someone will pick this idea.

Share :

Windows 7 Accelerators Platform

Cool, I just found out that great accelerators feature that’s been introduced in IE8 is a part of Windows 7 API as Accelerators Platform.

The whole concept is really useful – Accelerators Platform provides a unified way to enhance an text-operating application with cross-application plug-ins.

Accelerators Platform provides an abstraction layer between applications and accelerators:

• Accelerators operate with text selection with help of web services
• application implementing Accelerators Platform API can use Accelerators
• user running the application can select a text and choose an accelerator that will use this selection

So it’s like a plug-in platform for text selection plug-ins where plug-ins are application independent and stored in one place, so if an accelerator is installed once, it will be available in any application that supports Accelerators Platform.

The fact that Accelerators become application-independent gives the following benefits:

• usability is better as users have similar behaviour pattern across applications, and it’s easier for them to get used to your application
• you as an application developer don’t have to reinvent the wheel and implement useful text selection enhanced functionality and work on a plug-in architecture
• you as an application developer don’t have to maintain a list of supported text selection plug-ins – they can be found and installed easily from here – the list of accelerators is huge!
• if you want to create your own accelerator for your application, it’s well documented and dead easy – I’ve created 6 accelerators just in 20 minutes! Or your users can do it!

So by supporting Accelerators Platform in your app you allow users to do with the text whatever they like and whatever they are used to!

Just imagine – wouldn’t it be wonderful to be able to select address in any application, right click on it and see where it’s located on the map? Or select unknown word in any application and see its definition in Wikipedia? Or select a function name that you’d like to refresh you memory about and see what php.net or msdn have to say? Or select any text and translate it to other language in one click? Or check how much selected TV model costs on ebay?

As Microsoft said, Office 2010 would have Accelerators platform support, and I bet other serious software will support Accelerators Platform as well. Here’s Word 2010 screenshot from msdn:

For more details and technical description of Accelerators Platform please visit this MDSN article and this IE Team Blog entry.

So go and support Accelerators Platform in your app!

Share :

Windows 7 taskbar – new approach

I just love the way programs are organised on new Windows 7 taskbar.

History

In earlier Windows versions to get the program window shown you had to do two things:

• check if the program is running by looking at the taskbar and maximise it window if it’s there
• if it’s not running, you had to launch it from quick launch or other place

This approach has some major flows:

1. when you just need a program window to be shown, you have to do a cognitive effort to find where to get it from – either launch the program from quicklaunch (or somewhere else) or maximise its window from the taskbar
2. if you have, say, ten commonly used programs and put them on a quicklaunch and then open all them up, you’ve suddenly got quicklaunch icons just taking space and doing nothing as the programs are already opened. And you’ve got your programs’ icons in the taskbar – so you effectively have two icons for every program – one for launching a program and one for controlling its window state.

Nowadays

In windows 7 the new approach is taken.

Basically, taskbar and quick launch are combined in one place and then enhanced a lot.

The concept is just great – you don’t need to check if a program is running or not to get it shown – you just click on its icon and if its running, you’ll get its window, otherwise it will launch and you will still get its window. Less cognitive effort, better usability.

One of the implications of this approach is that the space on the taskbar is saved by having “program-launching” and “window-managing” controls combined.

Here’s a screenshot:

As you can see, Far, Explorer and Microsoft Word are not launched, Outlook, Messenger, Sticky Notes, Live Writer and IE8 are running.

As you can also notice on the screenshot, multiple instances of IE8 are grouped and if you hover them, that’s what you’ll see:

So managing multiple program instances is really easy – when you hover on an item, its window appears on the screen so you can preview if this window is what you were looking for and click on it to open. You can also close any window from the group right from the taskbar.

Here’s a screenshot when there’s many IE8 tabs opened:

Again, when you hover on an item, its window is shown, so you either click on it to make it active or close it down.

Another great interface solution is displaying progress bars directly on the taskbar. For example, here’s how IE8 displays download progress bar:

And all the features I showed is just a part of all the goodness Windows 7 taskbar introduces.

So yes, I agree with Gizmodo that Windows 7 Taskbar is much better than MAC OS X dock.