Category Archives: code

UI frameworks for Angular.js

I recently had the opportunity to review a number of angular.js compatible UI frameworks. All of these frameworks are fairly new, and therefore they all give some thought to how they appear on phones and tablets.

Angular Material

angularmaterialAngular Material has been created by Google to follow the guidelines for Android’s Material UI. In my opinion this is the best UI for angular. Given its ties to Android it works great on mobile, but it also is designed to scale up to also look good on larger screens. Additionally, the flex box based layout system for Angular Material is more complete and more reliable than what is offered by the other frameworks.


ionicThe Ionic framework by Drifty is a mobile focused UI that I have used before. Ionic has good looking controls, and mostly follows the design found in iOS 7. Compared to the other frameworks, the touch targets for Ionic are larger and better optimized for phones. By design, Ionic is meant to be used for creating Cordova apps, but can also be used for websites if you copy two files from their github.

UI Bootstrap

Unlike the other frameworks, Bootstrap does not include any JavaScript and is implemented strictly through css. While this lightweight approach is great, UI Bootstrap is also the least optimized for mobile and is the least integrated with angular.


lumxCreated by LumApps, Lumx is another framework that follows Android’s Material design guidelines. Unfortunately, when compared to Angular Material, it is not quite as good. Also LumX has the far more third party dependencies than the other frameworks, making it more difficult for set up. On the plus side, it has the best selection of built in colors for theming your app.

Using multiple frameworks

Additionally there is the option to use a number of these frameworks together at the same time. This is not always an option as the css for Bootstrap and Ionic conflict with one another. But sometimes it can work. In particular the components of Ionic make a good compliment to the layout and navigation of Material.

Coloring a ProgressBar on Android

On newer versions of Android (such as Lollipop and Marshmallow) the activity indicator now has a distinct color instead of just being a shade of gray. While this is neat, it brings up the potential for the color of the activity indicator to clash with your design.

Fortunately it is possible to change the color of these controls. Starting with the xml in the layout, your progress bar will look as follows…


The relevant part of this code is the setting of progressDrawable to a custom drawable object. While this custom object must exist, it doesn’t actually have to do anything. The full source of colorProgress.xml is below and is essentially blank.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="">

Finally we will get to the Java code that actually sets the color of the progress bar. This is done as the program starts up and consists of three steps. First, you filter out the older Android OS versions to avoid crashing the app on Android 4.x phones. Next you get a reference to the ProgressBar object, and then finally you set the object to the color you want.

