Category Archives: code

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.

An intro to the Amazon Appstore

As BlackBerry prepares to have the Amazon appstore preinstalled on their phones, I have already had my apps in the Amazon store for two years now.

First of all the best place to have your apps is in BlackBerry AppWorld. If you are writing a native Cascades app, there is no choice except to sell your apps through the BlackBerry store. If you are selling an app based on a cross platform framework such as Cordova or Unity you are better off compiling that code natively to a .bar file as it will run much better then packaging the same code as an Android app. If you have a native Android app, then you are still better off compiling to a .bar file and submitting the app to BlackBerry World. Taking this extra step makes the app easier for users to update and also gives developers the possibility of removing the back bar from apps.

However, simply having the ability to sell to Amazon’s own tablets and phones is enough reason reason to submit your apps into the store.

amazon

For the most part the Amazon store is pretty similar to what all other platforms offer with developers getting a 70% cut of all sales. Payments are made out to developers via direct deposit to a bank account. All apps are submitted as .apk files and like Android apps on BlackBerry, they must not be dependent upon any Google Play services. All apps submitted to the Amazon Appstore require a minimum of three screenshots (at one of a few specific resolutions), and are subjected to a rather comprehensive review policy. App reviews typically take around five days, with rejections usually a case of including a reference to the Google Play store (including something as simple as a link to your other Android apps).

The high praise that BlackBerry has given the Amazon store is mostly marketing fluff. The truth of the matter is that nobody cares about Amazon coins, and this store really isn’t all that different than all of the others…

Adding Cascades highlight colors (without losing the ability to theme 10.2)

PinkWith the release of BlackBerry 10.3 later this year Cascades apps will have the ability to set a custom highlight color. While this is typically defined in the bar-descriptor.xml file, doing so will prevent any theme from being applied when the app is run on phones running an older operating system. Fortunately there is a workaround. (Thanks to Derek Konigsberg for pointing out how to do this).

In short you can override the CASCADES_THEME environmental variable in the brief window between the app being launched, and the creation of the app’s UI. The following code sets a dark theme with pink highlights when run on OS 10.3 and sets a simplier dark theme for older OS versions.

Q_DECL_EXPORT int main(int argc, char **argv)
{
    bb::platform::PlatformInfo p_info;
    QString ver = p_info.osVersion();

    if(ver.startsWith("10.0") || ver.startsWith("10.1") || ver.startsWith("10.2"))
    {
        qputenv("CASCADES_THEME", "dark");
    }
    else
    {
        qputenv("CASCADES_THEME",
            "dark?primaryColor=0xF04FFF");
    }

    Application app(argc, argv);
    MileageTrackerApp mainApp(&app);
    return Application::exec();
}

The recently updated Mileage Tracker app (pictured above) is an example of an app that is using this technique.

Cascades code change in BlackBerry 10.3

There is a slight change in Cascades 10.3 dealing with conditional variables based off of the length of the hint text of a field. For example the following code (designed to only show the TextField when the hint text is not an empty string) would work on BlackBerry 10.2 but fails when run on BlackBerry 10.3

Container
{
    property alias hint:newTextField.hintText
    property alias text:lbl.text
    Label
    {
        id:lbl
        multiline:true
    }
    TextField
    {
        id:newTextField
        visible:
	{
            if(hint.length>0)
            {
                true
            }
            else
            {
                false
            }
        }
    }
}

Fortunately the work around for this is extremely simple. You just need to create (and set) an additional alias for the visibility of the field. This is shown below…

Container
{
    property alias hint:newTextField.hintText
    property alias text:lbl.text
    property alias showTextField:newTextField.visible
    Label
    {
        id:lbl
        multiline:true
    }
    TextField
    {
        id:newTextField
    }
}

Using the Ionic framework for BlackBerry apps

ionic_logoI have made claims about my Erie Canal app being the first BlackBerry app to make use of the Ionic framework, so it should be worth pointing out how this was done. Technically the Ionic framework only support iOS and Android, but it is based off of Cordova just like BlackBerry’s Webworks framework is. Knowing how well BlackBerry 10 supports HTML5 I assumed that it was likely that supporting this new framework would be no trouble at all.

Using either BlackBerry Webworks or the Ionic Framework require quite a bit of set up involving the installation of Node.js and Cordova but once everything is set up, the process is fairly simple. First create two separate instances of your new project, one with the Ionic framework, and one with BlackBerry webworks. Then copy over the www/lib folder from the Ionic project to the BlackBerry project. This folder includes all of the css and javascript that make up the Ionic framework (and also includes the libraries needed to support angular.js). Once this folder is included, BlackBerry HTML5 apps can be compiled as normal.

