Broculos.net

IIS 6 website redirect

nunof — Sun, 15 Jan 2012 17:57:01 +0000

Sometimes you have a website with many domains (org, com, net, etc.) and you want all of them to redirect to the main domain. This is very easy to accomplish with IIS (IIS 6, no modules required). IIS has a built in rewrite module that will let you redirect to a specific URL.

You could also have several URLs mapped to the same website in IIS, but this is not what we want, because we need that the secondary URLs actually redirect to the main one (meaning that domain.org/something would change to www.domain.com/something automatically).

You need to create a new website in IIS just for the redirects (meaning that all the secondary URLs can be mapped to this same website in IIS, so we can apply the redirect rule to all of them at the same time). You can use the same settings as the real website. The directory you choose doesn't matter, because it will be changed later.

To setup the redirection in IIS:

Go to the properties of the website entry where you want to setup the redirection.
Go to the Home Directory tab.
Select A redirection to a URL.
- Type the URL you want to redirect to (something like http://www.example-new.com$S$Q - notice the parameters and the lack of dashes).
Check The exact URL entered above.
Check A permanent redirection for this resource if you want a permanent redirect (301) or leave it unchecked for a temporary redirect (302).

The parameters after the main URL tell IIS to redirect to the specific subdirectory and to use the query parameters that were requested. You can check in more detail what each parameter does in the Redirect reference for IIS 6.

Google Currents: Broculos.net Edition

nunof — Sun, 18 Dec 2011 21:51:37 +0000

We just created a Google Currents edition with the content of our blog and our Google+ activity.

Google Currents is a news reader for Android and iOS devices. It has a clean layout and the content adapts to the device. Publishers can create publications by combining feeds, media and social streams. One of the nicest features of Google Currents is that articles are stored for offline reading after syncing, so you can take them anywhere.

To subscribe to our Google Currents edition first install the Google Currents application and then follow this link on your device.

Android 101: Publish to the Android Market

dsilva — Wed, 14 Dec 2011 10:00:48 +0000

Previous: How to create a StackView widget

Although we haven’t actually published our Honeybuzz application (for obvious reasons), we still learned some things that might be useful for any Android developer.

Your app on the Android Market

Now that you have built a great app and you’re ready to publish it in the market, don’t disregard the information you put in your market page. Put as much thought in your market page as you’ve put into building the application. The user might decide not to download your app if:

You description is poor, has typos and/or doesn’t describe clearly what the app does.
You have few screenshots, the image’s quality is poor or you don’t show screenshots of the main functionality.
The app’s logo, name or your developer’s name looks bogus, unprofessional or cheap.

This information might make it or break it for your app. If the user finds you page messy or unprofessional, he will simply search for another app that does the same as yours. Don’t throw all your development work down the drain just because you didn’t want to put in the extra time to write a decent description or take good quality screenshots. Continue reading for some more tips on this.

The app logo: Love at first sight?

A user searches for “note taking app”, hundreds of results show up. Which app will the user choose to click on to take a second look? Which one(s) would you choose?

You’d probably check first the apps with the sleekest looking logo and the better sounding name. Among so many options the user needs to make a decision, so he’ll make generalizations and assumptions based on that ten seconds look at the search results.

Check out these resources and guidelines to create a great app icon.

Write a great app description

Study the market. Read the pages of your competitor apps. Be better than them. Don’t just do what they do, go a step further. If your competitors only have screenshots of their apps, add a video demo to yours.
Description above the fold. If you have a big description part of it will be collapsed on the market. The user may or may not expand the whole description to read it. Be sure to write the enough information above the fold to convey your point, say why your app is great.
List the all main features in your app.
Don’t be afraid to brag. If your app won some award or was positively reviews by a very relevant publication, say it. This kind of information gives the user the security he needs to know this is the app he’s been looking for.

More resources

Android 101: How to create a StackView widget

nunof — Mon, 12 Dec 2011 10:10:59 +0000

Previous: How to monetize your Android application

Widgets are a great tool for a user to customize his home screen. It is a great way to enhance an app's engagement. A widget can provide a lot of information at a glance and offer shortcuts for common actions.

Honeycomb introduced widgets with collections. As the name implies, they are able to display several items. There are several types of widgets with collections:

ListView: a vertical scrolling list of items (e.g. Gmail widget).
GridView: a scrolling list with two columns of items (e.g. bookmarks widget).
StackView: a stacked card view, where the front item can be flipped to give room for the item after it (e.g. Market widget).
AdapterViewFlipper: animates between views, only showing one at a time.

I will explain how we built the widget for the Honeybuzz application. It is a StackView and displays Buzz-like cards with a user picture and a portion of the Buzz text.

Add the widget to the manifest

The widget needs to be declared in the application's manifest. Because we are using a StackView widget, we specify both the widget provider and the widget service.

<application>

	<!-- StackWidget Provider -->
	<receiver android:name="StackWidgetProvider">
		<intent-filter>
			<action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
		</intent-filter>
		<meta-data
			android:name="android.appwidget.provider"
			android:resource="@xml/stackwidgetinfo" />
	</receiver>
	
	<!-- StackWidget Service -->
	<service android:name="StackWidgetService"
		android:permission="android.permission.BIND_REMOTEVIEWS"
		android:exported="false" />

</application>

How to create the widget provider

For the widget provider, you need to specify the widget provider info and create the widget provider class implementation.

The widget provider info is just an XML file that you create in the res\xml folder of your application. Here is the file from the Honeybuzz application:

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:minWidth="220dp"
  android:minHeight="220dp"
  android:updatePeriodMillis="1800000"
  android:initialLayout="@layout/stackwidget"
  android:autoAdvanceViewId="@id/stackWidgetView"
  android:previewImage="@drawable/stackwidget_preview">
</appwidget-provider>

Most of the attributes are self explanatory. The updatePeriodMillis attribute defines how often it requests an update from the provider class. The minimum possible is 15 minutes, but you should update as little as possible in order to save battery life.

To determine the widget size you can use the following formula (given in the Android Developers site):

(number of cells * 74) - 2

So if you want a 3 by 3 widget like in the Honeybuzz application you get for each side:

(3 * 74) - 2 = 220

A layout widget is comparable to a normal layout for an Activity, but it is much more restrictive. They are based on RemoteViews and both the layout classes and the views that you can use are limited (especially before Honeycomb, where scrolling views were not available for widgets).

A layout for a StackView widget can be as simple as the following:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <StackView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/stackWidgetView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:loopViews="true" />
    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/stackWidgetEmptyView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/no_activities"
        android:background="@drawable/stackwidget_background"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textStyle="bold"
        android:textSize="16sp" />
</FrameLayout>

Now for the implementation of the widget provider class:

public class StackWidgetProvider extends AppWidgetProvider {
    @Override
    public void onDeleted(Context context, int[] appWidgetIds) {
        super.onDeleted(context, appWidgetIds);
    }

    @Override
    public void onDisabled(Context context) {
        super.onDisabled(context);
    }

    @Override
    public void onEnabled(Context context) {
        super.onEnabled(context);
    }

    @Override
    public void onReceive(Context context, Intent intent) {
        super.onReceive(context, intent);
    }

    @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
        for (int i = 0; i < appWidgetIds.length; ++i) {
            RemoteViews remoteViews = new RemoteViews(context.getPackageName(), R.layout.stackwidget);

            // set intent for widget service that will create the views
            Intent serviceIntent = new Intent(context, StackWidgetService.class);
            serviceIntent.putExtra(AppWidgetManager.EXTRA_APPWIDGET_ID, appWidgetIds[i]);
            serviceIntent.setData(Uri.parse(serviceIntent.toUri(Intent.URI_INTENT_SCHEME))); // embed extras so they don't get ignored
            remoteViews.setRemoteAdapter(appWidgetIds[i], R.id.stackWidgetView, serviceIntent);
            remoteViews.setEmptyView(R.id.stackWidgetView, R.id.stackWidgetEmptyView);
            
            // set intent for item click (opens main activity)
            Intent viewIntent = new Intent(context, HoneybuzzListActivity.class);
            viewIntent.setAction(HoneybuzzListActivity.ACTION_VIEW);
            viewIntent.putExtra(AppWidgetManager.EXTRA_APPWIDGET_ID, appWidgetIds[i]);
            viewIntent.setData(Uri.parse(viewIntent.toUri(Intent.URI_INTENT_SCHEME)));
            
            PendingIntent viewPendingIntent = PendingIntent.getActivity(context, 0, viewIntent, 0);
            remoteViews.setPendingIntentTemplate(R.id.stackWidgetView, viewPendingIntent);
            
            // update widget
            appWidgetManager.updateAppWidget(appWidgetIds[i], remoteViews);
        }
        super.onUpdate(context, appWidgetManager, appWidgetIds);
    }
}

In the onUpdate method we iterate through all the widget instances and we add Intents for the service that will create each widget view and also for an item's click.

Create the widget service and the view for each item

In a StackView widget you need a separate layout that will be used to display a single item in the collection. You should know how to create one by now, but here is the one used in the Honeybuzz widget as an example:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/stackWidgetItem"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:background="@drawable/stackwidget_border"
    android:padding="4dp">
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:background="@drawable/stackwidget_background">
          <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/stackWidgetItemUser"
            android:orientation="vertical"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:padding="10dp">
             <ImageView android:id="@+id/stackWidgetItemPicture"
                 android:layout_height="100dip"
                 android:layout_width="100dip">
            </ImageView>
            <TextView android:id="@+id/stackWidgetItemUsername"
                android:textSize="10sp"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                 android:paddingTop="6dp">
            </TextView>
           </LinearLayout>
         <TextView android:id="@+id/stackWidgetItemContent"
             android:layout_height="fill_parent"
             android:layout_width="fill_parent"
             android:maxLines="7"
            android:paddingTop="6dp"
            android:paddingBottom="6dp"
            android:paddingRight="6dp"
            android:paddingLeft="0dp">
        </TextView>
    </LinearLayout>
</LinearLayout>

The widget service has to specify the views factory, which is responsible for creating a view for each item in the collection.

public class StackWidgetService extends RemoteViewsService {
    @Override
    public RemoteViewsFactory onGetViewFactory(Intent intent) {
        return new StackRemoteViewsFactory(this.getApplicationContext(), intent);
    }
}

class StackRemoteViewsFactory implements RemoteViewsService.RemoteViewsFactory {
    private final ImageDownloader imageDownloader = new ImageDownloader();
    private List<Buzz> mBuzzes = new ArrayList<Buzz>();
    private Context mContext;
    private int mAppWidgetId;

    public StackRemoteViewsFactory(Context context, Intent intent) {
        mContext = context;
        mAppWidgetId = intent.getIntExtra(AppWidgetManager.EXTRA_APPWIDGET_ID, AppWidgetManager.INVALID_APPWIDGET_ID);
    }

    public void onCreate() {
    }

    public void onDestroy() {
        mBuzzes.clear();
    }

    public int getCount() {
        return mBuzzes.size();
    }

    public RemoteViews getViewAt(int position) {
        RemoteViews rv = new RemoteViews(mContext.getPackageName(), R.layout.stackwidget_item);
        
        if (position <= getCount()) {
            Buzz buzz = mBuzzes.get(position);
            
            if (buzz.picture != null) {
                try {
                    Bitmap picture = imageDownloader.downloadBitmap(buzz.picture, 100, 100, 70);
                    rv.setImageViewBitmap(R.id.stackWidgetItemPicture, picture);
                }
                catch(Exception e) {
                    Logging.e("Error reading picture file", e);
                }
            }
            
            if (!buzz.username.isEmpty()) {
                rv.setTextViewText(R.id.stackWidgetItemUsername, buzz.username);
            }
            rv.setTextViewText(R.id.stackWidgetItemContent, Html.fromHtml(buzz.content));
            
            // store the buzz ID in the extras so the main activity can use it
            Bundle extras = new Bundle();
            extras.putString(HoneybuzzListActivity.EXTRA_ID, buzz.id);
            Intent fillInIntent = new Intent();
            fillInIntent.putExtras(extras);
            rv.setOnClickFillInIntent(R.id.stackWidgetItem, fillInIntent);
        }
        
        return rv;
    }

    public RemoteViews getLoadingView() {
        return null;
    }

    public int getViewTypeCount() {
        return 1;
    }

    public long getItemId(int position) {
        return position;
    }

    public boolean hasStableIds() {
        return true;
    }

    public void onDataSetChanged() {
        mBuzzes = Buzz.getBuzzes(HoneybuzzApplication.buzz, mContext);
    }
}

The important tidbits:

StackWidgetService: override the onGetViewFactory method so we can return our own views factory.
StackRemoteViewsFactory: will handle the views for each item in the collection.
- onDataSetChanged: loads the necessary data that will be displayed in the widget.
- onDestroy: make sure to destroy any objects that are no longer needed.
- getViewAt: must return a view for the item at the specified position. We create a new view from the layout file specified previously, then we get the appropriate Buzz object which we use to fill the view with information. At the end we make sure the view has the on-click Intent, so that when it gets clicked, it will open the Honeybuzz application and load the correct Buzz object.

How to create a preview image for your widget

A preview image will be shown when the user is selecting the widget to add from the gallery and will help a user understand how the widget looks like and what it does. If you don't provide a preview image for your widget, your application's icon will be used instead.

