KeePass for multi-page forms and shared domain accounts

I start using KeePass this week after watching a video on keyloggers from DEFCON and after I was made aware of how powerful AES encryption can be after watching a reverse engineering discussion on Wannacry attack last week by Computerphile.

Background asides, as soon as I start using KeePass, I run into two significant drawbacks with browser integration. After a while fiddling around the settings, I manage to make it works perfectly. Here’s the two issues I ran into and how I tackled them.

MULTI-PAGE LOGIN FORMS

The first one is multi-page login forms. Most email providers (Gmail, Outlook, Yahoo) nowadays have this extra layer of security. Multi-page login forms ask the user to enter the username / email address in one page, click “Next” button, then enter the password in a different page. This method prevents simple bot scripts and notifies the user if they got the username wrong (no more guessing which one is wrong now).

Multi-page login is the bane of password managers like KeePass and LastPass. The traditional approach in KeePass is to open the window, select the entry and Ctrl+V manually. KeePass detects which field the pointer is selecting and fills in the blank accordingly. It is hardly convenient though.

Luckily, in KeePass, there’s a way to automate all this without any plug-in. The software allows custom Auto-type sequences and it supports quite a number of operations that allows the user to construct a complete pipeline. Simply go to Edit Entry menu, choose Auto-Type tab, tick “Override default sequence” and copy paste the script below:

{CLEARFIELD}{USERNAME}{ENTER}{DELAY 2000}{PASSWORD}{ENTER}

Save the entry and you’re done.

The next time you have to login Gmail, simply select the text field, press Ctrl + Alt +A and watch the magic happens. The script will clear the text field (if not empty), type your username, press enter, wait 2 seconds for the password page to load, type your password and then login. Everything is done automatically.

SHARED DOMAIN ACCOUNTS

Okay, that’s one neat thing. The next problem occurs when you have more than one email account. This is not a problem in LastPass but it is in KeePass. KeePass matches the title of your browser window. It does not read the URL in the address bar. If you look around, there’s plugin to show the URL in the window title but it is not exactly the most elegant solution out there.

KeePass has a neat entry selection window for forms that match multiple entries. While you cannot create two entries of the same title. You can create custom sequences that target the same window for different entries. Go to Auto-Type tab again, click Add button and select your login form window from the Target Window drop down list. If you can’t find the right window in the list, exit that menu, make sure the form is open and try the same steps again.

You can use this in combination with the other trick to make multiple accounts work for the same multi-page login service.

Keepass multi acc

Deploy a Nodejs app to Microsoft Azure

This tutorial is provided as a newbie-friendly version of the official document provided by Microsoft. If you prefer the formal technical writing style (no first or second person pronouns, etc.), please refer to the the original tutorial here:

https://azure.microsoft.com/en-us/documentation/articles/app-service-web-nodejs-get-started/

Unlike MS tutorial, I’ll be using Expressjs’s bare-bone Hello World app without view engine and using more graphical interfaces (and fewer command lines). Plus, I’ll include a bunch explanations on some web development concepts that might be alien to the average Joe in Layman’s terms. Hopefully, you’ll find these extra bits helpful.

UNDERSTANDING WEB APPS AND NODEJS

What is Nodejs? Well, Nodejs is a server-side scripting engine that crunches files written in javascript (which is a client-side web language originally) and turns them into web apps.

So how do you know if an application is client-side or server-side? Load the webpage and disconnect from the internet. Whichever function still works offline is client-side. Client-side apps generally consist of a html + css webfront and inline javascript and/or included javascript files you can download and use offline. The clients can download your source code and use it elsewhere; this characteristic makes client-side apps unsecured and unsuitable for multi-tenant sync operations.

Nodejs works with a bundle of software packages (written in .js) called “node modules“. Both Nodejs and node modules must be installed on the server for them to work. In server-side apps, you don’t let the client download javascript files and run on browser, you upload the javascript files to the server and ask Nodejs to run them. The client only gets the outputting result of the javascript source and never the source itself. This makes your web app…server-side. Easy, right?

Not quite. There are non-trivial differences between programming for client-side and programming for server-side. Unfortunately, this guide will only help you use Azure cloud service, which will only help you with the “Install Nodejs on the server”, “Upload javascript files to the server” and “Ask Nodejs to run them” parts. I’m afraid you’ll have to figure the programming out yourselves.

Maybe in I’ll get to that in another tutorial…no promise though!

GETTING NODEJS

Don’t worry, I’ll still help you get the tools and provide some helpful links for getting started with Nodejs in this tutorial. To start developing in Nodejs, you must first download Nodejs software and use your PC as a local server. Go ahead and get the software package here.

https://nodejs.org/en/

Nodejs comes with a node package manager (NPM). If you’ve used LaTeX’s package manager, Linux’s Software Center, Visual Studio’s NuGet package manager or even Arduino’s board manager before, you’ll find many similarities between these systems and npm. The idea is the same: “an application to manage other applications”.

NPM doesn’t have a graphic user interface (GUI). You’ll need to use cmd or powershell (or Bash/Terminal if you’re on Linux). Ugh, command lines…I know right? Well, for Windows users, here are a few basic commands to navigate in cmd

To access a folder at <path>, type:

cd "<path>"

To go up a level in the directory, type:

cd ..

And to switch drive, type C: or D: (or whatever character your drive is) and then cd to the folder you need. Folder creation, exploration, deletion and such, you can use Windows explorer if you don’t know what you’re doing (you’re welcome to mkdir, dir or rm your way through).

INSTALLING EXPRESSJS AND CREATING HELLO WORLD APP

Okay, so you have the npm installed, go ahead and follow this guide from expressjs (or jump to the end of this section for a quick guide).

https://expressjs.com/en/starter/hello-world.html

Expressjs is a node module, you use npm to install it. Installing node modules is a bit different from installing a Windows application; node modules are project-specific dependencies. You install an instance of the package to your project folder and that package can only be used inside that one project. If you have another project, you will have to install another instance of the package to that project folder if you want to use it.

There’s the -g flag you can set to install the package globally so that it is accessible in all nodejs apps on your local computer.

http://stackoverflow.com/questions/13167588/what-does-the-g-flag-do-in-the-command-npm-install-g-something

Bear in mind that if you change computer (or move to web server), that new computer will need to have that node module package installed as well or your app will fail. They’re kinda like NET. Framework or DirectX requirements for some Windows games.

Step-by-step quick guide:

  1. Create an app folder
  2. Navigate to the folder using cmd
  3. Type into console
    npm init
  4. Press ENTER until you see
    entry point: (index.js)

    Change it to

    entry point: (app.js)
  5. Keep spamming ENTER until it’s over
  6. Type into console
    npm install express --save

    The command with –save flag add the node module to dependency listing in package.json file in the root folder. Feel free to take a look at it.

  7. Create app.js with the content according to Expressjs Hello World guide
  8. Change port 3000 to port 1337

Note the last step, Azure web apps run on port 1337, not 3000.

PREPARING FOR AZURE CLOUD

