development accelerated for engage (reverse)

FlattrView example application - How to

In the article "Including a flattr button in an application" it was describe how to include a flattr button inside an application. On request, this article is a follow up on to that one which will describe how to create a simple "Hello World"-like FlattrView example application. The final application is available under "FlattrView example application".

It is assumed that eclipse is used as development environment.
I do also place the actuall code for the example application here on this page. That means that you have to make sure you replace all package names and application URLs with your own to have them pointing to your own. These are the strings that read "com.dafer45.flattr" and "http://www.dafer45.com/android/for_developers/flattr_view_example_application.html". I use these rather than general names to make debuging as simple as possible (but honestly, it is quite an opportunity for me to generate some extra clicks for me as well :) ). I will remind you about this once more at the end of the file.

Create a project
The first thing to do is to create a new android project. Click File -> New-> Project, select "Android Project" and click "Next".

In the "New Android Project" window, fill in the following fields:

Project name: FlattrViewExample Target name: (select) Android 1.5 Application name: FlattrViewExample Package name: com.dafer45.flattr Create Activity: FlattrViewExample Min SDK Version: 3

Finally press Finish.

Creating the FlattrView class
Now open the folder "FlattrViewExample/src/com.dafer45.flattr" in the Package window, right click the package and select New -> Class. Enter FlattrView into the Name field and press Finish.

Now replace the content of that file with

package com.dafer45.flattr; import android.webkit.WebView; import android.content.Context; import android.util.AttributeSet; public class FlattrView extends WebView{ public FlattrView(Context context, AttributeSet attrs){ super(context, attrs); String namespace = "http://schemas.android.com/apk/res/com.dafer45.flattr"; String flattrURL = attrs.getAttributeValue(namespace, "flattr_url"); String flattrCode = "<html>" + "<head>" + "<script type=\"text/javascript\">" + "/* <![CDATA[ */" + "(function() {" + "var s = document.createElement('script')," + " t = document.getElementsByTagName('script')[0];" + "s.type = 'text/javascript';" + "s.async = true;" + "s.src = 'http://api.flattr.com/js/0.5.0/load.js?mode=auto';" + "t.parentNode.insertBefore(s, t);" + "})();" + "/* ]]> */" + "</script>" + "</head>" + "<body>" + "<table>" + "<tr>" + "<td>" + "<a class=\"FlattrButton\" style=\"display:none;\"" + "href=\"" + flattrURL + "\"></a>" + "</td>" + "<td>" + "Do you find this application useful?" + " Support it's development by flattring it!" + "</td>" + "</tr>" + "</table>" + "</body>" + "</html>"; getSettings().setJavaScriptEnabled(true); loadData(flattrCode, "text/html", "utf-8"); } }

Creating attrs.xml
Now open the FlattrViewExample/res/values folder in the package Window, right-click the values folder, select New -> File, enter attrs.xml into the "File name"-field and press "Finish".

Now click "attrs.xml" below the window that displays the resource to open the file in text mode, and paste the following content into the previously empty file

<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="FlattrView"> <attr name="flattr_url" format="string"/> </declare-styleable> </resources>

Modifying main.xml
Now open the file "FlattrViewExample/res/layout/main.xml" from the package-window and replace it's content with the following

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <com.dafer45.flattr.FlattrView xmlns:flattr= "http://schemas.android.com/apk/res/com.dafer45.flattr" android:layout_width="fill_parent" android:layout_height="wrap_content" flattr:flattr_url="http://www.dafer45.com/android/for_developers/flattr_view_example_application.html" /> </LinearLayout>

Giving internet permissions
Open "FlattrViewExample/AndroidManifest.xml" from the package-window, click AndroidManifest.xml below the window in which the file is displayed to open it in text mode, and add the following line just before the closing manifest-tag

<uses-permission android:name="android.permission.INTERNET" />

The final file should be

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.dafer45.flattr" android:versionCode="1" android:versionName="1.0"> <application android:icon="@drawable/icon" android:label="@string/app_name"> <activity android:name=".FlattrViewExample" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> <uses-sdk android:minSdkVersion="3" /> <uses-permission android:name="android.permission.INTERNET" /> </manifest>

Register your thing
Now go to flattr.com, log in, click "Submit Thing", fill in the form with information and click "Submit Thing!". Compile
You are now ready to compile your code. Select Run from the Run-menu, select Android Application and press OK. Your application should now launch in an emulator or on your phone and display the button together with the text "Do you find this application useful? Support it's development by flattring it.".

Reminder: Do not forget to replace my URLs and package names with your own. These are the strings labeled "com.dafer45.flattr" and "http://www.dafer45.com/android/for_developers/flattr_view_example_application.html"