Using .NET WebBrowser to create a mobile wiki

Wrote another Windows Mobile app tonight – this time I even tried it out on my phone and not just the emulator!

The idea of this one is an alternative to the built-in Windows Mobile “Notes” application. Instead of single ‘post-it-style’ notes, the idea is to use a wiki approach – a personal wiki, entirely hosted on the PDA. (Partly because it is quicker to use local files, but mainly because I’m too skint to pay the mobile data fees to access an online wiki :-))

I prefer the wiki approach to note-taking – mainly for the quick and easy formatting and the hyperlinks between pages. I’ve used something similar before on Palm OS for a couple of years now – ‘NoteStudio‘ by DogMelon. This is a brilliant app, which I really miss since moving to Windows Mobile as my main PDA. (There has been some talk of a Windows Mobile for a while now, but this is looking a little like vaporware).

When I saw that the .NET compact framework included a web browser widget, I thought I’d see how hard it would be to knock together a wiki tool tonight.

my Wiki app in view modeAfter fighting with native C++ GUI code yesterday, this was really easy. I’ve got two controls – a text box and a web browser box – both configured to fill the available screenspace (so it works in portrait or landscape modes). One is visible, while the other is invisible – and I use one of the soft-keys to toggle between the two. The web-browser shows the wiki page as a web page, the text box lets you edit the HTML code. I’ve added a bit more functionality to make it vaguely usable…
my Wiki app in edit mode

Creating pages automatically – a typical wiki behaviour is that clicking on a link to a page that doesn’t exist should create that page. I’ve done that by listening for when a link is clicked on in the browser (registering for WebBrowserNavigatingEventHandler events), and checking to see if the target file exists. If it doesn’t, I create it – before the web browser has had a chance to look for it. (I also set up a little dialog to let the user define a template which I use for newly created pages – so all new pages start with my standard menu header by default.)

My first attempt was just a straight text editor to edit the HTML directly. I want to move towards a simpler wiki-markup, so I did a bit of work towards that. Instead of storing the pages as HTML files, I store them as text files. When the user clicks on a link (e.g. “home”), I append “.txt” to find the relevant text file (“home.txt”). If in edit mode, I just load this into the text box. If in view mode, I turn this into HTML on-the-fly for viewing. At the moment, all I’m doing is adding a <head> section at the start of the file contents, and closing up the <body> tags after. But this separation between the HTML displayed and the text stored, and the fact that I now have links to topic names (like ‘Home’, rather than to HTML files, like ‘Home.htm’) is the start of making this more wiki-like.

This is enough for tonight’s hacking, but this is an app that I can see myself using a lot. I really like Visual Studio 2005 and the Windows Mobile emulators – this was easy. After only a hour or so, I’ve already got a very usable app. I’ll have to come back to this again soon.