Before you deploy to server, there’s one more thing you need to do. You need to install Azure SDK node package using npm. Without it, your Azure app won’t be able to run on Azure cloud. Back to your console screen and type in:

npm install azure

This one is sort of like a compiler and debugger for Azure apps, you don’t need it in dependencies list (package.json) so no need to set –save flag.

If you were following the MS tutorial, you would notice they relied on Azure CLI and more command lines to create web apps and link git repositories. “Ugh…more command lines, ” you must be grunting right now. Well, I understand, let’s do the same tasks the GUI way. First, you need an Azure account, go ahead and sign up a free account here:

https://azure.microsoft.com/en-us/free/

Second, follow this deployment guide here. Thanks God, there’s one using the GUI

https://azure.microsoft.com/en-us/documentation/articles/app-service-web-get-started/

You will need git, of course, download and install it here if you haven’t already.

https://www.git-scm.com/downloads

The above tutorial set up a git repository on Azure server, you can then push your application to that git repo. Just follow the deploy tutorial to create the app and stop at git clone step, I’ll explain the rest.

DEPLOYING TO AZURE CLOUD

Ok, so you have two repo: one is the Hello World app you created using Expressjs and the other is the git repo on the server. It would save you a lot of troubles if you started the development on the git clone of the server directly, but since you didn’t, you need a few extra steps to “overwrite” that repo with Hello World app.

First, rename your app folder to your Azure app name. Don’t know for sure? git clone it and take a look. Either ways, you’ll need to initialize git version control and turn your app folder into a git repo. To do that, type into your console

git init

You’ll see a hidden folder named .git was added to the folder.

Next, link this local git repo to the server by typing:

git remote add azure <giturlfromportal>

You get that giturlfromportal from here, under GIT URL field:

properties blade for your first web app in Azure
Screenshot shamelessly taken from the other tutorial, okay…

Now if you don’t know what git is…I know it’s a bit too late to mention it now but just in case you really don’t. Git is a version control software and it has some basic functions you will be using all over again. For this tutorial, I’ve used:

git init
git remote add <repo> <url>
git add <file>
git commit -m "<comment>"
git push <repo> master

Parameter “.” represents all files. The following command…

git add .

means “add all file that have been changed to this commit”, you can, of course, add a single file you’ve just changed to save time.

After the initialization and first commit, you can change to GitHub GUI software. It will create commits automatically for you and show historical changes graphically! Get GitHub GUI here:

https://desktop.github.com/

Now if you use “git push azure master” and you don’t get the “Deployment Successful” message at the end, read the next section. Otherwise, congratulation! You did it! Your very first Nodejs webapp on Azure cloud is live!

What’s next? Go ahead and explore Azure portal. There are a ton of tools to test and monitor your web app. Try out Visual Studio Code (or WebMatrix) for further Nodejs development. It has built-in git functionalities, syntax highlighting and it automatically sets up debug server in one click.

COMMON DEPLOYMENT ISSUES

You deployed the app and it didn’t work? Well damn!

First, check if your entry point is “app.js” or “server.js” file or not. Trust me, Azure iisnode engine is dumb, it can only detect nodejs app if you name your entry point “app.js” or “server.js”.

Next, if you get a deployment error related to version (of either nodejs itself or one of the package), change the version in package.json to one of the supported versions on Azure server. In the case of nodejs version, you always get a list of available versions at the end of each deployment.

deployment
The server checks for entry file and node js version even in successful deployment

Now if you cannot push to server at all and you get git repo error, try the deployment steps again but this time,

  1. Clone a fork from the server first using
    git clone <giturlfromportal>
  2. Overwrite the content of that clone repo folder with the content of your Hello World. Leave .git folder in those folders alone.
  3. Type the commands to add remote to the clone repo, just in case
    git remote add azure <giturlfromportal>
  4. Follow the usual commit procedure and push to server
    git add .
    git commit -m "<comment>"
    git push azure master

Still need help? Leave a comment below.

EXTRA: MORE ABOUT AZURE CLOUD

When you push a new commit to the server repo, a software engine called “iisnode” commands the Nodejs instance available on the server to compile your source code. It first reads your package.json file and installs the specified dependencies. Then, it proceeds to your application entry point “app.js” file and starts a web app server on port 1337.

This mirrors the process of local testing; Azure cloud is your PC, iisnode engine is you, the developer, and package.json is the list of “npm install…” commands you type into the console. See? Nothing complicated about this.

How to create text blocks, overlays, split columns for blog posts in WordPress Free

If you’re running your WordPress blog on WordPress.com Premium or from a paid domain, then there should be a number of plug-ins available that can help spice up your posts. However, if you’re using WordPress.com Free like I’m using now, you’re out of luck. There’s no access to CSS file, no Javascript, no plug-in, and there are only a few HTML tags you can use in your posts.

Luckily, WordPress.com Free provides enough building blocks to assemble amazing UX designs if you know how. In this post, I’ll talk about some HTML workarounds I learned over the years while working on similarly restricted platforms *cough*vBB*cough*MediaWiki*cough* and share some limitations in WordPress’s HTML editor I encountered.

Okay, let’s start with a layout I have recently worked on. This design involves a number of features that cannot be done by the visual editor. These features are:

  1. Custom text blocks (HTML div tag)
  2. Overlay buttons (inline CSS position styling)
  3. Split columns (inline CSS position styling)

To implement them, you need to use the HTML editor.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure Whain reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

SWITCH TO HTML EDITOR

To enable HTML editor, see the support article below:

https://en.support.wordpress.com/editors/

Here’s an article on Code restrictions in WordPress.com, just so you know what can and cannot be done:

https://en.support.wordpress.com/code/#html-tags

What I’ll be looking at is CSS styling. Unfortunately, custom CSS is not a free feature, according to the support article here:

https://en.support.wordpress.com/custom-css/

Inline CSS, however, is supported and this is what I’ll be using in these designs.

CREATE AND STYLE DIVIDER BLOCKS

Dividers are fundamental HTML building blocks of modern webpages, to create a divider in HTML editor, simply type into the editor:

<div>My first invisible divider!</div>

Dividers can be used for applying CSS styling to texts, arrangement page elements and drawing text boxes, etc.

Invisible dividers are not very interesting, I’ll add a border, color the text and apply a background color…

<div style="border: 1px solid gray; color: blue; background: yellow;">A divider with gray border, blue text and yellow background.</div>
A divider with gray border, blue text and yellow background.

 

There are a few HTML tags you would find handy, they are <p>, <img>, <table>, <div> and <span>. The other HTML tags supported by WordPress such as <strong>, <hr> or <blockquote> are already included in the Visual editor as Bold, Horizontal line, Blockquote and so on. I recommend a read on the aforementioned HTML tags from W3Schools.com references here:

http://www.w3schools.com/tags/default.asp

For CSS styling, I find “background”, “color”, “border”, “width”, “height”, “font-size”, “font-family”, “margin”, “text-align”, “padding” the most useful properties to know. They’re frequently seen in formatting and precise positioning of elements in posts. There’re also “position” and “display” which are rather intermediate-advance CSS properties I’ll be discussing in the next sections. A complete reference of these CSS properties is also available on W3Schools.com:

