Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Facebook+ Facebook client with Nokia Maps - app showcase

From Wiki
Jump to: navigation, search

Facebook++ is a Facebook client that adds the innovation of integration with Nokia Maps. This article provides an overview of the app design and explains how it uses Qt Quick Components and the Symbian Design Guidelines.

Article Metadata
Code ExampleTested with
Devices(s): Nokia N8 (Nokia Belle)
Platform(s): Symbian^3 OS
Device(s): GPS
Platform Security
Signing Required: Self-Signed
Capabilities: NetworkServices, Location, ReadUserData, WriteUserData
Keywords: Facebook, Map, Location
Created: somnathbanik (20 Mar 2012)
Last edited: hamishwillee (24 Apr 2013)



The application combines gets information from Facebook, Location from Nokia Maps and adding Events. It has four hubs.

  • Me : The Me hub has facebook user’s news feed, wall and photos.
  • Friends : It displays the list of friends and there profile including location, wall and photos.
  • Around Me : In this hub user can get the nearby landmarks and information about the landmarks along with user's current location.
  • Events : It’s a calendar where user can add their events/notes and the application will give a notification if there is any event for that day.

Application home screen

The application launches with a splash screen followed by the facebook login page( only for the first time). After successful login it will take the user to the home screen of the application. In the home screen it has a text input area and a ToolBar along with four icons.

The text area on top is used to update user’s status on facebook. The back button on the ToolBar is used to close and navigate pages of the application and the menu button is used to display application about screen. When user navigate from home screen to any other screen a home icon appears on the ToolBar, this home button on the ToolBar allows user to come back to the home screen from anywhere in the application.

Friends Hub

When user clicks on friends hub first it displays the facebook friends list using ListView element. Once user click on any of the friends it brings a new window which has friend’s profile, wall and photos on TabBar.

User can view friend’s post detail in a new sub window where it has the option to Like and Comment on the post. The Like and Comment are created using Button element. On clicking Comment button it opens up a popup text dialog to add user comments on the post.

Photos tab displays the list of friend’s albums using ListView. User can select any album to display the set of photos inside it in GridView. User can Like and Comment on the photos.

Profile tab display friend’s information in a delegate where there is an Image element and name and location in a Column element. Friend’s location is viewed on Nokia Maps using MapImage element. When user clicks on the pushpin it brings the friend’s location information popup message. User can also share friend’s location on facebook by adding comments which then redirect to Nokia Maps.

Me Hub

In Me hub user get all facebook updates about herself. It displays user’s news feed, wall and photos in ListView on each TabBar click. User can view news feed details and comments on those. Also it can view wall post details and photos to like and comment on it.

Location Hub

In this section number of landmarks are displayed in GridView . When user clicks on any of the landmarks it plots the nearest landmarks on Nokia Maps using Dynamic Object Management in QML. User can view the distance of the landmarks from its current location. Also user can share the landmark or its current location on facebook, which finally redirects to Nokia Maps.

Events Hub

In Events hub it displays a calendar for the current month. When user clicks on any date it opens up a new window where user can add a list of events/notes, for that particular date. Using ContextMenu element it can also edit and delete existing events/notes by press and hold the event from the list. When the application starts and if there is any event for that day, a notification comes up to the user on the event icon. The yellow cells on the calendar indicates that there are some events for that day. User can click on the yellow cells to view the event details of that day. The calendar icon on the ToolBar is used to change the calendar date using DatePickerDialog element.

Menu button on the ToolBar brings the about screen of the application.

Info Banner

InfoBanner element is used to notify user about the status of the application, for each click we set a notification so that the user can have the information about what’s going on in the application.

Application icon

The application launcher is being created with Inkscape template 2


The application is a combination of few features of Facebook and Nokia Maps . You can also see few of my reference articles below.


We will come up with separate articles for each component of the application with source code.

Note.pngNote: This is an online version of the application, to check all functionality please see that the device has network connectivity and GPS connection while testing the application.

Note.pngNote: This is an entry in the Symbian Qt Quick Components Competition 2012Q1

This page was last modified on 24 April 2013, at 03:24.
178 page views in the last 30 days.