In fact the entire www folder can be shared between BlackBerry, Android, and iOS versions of the app with the platform differences mostly taking place in manifest files and the actual compilation of the apps.

Potential concerns with the odd resolution of the Z3

After spending months refusing to be honest with developers about the specs for the Z3, it has finally been revealed that the phone has a 540×960 resolution. For developers the phone presents itself as 720×1280 device and then downscales the content to 75% of the size, which is exactly what I predicted two months ago.

While BlackBerry claims that this will work flawlessly and magically, that is not exactly the case. Downscalling content such as this has some issues, mainly that any UI elements that are only a single pixel wide have a one in four chance of disappearing completely. Scaling can work, but it is best when you are scaling up and are doing so by a power of two. This is why iOS devices doubled their horizontal and vertical resolutions when they switched to a higher res format.

In fact, any element with a size less than 4 pixels has the possibility of looking to be a bit off. The images below show the result of scaling a 1×1 pixel grid (in pink), a 2×2 pixel grid (in blue), and a 4×4 pixel grid (in orange).

1x1

2x2

4x4

Grids are kindof a worst case scenario, so most apps actually won’t look too bad. But nothing is going to look great.

What is worse is that the device really believes itself to be a different resolution than it is. As such developers have no simulator, and screenshots are the same 720×1280 resolution that the Z30 produces. This also implies that all text (which is full of the thin strokes that are susceptible to issues) also goes through this identical scaling process.

At $190 the BlackBerry Z3 is not significantly cheaper than the Z10, so there is no reason that this should be your smartphone of choice. Pay a little extra and get something better.

How to generate a release .apk file from a Cordova project

The following batch file takes a Cordova project and builds, signs, and deploys a .apk file. I had found this script to be helpful for myself, so hopefully it will help others as well. Just replace keystore_file and alias_name with your own keystore information.

cordova build --release android

for /f "delims=" %%x in ('dir /od /a-d /b platforms\android\ant-build\*.apk') do set recent=%%x

set recentShort=%recent:-release-unsigned.apk=.apk%

ECHO Y | DEL %recentShort%

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -storepass transitKey -keystore keystore_file platforms\android\ant-build\%recent% alias_name

zipalign -v 4 platforms\android\ant-build\%recent% %recentShort%

adb install -r %recentShort%

Nokia X is an Android phone with poor support for Android

Nokia has just announced their new X line of phones that run a skinned version of Android. In their announcement, Nokia boasted that 75% of existing Android apps were already compatible. However, instead of being impressed, my gut instinct was that the number seemed rather low…

NokiaXA run through the compatibility checker confirmed my fears. Of the five android apps I am currently selling through Google Play, only one had no compatibility issues. Most of the problems with the apps centered around support for in-app billing (there are also issues with supporting any mapping APIs). While the tool regards this as a minor issue, the ability to make money from apps is kind of important (and due to my use of the AIR framework also tricky to fix).

The billing API is mostly a drop-in replacement for Google’s, but I feel that it would be easier if Nokia took a page from BlackBerry’s book and allowed the apps to integrate with its store without any code changes at all. Amazon does a similar thing to Nokia in forcing developers to rework their apps, but in exchange at least promises a unique and sizable market. Meanwhile, Nokia’s X phones live under the threat of being axed by Microsoft before we even reach summer.

Improving app efficiency

It can be rather impressive to see how much the efficiency of your code can improve as you get to know a platform better. When it comes to writing BlackBerry 10 apps in Cascades my code has gotten dramatically better. This is not the result of any special magic, but instead a by product of putting in the required hours for a given platform. For example my Mileage Tracker app has recently been updated to version 1.5 and despite continuing to add new features in each new version, the size of the .bar file is as small as it has ever been. To look at the overall sizes of the .bar file for the Mileage Tracker app see the below chart.

MileageTrackerBarSize

Forcing a dark theme on Windows Phone

Despite the fact that it looks terrible, Windows Phone offers users the ability to place their phones into a light theme. For any app that applies a specific color or background anywhere, testing against this theme is a critical step before submitting a new application, and is almost guaranteed to cause a few headaches.