http://www.w3schools.com/cssref/default.asp

CREATE OVERLAY EFFECT

A divider with CSS property “position:absolute” wrapped inside a parent divider with CSS property “position:relative” will create overlay effect. When used in combination with “left”, “right”, “top”, “bottom” or “margin” properties, the “position:absolute” element can be positioned precisely within the “position:relative” element.

Combining the knowledge of CSS and HTML I have showed in the last two sections, you can create any sort of layout imaginable. In the case of the layout I have at the start, each individual text block is created from the following code:

<div style="border: 1px solid lightgray;">
<div style="position: relative; display: table-cell;">
<div style="left: 55%; position: absolute; background: lightgray; border: 0 solid black; padding: 5px; text-align: center; width: 35%;">
            <a style="text-decoration: none;" href="#">
                <strong>
                    <span style="color: black;">Source</span>
                </strong>
            </a></div>
<h5 style="text-align: justify; padding-left: 30px;">Lorem ipsum</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            Duis aute irure Whain reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>
Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure Whain reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

 

There’s a thing with these half-visual, half-code platforms that prevents you from copypasting the above code into your HTML editor. The HTML editor does not ignore line break and white space. This means, careless indentation and line breaking can…break the layout’s spacing completely. The proper code to get the above result is actually this:

<div style="border: 1px solid lightgray;">
<div style="position: relative; display: table-cell;">
<div style="left: 55%; position: absolute; background: lightgray; border: 0 solid black; padding: 5px; text-align: center; width: 35%;"><a style="text-decoration: none;" href="#"><strong><span style="color: black;">Source</span></strong></a></div>
<h5 style="text-align: justify; padding-left: 30px;">Lorem ipsum</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure Whain reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>

SPLIT CONTENT INTO COLUMNS

If you notice the piece of code I’ve just showed, there’s a “display:table-cell” property in the “position:relative” divider. What this property does is causing the divider to behave like a table cell: equal height within the parent divider and vertical alignment top.

Setting two inner dividers with “display:table-cell” and setting the width of one divider to a desired percentage, I can create a simple split column design as follow:

<div style="border:1px solid black;display:table;width:60%;">
<div style="border:1px solid black;display:table-cell;width:50%;">First column</div><div style="border:1px solid black;display:table-cell;width:50%;">Second column.</div>
</div>
First column
Second column.

 

It’s by good convention that the parent divider should have “display:table” property and a specified “width”. Without “display:table” property, the inner cells will not resize according to the size of the table and without “width”, the table will autofit the content.

HOLY MOLY! BUGS IN THE EDITOR

To hell with good convention in the complete source code of the layout from the start…

<div style="border: 1px solid lightgray;">
<div style="position: relative; display: table-cell; width: 50%;">
<div style="left: 55%; position: absolute; background: lightgray; border: 0 solid black; padding: 5px; text-align: center; width: 35%;"><a style="text-decoration: none;" href="#"><strong><span style="color: black;">Source</span></strong></a></div>
<h5 style="text-align: justify; padding-left: 30px;">Lorem ipsum</h5>
<p style="text-align: justify; padding-left: 30px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure Whain reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

</div>
<div style="position: relative; display: table-cell;">
<div style="left: 55%; position: absolute; background: lightgray; border: 0 solid black; padding: 5px; text-align: center; width: 35%;"><a style="text-decoration: none;" href="#"><strong><span style="color: black;">Source</span></strong></a></div>
<h5 style="text-align: justify; padding-left: 30px;">Lorem ipsum</h5>
<p style="text-align: justify; padding-left: 30px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
</div>

 

I didn’t use “display:table” and “width” for the parent table. This is not proper, however, there’s a glaring flaw with WordPress’s HTML editor that forces me to keep my code as small as possible: The longer the code is, the longer it takes to auto-save a draft. And since these scripting elements get special treatments for security reasons, they have quite an overhead. Eventually, too much code will freeze the browser and chances are, you won’t be able to open the draft afterward.

Yes, that actually happened to me before.

Hence, I recommend saving your code frequently in Notepad just in case. If you need more reasons to save your code now, switching back and forth between Visual and HTML editors, publishing the page, and even pressing Preview button, can cause the parser to strip some of your incomplete/bugged codes, or parse all those special characters in your code into HTML Entities.

No, you cannot “Undo” that, the editor doesn’t allow it.

At this stage, some of you who’re familiar with HTML must also be wondering why I didn’t use <table> structure and style the <td> cell element with “position:relative” property. After all, HTML tables offer better browser compatibility than “display:table-cell” dividers.

To answer this, I must bring up yet another limitation of WordPress.com Free: HTML tables cannot be styled as extensively as with dividers. Its “border” property cannot be set to 0, its maximum “width” cannot be specified, even the “cell-padding” cannot be removed. I suspect they can only be changed in the theme CSS file, which I cannot access as a free user.

HTML tables in this Twenty Fifteen theme are narrower than dividers by a few pixels in desktop view.

Divider
My Table

A few pixels make a difference in the world of UX design.

Concurrent and continuous asynchronous WebClient requests in Windows Phone

Since the third week of April NaNoWriMo Camp, during which I disgracefully failed to reach half of my original word count yet another time, I have been wasting my time on the long overdue interest in ASP.NET web design and, in a tad bit of nostalgia, in Windows Phone app development. It’s all about the cloud and web technologies these days, I’m sure what I learned in the past two weeks would be put to good use in the future when I dwell more into sensors and networks development as professional.

In the meantime, I’ll write a bit about the love-hate relationship between the old WebClient class on the (relatively) new mobile platform.

The Task

So I had a web server, Azure cloud server, and a web app written in ASP.NET that can return a value in a range for each of the 15 industry sensors available. I were to write a Windows Phone app that can fetch data from multiple web sources concurrently and continuously. I would love to write the latest and the most sparkling platform–Windows 10 Universal App–but sadly, my jacked and hacked up laptop could not weather the newer emulators.

Hence, I resorted to the tried and tested WP 8.1 Silverlight platform for this experiment. I had experiences with WebClient and HttpRequest classes beforehand. I wrote a few apps that make use of TCP and UDP connections in Java, JavaScript, C# and VB. But, concurrency and continuity are unexpectedly tough for Windows Phone, especially now that they’re dropping synchronous for asynchronous cloud programming.

Concurrency & Continuity

I expected WebClient.DownloadString but what I got from the trimmed down .NET Core for Windows Phone was WebClient.DownloadStringAsync. The former method does not exist in the library at all. There is the option to fetch an add-on from NuGet or download external libraries that provide the synchronous method. Then again, I have a policy against adding more kilobytes to my project if I know there’s a way to solve the problem internally. Maybe, I’m just eccentric in this regard, so there’s that.

The implementation of DownloadStringAsync is quite simple on its own. It involves creating a WebClient object, attaching a handler for DownloadStringCompleted event and starting the asynchronous request to a URI (defined in control.path object in my case). Here’s the basic code:

