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 over the next few weeks. Thanks for all your past and future contributions.
Facebook+ Facebook client with Nokia Maps - app showcase
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.
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.
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.
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.
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.
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.
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.
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.
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.
- Building the Italian Tax ID app with Qt Quick components
- Dropian QML Dropbox Client for Symbian - app showcase
- Audiobook Reader for symbian using Qt Quick Components
- The application binary file is available here: File:FacebookPlus Eng v1.1.sis
- A newer version of the application without home button is also available File:FacebookPlus Eng v1.2.sis
We will come up with separate articles for each component of the application with source code.
Note: This is an entry in the Symbian Qt Quick Components Competition 2012Q1