While BlackBerry 10 allows you to force a dark theme for your app with a single line of XML, for Windows Phone you need to force individual components into a dark theme. For the most part this is done by remembering to explicitly set your background and foreground colors for every component, this can usually be done either in XAML or in C#. Below is an example of setting the colors for the ApplicationBar in C#.

ApplicationBar appBar = new ApplicationBar();
appBar.BackgroundColor = Color.FromArgb(255, 0, 0, 0);
appBar.ForegroundColor = Color.FromArgb(255, 255, 255, 255);
ApplicationBar = appBar;

Setting the SystemTray to a dark theme requires a bit a more unique approach, where you add attributes to the root element of the main PhoneApplicationPage in XAML. As seen in the following lines of code.

shell:SystemTray.BackgroundColor="Black"
shell:SystemTray.ForegroundColor="FloralWhite"

Also note that you can not set the SystemTray ForegroundColor to exactly white. It can be very close to white such as a very light gray, or the FloralWhite that I used, but it can not be exactly white. While the small print of Microsoft’s documentation is very clear on this, the reason why seems to be a complete mystery.

Deploy BlackBerry 10 apps with device name instead of ip address

DeviceNameWhen using a script (or the command line) in order to deploy apps to a device you can use the phone’s device name (which seconds as a network name) in place of the ip address. For example instead of

blackberry-deploy -installApp -launchApp -device 192.168.1.104 -package PixelatedShapes.bar -password password

you could use

blackberry-deploy -installApp -launchApp -device BLACKBERRY-Z10E -package PixelatedShapes.bar -password password

This shortcut is particularly helpful to use when writting scripts, so you do not have to update the file every time that the phone is assigned a new ip address.

BlackBerry 10′s problem with the swipe-down menu

IMG_00000036The UI that BlackBerry introduced on the PlayBook, and continued on BlackBerry 10 calls for the support of a swipe-down menu where a user can swipe down from the top bezel and gain access to additional options for the app. The design in very good in theory in that it allows a dedicated menu area without consuming any real estate on the screen or requiring a dedicated menu button. However, far too few apps make use of this menu for consumers to expect it to be there.

I have written about this problem before. Over two years ago I noticed this problem on the PlayBook and the issue has only gotten worse since then. The Cascades framework instead encourages the use of an overflow menu, and even less preinstalled apps make use of the swipe-down menu.

Major apps such as the Browser, Facebook, and the search app do not have a swipe-down menu at all. Many other first party apps such as the Pictures app, the Videos app, the Music app, and the File Manager make only trivial use of the swipe down menu offering nothing more than a link to an external help file. (Couldn’t BlackBerry at least open these help menus as a card?) Even more interesting is the Calculator app that had a swipe down menu when BlackBerry 10 first launched, but as of 10.1 no longer has one at all.

IMG_00000049Following BlackBerry’s lead, many developers (including myself) stopped using swipe-down menus. Following the current UI guidelines for Cascades almost every app will have some sort of an action bar making it trivial for developers to just place everything else in the overflow menu where it is much more discoverable by users. At this point I honestly can not recommend that anyone rely on the swipe-down menu as the only way to do anything in their app.

In version 5.1 of my Twinkle app (pictured) I am implementing a swipe-down menu in a Cascades app for the first time. Yet all three of the options there are redundant and are also available through the standard action bar overflow menu. At this time, this is the absolute most support that I am willing to give to the swipe-down menu. If BlackBerry wants this situation to change, they should seriously rethink their UI guidelines and what they are doing with their own apps…

How to link to Facebook and Twitter in Cascades

In cascades it is possible to link directly to a particular Facebook or Twitter profile using the following code.


void MyApp::invokeTwitter()
{
bb::system::InvokeManager* m_invokeManager;
m_invokeManager = new InvokeManager(this);
InvokeRequest request;
request.setTarget("com.twitter.urihandler");
request.setAction("bb.action.VIEW");
request.setUri("twitter:connect:ebscer");
m_invokeManager->invoke(request);
}

void MyApp::invokeFacebook()
{
bb::system::InvokeManager* m_invokeManager;
m_invokeManager = new InvokeManager(this);
InvokeRequest request;
request.setTarget("com.rim.bb.app.facebook");
request.setAction("bb.action.OPEN");
QVariantMap payload;
payload["object_type"] = "page";
payload["object_id"] = "152370494833193";
request.setMetadata(payload);
m_invokeManager->invoke(request);
}

Calling this code will directly open the Twitter and Facebook pages for Ebscer.