In my recent project, I work with a lot of text that get’s its value from user input. To enable the best possible experience for my users, I choose the InputScope Text on all TextBoxes, because it provides the word suggestions while writing.
The Text will be submitted to a webserver via a REST API. And now the problem starts. The emojis that are part of the Windows Phone OS are not supported by the API and the webserver.
Of course, I was immediately looking for a way to get around this. I thought this might be helpful for some of you, so I am sharing two little helper methods for detecting and removing the emojis .
After publishing the first version of this post, I got some feedback that made me investigating a bit more on this topic. The emojis are so called unicode symbols, and thanks to the Unicode behind it, they are compatible with all platforms that have the matching Unicode list implemented.
Windows Phone has a subset of all available Unicode characters in the OS keyboard, coming from different ranges in the Unicode characters charts. Like we have to do sometimes, we have to maintain our own list to make sure that all emojis are covered by our app in this case and update our code if needed.
Update 2: I am using this methods in a real world app. Although the underlying Unicode can be used, often normal text will be read as emoji. That’s why I reverted back to my initial version with the emojis in it. I never had any problems with that.
Now let’s have a look at the code I am using. First is my detecting method, that returns a bool after checking the text (input):
public static bool HasUnsoppertedCharacter(string text)
{
string pattern = @"[{allemojisshere}]";
Regex RegexEmojisKeyboard = new Regex(pattern);
bool booleanreturnvalue = false;
if (RegexEmojisKeyboard.IsMatch(text))
{
booleanreturnvalue = true;
}
else if (!RegexEmojisKeyboard.IsMatch(text))
{
booleanreturnvalue = false;
}
return booleanreturnvalue;
}
As you can see, I declared a character range with all emojis. If one or more emojis is found, the bool will always return true. This can be used to display a MessageBox for example while the user is typing.
The second method removes the emojis from any text that is passed as input string.
public static string RemovedUnSoppertedCharacterString(string text)
{
string result = string.Empty;
string cleanedResult = string.Empty;
string pattern = @"[{allemojishere}]";
MatchCollection matches = Regex.Matches(text, pattern);
foreach (Match match in matches)
{
result = Regex.Replace(text, pattern, string.Empty);
cleanedResult = Regex.Replace(result, " ", " ");
}
return cleanedResult;
}
Also here I am using the character range with all emojis . The method writes all occurrences of emojis into a MatchCollection for Regex. I iterate trough this collection to remove all of them. The Method also checks the string for double spaces in the text and makes it a single space, as this happens while removing the emojis .
User Experience hint:
use this method with care, as it could be seen as a data loss from your users. I am using the first method to display a MessageBox to the user that emojis are not supported and that they will be removed, which I am doing with the second method. This way, my users are informed and they don’t need to do anything to correct that.
You might have noticed that there is a placeholder “{allemojishere}” in the code above. WordPress or the code plugin I use aren’t supporting the Emoticons in code, that’s why I attached my helper class.
As always, I hope this will be helpful for some of you.
In one of my recent projects, I needed to update the live tile of the app via a background agent with data from a WordPress based web site. I did what I always do when implementing a feature I never used before: researching.
I found tons of example on how to update the live tile periodically, but non of them told me how I can use the data from the web site or where I need to put it in.
In the end, it was Jay Bennet, developer of the fantatsic WPcentral Windows Phone app, who gave me the last hint I needed – where do I start the request for the data I need. Thanks to him for that!
Ok, but let’s start in the beginning. When it comes to web based services, you first need a class (or ViewModel) that can hold your data you receive from your service. I explained that already pretty well here. No matter if you are running your request within your app project or in a PCL, it pretty much always works like this.
After stripping of our class out of the JSON string, we are now able to create our request as well as our Background Agent.
The first thing you need to do is to add a Windows Phone Scheduled Task Agent. Create a new project within your app and choose the project type mentioned before. Then, in your main project, add it as a reference (right click on References/Add Reference/Solution => select your background agent project there. That’s it.
No go to your ‘ScheduledAgent.cs’ file and open it. You will find this code in there:
protected override void OnInvoke(ScheduledTask task)
{
//TODO: Add code to perform your task in background
NotifyComplete();
}
And thanks to Jay, I know that this is where all the action (not only updating the tile like in all samples I found) happens. This may sound very trivial for those of you who have experience with that, but if you’re new to it, it may hold you back a bit. However, there are a few points you’ll need to take care of:
you only have 25 seconds to perform all action here
your task will run every 30 minutes, no way to change that
scheduled tasks need to be restarted within 14 days after the current start
Battery saver and the OS/the user can deactivate the agent
there is a long list of what you are not able to do in here (check MSDN)
all action needs to be finished before NotifyComplete() is called
Based on this information, I created my task as following:
protected async override void OnInvoke(ScheduledTask task)
{
//performing an async request to get the JSON data string
PostsFetcher postfetcher = new PostsFetcher();
Constants.latestPostsForLiveTileFromWordPressDotComResultString = await postfetcher.GetLatestPostFromWordPressDotComForLiveTileOnPhone();
//deserialize all data
var lifetileBaseData = JsonConvert.DeserializeObject<json_data_class_Posts.Posts>(Constants.latestPostsForLiveTileFromWordPressDotComResultString);
Deployment.Current.Dispatcher.BeginInvoke(() =>
{
//using Telerik's LiveTileHelper here
Uri launchUri = new Uri("Mainpage.xaml", UriKind.Relative);
RadFlipTileData fliptileData = new RadFlipTileData();
fliptileData.BackContent = lifetileBaseData.posts[0].title;
fliptileData.WideBackContent = lifetileBaseData.posts[0].title;
fliptileData.BackTitle = string.Format("{0} {1}", DateTime.Now.ToShortDateString(), DateTime.Now.ToShortTimeString());
fliptileData.Title = "LiveTileTitle";
if (lifetileBaseData.posts[0].featured_image != string.Empty)
{
fliptileData.BackgroundImage = new Uri(lifetileBaseData.posts[0].featured_image, UriKind.RelativeOrAbsolute);
fliptileData.WideBackgroundImage = new Uri(lifetileBaseData.posts[0].featured_image, UriKind.RelativeOrAbsolute);
fliptileData.BackBackgroundImage = new Uri("Images/BackBackground.png", UriKind.RelativeOrAbsolute);
fliptileData.WideBackBackgroundImage = new Uri("Images/WideBackBackground.png", UriKind.RelativeOrAbsolute);
}
else
{
fliptileData.BackgroundImage = new Uri("Images/PlaceholderBackgroundImage.png", UriKind.RelativeOrAbsolute);
fliptileData.WideBackgroundImage = new Uri("Images/PlaceholderWideBackgroundImage.png", UriKind.RelativeOrAbsolute);
fliptileData.BackBackgroundImage = new Uri("Images/BackBackground.png", UriKind.RelativeOrAbsolute);
fliptileData.WideBackBackgroundImage = new Uri("Images/WideBackBackground.png", UriKind.RelativeOrAbsolute);
}
foreach (ShellTile tile in ShellTile.ActiveTiles)
{
LiveTileHelper.UpdateTile(tile, fliptileData);
}
});
NotifyComplete();
}
As I fetch different data from the site, I create a class that holds all request methods. In those methods, I just created an HttpClient that downloads the desired Json string into my app. I take only the first post in the case above, to make the live tile updating also on slow internet connections within the 25 seconds and to not reach any memory limit. In the end, I use Telerik’s LiveTileHelper to create a FlipTile with image and text from the site (the image will be downloaded automatically).
That’s all we need to to in the Scheduled Task Agent. Now we need to implement the agent into our app project.
First thing we should implement is a switch where the user can turn our agent on and off. I used a ToggleSwitch for that, saving the isChecked state as a Boolean to the IsolatedStorage of my app.
Knowing I need to restart the background agent after some time, I implemented the agent handling in App.xaml.cs. This way, I need to write less code as I tend to use separate settings pages. The only thing you need to think of is to set up all objects as static and public.
First, we need to declare a PeriodicTask as well as a name for it:
public static PeriodicTask LiveTileUpdaterPeriodicTask;
public static string LiveTileUpdaterPeriodicTaskNameString = "LiveTileUpdaterPeriodicTaskAgent";
Now we need to generate a method that handles everything for our background task:
public static void StartLiveTileUpdaterPeriodicTaskAgent()
{
//declare the task and find the already running agent
LiveTileUpdaterPeriodicTask = ScheduledActionService.Find(LiveTileUpdaterPeriodicTaskNameString) as PeriodicTask;
if (LiveTileUpdaterPeriodicTask != null)
{
//separate method, because we need to stop the agent when the user switches the Toggle to 'Off'
StopLiveTileUpdaterPeriodicTaskAgent();
//contains:
//try
//{
// ScheduledActionService.Remove(App.LiveTileUpdaterPeriodicTaskNameString);
//}
//catch { }
}
//generate a new background task
LiveTileUpdaterPeriodicTask = new PeriodicTask(LiveTileUpdaterPeriodicTaskNameString);
//provide a description. if not, your agent and your app may crash without even noticing you while debugging
LiveTileUpdaterPeriodicTask.Description = "This background agent checks every 30 minutes if there is a new blog post.";
//start the agent and error handling
try
{
ScheduledActionService.Add(LiveTileUpdaterPeriodicTask);
}
catch (InvalidOperationException exception)
{
//user deactivated or blocked the agent in phone settings/background tasks. Ask him to re-activate or unblock it
if (exception.Message.Contains("BNS Error: The action is disabled"))
{
RadMessageBox.ShowAsync("it seems you deactivated our Background Agent for the Live Tiles. Please go to settings/background tasks to activate our app again.", "Whoops!", MessageBoxButtons.OK);
}
//the maximum of running background agents is reached. No further notification to the user required, as this is handled by the OS
if (exception.Message.Contains("BNS Error: The maximum number of ScheduledActions of this type have already been added."))
{
//changing the Boolean to false, because the OS does not allow any new taks
isLiveTileActivated = false;
}
}
catch (SchedulerServiceException)
{
//if there is a problem with the service, changing the Boolean to false.
//feel free to inform the user about the exception and provide additional info
isLiveTileActivated = false;
}
}
In Application.Launching() and in ToggleSwitch_Checked event, call this method. In ToggleSwitch_UnChecked event, call ‘StopLiveTileUpdaterPeriodicTaskAgent()’ instead to stop the agent.
Before we are now able to debug our agent, there are two things left. The first thing is to declare
#define DEBUG_AGENT
in the very first line of ‘App.xaml.cs’ as well as in ‘ScheduledAgent.cs’ before all using statements.
The second thing is adding an if-Debug command to our ‘StartLiveTileUpdaterPeriodicTaskAgent()’ and also to our ‘OnInvoke(ScheduledTask task)’ methods:
Add this after adding the task to the SchedulerService in our agent starter and before ‘NotifyComplete()’ in ‘ScheduledAgent.cs’.
If you run the project now in Debug mode, your agent will be debugged and forced to run after 60 seconds. If you run the project in Release mode, Visual Studio will throw an ‘Access Denied’ error, so make sure you set it up correctly.
If you follow all steps above, you will be able to add a Live Tile updated via background agent very easily to your app.
As always, I hope this real world scenario will help some of you.