WebClient wc = new WebClient();
public void Update()
 {
wc.CancelAsync();
 wc.DownloadStringCompleted += HttpCompleted;
 // Append salt to the uri to prevent response caching
 wc.DownloadStringAsync(new Uri(control.path));
}
 private void HttpCompleted(object sender, DownloadStringCompletedEventArgs e)
 {
 if (e.Error == null)
 {
 control.value = e.Result;
 }
 else
 {
 wc.CancelAsync();
 status.Text = "Failed to update: " + control.path;
 }
 }

The above code works for a single, maybe sparse requests, but not when I want a lot of them all at once. The solution off the top of my mind was to make a separate class called ProcessUpdater:

 public class ProcessUpdater
 {
 ItemViewModel control;
 WebClient wc = new WebClient();
 TextBlock status;
public ProcessUpdater(ItemViewModel item, TextBlock stat)
 {
 control = item; // getter
 status = stat;
}
// Update() and HttpCompleted() implementation here
}

which takes in a MVVC data model item and a TextBlock for displaying status. Invoking ProcessUpdater.Update() would start a http request to the address of the data model object corresponding to one of the 15 sensors passed to and stored within the updater object. This object-oriented setup can handle any number of sensors and the objects can be reused any number of time after initial construction. Putting them on their own worker thread, inside an infinite while loop, perhaps some Thread.sleep in between asyn requests, is the no-brainer way out of concurrency and continuity.

Not so fast!

Except that, it was a mobile phone I was talking about. Resources are scarce, and in Windows Phone, the OS will terminate any RAM- or CPU-hogging apps without warning. So there goes down the drain the idea of running multiple background worker threads. I tried that, somehow, I wasn’t able to make threading works for Windows Phone at all. Start a do-nothing thread, the app crashes. Call a sleep on the current thread, the app crashes. Use a while(true) loop anywhere, the app also crashes.

Instantly, I realized the phone must be treated like any other IC in embedded programming, even worse since I can get away with infinite loop and wait() function in many IC families. At first, I tried the recursive method and let the async handler callback Update() function in a loop. The problem is, I forgot how resource-intensive an ever-expanding recursion method is. That’s one lesson re-learned.

I scrambled over the internet and found DispatchTimer class for a periodic trigger. It’s scary since I have no idea to tell at compiled time, how long would it take to complete an async WebClient request. If the requests are taking longer than the interval at which they’re queued by DispatchTimer, I could potentially end up with a huge stack of unresolved requests. And that was exactly what happened when I set the timer at 1 second interval and lost internet connection. The request timeout errors were returned at a much longer interval than DispatchTimer and the app was terminated after a while.

Finally, I had to put a flag boolean in the updater to prevent further request creation until the previous request is completed. After some further optimizations, the app was able to handle 200 milliseconds interval for 2 hours, which is good enough for me.

#region Asychronous Webclient updater class
 public class ProcessUpdater
 {
 ItemViewModel control;
 WebClient wc = new WebClient();
 TextBlock status;
 private bool flag = false;

public ProcessUpdater(ItemViewModel item, TextBlock stat)
 {
 control = item; // getter
 status = stat;
// create 2s dispatch timer event for periodic data update
 DispatcherTimer Timer = new DispatcherTimer();
 Timer.Tick += new EventHandler(dispatcherTimer_Tick);
 Timer.Interval = TimeSpan.FromMilliseconds(500);
 Timer.Start();
}

 private void dispatcherTimer_Tick(object sender, EventArgs e)
 {
 if (flag == false)
 Update();
 }

public void Update()
 {
 if (control.visibility == Visibility.Visible)
 {
 flag = true;
 wc.CancelAsync();
 wc.DownloadStringCompleted += HttpCompleted;
 // Append salt to the uri to prevent response caching
 wc.DownloadStringAsync(new Uri(control.path + "?" + DateTime.Now.Ticks.ToString()));
 }
 }
 private void HttpCompleted(object sender, DownloadStringCompletedEventArgs e)
 {
 if (e.Error == null)
 {
 control.value = e.Result;
 if (status.Text == "Failed to update: " + control.path)
 status.Text = "";
 // Update();
 }
 else
 {
 wc.CancelAsync();
 status.Text = "Failed to update: " + control.path;
 //MessageBox.Show(control.path + " update failed: " + e.Error);
 }
flag = false;
}
}
 #endregion

There’s also further gating conditions that prevents request creation when the display UI elements are hidden by user. The source code to the project can be found here:

https://github.com/Fujihita/Industrial-Process-Monitor

Extra: Bypassing the cache

Notice the URI code

control.path + "?" + DateTime.Now.Ticks.ToString()

I encountered one last problem with continuous web requests using WebClient class. Even though the server response had changed, and I could see from my browser that the data had changed, the response the app was picking up did not. It was cached. Subsequent requests to the same source were not sent to the live server, the internal WebClient class would return the cached content to save bandwidth.

After a quick search, I found the quick solution from StackOverflow. All I need to do is to salt the URI with a randomized QueryString which would cause the URI to change every time and bypass the cache policy.

Cool hack indeed!

Excel spreadsheet for Game Masters

In this blog post, I’ll introduce the Excel spreadsheet I created for my latest Assassin Game: Chocolate of Vile.

I designed Chocolate of Vile game module with flexibility in mind. So I ditched the Mastersheet template (by Geoff@mangafox) I had always been using and wrote a new one from the ground up to please the perfectionist inside me. While the new spreadsheet is designed for party Mafia games, I believe it can come into handy for D&D Dungeon Masters or any RPG pencil-and-paper games hosts as well.

Before I begin, here’s the download link for the Excel spreadsheet I created:

http://1drv.ms/1KDn828

You’ll need to enable macros to view the sample codes but if you don’t trust macro-enabled spreadsheets from the internet (and damn you should not), you can just disable macros to get the base template and add your own VBA scripts later.

There are five worksheets in this spreadsheet: Main, Queries, Inventory, Abilities and Roles and Core library. Each section of this blog post will cover one of these worksheets; its purposes and tips on how to adapt it to your game

Core library

The Core library defines the abilities, items and objects you wish to use in your game module. The primary fields in Core library tables are quite self-explanatory:

Ability Description Class Type
Trickster Copy the property of a piece of chocolate in your inventory and paste it onto three other pieces. The targeted chocolates can be in anyone’s inventory. Ability Active

There are extension fields for status-inducing abilities, ability duration and additional parameters. A typical assassin game won’t last more than two weeks so the upper limit of 99 days is used.

Macros referencing the core library will support up to 200 rows (198 actually, minus the headers). If you use insert row operation native to Excel, all Excel functions will automatically update the limit accordingly. However, some VBA macros will require manual updating.

In general, the data contained in the core library won’t change in run-time, they remain constant and you don’t have to worry about them unless you’re doing live updates to patch up an error.

Abilities and Roles

