×
Namespaces

Variants
Actions
(Difference between revisions)

CutePress WordPress blog manager - app showcase

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Tidy wiki text post competition)
hamishwillee (Talk | contribs)
m (Hamishwillee - Change to use new video player which works with Lumia 920 and other mobile browsers)
(3 intermediate revisions by one user not shown)
Line 1: Line 1:
[[Category:Qt]][[Category:Qt Quick]][[Category:Symbian]][[Category:MeeGo]][[Category:3rdPartyProducts]]
+
[[Category:Qt]][[Category:Qt Quick]][[Category:Symbian]][[Category:MeeGo Harmattan]][[Category:3rdPartyProducts]][[Category:Code Examples]]
 
{{Abstract|CutePress app allows users to manage pages, posts, comments and media items on WordPress blogs. This article explains the main elements of the app design.}}
 
{{Abstract|CutePress app allows users to manage pages, posts, comments and media items on WordPress blogs. This article explains the main elements of the app design.}}
  
Line 9: Line 9:
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
Line 71: Line 71:
 
'''Good use of screen real estate'''
 
'''Good use of screen real estate'''
 
<br />
 
<br />
CutePress tries to provide maximum details in minimum possible way. To denote information about list items in pages & posts list view, color coding is used. Color codes for different publish status are defined in help view to prevent any confusion.
+
CutePress tries to provide maximum details in minimum possible way. To denote information about list items in pages & posts list view, color coding is used. Color codes for different publish status are defined in help view to prevent any confusion.
 
<br />
 
<br />
 
'''Utilising the toolbar where appropriate.'''  
 
'''Utilising the toolbar where appropriate.'''  
Line 81: Line 81:
  
 
'''<big>Caching Image Thumbnails for smooth working of UI</big>'''<br />
 
'''<big>Caching Image Thumbnails for smooth working of UI</big>'''<br />
For selecting images form gallery to upload on the blog, it was important to show thumbnails for images for easy use. As it was difficult to access Symbian thumbnail cache, application tries to built its own. And when image selection view is opened by user , it initially loads only 36 images. Subsequent images are loaded whenever user reaches at the end of list. Code an be found here:<br />
+
For selecting images form gallery to upload on the blog, it was important to show thumbnails for images for easy use. As it was difficult to access Symbian thumbnail cache, application tries to built its own. And when image selection view is opened by user, it initially loads only 36 images. Subsequent images are loaded whenever user reaches at the end of list. Code an be found here:<br />
 
http://projects.developer.nokia.com/cutepress/browser/src/worker.cpp#L1726<br />
 
http://projects.developer.nokia.com/cutepress/browser/src/worker.cpp#L1726<br />
  
Line 120: Line 120:
  
 
== Video Demo ==
 