protected void onCreate(Bundle savedInstanceState)
ProgressBar progressbar = (ProgressBar) findViewById(;
int color = 0xFF2980b9;
progressbar.getIndeterminateDrawable().setColorFilter(color, PorterDuff.Mode.SRC_IN);
progressbar.getProgressDrawable().setColorFilter(color, PorterDuff.Mode.SRC_IN);

Forcing a dark theme on Windows Phone Universal Apps

While the introduction of Windows 8.1 and Windows 10 has done a lot to clean up the look of apps, Windows Phone still allows you to give your phone a light theme which can make your app look weird. This requires you to do additional testing for your apps and optionally hard code colors for some elements on the screen.

In 2013, I described how to force a dark theme on Windows Phone silverlight apps, but things have changed when it comes to the newer universal apps.

The ApplicationBar has been replaced by the CommandBar, and is fortunately rather easy to theme in XAML. The following code will force your CommandBar into a dark theme.

<CommandBar Background="#1F1F1F" Foreground="White">

Theming ListPreference Dialogs on Android Lollipop

ListPreferenceSetting a custom theme color for your Android app is as simple as setting a colorAccent color in the app’s styles.xml file. Yet while this will theme most of the app, oddly ListPreference pop-ups and other dialogs do not naturally inherit the theme used by the rest of the app.

In order to fix this both a dialogTheme and an alertDialogTheme need to be explicitly added to the app’s styles.xml file. The result should look similar to this…

<?xml version="1.0" encoding="utf-8"?>
    <style name="AppTheme" parent="android:Theme.Material.Light">
        <item name="android:colorPrimary">@color/primary
        <item name="android:colorPrimaryDark">@color/accent
        <item name="android:colorAccent">@color/accent
        <item name="android:dialogTheme">@style/DialogStyle
        <item name="android:alertDialogTheme">@style/DialogStyle
    <style name="DialogStyle" parent="android:Theme.Material.Light.Dialog">
        <item name="android:colorAccent">@color/accent

How to treat Android’s up button like a back button

When opening up a child screen on most android apps an arrow will appear on the upper left corner of the screen indicating that you can go back to the previous screen. Android’s documentation refers to this as an “up” button (despite the fact that it clearly points left). While at first glance it appears to similar to the back button it is subtly different.

More complex apps may have a use for the difference in this button’s behavior, but for simple apps the up button acts like a back button that additionally blows away minor state information (such as scroll position) on the parent screen. Fortunately there is a simple way to force the up button to act the same as your standard back button.

In the child activity find the onOptionsItemSelected() method…

public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == {
        return true;
    return super.onOptionsItemSelected(item);

and replace NavUtils.navigateUpFromSameTask(this); with finish(); so that your new code now looks like...

public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();
    if (id == {
        return true;
    return super.onOptionsItemSelected(item);

Now the back button on your action bar will work just as well as the back button at the bottom of the screen.

Amazon now allowing for fine grained control of BlackBerry app Support

With the Amazon app store coming pre-installed on new BlackBerry 10 phones, Amazon is continuing to improve the support given to developers. Last month Amazon began explicitly adding BlackBerry phones to their testing procedures, and now they are giving developers the option to individually select support for various BlackBerry phones.


Previously all BlackBerry phones were just included under the generic “all other Android devices” category while a specific per device breakdown like what is now offered was only available for the Amazon Fire line of products.

How to invoke the Classic Camera app

The Classic Camera app can be invoked using the following code…

InvokeManager mInvokeManager = new InvokeManager(this);
      bb::system::CardDoneMessage&)), this,
InvokeRequest request;

The response data contains the file name of the captured image.

Thoughts on BlackBerry Cascades from 2011

Flipping through an old notebook, I came across my notes on BlackBerry Cascades from BlackBerry DevCon 2011. This was half a year before the framework was released, and a good year and a half before the launch of BlackBerry 10. Since then I have become an expert at Cascades, but it is interesting to see some of my earlier thoughts.IMG_20150311_233508_crop

  • 2D and 3D
  • 90% of UI could be lists
  • QML declarative UI from Qt
  • Asynchronous to help rendering rate
  • Signals to handle events
  • List Types – (SQL,XML,JSON)
  • Uses BBX IDE
  • QML looks nicer than C++
  • Beta in fall (November)
  • Everything in BBX is Qt

Somethings I got right, and with some others I look a little silly. For example Cascades has no support for 3D. In fact Cascades is actively bad at working in three dimensions and doesn’t even support giving z-values to elements. Also the beta wasn’t launched in November (at the time only a month away), but instead the next May. The emphasis on lists was a bit overblown. Creating 90% of an app out of lists can be true for pretty much any framework, and somewhat ironically I don’t actually use a ListView for creating the lists in most of my apps anyhow. The one thing that was apparent to me from the very beginning is that QML is far nicer than C/C++ ever was…

How to get a Slider to stop at discreet points on a Windows Phone app

By default the Slider control that Microsoft provides for Windows Phone Silverlight applications is missing some key properties such as the IsSnapToTickEnabled property. However this can be recreated in code to give Windows Phone apps the same functionality.

First the XAML…

<Slider x:Name="slider" Width="450" ValueChanged="Slider_ValueChanged" Minimum="0" Maximum="10" SmallChange="1"/>

Then in C#…

public void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs e)
            int newValue = (int)e.NewValue;
            slider.Value = newValue;

            //code goes here, using newValue
            //as the slider's value...
        catch (Exception) { }

Amazon Appstore testing BlackBerry phones

Below is screen shot of an app acceptance email I received from Amazon. In addition to the many Kindle devices, and the lone “Non-Amazon Android” device, you will find the BlackBerry Classic and the BlackBerry Passport.


With the Amazon appstore now preloaded on newer BlackBerry phones, Amazon now appears to explicitly be checking submitted Android apps on these phones. Given the unique screen ratios on these phones, and the fact that they are outselling most of the other devices on this list, it is nice to see Amazon explicitly checking for compatibility. This should free BlackBerry users from having to wonder if anything they download from Amazon will work on their phones.

Creating a Rounded Rectangle in OpenGL

OpenGL is an extremely low level language, and is more or less only capable of drawing triangles. This means that many of the basic shapes that developers are used to having available in a drawing API are not present and must be created from scratch. The below code demonstrates how to draw a rounded rectangle in OpenGL.

static const GLfloat roundRect[] = {

static const GLfloat vbox[] =
    0.0f, 0.0f,
    1.0f, 0.0f,
    0.0f, 1.0f,
    1.0f, 1.0f,

void render()
    glVertexPointer(2, GL_FLOAT, 0, vbox);
    glScalef(.75, .75, 1.0f);
    glVertexPointer(2, GL_FLOAT, 0, roundRect);
    glDrawArrays(GL_TRIANGLE_FAN, 0, 40);

Careful observation of the code (especially the line glDrawArrays(GL_TRIANGLE_FAN, 0, 40);) will point out that that technically OpenGL is once again just drawing a collection of 40 triangles in order to create the rounded rectangle shape.

Processing .html files as PHP

In the interest of having cleaner URLs (or simply to maintain existing links) it is often desirable for webpages to end in a .html extension even if they need to be processed as PHP. On Apache servers this is very straight forwards and you just add the following lines of code to your .htaccess file

AddType x-mapp-php5 .php .htm .html

On Windows servers this is slightly more complicated (as are most things). You need the following code in your web.config file and the value for the scriptProcessor is based on the install location of your php-cgi.exe file. Finding the location of this file can often be teased out by looking at the results from the phpinfo(); command.

<?xml version="1.0" encoding="UTF-8"?>
            <add name="PHP_via_FastCG1" path="*.htm" verb="*" modules="FastCgiModule" scriptProcessor="C:\PHP5.5\php-cgi.exe" resourceType="Either" />
            <add name="PHP_via_FastCG2" path="*.html" verb="*" modules="FastCgiModule" scriptProcessor="C:\PHP5.5\php-cgi.exe" resourceType="Either" />

Creating new projects to optimize BlackBerry 10 apps

Since first releasing the BlackBerry 10 SDK in early 2012, BlackBerry has continued to work on improving their tools. I have recently discovered that significant optimizations are made in newly created Cascades projects. I am currently working on an update to my Stuff I Need app, and have been able to get a 17% reduction in the app’s file size simply by recreating the project from scratch in Momentics. In addition to the smaller install size, the app also appears to be launching quicker. This was done with no changes at all to my code. Using all of the same assets, qml, and c++ files, I created a new project, and then copied my existing files in. The new project contains a few changes to the .pro and the bar-descriptor.xml files, but the majority of the changes seem to be taking place behind the scenes. So for anyone that has been writing BlackBerry Cascades apps for a while now, it may be worth it to recreate your apps and get some free optimizations to your code.

How to get a TextBox in a Windows 8 app to support auto-capitalization

Unlike with most platforms, TextBox controls in Windows 8 metro apps default to a lowercase keyboard instead of assuming that the first word of a sentence should be capitalized. This can be frustrating for users of virtual keyboards who would rather use less keystrokes and let the OS take care of basic formatting. The fix for this is non-obvious, but fortunately quite simple. The solution consists of making sure that spell check is enabled for the TextBox.

This can be done either in XAML with

<TextBox IsSpellCheckEnabled="True" />

or in C# with

TextBox tb = new TextBox();
tb.IsSpellCheckEnabled = true;

How to sideload apps onto WindowsRT devices

With WindowsRT Microsoft has made a bit of an odd platform that only accepts apps from the Windows store and does not provide a simple way to install any custom built apps. The easiest way to sideload an app onto a WindowsRT tablet is to set it up as a developer test device. Unfortunately this does require you to be able to log-in to a Microsoft developer account. Not only is this account not free, but you will be required to reconfirm your credentials every three months. Still this is far easier then the other options to sideload onto WindowsRT.

Step one:

First you need to find the Windows PowerShell app open it using the “Run as administrator” option. Then confirm yes at the UAC prompt. Open the keyboard to type Show-WindowsDeveloperLicenseRegistration and hit enter. Then agree to the prompt, and then log-in to your developer account.

Step two:

In Visual Studio create a Windows Store app in the same manner you would as if you were planning on releasing the app to the store. However once the executable is generated in the AppPackages folder, instead of uploading the .appxupload file find the similarly named test folder and transfer this whole folder onto your WindowsRT device. For WindowsRT devices without support for USB drives this is a challenge all on its own, where the best solution may be to email yourself a .zip file.

Step three:

Now with the folder on your WindowsRT tablet find the Add-AppDevPackage.ps1 file, touch and hold to bring up the right-click menu and select “Run with PowerShell”. Confirm that you do in fact want to open the file, and then follow the multiple prompts within PowerShell. Eventually the app will load be able to run the app as if you had installed it from the app store.