When you first create a game module, you’ll need to design some roles. To create a role, simply fill in the ROLES TABLE in this worksheet. The table support secondary factions and personal goals as well as a secondary field you can use to customize the rolesheet.

Role Gender Affiliation Faction Personal goal
Lance Male Student Council The Secret Lovers Identify the other two powers

In Chocolate of Vile AG, this secondary field is “Gender” which dictates which of the two stock images the players will get from the little Gender -> Image table below. I’ll go deeper into rolesheet generation in Queries section.

Gender Image
Female https://i.imgur.com/x7feznD.png

Assigning an ability to a role is very simple. Once you have created an ability in the core library, you can use the ABILITIES table in this sheet to assign any number of abilities to any number of roles. As you might have noticed, there’s almost no automation in this sheet. This is because I leave the possibility of multiple players having same roles as well as run-time ability gaining open.

ID Ability Owner Role
1 Investigator Lance
2 Gentle Hand Miyuki

You can add abilities on “Owner” basis instead of “Role”. It works for any combination as you please.

ID Ability Owner Role
1 Investigator FreakY
2 Gentle Hand Tetisheri
3 Gentle Hand FreakY Maria
4 Gentle Hand Miyuki

The last table in this sheet is ONGOING STATUSES table. This table keeps track of statuses and duration of the statuses on “Player” basis. Originally, I planned to write a VBA script that will resolve the statuses everyday (removing expired statuses and applying the effect of each status) but I never really feel the need due to the lack of players in Chocolate of Vile.

But if you ever feel the need to design one, it’ll be best to resolve all your statuses at the same time in the ability chain. I’ll talk about ability chain in Main section.

Inventory

Similar to Abilities and Roles sheet, Inventory contains a master INVENTORY table. In normal situations, you won’t need a separate inventory table. If you’re creating Items in the Core library, you can treat the items in the same manner as normal Abilities.

In Chocolate of Vile, the inventory system needs to keep track of the displayed information and the hidden information. If you are going to adapt this into a normal fantasy game, you can use the inventory system here for Unidentified objects, Rarity tagging, Soul binding mechanics and so on.

Conditional formatting automatically blacks out the deleted items (their owner is assigned Null value) and it also highlights items that have different Owner value from Tag value. I also set up a RANDOMIZED EFFECTS table to quickly assign new items with randomized effect from the effect list.

Finally, the DELETE & CREATE LOG is also available for day-by-day tracking in case you need to review for, say, an ability that revert all actions by a selected player since the start of game. Yes, I had one such ability in one of my previous AGs: The Butterfly Effect. This log can be updated manually or automatically with macro. In this case, the Deleted items are tracked by macro  and I keep track of the Created items.

Day ID Item Action
1 4 Chocolate (alexfilia) Deleted
1 25 Chocolate (alexfilia) Created
1 26 Chocolate (alexfilia) Created
1 27 Chocolate (alexfilia) Created
1 28 Chocolate (alexfilia) Created
2 2 Chocolate (DarkLucy) Deleted

Main

All the aforementioned sheets are used in module design. They won’t be touched, except for the Inventory page, while the game is being hosted. For daily game update, you will use “Main” worksheet.

You may have noticed that I’m using yellow background to highlight the headers of fields that should be updated manually (and carefully, I kid you not). The “Main” sheet has a lot of those yellow fields compared to other sheets. And for good reason it is.

Everyday, your task as the GM is to collect player’s votes and actions and add the data to this worksheet. Yes, you only ever need to update this one sheet and press the buttons in MACROS area in the top-down order. The order is decided by you in the design stage and this order is usually known as “Ability chain” or “Action tree”.

So how do you get these buttons? Well, you write them in VBA. Here’s the link to a VBA tutorial:

http://www.excel-easy.com/vba.html

You will need to write VBA scripts for every ability you add to the Core library. There are a few specifications you will use to code these ability modules:

  • Input: The script should take the parameters from ACTIONS table and look up which entries are calling its ability.
  • Input: The script should cross-check with any other restrictions, bonuses or applicable parameters in the “current session database” (a term I will use to collectively refer to INVENTORY, ABILITIES, ONGOING STATUSES and ROLE ASSIGNMENT tables)
  • Output: The script should update the database automatically and produce debug messages if necessary.
  • Output: The script should return a “Yes”  to the “Checked?” column in the rows it have already finished tabulating.

I personally prefer leaving the input data validation part for conditional formatting and manual inspection.

For example,

The “Abl_Eating_Click” subroutine for Eating button takes in the following ACTIONS table:

Day Player Action Object Target Params Checked?
1 alexfilia Eating 4
1 Hoffman274 Gifting 17 FreakY tag, property
1 Tetisheri Eating 6 Yes
1 alexfilia Achievement Sweet tooth (2)
1 alexfilia Idol’s Charm 2x Sweet tooth
2 FreakY Trickster 15 6 Yes
2 FreakY Trickster 15 17 Yes

When I input Tetisheri’s Eating entry on day 1. The conditional formatting is showing red object, meaning, the targeted object is currently not in Tetisheri’s inventory. Hence, the eating action is invalid. I marked it with a “Yes” in the “Checked?” column to prevent its execution. The same method works for Stun and Void abilities. You simply put a check there to prevent the entry from being processed down the Ability chain.

The macro will then filter the list by day. I’ll input 1 in the “Enter current day” prompt to process day 1 data. The table then would be:

Day Player Action Object Target Params Checked?
1 alexfilia Eating 4
1 Hoffman274 Gifting 17 FreakY tag, property
1 Tetisheri Eating 6 Yes
1 alexfilia Achievement Sweet tooth (2)
1 alexfilia Idol’s Charm 2x Sweet tooth

“Abl_Eating_Click” will now pass any entries in the above able that have “Eating” in “Action” column and nothing in the “Checked?” column to “Abl_Eating_Module”. The entry being passed will be:

Day Player Action Object Target Params Checked?
1 alexfilia Eating 4

“Abl_Eating_Module” takes “player = alexfilia”, “target = 4”, “day = 1” parameters. It will:

  1. Automatically switches to Inventory sheet
  2. Updates the “Owner” field of item with ID 4 to “Null” value.
  3. Tracks the deletion by adding a “Deleted” entry to the DELETE & CREATE LOG table.
  4. Then, it grabs the value in “Property” field and updates the ONGOING STATUS table in Abilities & Roles sheet with a new entry, referencing the “Duration” field in Core library table and “day = 1” parameter from before to generate Start date and End date.
  5. Finally, it exits and lets “Abl_Eating_Click” subroutine adds a check to the processed entry in the action table and passes it the next valid entry.

I only write VBA macros for abilities that are used frequently or require too many calculation steps but you can theoretically automatize everything in your game. Your daily task  as a GM would be reduced to inputting the data into this one sheet, clicking the buttons and writing the DP. This minimizes the chance of tabulation errors as a bonus.

And of course, you have all the necessary parameters to design back-tracking abilities, complex achievement systems and even more.

Queries