43 Responses to “Using .NET WebBrowser to create a mobile wiki”

  1. Leolit says:

    Great idea! I’m also former Palm and NoteStudio user, and also missing it very much. Very strange that guys from DogMelon speak about not porting the app to WindowsMobile because they are not sure if there will be enough users (!!! comparing to nearly-dead Palm!). Other strange thing is that there is no Wiki for WinMobile at all – or I couldn’t find it.
    So it would be really good to make such project! ๐Ÿ™‚

  2. […] Given that, I’m all the more impressed that I got round to finishing the Windows Mobile wiki app that I started last Sunday. It’s not entirely finished – I know about a few little kinks in the code, but I’m sure there are many more. […]

  3. Andreas says:

    Wow, a great application. I was looking for something like this for a long time.
    Used generated HTML (from a PC-Wiki) as a fallback on my PPC, but this means, that no editing on the PPC possible.
    Only problem are the requirements (WM5). Is there a possibility for a WM2003 version, (with .NET CF 2.0 installed)?

    Regards,
    Andreas

  4. dale says:

    To be honest, probably not. I know this will sound selfish, but I’m writing this primarily for my own use – and as I have a WM5 device, I write it for that.

    That said, if someone wants to make a WM2003 version, I’d have no objection to sharing code with them to get them started.

    Actually, for all I know, it might pretty much work already on WM2003 – I’ve never tried. I guess there might be some problem with the menus, as softkeys are new to WM5, but otherwise I doubt there’d be much difference.

  5. Andreas says:

    No Problem, I understand that.
    If I get the means/time to try it by myself (e.g. in the holyday season), it would be nice to get the sources.
    I am not new to programming, but new to programming for the PPC, so I have to see, that I get the appropriate environment first.

    Regards,
    Andreas

  6. stefan says:

    Dale, excellent work. i am a general proponent and evangelist for wikis for a while and have been looking all over to find a wiki for the pocket pc platform – so thank you very much.

    i like the simplicity and easy of use, as well as that each entry creates its own page. this will make integration with other wikis much easier, particularly i will try to find a way to integrate these pages with the tikiwiki (php/mysql) i am running on my server.

    one note: i use a htc wizard/vario/t-mobile mda and it does not have the [ and ] letters on the slideout keyboard. would it be possible to have a small button bar at the bottom that can insert the most common wiki syntax letters ?

    keep up the great work. it think you are up to something there.

    stefan

  7. dale says:

    Thanks very much for the comments!

    The button bar idea is a good one – I’ve made a start on an implementation. It’s a little rough around the edges and needs some work, but I think it should be useful.

    Dale

  8. christophe says:

    Hello guys,
    I’m a french java developer and i have develop a personnal wiki for mobile phones running on J2me. If your pda are running j2me, this software could be useful: try it on http://www.wikimobile.eu

  9. Kurt says:

    Dale:

    Beautiful – I’ve been using WikidPad on my PC for most note taking – was excited to see this capability. Just the right level of features. I use a verizon XV6700 phone with a slide out keyboard, and was bemoaning the lack of [ and ] keys when I stumbled across your toolbar. Beautiful!

  10. Nuno says:

    The application is very nice, and I’m getting very hyped with it. Indeed I miss a lot a Wiki environment for the PPC, so this is very welcome.

    I’d like to share a request/suggestion, though, if I’m allowed.

    I think what’s really missing is the capability to show inline images, and to let it fire an external application or event, based on tags. It could also use the PPC shell to fire them.

    But what I really miss is the inline imaging, it would turn it up in another level!

    Anyway, thanks so much for the work you’ve done so far.

  11. Patrick says:

    This is a very good application. Really well done, easy to use, and reliable too. I am deeply impressed. Moreover, it it the only existing wiki app that can be used jointly on desktop and ppc. Very nice ! So thank you so much for doing a such good job and for making this app available for free. This really deserves congratulations.

    As Nuno, Iโ€™d like to share few requestw/suggestions too, if Iโ€™m allowed.

    * possibility to add a “Folder” button on top menu, in order to quickly accessing the folder containing the homepage and the various wiki files. Much easier for moving/deleting/renaming/editing files manually, if needed.

    * Possibility to use a “strikeout” tag (e.g. as in outlook for task that are finished).

    * Slightly increase the default font size on the desktop version while in “editing” mode; it is very small.

    * Possibility to store the css style sheet just beside the wiki itself. Reasons for this are :
    – it is much easier to access it for modifying it rather than to dig inside the user folders
    -if the wiki is stored on a removable hard disk, it makes sure that you will always use the same css file (otherwise you need to install it on each one of the computers that you plan to use, and to modify all of them accordingly each time you make a modification)

    * For the desktop version, it would be really nice if the application could be portable (i.e., put on a USB key). I guess that a version that would be self-contained (i.e., not requiring .NET CF to be installed on the computer) would be much bigger in size, but my guess is that for people moving around, a portable wiki version would be really helpful. So currently the desktop part is not really portable as :
    – it uses .NET CF, thay may not be installed on the computer
    – css file is not installed in the wiki directory itself but should be put on the user profile
    – paths to external files are absolute, not relative.

    Cheers

  12. Patrick says:

    … I forget an important suggestion :

    * possibility to define an anchor inside the same page without specifying the name of the current file in front of the “#”. E.g., if my current page is “ThisPage.txt” and I one to refer to a section inside it, called “ThisSection”, I coud just define [#ThisSection] instead of [ThisPage#ThisSection]. This especially useful for template page that would refer to standard sections on a top menu, as otherwise these need to be modified manually (so you loose part of the benefit of template).

  13. dale says:

    Patrick – thanks very much for your kind comments and some interesting ideas – some of which I’d like to give a try. Unfortunately I am *really* busy at the moment, so I dunno when this is likely to be.

    If you’re interested in knowing when I get round to it, I do have an RSS feed (http://bladewiki.blogspot.com/atom.xml) which you can use to be informed of updates.

    Thanks again,

    Dale

  14. Patrick says:

    Dale,

    Thanks for the answer. I am already using your RSS feed, so I will wait till you can spare some more time for this project. BTW, I also found some minor bugs (no big issues). I will try to find time to document them and send them to you asap.

    Cheers,

    Patrick

  15. Gene says:

    Dale,

    Very interesting app. Thanks for making it available.

    One small comment off hand, can you enable the input SIP when switching to Edit mode?

    e.g.

  16. dale says:

    Yeah – you can use the on-screen keyboard. The edit mode text-box should resize automatically when you show it.

    Unless you mean have the SIP automatically enabled when you switch to Edit mode. In which case… that should be do-able. I don’t use the SIP myself, as my PDA has a QWERTY keyboard – so I’ve not had a need to do this before.

    I’ve been meaning to add a preferences dialog to tweak some other behaviours, so when I get round to doing that, I could look at including this.

    Thanks for the comment

    Dale

  17. Heidi says:

    I have a Pocket PC 2003 (not SE), and FYI, your Wiki program doesn’t work on that platform. I do some hobby programming in C#, and would be willing to try and port it to this platform if the code is in C#.

  18. dale says:

    @Heidi

    yeah – the problem with 2003 is because I used the ‘softkeys’ menu approach which is only present in Windows Mobile 5 and later

    as for converting this to the old-style PPC menu bar, i’ll contact you separately to talk about this

    Thanks!

    D

  19. Edwin says:

    Excellent program. Because I use a Mac I can’t use the Desktop side, but the PPC side works very nice. And I sync with Missing Sync and then edit it with TextMate.
    Did you use an existing syntax or made a new one ? We use a mediawiki at work but that’s a different syntax.

  20. dale says:

    Thanks very much for the comment

    The syntax was originally based on syntax used in NoteStudio, although it has changed a little since I started.

  21. ilias says:

    @dale & Heidi:

    any updates on whether it can run on WM2003SE? I would love an app like this on my (2003) PPC. Thanks!

  22. dale says:

    I haven’t had the chance to package up the source and send it to her yet – sorry. It really does need tidying up for anyone else to be able to work on it, but I’m not sure when I’ll get the time to do that.

    Sorry! Will try and sort it out soon.

    D

  23. marino says:

    has anyone using WM 2003 SE been able to get this app working? I always get some NullReferenceException errors… ๐Ÿ™

    marino

  24. dale says:

    Nope – it wont work on WM2003. The problem is because I used the โ€™softkeysโ€™ menu approach which is only present in Windows Mobile 5 and later.

    Kind regards

    Dale

  25. aluzar says:

    Nice program. But I can’t understand why it don’t want to save the settings. When I resttart programm all of settings dropt to default :-(.

  26. dale says:

    @aluzar – I haven’t seen this happen before. Can you give me any more information? For example, which app is not saving the settings? The desktop or the mobile version? Which version are you using? Does the app otherwise close normally? Etc.

  27. aluzar says:

    Ups, sorry. I just try exit with menu->exit and its works!
    Mabe problem in my task manager, I usualy use tMan to close applications.

  28. dale says:

    brilliant – glad you’ve got it working. it’s an interesting point, though… i’ll have a think about storing preferences when changed rather than on exit

    thanks for taking the time to let me know what the problem was!

  29. aluzar says:

    Hi, have another one question. Why the first line of tag [| |] is markup sensitive, and other lines is not?

    For example in construction:
    [| *line1*
    *line2*
    |]

    line1 will be bold, and line2 normal with * at the beginign and at the end.

    I test it on latest version, on both, mobile and desctop, applications.

    Using construction like this:
    [|
    *line1*
    *line2*
    |]

    is not very comfortable, because it leave an empty line at the begining of code block.

  30. dale says:

    This behaviour is intentional.

    Please see http://dale.lane.googlepages.com/codelisting

    Essentially, I wanted it this way because I needed the flexibility of being able to apply markup to code listings.

    Kind regards

    Dale

  31. Mac says:

    I use Pocket LOOX 720 with Ms Pocket PC 4.21.1088 system and .NET as it mentioned on bladeWiki site. I always get NullReferenceException errors.
    Is it possible to use it on that system?

  32. Mac says:

    I downloaded and installed .NET from mentioned website. AAfter that I get mentioned error. Before installing .NET, Wiki does’t start completly without any info.

  33. dale says:

    Sorry, I wasn’t referring to .NET – I meant the other pre-reqs such as needing a touchscreen, and Windows Mobile OS level (5 or greater)

  34. Dave Moor says:

    I just downloaded and started to play with your wiki on PPC and windows. There seems to be 1 problem, I have an Orange SPV M3100 and when I create a link to a new page after I enter the ‘]’ the editing area only files the top half of the screen, the bottom half is not accessible. The only cure seems to be to unload the app from memory and restart it.

    Apart from that everything seems great. PS I’ve found the editing button bar now, using the ‘[]’ button does not cause the half screen issue.

  35. Andrey says:

    The best program to orginize some imformation! For Windows and Pocket PC!

    Best regards from Russia ๐Ÿ™‚

  36. Adrian says:

    Hello,

    I see that several other people have also asked about the possibility of running this on WM2003. I too would love to have this capability, as I’m running an older iPAQ 5550 with WM2003 too.

    I don’t have the necessary programming experience or capability to do port this myself; is there not anyone out there with the skills and desire to port this excellent app?

    Regards,
    -a

  37. Hoffmann says:

    Hallo!
    I love wikis. I have one started in my hospital, which did great. Your wiki ist very nice, because it so easy to use.
    One thing Iwould change:
    In Wikipedia they have other Editing signs
    * for a list
    = for headings
    ”’ for bold text
    Why didn’t you use these signs. It would make it a lot easier to take official Wikipages in your own wiki.
    Many thousand Wikipedia users would be on your side.
    sincerely your rho

  38. dale says:

    @Hoffman

    Thanks for the comment.

    I can’t pretend that I put any thought into the syntax – as I wrote in the post, this wiki was written as a Windows Mobile version of a wiki product that I used to use on Palm (NoteStudio).

    I’d been using that app for a long time, and had a lot of notes stored in it, all naturally using the NoteStudio syntax. So my wiki was written with the same syntax in mind, to make it easier to transfer my old notes across.

    If NoteStudio had used * for a list, I would have too.

    Sorry! ๐Ÿ™

  39. thomas says:

    Hello Dale, i like it and i use it. What do you think about a “tag” feature – i really miss the possibility to tag my pages and to search for pages with a certain tag … or did i just oversee something ?

  40. dale says:

    @thomas – There isn’t a built-in way to use tags, but for one of my wiki locations, I do have a personal convention that all pages end with a line like:

    tags: this that other

    Which helps with searching.

  41. andrew says:

    Hi,

    where can i download the for this please?

    Thanks…