MIX11 WP7 "Help Turn This Fan-Made Windows Phone Video into a Real TV Ad"

Load an External JavaScript File Dynamically

Let’s say that you have an external JavaScript Library that is used in some instances but not needed all the time so you wonder how you can load this file only when needed. Here is a short code snippet that will help you dynamically load JavaScript file using none other than 

JavaScript itself.

The first time I needed this feature I fell into the trap of using the XMLHttpRequest object (AJAX route) with the evil eval() function; I don’t need to explain why this is not safe (hint: cross site scripting attack).

var developercaster = {

            script: function (_src) {

                var tag = document.createElement('script');

                tag.setAttribute('type', 'text/javascript');

                tag.setAttribute('src', _src);

              

                document.getElementsByTagName('head')[0].appendChild(tag);

            }

        };

The breakdown

Create new “script” tag using document.createElement, set the “type” and “src” attributes, and finally append it to the “head” element (yes, it’s that simple).

Usage

Let’s create an external JavaScript file called “getLocation.js” and add the following function to it:

var getLocation = {

    current:window.location.href

};

Now to load the “getLocation.js” file dynamically we would proceed as follows:

<script language="javascript" type="text/javascript">

    window.onload = function () {

            if (typeof getLocation == 'undefined') {

                developercaster.script('getLocation.js');

            }

            alert(getLocation.current);

        };

      

</script>

Augmenting functions in JavaScript

This trick comes from Douglas Crockford’s JavaScript the good parts book (a must read); which, pour some syntactic sugar on our JavaScript code.

First we extend the global Function object via prototypal inheritance with a new method called "method". This method will allows us to skip the prototype call every time we need to extend an object. 

  Function.prototype.method = function (name, _function) {

        this.prototype[name] = _function;

        return this;

    };

And we are done.

Usage:

  <script language="JavaScript" type="text/JavaScript">

        function mainOperation() {

            this.main = 'main';

        }

        mainOperation.method('callMain', function () {

            alert('hi '+this.main);

        });

        window.onload = function () {

            var m = new mainOperation();

            m.callMain();

        };

     </script>

First we created a new object called "mainOperation()". Then, we augmented this object with the method "callMain" by using our new "method" property. Finally, to demonstrate what we just did we create on the window.onload a new instance of "mainOperation" and called the new "callMain" method.   

Output:

Recommended Reading:

JavaScript: The Good Parts

Custom Fonts on Android

Sometimes the stock fonts on Android may not cut it when trying to create the look and feel of your app so embedding a custom typeface file will be the way to go.

First, you may need some cool fonts so I recommend you to check http://www.dafont.com and get some free fonts for you project (read the license agreement before using it in your phone).

Once you have picked your fonts you need to copy it in the assets folder in your application; I normally create a subfolder called fonts but it is not required.

Then OnCreate add the following lines of code and you are ready to go:

TextView text = (TextView)findViewById(R.id.labelTitle);

Typeface customFont = Typeface.createFromAsset(getAssets(),"font/custom.ttf");

       

text.setTypeface(customFont);

In the sample above I am setting the "labelTitle" TextView to use my custom.ttf files

Yes,  that’s all.