Thankfully, the Android emulator and the Android SDK come with an application to generate a preview image from a widget. The application is called "Widget Preview" and you can either use it from the emulator or copy it to your own device and run it from there. You will find the code for the application in your SDK folder at android-sdk\samples\android-11\WidgetPreview. You can open the project, build it and copy it to your device. The application is straightforward to use and very useful. After generating the image, you need to include it in the drawables of your project and specify it in the widget provider info resource (see the provider info above for an example).

More resources

Next: Publish to the Android Market

Android 101: How to monetize your Android application

dsilva — Fri, 09 Dec 2011 09:35:50 +0000

Previous: Services, AsyncTasks and Notifications

There are several ways you can make money through the apps you develop. Let’s look at a few. See below for more extensive explanation on each of these:

Paid apps
In-app purchase
Ads

Since we used ads in our application, you can find at the end of the article a step-by-step section on how to set up ads using Google’s AdMob.

Paid Apps

Paid apps are downloaded less often than free aps, but for each person that downloads your app you’ll have a guarantee of profit.

You have different options for selling paid apps.

Paid version only

You can have only a paid version of you app. Think well before going through this path. The user needs to trust that the promises you make about the app will come true after he downloads it. The user is giving you money for something he most probably hasn’t tried before. You need to gain his trust. Prepare a good marketing campaign. Listen to what other users are telling you through reviews. Make some demo videos of your app, this way the user has a better knowledge of the feel of the app. Have a good app portfolio, your history speaks for you. 5 stars apps in the past is an assurance of good quality in the present.

Lite version

You can have a free lite version of your app and a paid version with extra functionality. This is a great way of teasing the users about the value of the app. The user can play around, test the main functionality, the feel of the app, and then decide if they want the full package. Be sure to give the user enough, even in the lite version, so that he can use it properly and test it thoroughly, but leave out the special stuff that the user surely won’t be able to live without.

Ad free

You can have a free ad-supported version of your app and in it you promote your ad-free paid app.

Make the decision

Study the option of selling your app. People will only give money for something that they can’t find for free and will give them added value. Study the market, what kind of other apps exist that do something similar to yours? How are these other apps being monetized?

In-app purchase

With in-app purchases you monetize your app selling content or extra functionality through the app itself. In a game you can have extra levels available through extra payment, for example.

Freemium

A freemium app is an app the user is free to download but then requires in-app purchases to expand the app usage. Image you have a bookstore app. You give the app free of charge and sell books to the user through the app.

Ads are an important way to get revenue from your apps. Ads give you the advantages of having a free app (that is more easily downloaded than a paid one) and still be able to monetize it. Ads are an old way of monetizing a product. TV, magazines, websites, already do it.

Inside your app you can control where your ads are shown.

Learn the basics

You need to know how ads work, if you want to optimize your income. Cost per Click, Request vs. Impressions, etc, are all concepts you need to learn to understand how ads generate money.

Track your results

You can also track the app usage as to optimize the ads. You can easily do this with Google Analytics.

Cross Promotion

Cross promote your apps, show in one of your apps ads for other apps you’ve created. You might have a small free app where you promote other paid apps you’ve created.

Sponsorship

You can also try to find a sponsor for your app. For example, if you have a fitness related app, you can find a company that sells energy drinks and negotiate a sponsorship. Of course this isn’t the easiest thing to achieve, but it might be something that fits the profile of your app.

Installing ads in your app with AdMob

It’s very easy to install ads in your application using Google’s AdMob. Google provides a very clear and succinct set of instructions on how to configure AdMob.

1. Create an AdMob Account or use your existing Google account.

2. Add a new app in your AdMob account.

It will show up under Sites & Apps.

3. Go to Manage Settings.

Here you’ll find the Publisher ID you’ll use later on. But now click on “Get Publisher Code”. Here we can download the libraries necessary to add to your app project.

4. Configure your code.

Use Google’s instructions to add the code you’ve downloaded to your code project.

You’ll also need the Publisher ID I’ve mentioned in the previous step.

5. Done.

More resources

Next: How to create a StackView widget

Android 101: Services, AsyncTasks and Notifications

dsilva — Wed, 07 Dec 2011 11:00:40 +0000

Previous: Use Fragments to handle different screen orientations

AsyncTasks

The AsyncTask is kind of like a thread, only easier to use as you don’t need to manipulate threads or handlers. It allows you to perform operations in the background without freezing the main UI thread, but you can still manipulate the UI from it.

You need to create a subclass of AsyncTask in order to use it. So you’ll need to override its methods, being the most relevant the doInBackground(Params...) and as its name indicates it will execute the work that needs to be done in the background.

In our application we needed to load the Buzz stream, so the best way to do this would be with an AsyncTask. This will free up the main thread of the application, meaning the user won’t see any freezing of the UI, or worse, a warning to shut down the app because its taking too long to respond. See more details on how to design your app for responsiveness.

Here’s an example from our app of the usage of AsyncTask:

class LoadBuzzes extends AsyncTask<Void, Void, ArrayList< Buzz>> {
	@Override
	protected void onPreExecute() {
		getHoneybuzzActivity().showProgress(); // show loading screen
	}

	@Override
	protected ArrayList<Buzz> doInBackground(Void... params) {
		try {
			// we’re caching the data so we’ll check if we need to update it from the server or just load from cache
			boolean refresh = Buzz.getUpdateChachedBuzzes(getActivity());
			Buzz.setUpdateChachedBuzzes(getActivity(), false);
			return Buzz.getBuzzes(getBuzz(), getActivity(), refresh);
		}
		catch (Exception e) {
			handleException(e);
			return null;
		}
	}

	@Override
	protected void onPostExecute(ArrayList< Buzz> feed) {
		getHoneybuzzActivity().hideProgress(); // hide loading screen
		if (feed != null) {
			try {
				// load buzzes list onto the UI
			}
			catch(Exception e) {
				Logging.e("Error loading buzzes", e);
			}
		}
	}
}

And this is how you’d launch this task:

new LoadBuzzes().execute();

Services

From the Android documentation:

A Service is an application component representing either an application's desire to perform a longer-running operation while not interacting with the user or to supply functionality for other applications to use.

To fetch the user stream from Google Buzz we used a Service that runs in the background and checks for updates. When updates are found, the service creates a new user notification. Here are the most important code bits from our sync service class.

private Timer mTimer = new Timer();
private NotificationManager mNM;

@Override
public void onCreate() {
	mNM = (NotificationManager)getSystemService(NOTIFICATION_SERVICE);

	// the time interval between checks is saved in the app’s preferences
	SharedPreferences prefs = HoneybuzzApplication.getSharedPreferences();
	int intervalMinutes = Integer.parseInt(prefs.getString(HoneybuzzApplication.PREFERENCE_INTERVAL, String.valueOf(30)));
	int intervalMiliseconds = intervalMinutes * 60 * 1000;
	mTimer.schedule(mUpdateTask, intervalMiliseconds, intervalMiliseconds);
}

private TimerTask mUpdateTask = new TimerTask() {
	@Override
	public void run() {
		try {
			String lastUpdated = com.quasibit.honeybuzz.Buzz.getLastUpdated(getApplicationContext());
			String serverUpdate = com.quasibit.honeybuzz.Buzz.getServerUpdated(HoneybuzzApplication.buzz, getApplicationContext());

			// check if the last update to the server is the same as the last update available in cache
			if (!lastUpdated.equals(serverUpdate)) {
				Buzz.getBuzzes(HoneybuzzApplication.buzz, getApplicationContext(), true);

				// after the updates are loaded the user gets a notification
				showNotification();
			}
		}
		catch(Exception e) {
			Logging.e(e);
		}
	}
};

Here’s a nice article with the comparison between AsyncTask, Service, Thread and IntentService.

Notifications

A Notification is a message that will show up in the system’s status bar warning the user of something he should know about. Its implementation is very simple.

In the case of our app we’re notifying the user whenever we find updates in the user’s Buzz stream. Here’s how we launch our notification:

private NotificationManager mNM = (NotificationManager)getSystemService(NOTIFICATION_SERVICE);

private void showNotification() {
	String msg = getApplicationContext().getString(R.string.notif_buzzupdates);
	Notification notification = new Notification(R.drawable.ic_launcher_honeybuzz, msg, System.currentTimeMillis());
	PendingIntent contentIntent = PendingIntent.getActivity(this, 0, new Intent(this, HoneybuzzListActivity.class), 0);
	notification.setLatestEventInfo(this, getApplicationContext().getString(R.string.app_name), msg, contentIntent);
	mNM.notify(NOTIFICATION, notification);
}

Optionally you can add a ticker-text message, an alert sound, vibration and/or flashing LED to your notification.

Next: How to monetize your Android application

Android 101: Use Fragments to handle different screen orientations

nunof — Mon, 05 Dec 2011 08:42:09 +0000

Previous: Styles and Themes

Honeycomb introduced the concept of Fragments. Fragments are the answer for handling different screen sizes, from phones to tablets, TVs and other gadgets. A Fragment represents a portion of the user interface. An Activity can have several Fragments and the same Fragment can be used in several Activities.

Let us consider the most common example that demonstrates its usefulness. A left pane with a listing of items and a right pane with details of the currently selected item. Such is the layout of the Honeybuzz application. A layout like this can be built with two Fragments: one for the listing of items and the other for the details of an item. Depending on the device orientation, one might display both Fragments side by side or, if in portrait mode, only one of the Fragments would be displayed (first a listing would be shown and, when an item is selected, the details replace the listing).

Basic list and details layout with Fragments

Let us see how to build a layout such as the one in the Honeybuzz application. Here are the different parts involved:

ListActivity: has a different layout depending on screen orientation:
- layout: layout in landscape mode. Contains both ListFragment and DetailsFragment.
- layout-port: layout in portrait mode. Only contains ListFragment.
DetailsActivity: only used in portrait mode. Contains the DetailsFragment.
ListFragment: when an item is clicked, depending on the screen orientation, will either update the DetailsFragment or open the DetailsActivity.

We basically have two different strategies and we will use them depending on the screen orientation.

Create the ListActivity and the ListFragment

The ListActivity is pretty straightforward. It is a normal Activity, but with a different layout for each screen orientation. As I explained previously, the layout in landscape mode contains both the ListFragment and DetailsFragment and the layout in portrait mode only contains the ListFragment.

Android is pretty smart in picking up the right resource file for a layout. If the device is in landscape mode, Android will first look into the layout-land folder for a resource file. If it is not available, it will try to load it from the layout folder. Likewise for portrait mode, but using the layout-port folder instead. You basically create two different layout files with the same name and place one in each folder and Android will load it appropriately according to the screen orientation.

Here is how the layout file looks like in landscape:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="fill_parent">
    <fragment class="com.quasibit.honeybuzz.HoneybuzzListFragment"
            android:id="@+id/listFragment"
            android:layout_weight="1"
            android:layout_width="@dimen/list_item_size"
            android:layout_height="fill_parent" />
    <fragment class="com.quasibit.honeybuzz.HoneybuzzDetailsFragment"
            android:id="@+id/details"
            android:layout_weight="2"
            android:layout_width="match_parent"
            android:layout_height="fill_parent"
            android:background="?android:attr/detailsElementBackground" />
</LinearLayout>

And in portrait mode:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <fragment class="com.quasibit.honeybuzz.HoneybuzzListFragment"
            android:id="@+id/listFragment"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
</LinearLayout>

Moving on to the ListFragment, this will be the Fragment that displays a list of items. It can use a basic layout file. My layout only has a LinearLayout, a ListView and TextView:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/listLayout"
      android:orientation="vertical" 
      android:layout_width="fill_parent"
      android:layout_height="wrap_content">
    <ListView
        android:id="@+id/listBuzzes" 
        android:drawSelectorOnTop="false" 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
    <TextView android:id="@android:id/empty"
               android:layout_height="fill_parent"
               android:text="@string/no_activities"
               android:layout_width="wrap_content"
               android:layout_gravity="left"
               android:layout_marginLeft="10dp"
               android:layout_marginTop="10dp" />
</LinearLayout>

The important part is the Fragment class. Here is an excerpt with the most important bits:

