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.
Article Metadata
Code Example
Tested with
Compatibility
Platform Security
Article
Contents |
Introduction
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.
Splash Screen
Facebook Login Page
Home Screen
Updating Status
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.
Friends List
Friend's Profile
Friend's Wall
Friend's Albums
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.
Friend's Photos
Adding Comments on Friend's Photos
Adding Comments on Friend's wall
Friend's Location Share
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.
User's News Feed
User's News Feed Details
User's Photos Albums
User's Photos Details
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.
Near By Landmarks
Pushpins on Landmarks
User's Location
Adding Comments while sharing
Share on Facebook (on desktop web browser)
User's Location on Nokia Maps (on desktop web browser)
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.
Calendar
Select Date
Events List
Edit or Delete Events
Notification on Events Icon
About
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
Application Icon
The application launcher is being created with Inkscape template 2
Summary
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
Download
- 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.