Fantastic! Now you have set up a database for your game and you have written macros that can do the updating for you. You’ll also need to generate the properly formatted report forms and rolesheets from the database to post in forums/blogs/websites/etc. This is the primary purpose of Queries sheet.

Designing the query forms will use more native Excel formula than VBA but VBA is a fine solution too. For the Excel formula approach, I use the methods described in this excellent blog post for index-match array querying:

http://www.get-digital-help.com/2009/10/25/how-to-return-multiple-values-using-vlookup-in-excel/

One limitation of this approach is that you’ll have an upper limit of how many items you can query at once before the list becomes too long for quick copying. The solution is dynamically extending the range of items being queried using “Page” value. A single page value is used for statuses, abilities and items pages.

VBA approach wouldn’t have such limitations so if you want to invest your efforts in long-term direction, go for VBA. Find below a sample status report query generated for player alexfilia using QUERY FORM. The code generated is designed to be compatible with EGScan forums (vBulletin).

Susan
alexfilia (player)

You need to consume 5 more chocolates before end game;

You have the following statuses;

Status: Lust

A random piece of chocolate from your inventory is transferred to the source player of this status everyday.

You have the following abilities;

Active: Suggestion

Change a targeted player’s vote to match your own

Passive: Idol’s Charm

Double the number of chocolate received from achievements.

 

You have the following items in your inventory;

Item #27: Chocolate (alexfilia)

This chocolate is poisoned with the devilish of toxin. Tasteless, oderless and colorless, Vile toxin ensures a painful and insufferable death to anyone eating this.

Item #38: Chocolate (alexfilia)

This chocolate has a strong herbal scent and the green hue of leaf. Nullifies the effect of another piece of chocolate being eaten in the same day.

Item #51: Chocolate (#Unknown)

This chocolate has a peculiar taste. One bite of this upsets the stomach so much that attending lectures won’t be possible for a while. Nullifies the eater’s vote for a day.

Item #52: Chocolate (alexfilia)

Loosen the tongue of even the secretive of men. This chocolate forces the eater to answer anything he or she was asked in the discussion thread truthfully for a day. Increases the number of chocolate the eater has to eat before end game by three for every lie detected.

Item #54: Chocolate (alexfilia)

This chocolate has a strong herbal scent and the green hue of leaf. Nullifies the effect of another piece of chocolate being eaten in the same day.

Excel macro: File renamer

A few months ago, the boss at my mom’s workplace tasked her team with renaming the generically-named files from the scanner. It was a no-brainer except that there were thousands of those contract scans and they had 2 weeks to complete the task.

When she came home lamenting how inefficient a few members of her team were and after I had listened to her complaints for an hour and a half, I offered her a solution to improve the efficiency. And so I wrote a simple spreadsheet macro using Visual Basic for Applications (VBA) to cut down on the number of button presses she had to do in a day.

REQUIREMENTS AND CONSTRAINTS

The steps were relatively straightforward.

  1. Select an unchecked file from a scan folder
  2. Open it in a pdf reader
  3. Read the contract number in the scan
  4. Go back to the folder again, select rename that particular file
  5. Type in the corresponding name and save it
  6. Repeat from step 1 for n times

Certainly, it wasn’t the most efficient approach to the problem. This process is very prone to human error and it involves opening and switching a lot of windows and moving the mouse around, a lot!

DESIGN

So I spent half an hour of my weekends (and life) devising a programming approach which streamlined the process to:

  1. Press Search and load the entire scan folder into the spreadsheet
  2. Click on the direct link in the filename to open the file in pdf reader
  3. Read the contract number in the scan
  4. Go back to the spreadsheet and press the right arrow key to reach the rename field
  5. Type in the corresponding name
  6. Repeat from step 2 for n times
  7. Press Rename to rename everything in one go

Originally, when I designed program, I also thought of using the tool myself too so I keep it rather general. Since I don’t know the condition of the scans and doing complete Optical character recognition (OCR) algorithm is a bit of a bother, plus, I don’t want to autotomize the entire thing and put my mom out of job.

That would be bad, really bad.
I refrained from doing so.

I didn’t intend to spend too much time on the interface either so I chose Excel and VBA; a strong combo I know to have worked wonderfully in the past for data management tasks at minimal investment effort; as the programming platform.

IMPLEMENTATION

It took me a little less than an hour to go from interface design to code implementation.

The spreadsheet contains 3 columns: Current filename (A), Rename into (B) and Extension generator /w drag-copy formula (C). The drag-copy formula simply concatenate the new filename without extension in column B and the extension from the old filename.

This feature was meant to save my mom the trouble typing down the file extensions and it was done with the follow Excel formula:

=CONCATENATE($B2, ".", RIGHT($A2, LEN($A2) - FIND(".", $A2)))

For VBA macro functions, the spreadsheet has 2 buttons: Search (CommandButton1) and Rename (CommandButton2) and a static field to display the currently selected Directory. The VBA code is as follow

Private Sub CommandButton1_Click() '<<< Search button
On Error GoTo Error_handler:
 
    GetFileNames
         
Exit Sub
Error_handler:
MsgBox "An error has occured!"
 
End Sub
 
Sub GetFileNames()
Dim xRow As Long
Dim xDirect$, xFname$, InitialFoldr$
InitialFoldr$ = "C:\" '<<< Startup folder to begin searching from
 
With Application.FileDialog(msoFileDialogFolderPicker)
        .InitialFileName = Application.DefaultFilePath & "\"
        .Title = "Please select a folder to list Files from"
        .InitialFileName = InitialFoldr$
        .Show
     
    If .SelectedItems.Count <> 0 Then
     
    xDirect$ = .SelectedItems(1) & "\"
    xFname$ = dir(xDirect$, 7)
     
        Do While (Cells(2, 1).Offset(xRow) <> "")
            Cells(2, 1).Offset(xRow) = ""
            Cells(2, 2).Offset(xRow) = ""
            xRow = xRow + 1
        Loop
         
        xRow = 0
 
        Do While xFname$ <> ""
            Cells(2, 1).Offset(xRow) = xFname$
            ActiveSheet.Hyperlinks.Add Cells(2, 1).Offset(xRow), xDirect$ + xFname$ '<<< Add hyperlink
            xRow = xRow + 1
            xFname$ = dir
        Loop
         
        MsgBox "Search completed!"
        Cells(7, 5) = xDirect$ '<<< Display the current directory path at cell E7
    End If
End With
End Sub
 
Private Sub CommandButton2_Click() '<<< Rename button
On Error GoTo Error_handler:
 
    Dim Cell As Range
    Dim index As Integer
    index = 0
     
    Do While Cells(2, 1).Offset(index) <> ""
        If ((Cells(2, 2).Offset(index) <> Cells(2, 1).Offset(index)) And (Cells(2, 2).Offset(index) <> "")) Then
            Name Cells(7, 5) & Cells(2, 1).Offset(index) As Cells(7, 5) & Cells(2, 2).Offset(index)
            Cells(2, 1).Offset(index) = Cells(2, 2).Offset(index)
            ActiveSheet.Hyperlinks.Add Cells(2, 1).Offset(index), Cells(7, 5) & Cells(2, 2).Offset(index)
        End If
        index = index + 1
    Loop
     
        MsgBox "All files have been renamed!"
         