public class HoneybuzzListFragment extends HoneybuzzFragment implements OnItemClickListener {
    protected String mCurrentId;
    protected ListView mListView;
    protected ArrayList<com.quasibit.honeybuzz.Buzz> mBuzzes;
    protected Boolean mDualPane;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.list_fragment, container, false);
        
        return view;
    }
        
    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        
        // set list view properties
        this.mListView = (ListView) getActivity().findViewById(R.id.listBuzzes);
        
        if (this.mListView != null) {
            this.mListView.setOnItemClickListener(this);
            this.mListView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
        }

        // check if we are in dual pane mode
        HoneybuzzDetailsFragment details = (HoneybuzzDetailsFragment) getFragmentManager().findFragmentById(R.id.details);
        mDualPane = !(details == null || !details.isInLayout());
        
        // get current id from saved state or extras
        if (savedInstanceState != null) {
            // Restore last state for checked position.
            mCurrentId = savedInstanceState.getString(HoneybuzzListActivity.EXTRA_ID);
        }
        
        if (this.getActivity().getIntent() != null) {
            String id = this.getActivity().getIntent().getStringExtra(HoneybuzzListActivity.EXTRA_ID);
            
            if (id != null && !id.isEmpty()) {
                mCurrentId = id;
            }
        }
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putString(HoneybuzzListActivity.EXTRA_ID, mCurrentId);
    }

    @Override
    public void onItemClick(AdapterView<?> l, View v, int position, long id) {
        if (position < mBuzzes.size()) {
            // get matching buzz id from position
            String buzzId = mBuzzes.get(position).id;
            showDetails(buzzId);
        }
    }

    public void showDetails(String id) {
        if (id != null && !id.isEmpty() && mBuzzes != null && !mBuzzes.isEmpty()) {
 // find buzz object
            com.quasibit.honeybuzz.Buzz buzz = getBuzz(id);
            
            if (buzz != null) {
                mCurrentId = id;
                
                // highlight selected item
                int index = mBuzzes.indexOf(buzz);
                
                if (index >= 0) {
                    mListView.setItemChecked(index, true);
                }
        
                // load item
                if (mDualPane) {
                    HoneybuzzDetailsFragment details = (HoneybuzzDetailsFragment) getFragmentManager().findFragmentById(R.id.details);
                    details.load(buzz);
                } else {
                    // launch new activity because we're in single mode pane
                    Intent showContent = new Intent(getActivity(), HoneybuzzDetailsActivity.class);
                    showContent.putExtra(HoneybuzzDetailsActivity.EXTRA_BUZZ, buzz);
                    startActivity(showContent);
                }
            }
        }
    }
}

Notice the following:

The class inherits from HoneybuzzFragment, which is just a Fragment with some Google Analytics tracking code and a few other helper methods.
onCreateView: used to inflate the proper layout.
onActivityCreated: determine if we are in dual pane mode and register the findings in boolean mDualPane. We also try to read the current ID both from the saved instance state (when the Activity is being recovered) and the extras data (when another part of the application requests to open a particular ID).
onSaveInstanceState: the current ID gets saved before the Activity goes to a background state. This ID gets recovered when the Activity is recreated.
showDetails: loads the Buzz object with the given ID. The important thing to notice here is how the details are shown. If we are in dual pane mode, we retrieve the HoneybuzzDetailsFragment and we pass the Buzz object. Otherwise, we launch the HoneybuzzDetailsActivity and pass the Buzz object.

Building the DetailsFragment and DetailsActivity

The DetailsActivity will only be used in portrait mode. In portrait mode we need both a ListActivity and a DetailsActivity, because we have two different screens and we will only show one at a time.

The DetailsActivity is pretty straightforward, we just reuse the DetailsFragment (which is used both in the ListActivity as well as in the DetailsActivity):

public class HoneybuzzDetailsActivity extends HoneybuzzActivity {
    public static final String EXTRA_BUZZ = "com.quasibit.honeybuzz.HoneybuzzListActivity.EXTRA_BUZZ";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
            // If the screen is now in landscape mode, we can show the
            // dialog in-line with the list so we don't need this activity.
            finish();
            return;
        }

        if (savedInstanceState == null) {
            // During initial setup, plug in the details fragment.
            HoneybuzzDetailsFragment details = new HoneybuzzDetailsFragment();
            details.setArguments(getIntent().getExtras());
            getFragmentManager().beginTransaction().add(android.R.id.content, details).commit();
        }
    }
}

The DetailsFragment contains a load method which fills the layout with the data of the Buzz object.

public class HoneybuzzDetailsFragment extends HoneybuzzFragment implements OnClickListener {
    protected com.quasibit.honeybuzz.Buzz mBuzz;
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.details, container, false);
        
        return view;
    }
        
    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        
        if (savedInstanceState != null) {
            // Restore last state for checked position.
            mBuzz = (Buzz) savedInstanceState.getSerializable(HoneybuzzDetailsActivity.EXTRA_BUZZ);
        }
        
        if (this.getActivity().getIntent() != null) {
            com.quasibit.honeybuzz.Buzz buzz = (Buzz) this.getActivity().getIntent().getSerializableExtra(HoneybuzzDetailsActivity.EXTRA_BUZZ);
            
            if (buzz != null) {
                mBuzz = buzz;
            }
        }
        
        if (mBuzz != null) {
            load(mBuzz);
        }
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putSerializable(HoneybuzzDetailsActivity.EXTRA_BUZZ, mBuzz);
    }
    
    public void load(com.quasibit.honeybuzz.Buzz buzz) {
        mBuzz = buzz;
        
        if (buzz != null) {
            // load views with Buzz object data
        }
    }
}

In onActivityCreated we try to find a Buzz object to display, either one saved before the Activity went to the background, or one passed in the extras (called from another part of the application).

More resources

Next: Services, AsyncTasks and Notifications

Android 101: Styles and Themes

dsilva — Wed, 30 Nov 2011 09:15:55 +0000

Previous: How to create an options menu for the Action Bar

What are styles and themes in Android? From the Android’s Developer Guide we know that:

“A style is a collection of properties that specify the look and format for a View or window. A style can specify properties such as height, padding, font color, font size, background color, and much more. A style is defined in an XML resource that is separate from the XML that specifies the layout. ”

“A theme is a style applied to an entire Activity or application, rather than an individual View. When a style is applied as a theme, every View in the Activity or application will apply each style property that it supports. ”

So to summarize, a style is a set of proprieties that define the way a View or window looks. A theme is a specific kind of style that is scoped at Activity or application level.

Declare and apply a style

Let’s see how to declare a style. Add this to the file res/values/styles.xml (if it doesn't already exist, create it).

<resources>
	<style name="AppTheme.Button" parent="@android:style/Widget.Button">
		<item name="android:textSize">12sp</item>
		<item name="android:paddingLeft">10dp</item>
		<item name="android:paddingRight">10dp</item>
	</style>
</resources>

This style has the parent attribute set to the Button widget. What this means is that our custom theme will inherit all the style definitions of a standard button. So if we declare nothing in our style, then our button will look exactly the same as the standard button. In this case we override the text and padding properties.

<Button
	style="@style/AppTheme.Button"
	android:text="@string/buttontext" />

What we did here is give a specific button in our application a custom style we’ve created. Something that might be more interesting than this is to give all the buttons in our application a custom look and feel. And the correct way to do this is not by changing the declaration of every single button in our app, but by creating a theme.

Declare and apply a theme

This is how to declare a theme:

<style name="AppTheme.Light" parent="@android:style/Theme.Holo.Light">
	<item name="android:textSize">14sp</item>
	<item name="android:buttonStyle">@style/AppTheme.Button</item>
	<item name="android:editTextStyle">@style/AppTheme.EditText</item>
	<item name="listItemStyle">@style/AppTheme.ListItemStyle</item>
</style>

Place this in the same place as you would a normal style (res/values/styles.xml).

Pretty much the same as the style declaration, but you might notice the difference in the parent attribute of the style. The parent here is an out of the box android theme.

What you might also notice is the second item node. Here we’re declaring the buttonStyle which will be applied to all the buttons under this theme. You can see that we’re referencing the style we’ve created before.

You can now apply this theme to an activity or to the whole application. You need to edit the AndroidManifest.xml file.

<application android:theme="@style/AppTheme.Light">
<activity android:theme="@style/AppTheme.Light ">

Use one or the other, depending on the scope you need.

Style Inheritance

In our application we have two themes, a light and a dark one. Therefore we created two theme declarations.

(Light)

(Dark)

<style name="AppTheme.Light" parent="@android:style/Theme.Holo.Light">
	<item name="android:textSize">14sp</item>
	<item name="android:buttonStyle">@style/AppTheme.Button</item>
	<item name="android:editTextStyle">@style/AppTheme.EditText</item>
	<item name="listItemStyle">@style/AppTheme.ListItemStyle</item>
</style>

<style name="AppTheme.Dark" parent="@android:style/Theme.Holo">
	<item name="android:textSize">14sp</item>
	<item name="android:buttonStyle">@style/AppTheme.Button</item>
	<item name="android:editTextStyle">@style/AppTheme.EditText</item>
	<item name="listItemStyle">@style/AppTheme.ListItemStyle.Dark</item>
</style>

Besides the parent attribute you can use another declaration of inheritance through the naming convention. For instance, for the declaration of the dark theme widgets, we can inherit all the definitions from the light theme definition and only override what we need:

<style name="AppTheme.ListItemStyle.Dark">
	<item name="android:background">@color/list_item_dark</item>
</style>

AppTheme.ListItemStyle.Dark is interpreted as an inheritance from the already defined AppTheme.ListItemStyle. This is a more structured and readable way to declare parenting relationships, especially if you have several themes or widget styles.

See all available Android widgets to override here .

Create a custom style for a View

One of the proprieties on the theme definition I showed you is the listItemStyle.

<style name="AppTheme.Light" parent="@android:style/Theme.Holo.Light">
	<item name="android:textSize">14sp</item>
	<item name="listItemStyle">@style/AppTheme.ListItemStyle</item>
</style>

<style name="AppTheme.ListItemStyle">
	<item name="android:background">@color/list_item</item>
</style>

I had to create this custom attribute value because I wanted to style a custom LinearLayout view differently for each of my themes and that option wasn’t available by default in the android namespace (as the android:textSize is).

Here’s my view definition:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/feedListItem"
	android:layout_height="wrap_content"
	android:layout_width="fill_parent"
	style="?listItemStyle">
	<ImageView android:id="@+id/picture"
		android:layout_height="100dip"
		android:layout_width="100dip"/>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
		android:id="@+id/user"
		android:orientation="vertical"
		android:layout_height="wrap_content"
		android:layout_width="fill_parent"
		android:padding="10dp">
		<TextView android:id="@+id/textUsername"
			android:textAppearance="?android:attr/textAppearanceSmall"
			android:layout_height="wrap_content"
			android:layout_width="fill_parent"
			android:layout_gravity="center_horizontal"
			android:textStyle="bold"/>
		<TextView android:id="@+id/textContent"
			android:layout_height="fill_parent"
			android:layout_width="fill_parent"
			android:paddingTop="6dp"
			android:maxLines="3"/>
	</LinearLayout>
</LinearLayout>

Notice the style attribute in the parent LinearLayout.

Last thing we need to do for this to work is declare the new attribute value. Otherwise you’ll get an error saying the attribute doesn’t exist:

Under res/values/attrs.xml create a new declaration:

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<attr name="listItemStyle" format="reference" />
</resources>

Change the Style or Theme at runtime

Since we had two different themes, we wanted to allow the user to change the active theme through the preferences.

We save the selected preference in the application’s SharedPreferences and load it in the Activity’s onCreate method.

public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	SharedPreferences prefs = HoneybuzzApplication.getSharedPreferences();
	String themeName = prefs.getString(HoneybuzzApplication.PREFERENCE_THEME, "AppTheme.Light");
	int themeId = getResources().getIdentifier(themeName, "style", getPackageName());
	setTheme(themeId);
}

You need to do this for every Activity or you can do as we did and create parent Activity that handles all the cross-app customizations. All our other Activities inherit form it.

We also need to reload the app theme after the user changes the settings. We do this in our parent Activity:

// handle updates to preferences
public void onSharedPreferenceChanged(SharedPreferences prefs, String key) {
	if (key.equals(HoneybuzzApplication.PREFERENCE_THEME)) {
		// recreate activity so theme gets updated
		this.recreate();
	}
}

More resources

Next: Use Fragments to handle different screen orientations

Android 101: How to create an options menu for the Action Bar

nunof — Mon, 28 Nov 2011 07:53:41 +0000

Previous: Storing and retrieving user preferences

A menu is useful to provide access to different parts of your application. It's easy to add a menu to an Android application. Let's see how to do it.

Create a menu resource file

The first step is to create a menu folder under the res folder of your application.

Then add a new Android XML File.

Define individual options using the item element. Specify the id, icon and title for each option. Here is the menu file for the Honeybuzz application:

<?xml version="1.0" encoding="utf-8"?>
<menu
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menuRefresh"
          android:icon="@android:drawable/ic_popup_sync"
          android:title="@string/menu_refresh"
          android:alphabeticShortcut="r"
          android:showAsAction="always" />
    <item android:id="@+id/menuProgress"
          android:actionLayout="@layout/progress"
          android:showAsAction="always" />
    <item android:id="@+id/menuNewBuzz"
          android:icon="@android:drawable/ic_input_add"
          android:title="@string/menu_new_buzz"
          android:alphabeticShortcut="n"
          android:showAsAction="ifRoom|withText" />
    <item android:id="@+id/menuAccounts"
          android:icon="@android:drawable/ic_lock_lock"
          android:title="@string/menu_accounts"
          android:alphabeticShortcut="a"
          android:showAsAction="withText" />
    <item android:id="@+id/menuPreferences"
          android:icon="@android:drawable/ic_menu_preferences"
          android:title="@string/menu_preferences"
          android:alphabeticShortcut="s"
          android:showAsAction="withText" />
    <item android:id="@+id/menuAbout"
          android:icon="@android:drawable/ic_menu_info_details"
          android:title="@string/menu_about"
          android:alphabeticShortcut="b"
          android:showAsAction="withText" />
</menu>

The showAsAction attribute allows you to specify when and how the option appears in the ActionBar (the ActionBar is the title bar that appears on top of an Android application starting with Honeycomb). Available values are: ifRoom, withText, never and always.