== Video Demo ==
Video demo of CutePress v1.0.0 at Youtube {{#ev:youtube|Pb3LY93Az34}}
+
Video demo of CutePress v1.0.0 at Youtube
 +
<mediaplayer>http://www.youtube.com/watch?v=Pb3LY93Az34</mediaplayer>
  
 
== Icon ==
 
== Icon ==

Revision as of 07:58, 30 January 2013

CutePress app allows users to manage pages, posts, comments and media items on WordPress blogs. This article explains the main elements of the app design.

Article Metadata
Code ExampleTested with
Devices(s): Nokia C6-01, Nokia C7 Astound, Nokia C7-00, Nokia E6-00, Nokia E7-00, Nokia N8-00, Nokia X7-00, Nokia 700, Nokia 701
Compatibility
Platform(s):
Symbian
Article
Created: ShwStppr (25 Mar 2012)
Last edited: hamishwillee (30 Jan 2013)

Contents

Introduction

CutePress allows user manage pages, posts, comments and media items on WordPress blogs. It needs an active GPRS connection or Wi-fi (on Wif-fi enabled devices) to access Internet.

Cutepress is a QML version of WordPress for Nokia app http://nokia.wordpress.org/ with some additional features.

It supports WordPress 2.7 or higher(WordPress.com or self-hosted).

CutePress is built using codebase of official WordPress for Nokia app and will be merged with the original version in the coming future.

It is built using Qt Quick components providing various enhancement to WordPress app.

CutePress is a Nokia Conversation recommended app and it has nearly 5k downloads on Nokia store. With v1.2.0, it has been also translated for Turkish language with the help of MeeGo Turkey

Qt-Quick UI & Design Guidelines Compliance

As CutePress is built using QtQuick 1.0 components it complies to almost every Symbian guideline. It uses a vast number of components ranging from PageStack to Animation classes. For compliance of icon guidelines, default Symbian toolbar icons are added to v1.2.0.

Note.pngNote: CutePress v1.20 is currently under QA process on Nokia Publish. However an self-signed version can be downloaded from here.

Logical and consistent navigation structure
CutePress provide a consistent navigation for easy operation with every view having a back button to traverse to previous view and apart from blogs list view which is the initial page for the application and clicking back button on this view closes the application.

CutePress tries to use best possible icons for representing respective functionality and for preventing any confusion is user's mind it also have help view where a table of icons and their functionality is shown.

App icon consistent with Symbian style
CutePress app icon attached with the article is clearly having a consistent design with Symbian style.
Correct use of the components
CutePress is based on QtQuick 1.0 and QtQuick components for Symbian & MeeGo for corresponding platforms. Therefore, it is tried best to use QML components properly for consistent functioning with a number of built in and custom created components.
Non-threatening interface - don't ask the user for confirmation or passwords unless necessary
To prevent user for logging in again & again on each run, blog details are stored in a file. This way CutePres asks blog admins to login only once for adding a blog.
Good use of screen real estate
CutePress tries to provide maximum details in minimum possible way. To denote information about list items in pages & posts list view, color coding is used. Color codes for different publish status are defined in help view to prevent any confusion.
Utilising the toolbar where appropriate.
CutePress tries to maximize utilization of toolbar.

Problems faced & solutions implemented

A number of problems were faced during development of CutePress. Some were related to porting QWidget UI to QML equivalent while some were related Symbian platform constraint.

Caching Image Thumbnails for smooth working of UI
For selecting images form gallery to upload on the blog, it was important to show thumbnails for images for easy use. As it was difficult to access Symbian thumbnail cache, application tries to built its own. And when image selection view is opened by user, it initially loads only 36 images. Subsequent images are loaded whenever user reaches at the end of list. Code an be found here:
http://projects.developer.nokia.com/cutepress/browser/src/worker.cpp#L1726

http://projects.developer.nokia.com/cutepress/browser/src/thumbnailthread.cpp#L32

http://projects.developer.nokia.com/cutepress/browser/qml/symbian/NewMediaPage.qml#L253


List Delegate for Post, Page, Comments
To show maximum possible information about a post or a page or a comment custom list delegate are used. Colored code s are used to represent status of an item.

CutePress - Pages list view.jpg

Problem with HTML text and TextField in QtQuick 1.0 & using it with a Flickable item
TextFiled in Symbian QtQuick 1.0 can't handle HTML text properly. This problem still persits in the application, however MeeGo version with QtQuick 1.1 works fine.

Another problem was using TextField element with a Flickable item. In this case TextField's height is set to its implicitHeight and width is set to slighly lesser than its parent item.This way TextField can expanded vertically as needed and to scroll down on the page.

Screenshots

Video Demo

Video demo of CutePress v1.0.0 at Youtube The media player is loading...

Icon

Cutepress.png

Source code

Source code : CutePress - Google Code, CutePress

Installation File

You can download this app from Nokia store from this link: CutePress

For more detail, please visit Webpage of this app: ShowStopper - CutePress

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

197 page views in the last 30 days.
×