I moved one of the components of Antragsgrün into a separate library, as it might be useful for other projects: HTML2OpenDocument converts formatted HTML content to OpenDocument Text- and Spreadsheet-Files (ODT / ODS). It can handle basic formattings like bold, italic, underlined, strike-through, inserted and deleted text. Lists are supported in Text-Files. The library is licenced under the MIT licence and is available on GitHub and on Packagist / Composer.

For my latest web project, Antragsgrün 3, I’m heavily using Codeception for acceptance testing. As I want to ensure that the system validates against the HTML5 standard and is accessible, I’ve written two helpers for Codeception that I want to share: one Helper that validates the current site using the Nu Html Checker (http://validator.github.io/validator/), and one that validates it against WCAG2.0 (A, AA or AAA) or Section 508 using Pa11y.

Both helpers are using the command line tools, so they do not rely on an online web service and can be used offline. While the accessibility validator works with both the PhpBrowser and the Webdriver module of Codeception, the Html Validators needs Webdriver (which, while a bit more difficult to set up, is superior anyway).

Validating the current site is as easy as:

1

2

$I->validateHTML();

$I->validatePa11y();

(There are also some parameters for choosing the accessibility standard and to ignore certain errors).

One of the features most wished for in one of my Cordova-based android apps was to let the users choose another sound for push notifications, or to disable sound altogether (without having to mute the whole smart phone and still keeping vibration). The Push Plugin supports custom sounds, however all sound resources have to be embedded in the app. In my case, I wanted to let the users choose among the system sounds provided by Android itself, which apparently isn’t possible without some major changes to the plugin.

Here, I’m going to outline the changes necessary to integrate Android’s native RingtonePreference dialog into a Cordova-based app to let the users choose another notification sound. I’ve published the modified plugin that should work on android projects on Github.

Configuration Dialog

Choosing the preferences for push notifications is done in a native android PreferenceScreen that is opened from within the app using a new javascript-method on the pushNotification-Object. The configuration screen is defined by a xml file stored at platforms/android/res/xml/pushsettings.xml:

With all these changes applied, a call to plugins.pushNotification.showPushSettings() should open the configuration dialog and let the user apply her desired notification sound. The settings are stored automatically in android’s SharedPreferences. In the source code of the plugin, I also added a getPushSettings()-method that returns the settings into JavaScript, if you ever need to query these settings.

Using the settings for the notification
The actual notification sound is triggered in GCMIntentService.java’s onMessage-method. The new code reads the settings from the SharedPreferences and acts accordingly:

I’m using the Ringtone.play() instead of the setSound()-method of NotificationCompat.Builder, as the latter one somehow didn’t actually change the sound, even with the URL of the sound provided. I haven’t yet figured out why, but there probably is a solution that’s more elegant than the one showed above.
That’s it. Have fun! 🙂

Update: Most of the patches mentioned here are not necessary anymore, since they have been addressed by the v1.0.0-rc.5 release of the Ionic Framework.

Cordova not only supports Windows Phone 8, but also the new Windows platform, which includes Windows 8, Windows 8.1 and Windows Phone 8.1 apps. Currently, I love creating apps for Android and iOS with the Ionic Framework. So I wondered how difficult it would be to deploy an Ionic-based app to Windows Phone, even though it’s not officially supported (yet). For Windows Phone 8, there are several threads discussing problems and ways around them, like this one. So I concentrated on Windows Phone 8.1, Windows 8.1 and the Windows Push Notification Service. It turned out, that it is in fact possible to run basic Ionic-based apps, although with some major issues.

The Ionic Demo, running as a Windows desktop App

Development Environment

You will need at least Windows 8.1 to develop apps for Windows 8.1 and Windows Phone 8.1. The free technical Preview of Windows 10 works as well (except for the App Certification Kit, which is needed when submitting an app to the store).

As an IDE, the free Microsoft Visual Studio Community 2013 with Update 4 (download) works perfectly. When installing Visual Studio, it is important to include all optional features (ie. the Windows Phone 8.0 SDK and the Tools for Maintaining Store Apps For Windows 8).

Starting the app

Now, the CordovaApp.Phone.jsproj (for Windows Phone 8.1) and CordovaApp.Windows.jsproj (for Windows 8.1) in MyWinApp\platforms\windows\ can be opened with Visual Studio.

Problems and getting around them

1. Security vs. innerHTML

Angular doesn’t work with Windows Phone 8.1 by default, as Angular relies on the innerHTML-property, which is not accessible on Windows Phone 8.1 for security reasons. Trying to start the blank Ionic app results in the following message:

Unhandled exception at line 10951, column 9 in ms-appx://2f930110-8ae3-11e4-b252-af36a362e5f3/www/lib/ionic/js/ionic.bundle.js

0x800c001c – JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content, or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?

MSOpenTech provides a shim that almost solves the problem. The file winstore-jscompat.js needs to be included before ionic.bundle.js.
However, the shim as it is does not completely solve the problem, as there still occurs an exception that leads to a blank page:

Error: [$compile:tplrt] Template for directive ‘ionTabNav’ must have exactly one root element.
http://errors.angularjs.org/1.3.6/$compile/tplrt?p0=ionTabNav&p1=

Replacing the “cleansePropertySetter(“innerHTML”” block in winstore-jscompat.js by the following code (as suggested by Arjan Snoek) really solves the problem:

1

2

3

4

5

6

7

8

9

10

11

cleansePropertySetter("innerHTML",function(propDesc,target,elements){

empty(target);

for(vareix=0,elen=elements.length;eix&lt;elen;eix++){

if(elements[eix].nodeName=='BODY'){

for(varcix=0,clen=elements[eix].childNodes.length;

cix&lt;clen;cix++){

target.appendChild(elements[eix].childNodes[0]);

}

}

}

});

Now, the app starts, even the icons work perfectly (unlike with Windows Phone 8.0) and the Tabs are working too.

2. Broken Links in the app (“Search for app in the Store”)

When trying to open a person in the “Chats” tab of Ionic’s demo app, the message “Search for app in the Store” appears and nothing happens inside the app.
This happens because of the URI Scheme of these links: “unsafe:ms-appx://[appid]/www/index.html”. It can be solved by registering the URI schemes with Angular, by adding the following line to the .config-Function of app.js (line 25ff in the demo app):

3. Hidden elements (ng-show / ng-hide) are still visible

ng-show and ng-hide hide elements by adding the CSS-class “ng-hide” to the affected elements.
It seems like the necessary stylesheets are not added to the document automatically, so we need to add the following rule explicitly in the stylesheet (eg. in css/style.css):

1

2

3

4

[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,

.x-ng-cloak,.ng-hide:not(.ng-hide-animate){

display:none!important;

}

4. Scrolling does not work

Unfortunately, this problem seems to be much more complex and I did not find a real solution until now.
However, adding the following CSS-rule to the stylesheets enables the browser-internal scrolling, which works surprisingly well:

1

2

3

4

body.platform-windowsphone.scroll-content,

body.platform-windowsphone8.scroll-content{

overflow:auto;

}

This is just a dirty hack, though, and probably breaks a couple of things.

5. Not fixed yet: Back Button

With Windows Phone 8.0, listening on the “backbutton” event was pretty simple, just as with android. On WP8.1, this event is not triggered anymore.
I haven’t figured out how to enable it yet. Any hint would be appreciated.

6. Not fixed yet: Hover/Touch effect is permanent

When starting a touch gesture on a link without clicking it (e.g. when starting to scroll), the hover effect is not disabled afterwards.
This is probably related to the scrolling issue.