Inflate the menu and handle menu options

Next you want to update the Activity where you want the menu to appear. You need to override onCreateOptionsMenu for inflating your menu file and override onOptionsItemSelected for handling the menu options. Here is how we build the menu for the Honeybuzz applcation:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
	this.menuHandler = menu;

	MenuInflater inflater = getMenuInflater();
	inflater.inflate(R.menu.menu, menu);
	hideProgress();

	return super.onCreateOptionsMenu(menu);
}

public void showProgress() {
	this.menuHandler.findItem(R.id.menuRefresh).setVisible(false);
	this.menuHandler.findItem(R.id.menuProgress).setVisible(true);
}

public void hideProgress() {
	this.menuHandler.findItem(R.id.menuProgress).setVisible(false);
	this.menuHandler.findItem(R.id.menuRefresh).setVisible(true);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
	switch (item.getItemId()) {
		case android.R.id.home:
			// go home
			Intent intent = new Intent(this, HoneybuzzListActivity.class);
			intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
			startActivity(intent);
			return true;
		case R.id.menuNewBuzz:
			startActivity(new Intent(this, HoneybuzzAddActivity.class));
			return true;
		case R.id.menuAccounts:
			showDialog(DIALOG_ACCOUNTS);
			return true;
		case R.id.menuPreferences:
			startActivity(new Intent(this, HoneybuzzPreferences.class));
			return true;
		case R.id.menuRefresh:
			// refresh buzzes (handled on child Activity)
			return true;
			case R.id.menuAbout:
			loadAboutDialog(getString(R.string.about_title));
			return true;
	}

	return super.onOptionsItemSelected(item);
}

The Action Bar appears by default in Honeycomb. It sits at the top of the screen and includes the application's icon. The menu will be added to the Action Bar and depending on the settings of each option, some options will appear as buttons with only an icon, while the remainder will be available as text options via a dropdown.

For each option selected we usually start a new Activity. Because most Activities will inherit from this main Activity, they will also share the same menu. The showProgress/hideProgress methods are called when the application is busy processing information. There is a refresh button that can be clicked to reload the data and when the application is processing the refresh button will be replaced by a progress indicator.

For handling the home button (the icon button of your application that sits at the top left) you compare the item ID to android.R.id.home.

How to generate icons for menu options and the Action Bar

To display your menu options you will generally want an icon. You have to build several images to accommodate for different screen sizes. The Android Asset Studio is a useful utility that generates the different image files. You have to provide an image or select one from the clipart gallery and you can provide text as well. There are a few other configuration options (padding, trim, theme) and at the end you can download a zip archive with all the images.

The Android Asset Studio can also be used for generating icons for other parts of your application (launcher, action bar, etc.) and is part of the android-ui-utils, which also provides Photoshop icon templates that follow the icon design guidelines for Android.

Besides creating your own icons you can also use Android's own icons. Android comes with a set of drawables that can be used in many different situations. For example, for Froyo (Android 2.2) you can check the Android Drawables explorer to see what is available. You access these resources like this: android.R.drawable.ic_menu_save.

For checking the drawables available in Honeycomb (or any other version) I recommend that you add an ImageView to a layout file, using the "Graphical Layout" view. Then if you choose "System Resources" you will see all the available options as well as a preview image.

More resources

Next: Styles and Themes

Android 101: Storing and retrieving user preferences

nunof — Fri, 25 Nov 2011 07:39:38 +0000

Previous: Using Google Analytics in your Android application

Letting users customize an application to their liking is one of the most basic features of an application. In this article we will describe how you can build a preferences screen for your Android application and how to store and retrieve user preferences.

How to create a preferences screen in Android

You can create a preferences screen by following these easy steps:

Create an xml folder under your res folder.
Create a preferences.xml file (specify that it is a resource of type Preference).

The root element of your preferences file should be a PreferenceScreen. Now you will need to add all the different options to the preferences.

Use PreferenceCategory to divide the options into meaningful groups.
Use the different preference widgets to specify each option, such as CheckBoxPreference, ListPreference and EditTextPreference, among others.

For each setting you will need to specify at least a key, a title and a summary. You can also specify default values, persistence options and other specific properties for each different widget.

Here is an example of the preferences file from the Honeybuzz application:

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen
  xmlns:android="http://schemas.android.com/apk/res/android">
    <PreferenceCategory android:title="@string/pref_category_design">
        <ListPreference
            android:title="@string/pref_theme_title"
            android:summary="@string/pref_theme_summary"
            android:key="honeybuzz.theme"
            android:persistent="true"
            android:defaultValue="AppTheme.Light"
            android:entries="@array/themeNames"
            android:entryValues="@array/themeValues" />
    </PreferenceCategory>
    <PreferenceCategory android:title="@string/pref_category_service">
        <ListPreference
            android:title="@string/pref_interval_title"
            android:summary="@string/pref_interval_summary"
            android:key="honeybuzz.interval"
            android:persistent="true"
            android:defaultValue="30"
            android:entries="@array/intervalNames"
            android:entryValues="@array/intervalValues" />
    </PreferenceCategory>
    <PreferenceCategory android:title="@string/pref_category_error">
        <CheckBoxPreference android:key="acra.enable"
            android:persistent="true"
            android:title="@string/pref_disable_acra"
            android:summaryOn="@string/pref_acra_enabled"
            android:summaryOff="@string/pref_acra_disabled"
            android:defaultValue="true"/>
        <CheckBoxPreference android:key="acra.syslog.enable"
            android:persistent="true"
            android:title="@string/pref_acra_syslog"
            android:summaryOn="@string/pref_acra_syslog_enabled"
            android:summaryOff="@string/pref_acra_syslog_disabled"
            android:defaultValue="true"/>
        <CheckBoxPreference android:key="acra.alwaysaccept"
            android:persistent="true"
            android:title="@string/pref_acra_alwaysaccept"
            android:summaryOn="@string/pref_acra_alwaysaccept_enabled"
            android:summaryOff="@string/pref_acra_alwaysaccept_disabled"
            android:defaultValue="false"/>
    </PreferenceCategory>
</PreferenceScreen>

Note: ListPreferences only works with string arrays. Don't try to use integer arrays (or any other kind) with ListPreferences or you will see an ugly error.

Create a preferences Activity

Now that the preferences screen is defined, you need to create an Activy to display it, by inheriting from PreferenceActivity and adding the preferences from the resource file.

package com.quasibit.honeybuzz;

import android.os.Bundle;
import android.preference.PreferenceActivity;
import android.preference.PreferenceManager;

public class HoneybuzzPreferences extends PreferenceActivity {
      @Override 
      public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 

        PreferenceManager prefMgr = getPreferenceManager();
        prefMgr.setSharedPreferencesName(HoneybuzzApplication.PREFERENCES_NAME);
        prefMgr.setSharedPreferencesMode(HoneybuzzApplication.PREFERENCES_MODE);
        
        addPreferencesFromResource(R.xml.preferences); 
      }
}

We also specify a shared preferences name and mode.

In the application's main class we define the preferences' constants and we set the default values for the PreferenceManager.

public class HoneybuzzApplication extends Application {
    public static final String PREFERENCES_NAME = "HoneybuzzPrefs";
    public static final int PREFERENCES_MODE = MODE_PRIVATE;

    public static final String PREFERENCE_THEME = "honeybuzz.theme";
    public static final String PREFERENCE_ISFIRSTUSE = "honeybuzz.firstuse";
    public static final String PREFERENCE_INTERVAL = "honeybuzz.interval";
    
    @Override
    public void onCreate() {
        ...

        PreferenceManager.setDefaultValues(this, PREFERENCES_NAME, PREFERENCES_MODE, R.xml.preferences, false); // set default preferences
        super.onCreate();
    }

    public static SharedPreferences getSharedPreferences() {
        return getInstance().getSharedPreferences(PREFERENCES_NAME, PREFERENCES_MODE);
    }
}

To start the preferences Activity, we added it to the application's menu and we call it using:

startActivity(new Intent(this, HoneybuzzPreferences.class));

The final result looks like this:

How to retrieve preferences

Because we added a helper method to the application's main class, we will use it to retrieve the user's preferences.

In this example we retrieve the user's selected theme:

SharedPreferences prefs = HoneybuzzApplication.getSharedPreferences();
String themeName = prefs.getString(HoneybuzzApplication.PREFERENCE_THEME, "AppTheme.Light");

Retrieving preferences this way becomes very simple.

SeekBarPreference

Soon you will find out that there is no SeekBarPreference widget. This is a very common type that is useful in many cases and is requested a lot. A SeekBarPreference is basically a slider, useful for numerical settings or of other kinds.

Fortunately for you, a lot of people have already been through that and they were kind enough to share it with the public.

I have found many different examples and each one is different, so you might as well check several of them if you are in need of such a widget:

More resources

Letting your users control ACRA (how to add ACRA's configuration options to your preferences screen)
Android Preferences
Steps to Adding Preferences to Your Application

Next: How to create an options menu for the Action Bar

Android 101: Using Google Analytics in your Android application

nunof — Wed, 23 Nov 2011 10:22:58 +0000

Previous: Error handling and reporting

Analytics will help you understand which parts of your application are most popular and where users get stuck the most. Google Analytics is not only for websites, it can also be used for Android applications.

Installing Google Analytics in your Android project

To add Google Analytics support in your Android application you need to follow these steps:

Download the Google Analytics SDK for Android.
Add the library libGoogleAnalytics.jar to your project. For how to do that refer to the article Development environment and project creation (see the part about adding external libraries).
Add the necessary permissions to your Android manifest.

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

Go to your Google Analytics account and create a (fake) website profile. Make sure to choose a descriptive URL.
You will have to indicate to your users, either somewhere in the application or in your terms of service, that you are tracking them anonymously.

Tracking a referrer install

An important part of your application's analytics is to know the source of the application install (in case you're using an advertisement, for example, or if you have several installation links in different websites).

To be able to track that you need to use a link with the following format:

http://market.android.com/search?q=pname:<package>&referrer=<referral>
<package> is the name of your application's package.
<referral> is a campaign specific information.
You can generate URLs using the Android Market Campaign Tracking tool.

You also need to add this to your application's manifest:

<application>

    <!-- Used for install referrer tracking (analytics) -->
    <receiver android:name="com.google.android.apps.analytics.AnalyticsReceiver"
              android:exported="true">
      <intent-filter>
        <action android:name="com.android.vending.INSTALL_REFERRER" />
      </intent-filter>
    </receiver>

</application>

Adding analytics tracking to your Activities

You can use the GoogleAnalyticsTracker to track page views and events in your application. A simple example:

GoogleAnalyticsTracker tracker = GoogleAnalyticsTracker.getInstance();
tracker.start(“your analytics tracking ID”, 20, this);
tracker.trackPageView("/welcome");
this.tracker.trackEvent("Category", "Action", "Label", "Value");
tracker.setCustomVar(1, "Name", "Value"); // first parameter is the slot (1 to 5)

To save battery life, tracked data is only dispatched at certain intervals (in the above example, every 20 seconds), but you can also dispatch it manually by using the tracker.dispatch() method.

To make our life easier, instead of manually adding code to all Activities, I created a class (from which all Activities will inherit) that not only tracks the current Activity, but also provides useful methods for tracking events and custom vars.

package com.quasibit.honeybuzz;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;

import com.google.android.apps.analytics.GoogleAnalyticsTracker;

public class TrackedActivity extends Activity {
    private static final String TRACKER_ID = "your analytics tracking ID ";
    private static final boolean DISPATCH_MANUAL = false;
    private static final int DISPATCH_INTERVAL = 20;
    private static final boolean DEBUG = false; // If true stores analytics requests in the log cat
    private static final boolean DRY_RUN = false; // If true only stores data locally (doesn't send data to analytics)

    @SuppressWarnings("unused")
    private static final int SCOPE_VISITOR = 1; // Call the first time your application is run on a device. Useful for anything that won't change during the lifetime of the installation of the application (app version, lite vs full, type of phone).
    
    @SuppressWarnings("unused")
    private static final int SCOPE_SESSION = 2; // Call at the beginning of an Activity. Applies to all pageviews and events for the lifecycle of the activity.
    
    @SuppressWarnings("unused")
    private static final int SCOPE_PAGE = 3; // Call before trackEvent or trackPageView that the custom variable should apply to.
    
    @SuppressWarnings("unused")
    private static final int SLOT_1 = 1;
    
    @SuppressWarnings("unused")
    private static final int SLOT_2 = 2;
    
    @SuppressWarnings("unused")
    private static final int SLOT_3 = 3;
    
    @SuppressWarnings("unused")
    private static final int SLOT_4 = 4;
    
    @SuppressWarnings("unused")
    private static final int SLOT_5 = 5;
    
    private GoogleAnalyticsTracker tracker;
    private String pageId;

    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        this.pageId = getClass().getSimpleName();
        this.tracker = GoogleAnalyticsTracker.getInstance();
        
