Tuesday 23 December 2014

How to create Interstitial Ad for AdMob in Ionic Cordova app?

You might have encountered an error like, when requesting an ad from AdMob using Cordova AdMob Plugin: interstitialAd is null, call createInterstitialView first

Chances are you are doing it wrong. To create an Interstitial Ad you need to take of three things:

  1. Use interstitialAdId as the key to pass you ad unit id in your options object
  2. First create a Interstitial view using createInterstitialView
  3. In success callback from createInterstitialView use requestInterstitialAd to request an ad

Below is the complete code snippet:

if (window.plugins && window.plugins.AdMob) {
    var admob_key = device.platform == "Android" ? "XXXXX" : "YYYYYYYYY";
    var admob = window.plugins.AdMob;
    var options = {
        interstitialAdId: admob_key,
        autoShow: true
    };
    admob.createInterstitialView(options, function() {
            admob.requestInterstitialAd({
                    'isTesting': false
                },
                function() {
                    admob.showAd(true);
                },
                function(error) {
                    console.log('failed to request ad ' + error);
                }
            );
        },
        function() {
            console.log('failed to create Interstitial view');
        });
} else {
    console.log("Admob plugin not available");
}

Thursday 11 December 2014

Using AmCharts in Play Framework 2 with Java

In this post, I am going to show you how you can use AmCharts in Play Framework 2 using Java.

First create a new Play Framework 2 Java project and download the Javascript libraries for AmCharts. download. After you uncompress the file, you see that there are a lot of files in that folder. You really don't need all of it. To start with, I just chose some of them and put them in the public folder in my Play Framework 2 project:

Make things easier you can also download jQuery.


<script src="@routes.Assets.at("javascripts/jquery-1.11.1.min.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/amcharts/amcharts.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/amcharts/themes/dark.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/amcharts/serial.js")" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/amcharts/pie.js")" type="text/javascript"></script>

Now let's create a template file called graph.scala.html and add two empty divs. One for the graph itself and the other for the legend. Also, for the ease of presentation, we put the javascript to handle the graph drawing in this template, but outside the main:

@main("Graphs"){

<div id="test-chart"></div>
<div id="test-legend"></div>

}
<script type="text/javascript">
   // code to handle the graph drawing goes here
</script>


Make sure that the tag ids match. Meaning the first section of the id on both tags should be the same: xxxx-chart, xxxx-legend.
Next, I will talk show you how to draw the actual graph in Javascript. As a rule of thumb, any code related to the AmCharts should be written between:

AmCharts.ready(function(){
   // code goes here
}

Please not that you might see other variations of initialization above across other websites.

Now, let's put the actual code inside the initialization function, for now we use some fake data to show the graph:

      var chart = AmCharts.makeChart("test-chart", {
                    "type": "pie", // type of the graph
                    "theme": "dark", // the theme
                    "legend": { // settings for legend
                         "markerType": "circle",
                         "position": "right",
                         "marginRight": 80,
                         "autoMargins": false
                    },
                    "dataProvider": [{
                         "country": "Czech Republic",
                         "litres": 256.9
                    }, {
                         "country": "Ireland",
                         "litres": 131.1
                    }, {
                         "country": "Germany",
                         "litres": 115.8
                    }, 
                    "valueField": "litres", // field name to get the value from
                    "titleField": "country" // field name to get the title from
                });

Put the route in the 'routes' file, and Implement an action in a controller to show the page:

public class Application extends Controller {

    public static Result showGraph() {
            return ok(graph.render(""));
    }

}

The final and a very important step is to give an initial width size to your div. Create a css file called main.css in public/stylesheets folder and put the following in it:

   #test-chart {
 width  : 100%;
 height  : 500px;
 font-size : 11px;
  }

Make sure you add it to your header in the main.scala.html file:

 <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">

Now, run the project and go to the url that you defined in the routes file. You should see something like:

Friday 5 December 2014

Switching between multiple JDKs on Mac OSX

Suppose you are working on a few Java projects and each of which needs a specific version of JDK.

First. make sure that you download your required JDKs: JDK 8 and JDK 7. gm


Second, look for .bash_profile in your home directory ~. If you can't find it, create it as follows:

touch ~/.bash_profile

Next, use a text editor such as vim to open this file as follows:

vim ~/.bash_profile

Now let's add some aliases that will allow us to easily switch between JDKs:

alias setJdk6='export JAVA_HOME=$(/usr/libexec/java_home -v 1.6)'
alias setJdk7='export JAVA_HOME=$(/usr/libexec/java_home -v 1.7)'
alias setJdk8='export JAVA_HOME=$(/usr/libexec/java_home -v 1.8)'

/usr/libexec/java_home is just a command (symlink) that gives you the path for the active JDK, and using -v xx shows the path to the JDK with version xx.


After you added the above aliases to the .bash_profile file, save and close the file and run:

source ~/.bash_profile

This will set the aliases for you. Now to switch between the JDKs, just type setJdkX (replace X with the version number). Example:

setJdk8 

If you would like to know how you can prevent modification of a private field in java, see: Preventing modification of a private field in Java