Exit Sub
Error_handler:
MsgBox "An error has occured!"
End Sub

With very basic error handlers.

A few other built-in Excel features were implemented on top of the macro. The columns have data filter enabled and can be sorted in alphabet order. Conditional formatting was used to highlight duplicate new filenames.

Other possibilities include data validation to rule out invalid file names (special symbols and so on) and freezing the first row to make it easier to crosscheck the filenames (although there are only 3 columns, not that many, really).

COMMENTS

Overall, I think this is a very interesting small project I’d like to share. It’s practical alright, my mom was able to complete her two-week task in 4 days and spent the rest of her time on facebook. She was lovey dovey for a few days and then she started lamenting on how bored she was at work now that she had nothing better to do than pretending she was still doing the task.

You know, easy money for facebooking the entire week. Too bad, they didn’t have bonuses for early task completion or extra works. That’s the reality of working in a government-owned monopoly. You work for the same monthly pay whether you work to the maximum or barely skirting the minimum cut-off.

That asides, considering the use of built-in Excel features for added values, the mini-project showed what the engineering process is truly about: it is about “the integration and efficient use of existing tool to new applications”.

Or, as my old professor would put it: “Don’t reinvent the wheel”.

Oh yeah, this tool is pretty useful for managing my ever expansive music library, picture library, and e-book library too. It’s definitely my favorite mini-app.

DOWNLOAD: http://1drv.ms/1gE1NYk

Loading XAML visual elements in runtime and late binding

IMPORTANT!
The content below is a documentation of a Windows Phone 8.1 Silverlight app. If you are using other platforms, some resources used here might not be available. Refer to MSDN for the equivalent resources in your platform

One of the projects I’m working on at the moment is a software solution that enables smartphones to operate as remote controller and motion-capturing device. It was supposed to be our team’s submission to Microsoft’s Imagine Cup competition in innovation category. Unfortunately, it was struck down in the prelims and development was shifted to Android OS.

As persistent as I can be, I insisted on keeping development for Windows Phone OS alive. The latest implementation is a self-updater which allows the app to update its interface according to the working application on a remote server.

The idea is simple:

  1. Save a visual element to XML file
  2. Reconstruct the same element as XAML from XML file
  3. Perform late binding to codebehind

EXPORT A VISUAL ELEMENT TO XML

The visual element is exported to XML files in two parts: the UIElement object and binding parameters. For the UIElement object, I convert the XAML to plain text, which can later be read by XamlReader.Load and reconstruct into FrameworkElement objects.

Code binding was a bit more complicated as XamlReader does not allow direct binding in XAML scripts. That needs to be done manually in the codebehind. Sadly, I have no idea how to load codebehind in runtime and since each class comes with its own set of events and properties, a generic object class cannot be used here without going unsafe. It would be disastrous to address a non-existent TextBlock.Text property of a Button-class object! This just shows just how late binding works: assume the class of an unknown object to be one of the expected classes and to have expected properties of the said class.

Serialization classes are useful, they recreate a wrapper class object I can address easily. Of course, I can alternatively address each XML tag using XElement class‘s methods.

I created a wrapper class called “XmlData”, which is basically a struct containing the corresponding descriptor parameters in the XML file: Name, Type, Handler within its sub-class XmlBindingData (the main XmlData class can also contain page-level data for other purposes such as changing the Title to the loaded XML’s ModuleName).

/*Custom wrapper class for serialization
This class must exist in Serializer and Deserializer projects.
@author: Fujihita fujihita.wordpress.com
@platform: Any*/

    public class XmlData
    {
        public byte[] XAML {get; set;}
        public string ModuleName {get; set;}
        public List<XmlBindingData> data {get; set;}
    }
    public class XmlBindingData
    {
        public string name { get; set; }
        public string type { get; set; }
        public string handler { get; set; }
    }

I resorted to Windows Form Application for serialized XML generation. I’d have to say the Stream and XmlWriter classes are a mess from one platform to another and I won’t be posting the full source code for getting user input.

/*XmlSerialize class
This class contains static method to export to XML format a XmlData object
which contains XAML and control data defined by user input
@author: Fujihita, fujihita.wordpress.com
@platform: Windows Form Application*/

public class XmlSerialize()
{
        public static void Serialize(XmlData myObject, string path)
        {
            // Insert code to set properties and fields of the object.
            XmlSerializer mySerializer = new XmlSerializer(typeof(XmlData));
            // To write to a file, create a writer object.
            FileStream myWriter = new FileStream(path, FileMode.OpenOrCreate);
            mySerializer.Serialize(myWriter, myObject);
            myWriter.Close();
        }
}

It should be noted, however, that the XAML string is now stored as byte array using UTF8 Encoding.

RECONSTRUCT A VISUAL ELEMENT

For illustration purposes, I’ll be using the serializer and generates the following Sample.xml file

<?xml version="1.0"?>
<XmlData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <XAML>PFN0YWNrUGFuZWwgeG1sbnM9Imh0dHA6Ly9zY2hlbWFzLm1pY3Jvc29mdC5jb20vd2luZngvMjAwNi94YW1sL3ByZXNlbnRhdGlvbiIgeG1sbnM6eD0iaHR0cDovL3NjaGVtYXMubWljcm9zb2Z0LmNvbS93aW5meC8yMDA2L3hhbWwiPg0KICA8VGV4dEJsb2NrIHg6TmFtZT0iVGV4dDEiIEhvcml6b250YWxBbGlnbm1lbnQ9IkNlbnRlciIgVGV4dD0iIj48L1RleHRCbG9jaz4NCiAgPFRleHRCbG9jayB4Ok5hbWU9IlRleHQyIiBIb3Jpem9udGFsQWxpZ25tZW50PSJDZW50ZXIiIE1hcmdpbj0iMCwyMCwwLDIwIiBUZXh0PSIiPjwvVGV4dEJsb2NrPg0KICA8QnV0dG9uIENvbnRlbnQ9IkJ1dHRvbjEiIHg6TmFtZT0id19idG4iIEhvcml6b250YWxBbGlnbm1lbnQ9IkNlbnRlciIgTWFyZ2luPSIxMzcsMjAiIEhlaWdodD0iMTAwIiBXaWR0aD0iMTgyIiBUYWc9IjB4MTEiLz4NCiAgPEJ1dHRvbiBDb250ZW50PSJCdXR0b24yIiB4Ok5hbWU9ImVfYnRuIiBIb3Jpem9udGFsQWxpZ25tZW50PSJDZW50ZXIiIE1hcmdpbj0iMTM1LDIwIiBIZWlnaHQ9IjEwMCIgV2lkdGg9IjE4NiIgVGFnPSIweDFFIi8+DQo8L1N0YWNrUGFuZWw+</XAML>
  <ModuleName>Test app</ModuleName>
  <data>
    <XmlBindingData>
      <name>e_btn</name>
      <type>Button</type>
      <handler>ScanCode</handler>
    </XmlBindingData>
    <XmlBindingData>
      <name>e_btn</name>
      <type>Button</type>
      <handler>ScanCode</handler>
    </XmlBindingData>
  </data>