        if (DISPATCH_MANUAL) {
            this.tracker.start(TRACKER_ID, this);
        } else {
            this.tracker.start(TRACKER_ID, DISPATCH_INTERVAL, getApplicationContext());
        }
        this.tracker.setDebug(DEBUG);
        this.tracker.setDryRun(DRY_RUN);
    }

    @Override
    protected void onResume() {
        super.onResume();

        this.tracker.trackPageView("/" + this.pageId);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        this.tracker.dispatch();
        this.tracker.stop();
    }

    public void dispatch() {
        if (this.tracker != null) {
            this.tracker.dispatch();
        }
    }

    public static void dispatch(final Context baseContext) {
        final GoogleAnalyticsTracker tracker = GoogleAnalyticsTracker.getInstance();
        tracker.start(TRACKER_ID, baseContext);
        tracker.dispatch();
        tracker.stop();
    }

    protected void trackPage(final String page) {
        this.tracker.trackPageView(page);
    }

    protected void trackEvent(final String category, final String action, final String label, final int value) {
        this.tracker.trackEvent(category, action, label, value);
    }

    protected void trackEvent(final String category, final String action, final String label) {
        trackEvent(category, action, label, 0);
    }

    protected void trackEvent(final String action, final String label, final int value) {
        this.tracker.trackEvent(this.pageId, action, label, value);
    }

    protected void trackEvent(final String action, final String label) {
        trackEvent(this.pageId, action, label, 0);
    }

    protected void setCustomVar(final int slot, final String name, final String value, final int scope) {
        this.tracker.setCustomVar(slot, name, value, scope);
    }

    protected void setCustomVar(final int slot, final String name, final String value) {
        this.tracker.setCustomVar(slot, name, value);
    }
}

Because we will also be using Fragments, a TrackedFragment class was also built.

package com.quasibit.honeybuzz;

import com.google.android.apps.analytics.GoogleAnalyticsTracker;

import android.app.Fragment;
import android.os.Bundle;

public class TrackedFragment extends Fragment {
    private GoogleAnalyticsTracker tracker;
    private String activityId;
    private String fragmentId;

    @Override
    public void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        this.tracker = GoogleAnalyticsTracker.getInstance();
        this.fragmentId = getClass().getSimpleName();
        this.activityId = getActivity().getClass().getSimpleName();
    }
    
    @Override
    public void onResume() {
        super.onResume();
        this.tracker.trackPageView("/" + this.activityId + "/" + this.fragmentId);
    }
}

For more information on how to use Google Analytics in Android be sure to watch the Google I/O session on Optimizing Android Apps with Google Analytics. Another good resource is the article Analytics for Android Apps that was published in the Android Developers blog.

Next: Storing and retrieving user preferences

Android 101: Error handling and reporting

nunof — Mon, 21 Nov 2011 08:08:00 +0000

Previous: Working with Google Buzz API

Error handling and reporting is an important aspect of an application because not only will you be aware of the more troublesome areas of your application, but you will also be able to provide a graceful experience in the event that your application crashes.

A very popular library for handling exceptions in Android is ACRA. ACRA will provide you with detailed crash reports and will store everything in a Google Doc form (or using a custom server script or even an email - but a Google Doc is a very handy and quick-to-setup solution).

Furthermore ACRA is customizable in the way that it is presented to the user: you can either have silent errors and background reporting or, on the other hand, provide the user with the option of sending an error report with a short description.

Starting with Froyo, crash reports are sent to the developer using the Android Market (if a user chooses to send them), but I find that ACRA is more customizable and provides accurate reports.

Setting up a Google Spreadsheet for ACRA reporting

You can read a detailed ACRA setup guide on the Google project site. I will just briefly describe the procedure with a few notes of my own.

Download the latest version from the ACRA site.
Go to Google Docs and import the template CrashReports-template.csv. Make sure conversion is enabled.
Open the new document and go to Tools > Form > Create a form.
Copy the formKey value that is visible at the bottom of your form window.
Type something in the description so that you can save the form.
If you want to receive an email notification each time an error report gets saved (or daily for example), you can edit the notification rules.
- On the old Google Docs interface you expand the Share dropdown and you will see the option there.
- On the new Google Docs interface you go to Tools > Notification rules...
- To have a better display of the error messages I advise you to resize the width of the columns and change the alignment as such:

Adding ACRA to your project

Add the ACRA library to your project. Follow the same instructions provided in the article Android 101: Development environment and project creation (see the part about adding external libraries).

In the most basic setup, you only need to specify an attribute in your Application class with the form key of your Google Spreadsheet. For this application, I went a little forward and specified a different set of options:

@ReportsCrashes(formKey="your form key",
                mode = ReportingInteractionMode.NOTIFICATION,
                resToastText = R.string.crash_toast_text, // optional, displayed as soon as the crash occurs, before collecting data which can take a few seconds
                resNotifTickerText = R.string.crash_notif_ticker_text,
                resNotifTitle = R.string.crash_notif_title,
                resNotifText = R.string.crash_notif_text,
                resNotifIcon = android.R.drawable.stat_notify_error, // optional. default is a warning sign
                resDialogText = R.string.crash_dialog_text,
                resDialogIcon = android.R.drawable.ic_dialog_info, //optional. default is a warning sign
                resDialogTitle = R.string.crash_dialog_title, // optional. default is your application name
                resDialogCommentPrompt = R.string.crash_dialog_comment_prompt, // optional. when defined, adds a user text field input with this text resource as a label
                resDialogOkToast = R.string.crash_dialog_ok_toast, // optional. displays a Toast message when the user accepts to send a report.
                sharedPreferencesName = HoneybuzzApplication.PREFERENCES_NAME, // Name of the SharedPreferences that will host the acra.enable or acra.disable preference.
                sharedPreferencesMode = HoneybuzzApplication.PREFERENCES_MODE // The mode that you need for the SharedPreference file creation: Context.MODE_PRIVATE, Context.MODE_WORLD_READABLE or Context.MODE_WORLD_WRITEABLE.
                )
public class HoneybuzzApplication extends Application {
    public static final String PREFERENCES_NAME = "HoneybuzzPrefs";
    public static final int PREFERENCES_MODE = MODE_PRIVATE;

    @Override
    public void onCreate() {
        ACRA.init(this); // error reporting
        Logging.setLoggingLevel(); // logging level
        PreferenceManager.setDefaultValues(this, PREFERENCES_NAME, PREFERENCES_MODE, R.xml.preferences, false); // set default preferences
        super.onCreate();
    }
}

Simply specifying the interaction mode for the error reporting, some custom strings and icons for the text in the dialogs and the preferences name so the users’ preferences get stored.

There are three types of interaction in ACRA:

SILENT: errors are sent without notifying users and the default crash report screen from Android is displayed (in Froyo or above).
TOAST: a simple toast message is displayed to the user and the report is sent without confirmation.
NOTIFICATION: a notification message pops up and the user has to explicitly send the error reports, with the option of specifying additional information.

Another nice feature is that your users can specify in the preferences of your application how they want the error reporting to occur.

Custom Logging class

I ended up creating a custom class, analogous to the android.utils.Log class, to aggregate all the logging functionality: not only to write ACRA reports, but also to write to Android's logs (retrievable with the LogCat). This class is used throughout the application to log information messages as well as exceptions and errors.

Depending on the logging level configured, reports will be reported to ACRA.

package com.quasibit.honeybuzz;

import java.util.logging.Level;
import java.util.logging.Logger;

import org.acra.ErrorReporter;

import android.util.Log;

public class Logging {
    private static Level LOGGING_LEVEL = Level.ALL;
    private static final String TAG = "Honeybuzz";
    
    public static void setLoggingLevel() {
        Logger.getLogger("com.google.api.client").setLevel(LOGGING_LEVEL);
    }
    
    public static int e(String tag, String msg, Throwable tr) {
        acraReport(Level.SEVERE, tag, msg, tr);
        
        return Log.e(tag, msg, tr);
    }
    
    public static int e(String msg, Throwable tr) {
        return e(TAG, msg, tr);
    }
    
    public static int e(Throwable tr) {
        return e(TAG, tr.getMessage(), tr);
    }
    
    public static int w(String tag, String msg, Throwable tr) {
        acraReport(Level.WARNING, tag, msg, tr);
        
        return Log.w(tag, msg, tr);
    }
    
    public static int w(String msg, Throwable tr) {
        return w(TAG, msg, tr);
    }
    
    public static int w(String tag, String msg) {
        acraReport(Level.WARNING, tag, msg);
        
        return Log.w(tag, msg);
    }
    
    public static int w(String msg) {
        return w(TAG, msg);
    }
    
    public static int i(String tag, String msg, Throwable tr) {
        acraReport(Level.INFO, tag, msg, tr);
        
        return Log.i(tag, msg, tr);
    }
    
    public static int i(String msg, Throwable tr) {
        return i(TAG, msg, tr);
    }
    
    public static int i(String tag, String msg) {
        acraReport(Level.INFO, tag, msg);
        
        return Log.i(tag, msg);
    }
    
    public static int i(String msg) {
        return i(TAG, msg);
    }
    
    public static int d(String tag, String msg) {
        acraReport(Level.FINEST, tag, msg);
        
        return Log.d(tag, msg);
    }
    
    public static int d(String msg) {
        return d(TAG, msg);
    }

    public static int v(String tag, String msg, Throwable tr) {
        acraReport(Level.FINE, tag, msg, tr);
        
        return Log.v(tag, msg, tr);
    }
    
    public static int v(String msg, Throwable tr) {
        return v(TAG, msg, tr);
    }
    
    public static int v(String tag, String msg) {
        acraReport(Level.FINE, tag, msg);
        
        return Log.v(tag, msg);
    }
    
    public static int v(String msg) {
        return v(TAG, msg);
    }

    private static void acraReport(Level level, String tag, String msg, Throwable tr) {
        if (level.intValue() >= LOGGING_LEVEL.intValue()) {
            acraReport(level, tag, msg);
            // report exception to acra silently
            ErrorReporter.getInstance().handleSilentException(tr);
        }
    }
    
    private static void acraReport(Level level, String tag, String msg) {
        if (level.intValue() >= LOGGING_LEVEL.intValue()) {
            ErrorReporter.getInstance().putCustomData(level.getName() + ": " + tag, msg);
        }
    }
}

Analyzing ACRA reports

Google Spreadsheets doesn’t exactly provide a user friendly way of reading error reports. There are applications that are being built to make use of the error reports provided by ACRA. You can see a few examples in the contributions page of the ACRA site.

BugSense, for example, works well with ACRA. I haven't tried it yet, but it seems to have some great features and only requires minimal configuration.

Next: Using Google Analytics in your Android application

Android 101: Working with Google Buzz API

dsilva — Wed, 16 Nov 2011 12:11:15 +0000

Previous: Development environment and project creation

Google APIs

Google Buzz API is a part of the most recent family of Google APIs. This family is based on a new API infrastructure (more about this on this Google IO presentation: How Google builds APIs ). On top of this new infrastructure Google has created a number of tools that help developers build their applications.

As of October 2011, Google announced it would be discontinuing Google Buzz and its API.

HTTP Transport

On Android you have a few options to make the HTTP transport of the messages to/from the Google service you are using (in our case it’s the Buzz service).

UrlFetchTransport - Google App Engine only
NetHttpTransport - Included in Java and Android SDK. Preferred choice on Android since Gingerbread.
ApacheTransport – Included in Android SDK. Preferred choice for older Android SDK’s up to Froyo
AndroidHttp.newCompatibleTransport() – Picks NetHttpTransport or ApacheTransport depending on the SDK level.

HTTP connections shouldn’t be performed in the main UI thread - you don’t want to freeze your main activity for an undetermined amount of time.

JSON

JSON has a big focus on the new Google APIs. You should use it as parser/serializer to avoid out-of-memory errors that can be caused by trying to load a JSON response as an object. There are a few choices for the JSON parser/serializer you might want to use.

JacksonFactory - Fastest. Based on popular Jackson library .
GsonFactory – Fast. Based on Google GSON library .
AndroidJsonFactory – Same as GSON and built into SDK 3.0 .

Authentication

The preferred way to handle authentication and account management in Android is through the usage of the class AccountManager . The AccountManager provides a centralized registry for the user’s online accounts.

The Google APIs provide a more specific way to handle Google accounts through the GoogleAccountManager class.

OAuth

Although not in its final draft yet, OAuth 2.0. is recommended for usage because of the benefits it brings in comparison to its previous version.

Supported by (almost) all Google APIs.
Finer grained scope of access.
Example for Google Buzz:
- https://www.googleapis.com/auth/buzz for read/write access to Buzz data.
- https://www.googleapis.com/auth/buzz.readonly for read access to Buzz data.
- https://www.googleapis.com/auth/photos for read access to Buzz photos.

