Monthly Archives: April 2013

Creating a Bindable object in javascript for Windows store application

Published April 8, 2013 6:57 pm

When I was writing windows store application in c#, it provided

class BindableBase

I was looking for similar way to create bindable object in javascript using WinJS library. WinJS libray does have WinJS.Binding.as() method that can be used to make an object observable through a proxy. but I was looking for a way to make the object itself Observable.

var MyViewModel = WinJS.Class.define(
    function MyViewModel_ctor()
    {
        this._initObservable();
        this.bind('property1', this._onproperty1change.bind(this));
    },
    {
        _onproperty1change: function onproperty1change(newValue)
        {
            // can be used to update properties that are dependent on property1
            // property3 and property4 for example - can be updated here. UI will be 
            // notified if it is binding to these properties
        },
    });

    WinJS.Class.mix(MyViewModel,
        WinJS.Binding.mixin,
        WinJS.Binding.expandProperties({ property1: '', property2: ''}));

With little help from the quickstart and reading the WinJS base.js class helped arrive to this code and understand how it works.

var expandProperties = function (shape) {
    var props = {};
    function addToProps(k) {
        props[k] = {
            get: function () { return this.getProperty(k); },
            set: function (value) { this.setProperty(k, value); },
            enumerable: true,
            configurable: true // enables delete
        };
    }
    while (shape && shape !== Object.prototype) {
        Object.keys(shape).forEach(addToProps);
        shape = Object.getPrototypeOf(shape);
    }
    return props;
};
  1. WinJS.Binding.expandProperties documentation won’t help to understand what it brings. The snippet from the base.js above clarifies that it adds properties for each key specified in the parameter, and the value specified is not used for anything.
  2. WinJS.Binding.mixin object brings the getProperty/setProperty/bind/notify and bunch of other methods for the object
  3. _initObservable() need to be invoked from the constructor to initialize _backingData field. The _backingData object is used to store the property values.
  4. this.bind helps you get notified for a property change, and it can help in scenario like updating dependent properties.
  5. It saves writing boiler plate code for each property in the view model object

Did you need something like this? Have you solved in different way than this?

Adify your windows store application

Published April 3, 2013 10:17 pm


I have added Microsoft advertising into one of our windows store app couple of months back, and have been following the pubcenter reporting to see how ads work. Lets talk a little bit on adifying your windows store application and few observations on what they fetch to app developer.

It is quite a simple process and well documented in msdn. Nevertheless, few observations – we make here – might be relevant for you and HTH. Details here will be for a javascript based windows store application.

  1. Download the Microsoft advertising sdk here
  2. In your visual studio project -> add reference  -> add the javascript library advertising.
  3. Follow this walk through to add the ad html snippet into your app.

Html snippet looks something like this.

<div id="myAd" style="position: absolute; top: 53px; left: 0px; width: 250px; height: 250px; z-index: 1;" 
   data-win-options="{applicationId: 'd25517cb-12d4-4699-8bdc-52040c712cab', adUnitId: '10043105'}" 
   data-win-control="MicrosoftNSJS.Advertising.AdControl">
</div>

To test the app with ad, test application id and test ad units needs to be used. The guid mentioned above is test application id. Test ad unit id will depend on the size of the ad unit. refer here.

Few things to keep in mind when testing the application with ad unit(s)

    1. width and height mentioned in the css do not match the size of the ad unit. ad won’t be served in this case.
    2. some times ads does not load because there are not ad available for the application. good to register for the error handler as mentioned here and put a break point in the method, to get the event with error message.
    3. Test your application with test ad units only, not real ad units. For real ad units, you have register your live account with Microsoft advertising and create ad units for your windows 8 application.
    4. I typically follow the practice of switching to test ad units for development. Microsoft advertising otherwise might think the app owner itself fetching ads for its application and/or clicking its own ads.
    5. To start with, you may want to just place the ad in the default.html as bottom/side or top bar. Eventually, you may want to customize, place right size ad units at right place in your app pages.
    6. Ad must catch the sight of the user at the end of the day and use appropriate empty slot on the page.
    7. Using too many ad units on a page, may spoil the app branding. Typically using one ad unit in a page might be good idea.
    8. Ad unit size and type will need to gel well with the page content so that page look-and-feel professional with ad. For example – sometime placing an ad unit 250x250px within the page, looks more suitable for a page than placing 729x90px bottom image bar
    9. Need to consider & test multiple page views – snapped, portrait, filled and landscape – for the ad unit(s) in the page. css styling with @media query can be used for the layout.
    10. We have used ad-area-host outer div to host the ad unit div. That gives flexibility to position the ad unit since the ad unit always have to size as specified during creation. snippet below allows to center the bottom ad bar.
 
<div class="ad-bottom-area-host">
    <div class="ad-area"
        data-win-control="MicrosoftNSJS.Advertising.AdControl" 
        data-win-options="{applicationId: d25517cb-12d4-4699-8bdc-52040c712cab', adUnitId: '10042998', onErrorOccurred: errorLogger }">
    </div>
</div>

/* below code is from the corresponding css file */
.ad-bottom-area-host
{
    -ms-grid-row: 3;
    -ms-grid-column-span: 2;
    height: 90px;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    -ms-flex-align: center;
}

.ad-bottom-area-host .ad-area
{
    width: 728px;
    height: 90px;
}

ad-bottom-area-host is placed inside another grid and spans two column cells. it uses flexlayout to center the ad-area at the bottom of the page. ad-area is sized as per the requirements of the ad unit.

What ads fetch to the app developer:

  1. Everyone would think that ads fetch monetary returns to app developer. but typically it takes time if the app gets high usage.
  2. we have seen eCPM grow over time.
  3. The best thing that advertising fetches is the hourly reporting of impressions. given the impressions and fill rate – it gives rough indication of the usage of the app broken down to hour. given the app usage reporting in windows store analytics was broken, and continues to be broken – this data is useful.
  4. if you are new to advertising or app development, gives you the first hand feel of advertising & its jargon which you will not get by reading blogs or articles.

Are there other advertising networks that can be used for windows 8 store app? I did look briefly into it. but can talk about it in a separate post.

References

  1. Microsoft advertising sdk for window 8 – documentation

 

Hymn world – lyrics & music are not accessible

Published April 2, 2013 3:21 am

update: Server is back online. Sorry for the inconvenience and thanks for your patience.

We are facing some issues with the server. You will see error when trying to access lyrics or music for a hymn. Sorry for the inconvenience, and appreciate your patience. Team is working on it to resume normal operation..