</XmlData>

The other half of the XmlSerialize class in the Windows Phone app contains Deserializer method defined as follow:

/*XmlSerialize class
This class contains a static method to import a XML file from path
and return xmlData class to be used in reconstruction
@author: Fujihita, fujihita.wordpress.com
@platform: Windows Phone 8.1 Silverlight*/

public class XmlSerialize()
{
         public static XmlData Deserialize()
        {
            XmlData myObject;
            // Construct an instance of the XmlSerializer with the type
            // of object that is being deserialized.
            XmlSerializer mySerializer =
            new XmlSerializer(typeof(XmlData));
            // To read the file, create a FileStream.
            FileStream myFileStream =
            new FileStream("XML/Sample.xml", FileMode.Open);
            // Call the Deserialize method and cast to the object type.
            myObject = (XmlData)mySerializer.Deserialize(myFileStream);
            return myObject;
        }
}

The reconstruction code is quite simple. I only need to call XamlReader, feed the XAML string to it in order to get the collection of visual elements. Then, I can add the reconstructed elements to a StackPanel named “ContentPanel” which exists in all default XAML pages. This code snippet can be inserted directly into a page’s constructor or wherever I want to load the elements:

//Read new visual content from plain text
            XmlData data = XmlSerialize.Deserialize();
            FrameworkElement NewContent = (FrameworkElement)XamlReader.Load(Encoding.UTF8.GetString(data.XAML, 0, data.XAML.Length));
//Add visual elements to current page's ContentPanel
            ContentPanel.Children.Clear();
            ContentPanel.Children.Add(newContent as UIElement); 

This yields the interface, buttons and all. Except that, the controls don’t work without handlers.

CODE BINDING

Take note how I first cast the visual elements returned by XamlReader to FrameworkElement class. While it adds another layer of type casting, the FrameworkElement.FindName method helps greatly in code binding. I only need to know the names of the object, which can be assigned directly in XAML script since XamlReader permits this, to address the right element. Tag property of the element can optionally be used to store data.

Now that I also have Type, Name and Handler descriptor loaded into xmlData collection, I only need a custom class library containing every conceivable event handlers for the project which take the descriptors and assign each object to the correct handler accordingly:

/*xamlBinder class library (.dll)
This class library contains logic routing, binding method
and all event handlers required by the project
This is snippet a minimal example
@author: Fujihita, fujihita.wordpress.com
@platform: Windows Phone 8.1 Silverlight*/

public class xamlBinder
{  
        public void assignHandler(string name, string type, string handler, FrameworkElement content)
        {
            switch (type)
            {
                case "Button":
                {
                    addInputBtn((Button)content.FindName(name), handler);
                    break;
                }
                case "CheckBox":
                {
                    break;
                }
                case "Message":
                {
                    break;
                }
            }
        }

        private void addInputBtn(Button targetButton, string handler)
        {
            switch (handler)
            {
                case "ScanCode":
                    {
                        targetButton.Click += new targetButton.Click += new RoutedEventHandler(CustomEventHandler)
                        break;
                    }
                case "LeftMouseClick":
                    {
                        // binding code here
                        break;
                    }
                case "RightMouseClick":
                    {
                        // binding code here
                        break;
                    }
                default:
                    {
                        // binding code here
                        break;
                    }
            }
        }

        public void CustomEventHandler(object sender, RoutedEventArgs e)
        {
             // The handler toggles the button's text with the text stored in Tag property. 
             Button btn = (Button)sender;
             string temp = (string)btn.Content;
             btn.Content = btn.Tag;
             btn.Tag = temp;
        }
}

Finally, add this snippet to wherever you loaded the visual elements in order to bind the elements to handlers in class library.

            xamlBinder myBinder = new xamlBinder();
            foreach (XmlBindingData xbd in data.data)
            {
                myBinder.assignHandler(xbd.name, xbd.type, xbd.handler, newContent);
            }

APPENDIX
For those who have difficulties writing a custom serializer, the second approach as mentioned in the first section might become handy. I have the following method added to wherever I want to load the elements (i.e. MainPage.xaml.cs file, MainPage constructor):

/*XML importer method
This method accesses XML file from path
and extracts values from XML Tags
@author Fujihita fujihita.wordpress.com
@platform Windows Phone 8.1 Silverlight*/

private void xmlLoader()
{
            Uri uri = new Uri("XML/Sample2.xml", UriKind.Relative);
            StreamResourceInfo strm = Application.GetResourceStream(uri);
            XElement x = XElement.Load(strm.Stream);

            xamlBinder myBinder = new xamlBinder();
            string Name, Type, Handler;

            //Process Info &amp;amp;amp;gt; ModuleName tag (unique instance)
            string ModuleName = x.Element("ModuleName").Value;
            
            //Process XAML
            string XAMLString = x.Element("XAML").Value;
            FrameworkElement NewContent = (FrameworkElement)XamlReader.Load(XAMLString);
            //Add visual elements to current page's ContentPanel
            ContentPanel.Children.Clear();
            ContentPanel.Children.Add(newContent as UIElement);

            //Process Code &amp;amp;amp;gt; Object tags (multiple instances)
            IEnumerable elList1 = (from el in x.Elements("data").Elements("XmlBindingData") select el);
            foreach (XElement el in elList1)
            {
                Name = el.Element("name").Value
                Type = el.Element("type").Value
                Handler = el.Element("handler").Value;

                myBinder.assignHandler(Name, Type, Handler, newContent);
            }
}

This loads a XML file from path and calls the class library instantly using xElement class methods. xamlBinder class library is still needed and the XML file is stored plainly without serialization or custom wrapper class. Find below the file Sample2.xml:

<?xml version="1.0" encoding="utf-8" ?>
<XmlData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <TextBlock x:Name="Text1" HorizontalAlignment="Center" Text=""></TextBlock>
  <TextBlock x:Name="Text2" HorizontalAlignment="Center" Margin="0,20,0,20" Text=""></TextBlock>
  <Button Content="Button1" x:Name="w_btn" HorizontalAlignment="Center" Margin="137,20" Height="100" Width="182" Tag="0x11"/>
  <Button Content="Button2" x:Name="e_btn" HorizontalAlignment="Center" Margin="135,20" Height="100" Width="186" Tag="0x1E"/>
</StackPanel>
</XAML>
  <ModuleName>Test app</ModuleName>
  <data>
    <XmlBindingData>
      <name>e_btn</name>
      <type>Button</type>
      <handler>ScanCode</handler>
    </XmlBindingData>
    <XmlBindingData>
      <name>e_btn</name>
      <type>Button</type>
      <handler>ScanCode</handler>
    </XmlBindingData>
  </data>
</XmlData>

Which is also the equivalent of Sample.xml from before. This file must be written manually.