OAuth tokens are temporary and expire in 1 hour. So it’s important that you check for 401 response errors when making requests and going through the authentication process whenever necessary. Here’s an example taken from a Google IO 2011 presentation (PowerPoint file available here , slide #50):

@Override
    protected ActivityFeed doInBackground(Void... params) {
     try {
        // execute HTTP requests
     } catch (HttpResponseException e) {
        if (e.response.statusCode == 401) {
          accountManager.invalidateAuthToken(accessProtectedResource.getAccessToken());
          accessProtectedResource.setAccessToken(null);
          SharedPreferences.Editor editor2 = settings.edit();
          editor2.remove(PREF_AUTH_TOKEN);
          editor2.commit();
          getAuthToken(account);
        }
     }

Here you can find a document by Google on using OAuth 2.0 to access Google APIs .

API Access Key

In addition to handling accounts you’ll also need an access key provided by Google to access Google users’ contents through APIs. Here’s an example with a dummy key:

buzz = new Buzz(new NetHttpTransport(), accessProtectedResource, new AndroidJsonFactory());
buzz.accessKey = "ABCdef123_9q";

You can get one of these access keys through the Google APIs Console .

Here you can find instructions on how to create an access key .

Google Buzz API

The Google APIs Explorer is a super useful tool to test the JSON returned by each call. Although you don’t need to use the JSON directly you can use the explorer to figure out the names of the fields and which field returns what.

There’s a Google IO presentation, Best Practices for Accessing Google APIs on Android , that gives you some nice pointers about the use of Google APIs and Yaniv Inbar, the presenter, uses code examples of how to fetch Google Buzz data. You can find the full working code of the example here (buzz-v1-json-oauth2-android-sample). This code was actually our starting point for our own app.

Limitations

The Google Buzz API Java Client 1.0.0 beta that we’ve used in our app is not 100% implemented, so you need to fetch some of the JSON attributes in an almost raw format. See here is how I had to fetch the attachment’s links from the buzz object:

ArrayList< ArrayMap<String, Object> > o = (ArrayList<ArrayMap<String, Object>>) a.links.unknownFields.get(linkType);
String s = (String) o.get(0).get("href");

Also, posts in your stream that aren’t public will show up with this message:

"Private post only viewable at https://plus.google.com/xxx/posts/xxx"

Next: Error handling and reporting

Android 101: Development environment and project creation

nunof — Mon, 14 Nov 2011 17:08:30 +0000

The first step you need to do is to install your development environment. We will be using Eclipse, the recommended IDE.

Installing and configuring the Android SDK and the development environment

Here's what you need to get started:

Download and install Eclipse (3.5 or greater): I used the "Eclipse IDE for Java Developers" edition. Currently running the Helios release (3.6).
Download and install JDK (5 or above): JRE is not enough. You must install the JDK (I'm using version 6).
Download and install the Android SDK .
Download and install the Android Development Tools (ADT) plugin for Eclipse: follow the instructions provided in the link.
Add platforms and components using the Android SDK and the AVD manager: be sure to add the platform for Android 3+, SDK tools and Google APIs.
For debugging in a physical device (phone, tablet, etc.) you will need to install a USB driver . The drivers sometimes come with the installation software for your device, but in many cases you will need to download them from the OEM site.

I also recommend that you use a source control system and the necessary plugins for Eclipse, although that's outside the scope of this article. You can browse the Eclipse Marketplace from within Eclipse (through the Help menu) for a lot of different plugins.

Creating your first Android project

Creating your first Android project is easy.

Go to File > New > Project...
Select Android Project from Android .

Specify the project details:
- Project name: Honeybuzz in this case.
- Build target: we will be targeting Android 3.0 for this application.
- Application name: the name of your application (usually it will be similar or the same as the project name, but not necessarily).
- Package name: this is a unique name that identifies your application. You should be careful in choosing this name to avoid conflicts with other applications. It's common to write the package name in the form of com.domain.application . In this case we chose com.quasibit.Honeybuzz (because we own the quasibit.com domain).
- Create activity: this should be checked for most applications (an Activity is basically a screen in a Android application) and you should choose a descriptive name. For example, the main Activity in our application is called HoneybuzzListActivity (because it shows a listing of the most recent buzzes).
- Min SDK version: minimum compatible version. For Honeycomb that is 11.

Adding external libraries

After creating the project we will add the libraries that we need. There are different ways in which you can manage your dependencies. A popular way is by using Maven. Using Maven has a few advantages such as automatically download Java libraries, but it also has some drawbacks: it is more complex to get started and in the case of Android it is not possible to start a debugging session on your device from within Eclipse, because the libraries will not be included in your APK (Android Application Package) in this case.

We will add the libraries manually:

Download all the necessary libraries:
- Google APIs Client Library for Java : I used version 1.4.1-beta. You can download the latest version here .
- Buzz API : using version 1-1.0.0-beta for this project. Also download the source and the JavaDoc.
Make a new folder libraries in your project.
Add the libraries, sources and available JavaDoc to this folder. Make sure they are copied, not linked. I do it this way so I can store everything in the source control. I added these libraries:
- google-api-client-1.4.1-beta
- google-api-client-extensions-android2-1.4.1-beta
- google-api-client-extensions-android3-1.4.1-beta
- google-api-client-googleapis-1.4.1-beta
- google-api-client-googleapis-extensions-android2-1.4.1-beta
- google-api-services-buzz-v1-1.0.0-beta
- And these dependencies:
  - gson-1.6
  - guava-r09
  - jackson-core-asl-1.6.7
  - jsr305-1.3.9
- In later articles we will also add libraries for analytics, ads and error reporting.
Specify the libraries in the project properties.
- Right click the project and open its properties.
- Go to Java Build Path and open the Libraries tab.
- Add all the libraries using the Add JARs... option:
  - Expand your project and the libraries folder and select the JAR.
  - Expand the JAR's details and specify the sources and JavaDoc location when available.
- You should end up with something similar to this:

The Google Plugin for Eclipse also helps adding Google APIs to your project, but we haven't used it in this case.

Setting up ProGuard

We will do an extra configuration step to help reduce the application size. ProGuard will shrink and optimize your Java files by stripping out unused code and performing code optimizations.

How to configure ProGuard for your Android application:

Edit the default.properties file and add the line:

proguard.config=proguard.cfg

Edit your proguard.cfg file and add the following lines:

# Needed by google-api-client to keep generic types and @Key annotations accessed via reflection

-keepclassmembers class * {
  @com.google.api.client.util.Key <fields>;
}

-keepattributes Signature,RuntimeVisibleAnnotations,AnnotationDefault

# Needed by Guava

-dontwarn sun.misc.Unsafe

This is the basis for the initial configuration of your project. Next we will do a very brief introduction to Android development.

Android Development Overview

The best resource for Android development is the Android Developers site: it has development guides, references and resources.

In this guide we will be talking about several different topics, but we won't go deep into Android fundamentals, because the Android Developers site already does a good job in that. For starters I would recommend reading What is Android? and Application Fundamentals.

Here is a very brief overview of an Android application:

Most applications have Activities. An Activity is basically a screen in your application.
Some applications use Services that run in the background. A Service doesn't have an interface and is usually used to perform long-running processes, such as updating the data for an application.
When you want to start an Activity or a Service you declare an Intent. An Intent doesn't have to be exclusive to your application. One example of an Intent is to open a web page in the user's browser.
Your application has a manifest. In the manifest you specify all your Activities, Services, your widgets, the required permissions and much more. It is at the root of your project and is called AndroidManifest.xml.
You define the interface for your Activities using layout files. Layouts usually contain one or more Views.
Resources are stored in the res folder. All your project images, layout files, strings, preferences, configuration values and more are stored here.
An Android application is delivered using an APK (Android Application Package): it is a compiled package with all the resources of your application. This is what gets installed on Android devices.

Before continuing I recommend that you read at least the first 4 tutorials found on the Android Developers site. A basic knowledge of Activities, layouts and resources will be required for the reminder of the development guide.

Next: Working with Google Buzz API

Android 101: Introduction to Android Development Guide

nunof — Mon, 14 Nov 2011 17:08:00 +0000

This is the first article in what will be a series of tutorials about Android development. This is meant as an introductory class to Android: it's for people who are already programmers but new to Android.

We will be covering the basics and focusing on features introduced in Honeycomb, going through the most common steps to build a fully functional Android application. Although we focus on Honeycomb, everything is still valid for Ice Cream Sandwich.

We got the idea for this guide when we were building a Google Buzz client called Honeybuzz. When Google+ was announced we decided to abandon the app, but at least make use of the knowledge we learned to help other people. We were still going to publish the app (as a demonstration), but when the shutdown of Google Buzz was announced , we realized it would be useless after a short while.

We will use the app as a reference point, serving as an example of how each topic might be applied in a real app. Following are a couple of screenshots of Honeybuzz.

These are the chapters of this guide:

An hyperlink will be added to each chapter after it is published.

We hope you enjoy this series of tutorials and we look forward to hearing your comments and suggestions.

Next: Development environment and project creation

Broculos.net now has a Google+ Page

nunof — Sat, 12 Nov 2011 18:27:01 +0000

You can now follow us on Google+ too! Google recently announced Google+ Pages, a way for brands and businesses to connect with customers and fans.

Be sure to add us to your Google+ circles and keep up to date with our latest news and articles.

How to create a Google+ Page

Creating a Google+ Page is pretty straitghtforward. Go to the Create a Google+ Page, choose the type of page and fill in all the details.

If you want to be able to apply for Direct connect, which is a way of users to find your page in Google by just typing + followed by the name of the page, you need to add this HTML code to the <head> of your site:

<link href="https://plus.google.com/PAGE_ID/" rel="publisher" />

Make sure to fill all the information in your Google+ Page, including the URL to your website and all the contact information.

A Google+ Badge, which is currently only available as a preview, let's a user add a page to his circles directly from your website. You can use the Google+ Badge configuration tool to generate the necessary code. Use a static badge in the meantime, while the standard badge is in preview, to be sure that all your visitors can see a link to your Google+ Page. You can see our own badge on the right sidebar.

SharePoint 2010 Branding: 100% horizontal top navigation

dsilva — Mon, 07 Nov 2011 12:00:19 +0000

In SharePoint 2007 the top navigation control was rendered as an entanglement of never ending tables. You couldn't (and probably didn't even want to try) to change it's design beyond colors and spacing. Now in SharePoint 2010 the top navigation is rendered in a very elegant manner with nested lists. This enables us front-end developers to create a lot of different layouts. I'll give you a few examples of how you can render the top navigation in an horizontal fashion. I'll give you the minimal amount of code necessary so that it can easily be reused.

Our starting point:

I'm working with only a two-level navigation, if you need more a level you'll need to work on top of this implementation to accommodate your needs.

Show 2nd level only on hover

Here I want the default behavior, except for the 2nd level rendering horizontally. One thing relevant here is that I've created some space bellow the 1st level to accommodate the 2nd level, so that it doesn't hover the rest of the content, but it's a part of the flow of the design.

Normal state:

Hovering 'Work' tab:

This is the code, I think is very self explanatory. Otherwise I added a few comment on key declarations.

.s4-toplinks {
	padding-bottom: 23px; /* create space to fit the 2nd level nav */
	position: relative;
}

.s4-toplinks .s4-tn li {
	position: static !important; /* 2nd level will be positioned relative to .s4-toplinks container */
}

/* hover 2nd level */
.s4-tn li.hover-off ul.dynamic,
.s4-tn li.hover ul.dynamic {
	left: 0 !important;
	bottom: 0 !important;
	top: auto !important; /* reset */
}

.s4-toplinks li  > ul.dynamic li.dynamic {
    float: left;
}

Horizontal only for 2nd level selected tab (always visible)

This is a very useful solution to the user as you can see the 2nd level of the site you're currently on. Other menus (for unselected tabs) will still be vertical. See next example on how to do this with all menus being horizontal (we'll be using JavaScript).

Normal state (when inside "Work" site):

Hovering another tab:

.s4-toplinks {
	padding-bottom: 23px; /* create space to fit the 2nd level nav */
	position: relative;
}

.s4-toplinks .s4-tn li.selected {
	position: static !important; /* 2nd level will be positioned relative to .s4-toplinks container */
}

/* hover 2nd level */
.s4-tn li.selected ul.dynamic,
.s4-tn li.selected.hover-off ul.dynamic,
.s4-tn li.selected.hover ul.dynamic {
	left: 0 !important;
	bottom: 0 !important;
	top: auto !important; /* reset */
}

.s4-toplinks li.selected  > ul.dynamic li.dynamic {
    float: left;
}

Show 2nd level for selected tab (always visible) and on hover

Here I want to have the 2nd level navigation for the selected site to be always visible. When I hover other tabs I want the current 2nd level navigation to be hidden and the hovered tab 2nd level to be shown.

Normal state (when inside "Work" site):

Hovering "News" tab:

This is a bare essentials implementation. You might want to have some visual cues to what tab is selected.

The CSS:

.s4-toplinks {
	padding-bottom: 23px; /* create space to fit the 2nd level nav */
	position: relative;
}

.s4-toplinks .s4-tn li {
	position: static !important; /* 2nd level will be positioned relative to .s4-toplinks container */
}

/* hover 2nd level */
.s4-tn li.selected ul.dynamic,
.s4-tn li.hover-off ul.dynamic,
.s4-tn li.hover ul.dynamic {
	left: 0 !important;
	bottom: 0 !important;
	top: auto !important; /* reset */
}

.s4-toplinks li > ul.dynamic li.dynamic {
    float: left;
}

The JavaScript:

jQuery(document).ready(function () {
	handleHorizontalNav();
});

function handleHorizontalNav() {
	jQuery(".s4-toplinks li.dynamic-children:not(.selected) > a, .s4-toplinks li.dynamic-children:not(.selected) > ul.dynamic").hover(
	function(){		
		jQuery(".s4-tn li.selected > ul.dynamic").css("display", "none");
	},		
	function(){
		jQuery(".s4-tn li.selected ul.dynamic").css("display", "block");
	});
	
	jQuery(".s4-toplinks li.selected a").unbind('hover');
}

Set selected element in 2nd level

A problem with having the 2nd level always visible is that you wont have a nice CSS selector for the current selected item in the 2nd level. We can handle this issue using JavaScript.

String.prototype.startsWith = function(str){
    return (this.indexOf(str) === 0);
}

function setActiveItemInTopNavSecondLevel() {
    var cururl = window.location.pathname;
    var menu = jQuery(".s4-toplinks li.selected ul.dynamic");

    menu.children("li").each(function (i, e) {
        var item = jQuery(this).find("a.menu-item");
        var url = item.attr("href");
		
        if (cururl.startsWith(url)) {
            item.addClass("selected");
        }
    });
}

Center 2nd level navigation relative to parent tab

Another nice visual cue for the 2nd level is to have it centered relative to it's parent tab, instead of everything being left aligned. Let's see how to do this with JavaScript.

I've resized the elements a bit so that you can better see the effect:

function centerTopNavSecondLevel() {
    jQuery(".s4-toplinks li.dynamic-children").each(function (i, e) {
		var menu = jQuery(this).children("ul.dynamic");
		
		if (jQuery(this).offset() != null) {
            left = (jQuery(this).offset().left - (menu.width() / 2)) + (jQuery(this).width() / 2);
        }
		
		// check if the menu doesnt overflow to the left
        if (left < 0) {
            left = 0; 
        }
		
        menu.children("li").first().css("margin-left", left + "px");
    });
}

SharePoint 2010 Branding: The application.master master page

dsilva — Mon, 31 Oct 2011 10:55:57 +0000

In SharePoint 2010 a small number of pages still uses the application.master (for example: /_layouts/listkeywords.aspx). All the pages stored in the layouts folder in the 14 hive use the application.master. This sucks if you want to brand these pages.

Searching a bit I found this Microsoft article that gives a couple of methods (and even recommends one) for changing the application.master file in the file system (which unsupported operation for SharePoint). If Microsoft explains how to do it and even recommends it, I'm not looking back. I'm changing the application.master in the file system.

I'm also going to make this process automatic by deploying both the edited and backed up application master page from my Visual Studio 2010 solution. So in case of disaster the original version of the file is backed up on the server. Here's how it looks:

You might also need to deploy the application.master (if your portal supports UI version 3). And, as always respect the file, don't just copy stuff indiscriminately from other master pages. Use the controls that are already there. Just change the layout the same way you would for the standard master page.

You can also do this in a much more appropriate and supported fashion, using an HTTP Module. You can find extensive information about it if you do a bit of internet search.

SharePoint 2010 Branding: Responsive HTML5 masterpage for SharePoint 2010

dsilva — Wed, 26 Oct 2011 07:00:06 +0000

Kyle Schaeffer created a great looking HTML5 enabled masterpage for Sharepoint 2010. I was testing it around and since the deployment instructions where all manual uploads to SharePoint lists and whatnot I decided to automate this process. I created a Visual Studio solution with all the files and a feature that will activate the whole thing.

So the solution includes all the unaltered files provided by Kyle Schaeffer, under the Creative Commons Attribution license 3.0. The only thing i did was create the solution and the code to activate the master page in the feature event receiver.

Be sure to read the whole article HTML5 enabled masterpage for Sharepoint 2010. There are important limitations to this solution.

This is how the solution looks like:

The most important method in the event receiver, to change the active site and system master page.

private void UpdateMasterPage(SPWeb web, String newMasterFileName) {
            try {                
                bool webAllowUnsafeUpdates = web.AllowUnsafeUpdates;

                web.AllowUnsafeUpdates = true;

                web.CustomMasterUrl = web.CustomMasterUrl.Replace(Path.GetFileName(web.CustomMasterUrl), newMasterFileName); // Site Masterpage
                web.MasterUrl = web.MasterUrl.Replace(Path.GetFileName(web.MasterUrl), newMasterFileName); // System Masterpage
                web.Update();

                web.AllowUnsafeUpdates = webAllowUnsafeUpdates;               
            }
            catch (Exception e) {
            }
}

The feature is activated at site collection level.

You can download the wsp file and the Visual Studio solution I've created under the same license (Creative Commons Attribution license 3.0) as the original files. See this article's attachments at the end.

Enjoy!

SharePoint 2010 Branding: Change site actions and welcome menu arrows

dsilva — Mon, 24 Oct 2011 14:00:00 +0000

Ever wondered how to change the arrow image of the Site Actions menu and the Welcome menu?

Here's how you can do it. Hide the image and give the container element a background image. Like so:


.ms-viewselector-arrow {
    background: transparent url('/_layouts/images/custom/new-arrow.png') no-repeat scroll 0 0;
    height: 4px; /* height of the image */
    width: 5px; /* width of the image */
}

.ms-viewselector-arrow img {
    display: none;
}

Not a big change, but certainly a nice tweak to help the branding consistency.

Giveaway: CodeLobster PHP IDE Professional edition

nunof — Sat, 22 Oct 2011 18:23:25 +0000

Update

We have a special treat for all PHP developers out there. We will be offering 3 full Professional licenses for the CodeLobster PHP IDE. CodeLobster is a free PHP IDE, but it also has a Professional version with several paid plugins for common CMSs and frameworks.

How to participate

The contest is simple: just leave a comment in this article and two weeks from now we will randomly select the winners. Make sure to correctly fill your email when submitting your comment, so that we can contact you if you are one of the chosen ones.

If you are new to our site you can also subscribe to our RSS feed and be up-to-date with future articles and giveaways.

Accompanying the giveaway is also a full review of the CodeLobster PHP IDE. CodeLobster was generous enough to offer us the licenses for the giveaway and for the testing, but the review remains my sole responsibility and only reflects my independent view.

CodeLobster PHP Editor Review

Pros

Fast and straightforward editor, with no bloat.
Nice plugins for Drupal and other CMSs and frameworks (only in Professional version).
Portable version.
FTP and source control features.

Cons

Lack of profiles (i.e. different profiles per project - development, test, production, etc.).
Limited SVN support (for now).
No code snippets manager/support.
Only available for Windows.

CodeLobster PHP Editor

CodeLobster is a PHP IDE for Windows. There is a free version (that you need to register for) with the usual support for PHP/JS/HTML/CSS editing and also a Professional version with plugins for common CMSs and frameworks.

Installation is straightforward. CodeLobster can associate itself with the filesystem for all the types of files it supports, but the thing that got my attention during installation is the ability to install a portable version. It’s a nice addition and it will allow you to move the CodeLobster folder to other machines. If you don’t select it during installation, you can later configure it in the preferences.

After installation you will notice a trial screen. If you want to use the free version you can request a code to be sent to your email.

The first thing that will grab your attention when you start up the editor is the amount of toolbars and windows that are open. It’s nice that it has that many, but I find it unnecessary to have all of them open.

Thankfully, it’s quite easy to customize the UI to your liking, by closing toolbars and windows that you don’t want to see or by moving them around.

The lack of a startup screen is a welcome non-feature. A lot of IDEs will start with a welcome or latest news screen. I find that unnecessary. I just want to get to the latest project that I was working on, which is exactly what CodeLobster does. Although if you prefer to have some news, at least when you have some plugins installed, you can choose to have a Latest News window at startup, though it’s disabled by default.

CodeLobster is overall simpler than more advanced IDEs such as NetBeans or Eclipse, which have to support a wider range of languages and features. Because it is only targeted for PHP and HTML/JS/CSS editing, it is actually more straightforward to use and it doesn’t have to support unnecessary features.

The basics are there, so let’s talk about some of its features.

Code highlighting and theme support

CodeLobster supports several themes, if you don’t like the default one. If you have a file already open behind the preferences window, you can preview how a theme will look just by selecting it. There are some dark themes, but you can also design a custom one.

I used the Zend for Eclipse theme, which has some soft colors.

Autocomplete

The autocomplete actually surprised me, because it detects the keys in the arrays. Nice.

PHP debugging

Debugging is fundamental in a proper IDE. In this regard, CodeLobster didn’t fell short and the debugger was very easy to setup and worked correctly on the first try.

I had my Apache server started, so I opened the debugger preferences and used the autodetect feature, which worked like a charm.

FTP

Most IDEs come with FTP support. CodeLobster has a download and upload FTP feature that does just what it says.

One thing that was driving me nuts was that it wasn’t obvious how to create an FTP connection. Apparently I wasn’t alone, so after digging in the CodeLobster forums I found that to manage the FTP connections you have to go to the Explorer window. Not that intuitive, but from what I could find out, that is something that is going to change in future versions.

After creating your connection, just open the project’s properties and choose the proper connection. Afterwards you can use the upload and download feature.

Source control support

CodeLobster comes with support for source control. It has limited support for GIT and SVN. I use TortoiseSVN and as of now there is no support for it in the IDE, although that is something that they are going to add in future versions.

If you use SVN, the IDE supports Subversion for Windows.

Paid plugins

You can purchase plugins that add support for several CMSs and frameworks. I will focus on the Drupal plugin, but other plugins are similar. You can check the official CodeLobster site for more information on each plugin.

Supported plugins:

CakePHP plug-in
CodeIgniter plug-in
Drupal plug-in
Facebook plug-in
JQuery plug-in
Joomla plug-in
Smarty plug-in
Symfony plug-in
WordPress plug-in
Yii plug-in
SQL manager

Drupal plugin for CodeLobster

I use Drupal so I was happy to find out that CodeLobster has a Drupal plugin. The plugin helps with project and module creation as well as some additional features.

For creating a Drupal project you have two options: create an empty Drupal site (you can select the Drupal version and some additional details) or start with a “typical” Drupal site.

Project wizard: Typical Drupal site

The Typical Drupal Site template is only available for Drupal 6 and currently uses Drupal version 6.19, which is not the latest version. After creating the project you should update the site to the latest Drupal version, which includes several security fixes.

The wizard offers several configuration options for creating the site. Some notes:

You have to create the database yourself before finishing the wizard.
Make sure the URL for the project is correct in the Admin tab or the wizard will fail.
The Content tab lets you choose the type of content you want.

I wouldn’t use this wizard for my projects, not only because it uses Drupal 6, but also because I prefer to custom design everything. Although I like the fact that it comes with several custom modules that you can always tweak to your needs after creating the project.

Project wizard: Empty Drupal site

The Empy Drupal Site wizard is more to my liking. It allows you to choose which version of Drupal to install and as far as I could tell it downloads the latest version from the site (when you choose Drupal 7 at least), which is useful.

This wizard will create the database and an empty Drupal site, but you can choose which modules to enable.

Drupal module wizard

I was expecting the module’s wizard to be available when right-clicking the project or the modules folder, so it took me some time until I found the option on the plugins menu at the top.

The wizard is a quick way of creating the folder with the basic module’s files. A small time-saver, but it helps to streamline your development process.

Drupal module hooks and autocomplete

The plugin makes it very easy to add your own hooks to your module.

Not only that, but it has autocomplete for theme functions as well as Drupal forms.

Context help

The context help will open your browser with the Drupal API page for that particular method or constant. No more Googling needed for that!

Find menu function

Another feature that the Drupal plugin supports is the ability to find a menu function by the menu path or vice-versa.

Conclusion

CodeLobster is a nice, simple editor that you should consider if you are a PHP developer. I like its simplicity and speed. For me, the main issue right now is the lack of TortoiseSVN support (which will be added in the future).

My second biggest complain is the lack of project profiles. For example, having a development profile where you can configure a local folder (or FTP) for copying files and a local URL to debug the site. Then you could have profiles for other environments (test, acceptance, production). You can always manually change the project properties each time, but it’s cumbersome. It’s not a killer feature, but it’s something that I would use a lot.

Other than that, I can see myself using this IDE more often. The lack of availability for other operating systems might discourage some people. The addition of code snippets with autocomplete support is also something that would be nice to have in the future.

SharePoint 2010: People picker doesn't show any suggestions

dsilva — Thu, 20 Oct 2011 14:11:44 +0000

The people picker field in SharePoint 2010 doesn't show any suggestions, even when it says it found matches to your query. I didn't test this thoroughly, but this seems to be the cause at least in the summary links webpart when you add a new link.

I tried clicking it as the error message stated. Even the tooltip mentioned there were available solutions.

I did click it and nothing happened. I became desperate, clicked it like crazy and then from some magical combination of clicking and typing the field height became bigger and this was visible:

Yes... the dropdown opened inside the text field. After inspecting the HTML and CSS I found this solution:

body div.ms-inputuserfield {
    overflow-x: visible !Important;
}

Android SDK 4.0 is available for developers

dsilva — Wed, 19 Oct 2011 20:43:36 +0000

The unified version of Android, for tablets and mobile phones alike, was officially announced and its SDK is already available for developers.

The big highlight for this version is the unification of Android 2.x and Android 3.x, which simplifies the development and design of apps.

New mentionable features in Android 4.0:

Social API. Demonstrated through the new People app showed in the presentation. Android now provides a hub for you contact's social activities and not just a name-phone table of data.
Android Beam. NFC based, allows you to share information or establish a connection with another phone, by physically connecting them.
Find more on the Android developers site.

You can also check out the whole presentation on Android 4.0 and the new Galaxy Nexus here.

SharePoint: How to use relative URLs in the masterpage, the right way

dsilva — Mon, 17 Oct 2011 14:05:35 +0000

I've been using relative paths in SharePoint masterpages the wrong way. Let's see an example of how I used to do it, with a link to the homepage and an image for the logo.

<a href="http://www.broculos.net/en" class="logo">
	<img src="/Style Library/CustomStyle/Images/logo.png" alt="" />
</a>

This will work like a charm if your site collection's home URL is the same as the root of the URL, for example: http://www.example.sp2010.dev/.

If this is not the case, as in URLs like this one: http://www.example.sp2010.dev/sites/anothersitecolection/ , my logo will still link to http://www.example.sp2010.dev/ and the image source will be also pointing to the wrong library. Here's how you should do it, and this will always work correctly:

<a href='<SharePoint:EncodedLiteral runat="server" text="<%$SPUrl:~SiteCollection/%>" EncodeMethod="HtmlEncode"/>' class="logo">
	<img src='<SharePoint:EncodedLiteral runat="server" text="<%$SPUrl:~SiteCollection/Style Library/CustomStyle/Images/logo.png%>" EncodeMethod="HtmlEncode"/>' alt="" />
</a>

SharePoint 2010 Branding: Fancy search boxes with CSS only

dsilva — Tue, 20 Sep 2011 11:30:00 +0000

Want to spice up your SharePoint 2010 search boxes only using CSS? Here's an example of how you can achieve it.

He will go from this:

To this:

The main idea behind my implementation is that I'll have a big background image for the whole search area (text input and button). Then, I will match the width and height of the elements to the width of the "fake elements" in the background image. To finish I only need to camouflage the controls, all borders and background colors need to go.

To give you a better idea of how this works, here's the search box with the controls not hidden yet (you only see a small area for the button because the image inside it is to small, it should be the same with as the background button):

Here's the complete code I used to achieve this:

#s4-searcharea {
    background: transparent url('/_layouts/images/custom/search-box.png') no-repeat scroll 0 0;    
    height: 30px; /* height of image */
    width: 354px; /* width of image */
}

.s4-search input.ms-sbplain {
    background: transparent;
    border-color: transparent !important;
    color: #9ca052;
    height: 23px;
    padding-left: 30px; /* to acomodate the magnifier icon */
    padding-top: 0 !important;   
    width: 247px !important;
}


#banner .ms-sbgo a {
    border-color: transparent !important;
    display: block;
    height: 30px;
    width: 70px !important;
}

#banner .ms-sbgo > a > img {
    display: none;
}

Here's a couple of examples of the usage of this technique:

How to restore a SharePoint content database from a SQL Server backup

nunof — Thu, 08 Sep 2011 17:11:43 +0000

There are several ways to backup and restore SharePoint content. SharePoint itself provides several backup and restore tools: either through the interface in Central Administration or through the command line with STSADM.

In this article I will discuss a different approach: how to restore a backup from SQL Server of a SharePoint content database. It's common to have a scheduled backup plan in a SQL Server, so it's a good alternative when the other methods aren't available.

The biggest hurdle you will have is making sure your database is not in use when you want to do the restore, because SharePoint has a lot of processes that will access your database, even if no one is visiting the site.

Stop Windows SharePoint Services Timer
- Go to Administrative Tools and open Services.
- Locate the Windows SharePoint Services Timer.
- Open its properties, make sure the Startup type is set to Manual and stop the service.
- Wait a few minutes for all running procedures to complete.
Kill any processes accessing your database
- Open SQL Server Management Studio and connect to your database server.
- Expand Management and double-click on Activity Monitor.
- Right-click each process that's using your database and kill it or wait for it to finish.
Execute the restore script
- Open a new query script.
- You can use the following script, which will set the database access to single user to avoid any more database locks and then puts it back as it was in the end.

USE MASTER
ALTER DATABASE [DATABASE_NAME] SET SINGLE_USER WITH ROLLBACK IMMEDIATE 
RESTORE DATABASE [DATABASE_NAME] FROM  DISK = 'D:\PATH\Backup.bak' WITH  FILE = 1,  NOUNLOAD,  REPLACE,  STATS = 10
ALTER DATABASE [DATABASE_NAME] SET MULTI_USER WITH ROLLBACK IMMEDIATE
GO

Don't forget to start the Windows SharePoint Services Timer again:

Go to Administrative Tools and open Services.
Locate the Windows SharePoint Services Timer.
Open its properties, make sure the Startup type is set to Automatic and start the service.

How to detect if JavaScript is enabled from the server side in C#/.NET

nunof — Thu, 25 Aug 2011 21:26:10 +0000

In .NET there is no out-of-the-box way of detecting if JavaScript is enabled from the server side (you can detect if JavaScript is supported, but the user could have disabled it). You can achieve this using several techniques. In this article I will explain how to achieve this using .NET's PageMethods.

PageMethods in .NET

PageMethods, as the name implies, are methods that belong to an ASP.NET page, but with a catch - they can be called from the client side as if they were part of a Web Service, but without having to actually build one.

A PageMethod must be a public static method and must be marked with the WebMethod attribute. Besides that, you need to a have a ScriptManager on the page with EnablePageMethods set to true.

This technique allows you to call server side methods from the client side without the burden of having to build a complete Web Service - .NET will do all the hard work behind the scenes.

Detecting if JavaScript is enabled

The logic behind this solution is that JavaScript will be used to call a server side method that will store in a session variable a value indicating whether JavaScript is enabled. If JavaScript is not enabled, the method will never be called and so it is safe to assume that JavaScript is disabled.

This is all the code you need:

public class DetectJavascriptPage : System.Web.UI.Page {
	protected const string JAVASCRIPT_ENABLED_KEY = "JavascriptEnabled";

	public bool IsJavascriptEnabled { get { return GetJavascriptEnabled(); } }

	protected override void OnPreRender( EventArgs e ) {
		base.OnPreRender( e );

		// Verify that the startup script isn't already registered (postbacks)
		if (!this.ClientScript.IsStartupScriptRegistered("JavascriptTest_Startup"))
		{
			// Form the script to be registered at client side.
			StringBuilder sb = new StringBuilder();
			sb.Append("<script lang='javascript'>");
			sb.Append("PageMethods.SetJavascriptEnabled(true, SetJavascriptOnSucceeded, SetJavascriptOnFailed);");
			sb.Append("function SetJavascriptOnSucceeded() { }");
			sb.Append("function SetJavascriptOnFailed(error) { }");
			sb.Append("</script>");

			// Register the startup script
			this.ClientScript.RegisterStartupScript(typeof(JavascriptTest), "JavascriptTest_Startup", sb.ToString());
		}
	}

	[WebMethod]
	public static void SetJavascriptEnabled(bool enabled)
	{
		if (HttpContext.Current.Session[JAVASCRIPT_ENABLED_KEY] != null)
		{
			HttpContext.Current.Session[JAVASCRIPT_ENABLED_KEY] = enabled;
		}
		else
		{
			HttpContext.Current.Session.Add(JAVASCRIPT_ENABLED_KEY, enabled);
		}
	}

	[WebMethod]
	public static bool GetJavascriptEnabled()
	{
		if (HttpContext.Current.Session[JAVASCRIPT_ENABLED_KEY] != null)
		{
			return (bool)HttpContext.Current.Session[JAVASCRIPT_ENABLED_KEY];
		}

		return false;
	}
}

During pre render we will include JavaScript code to call the page method, which in turn will set a session variable. For knowing whether JavaScript is enabled or not, all you have to do is use the property IsJavascriptEnabled that was added to the page class.

SharePoint 2010 Branding: Show the title area when the ribbon is expanded

dsilva — Mon, 08 Aug 2011 07:00:08 +0000

When the ribbon is expanded, by default, the entire title area disappears. This is usually something that clients dislike, so making it always visible is something I usually have to do.

Ribbon collapsed:

Ribbon expanded, the title area is gone:

So we need to override the declaration that hides the ribbon.

How to do this? Add this rule to you CSS:

#s4-titlerow { 
    display: block !important; 
}

Now the title area is visible. When the ribbon opens it "pushes" the title area down:

SharePoint BDC: Creating an ADF with the Microsoft BDC Definition Editor

nunof — Thu, 04 Aug 2011 20:46:46 +0000

Business Data Catalog (BDC) allows you to integrate an external database in your SharePoint environment. To do so, you need to create an Application Definition File (ADF) and import it to SharePoint.

An ADF is basically an XML file with all the necessary information describing the entities and methods to access the database. There are some paid tools to help you generate ADFs, but Microsoft itself offers a free tool to create them.

In this article, I will describe how to get this tool and some annoyances I found along the way.

Install the BDC Definition Editor

The BDC Definition Editor from Microsoft is included in the SharePoint Server 2007 SDK. After installing the SDK, you can find the setup for the BDC Definition Editor at "C:\Program Files\2007 Office System Developer Resources\Tools\BDC Definition Editor" (by default).

If you want to install the BDC Definition Editor on another machine, you can just copy the entire folder and run it elsewhere. Supported environments are Windows Server 2003 (En-US only) and Windows XP (En-US only). The installation file that you want to run is setup.exe. This will ensure that all the requirements are installed and, if not, it will install them:

Microsoft .NET Framework 2.0
Microsoft SQL Server 2005 Express Edition
Windows Installer 3.1

It's basically a 90MB install for a 2MB tool. Go figure.

Once it's installed, you can find the tool in the Start Menu at ApplicationDefinitionDesigner.exe.

Creating the Application Definition File

I don't want to dwell too much on the use of the Application Definition Designer (aka BDC Definition Editor), because it's pretty straightforward:

Start by adding a new LOB system (if you already have one created you can import it).
Choose "Connect to Database".
Type your connection string (if you aren't sure how to write one you can check some SQL Server 2005 connection string samples here).
You will see a listing of all the tables. Drag the ones you need and then make any necessary adjustments you see fit (e.g. exclude some fields).

After doing this, creating the ADF is pretty easy. Just use the Export button and save the file.

Finder method for the Business Data List web part

Before you export the file, let me tell you about a caveat. For a reason I cannot phantom, the Application Definition Designer doesn't generate a method that the Business Data List web part relies upon to display data. In fact, if you import the ADF as it is, you will see the following error in the Business Data List web part:

The strange thing is that it can easily be fixed. The web part is searching for a Finder method in the BDC entity, but the BDC Definition Editor by Microsoft doesn't generate one by default, though it generates two other methods for fetching data. One of these methods can easily be changed to a Finder method, instead of having to create your own.

To fix this, go to the Application Definition Designer. For each entity you want to use in the Business Data List web part:

Expand Methods > FindAll_EntityName > Instances.
Select the instance (FindAll_EntityName_Instance).
In the property MethodInstanceType select Finder.

One last thing you might want to do is add some more output parameters to the method or it will only show the primary key by default, which is probably not that desirable.

Using SQL Authentication

If you're using SQL authentication you need to add some extra properties to your LOB System instance:

Select your instance.
Make sure AuthenticationMode is PassThrough and DatabaseAccessProvider is SqlServer.
Browse to the Properties collection.
Add these properties:
- RdbConnection Data Source: the SQL server address
- RdbConnection Initial Catalog: the name of the database
- RdbConnection User ID: username
- RdbConnection Password: password
- RdbConnection Integrated Security: set this to false

Import the ADF to SharePoint

Now you need to import your ADF into SharePoint. It's pretty simple:

Open Central Administration.
Go to the Shared Services Provider (SSP) of the desired application.
Under Business Data Catalog choose Import application definition.
Browse to your file and import it.

Once it's imported, you'll be able to check the entities. One more thing you probably want to do is change the access permissions of the BDC. You can do it one by one for each BDC entity, but it's much easier if you change for all of them at the same time:

In the page of your BDC application select Manage Permissions.
Add all the accounts you need using Add Users/Groups (you probably want NT AUTHORITY\Authenticated Users with Select in Clients permissions).
Now click Copy all permissions to descendants (this will make sure that the permissions are copied to all the BDC entities).

Using the Business Data Catalog web parts

Now that you imported the ADF and have your BDC Application setup, you can use the BDC web parts that SharePoint provides (make sure you have the necessary features activated).

When you add a web part, under Business Data, you'll find several web parts that connect to your BDC. One of the most common to use is the Business Data List web part. Once you add it, you need to edit its properties and choose the entity you want to display.

You can also pair a Business Data List with a Business Data Item web part, which displays the details of a single row. To do that, first add a Business Data Item web part and then on the edit context menu of the Business Data List web part choose Connections > Send Selected Item To and select the Business Data Item web part instance. Now when you select on of the rows in the Business Data List web part, its details will show in the Business Data Item web part.

Resources

SharePoint 2010 Branding: Fix standard layout alignment on pages with wider content

dsilva — Tue, 02 Aug 2011 13:30:09 +0000

In the standard SharePoint 2010 layout there’s a bug in the layout that keeps the title as big as the window width, even if the content stretches outside of that width.

Let’s see the Master Page and Page layout gallery, for example. If your window is too small you’ll need to use the horizontal scrollbar to see the complete table. When this happens the title area will only stretch to the size of the window, leaving a gap to the right:

Here's how you do it:

body #s4-bodyContainer,
div#s4-workspace {
    float: left;
}

#s4-titlerow {	
    width: 100%;
}

And here you go: