NFC Development
with Qt on Symbian and MeeGo
Andreas Jakl NFC Introduction
Related Presentations
bit.ly/NfcIntro
[@mopius]
Windows (Phone) 8 NFC App Scenarios
nfcinteractor.com bit.ly/NFCAppScenarios
Technology Wizard
Nokia NFC Development on the Windows 8 Platform
bit.ly/Win8NFC
1 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
NFC Forum and the NFC Forum logo are trademarks of the Near Field Communication Forum.

NFC Development
2 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

NFC Development Alternatives
Java ME Qt Mobility Symbian Native Windows Phone 8
Works on Series 40 and Cross-platform API. Low level control over Proximity APIs
Symbian devices. devices’ NFC support.
Best flexibility and Similar on Windows 8
Limited use of More complex, platform
smartphone features. ease of app knowledge required. Extra presentation:
development. bit.ly/Win8NFC
Lumia 610 NFC – WP7
bit.ly/WpNfc
3 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

NFC Developer Offering
Tools Channel
Qt Development
Qt SDK 1.2
Qt Mobility 1.2 Nokia Store
Symbian Development
NFC Collection
Symbian Belle SDK
Java ME development
Nokia 6212 Classic NFC SDK or
Symbian Belle SDK
4 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Java ME NFC Development
Both free IDEs
come with
extensive, generic
Java ME support
on board.
Extend with Nokia 6212 Classic NFC SDK
(or Symbian Belle SDK)*
* http://www.developer.nokia.com/Community/Wiki/Developing_NFC_Applications#Java_ME_based_development
5 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Contactless Communication API
• JSR 257
– Tag discovery and data exchange
– NDEF messages
• Example project: Nfc Creator
– https://projects.developer.nokia.com/
nfccreator
6 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Symbian Platform NFC API
• Exposes NFC middleware at the platform level
– Aimed at Symbian platform developers
– Platform specific coding/skills needed
– Low abstraction
• Development
– Carbide.c++ IDE
– Symbian Belle SDK
– Optional: Qt for Symbian
7 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Qt Mobility NFC
8 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

What is Qt? Using Qt SDK for
– Dev. environment
– Testing
– Translation
Publish to
– Help
– Nokia Store
(Symbian, MeeGo)
Developer App Source Code – Windows
– Linux
Using Qt framework for – Mac
– User Interface – Embedded
– Networking
– Location (GPS)
– Web integration
– ...
9 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Qt NFC Development
• Requirements
– Qt SDK 1.2
– Contains: Qt 4.7.4, Qt Mobility 1.2
– Windows: Nokia Suite
• Symbian
– Nokia C7 / 801T with Symbian Anna / Belle
or 603 / 700 / 701 / 808 with Nokia Belle+
– Install Qt SDK’s Symbian Anna or Belle target *
• MeeGo
More information:
bit.ly/StartNfc – Nokia N9
– Install Qt SDK’s MeeGo Harmattan target
10 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
* Apps compiled with the Symbian Anna target are compatible to Symbian^3, Anna & Belle.

Qt Mobility
Mobility 1.1
Mobility 1.0
Camera
Bearer Management API Document Gallery
Contacts Feedback
Location Landmarks
Messaging Maps/Navigation
Multimedia Organizer
Publish and Subscribe Service Framework – Out of process
Service Framework Mobility 1.2
Sensors
System Information Connectivity (Bluetooth, NFC)
Versit
11 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Qt Mobility 1.2 NFC
• Interact with
– NFC Forum tags
– Target detection
– NDEF message handlers
– Reading and writing NDEF messages
– Send tag specific commands
– Register for app autostart on tag touch
– NFC Forum devices
– LLCP peer-to-peer sockets
12 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

API Overview*
* Not a class diagram, but explains sequential usage order
QNearFieldManager QLlcpServer
Detects and filters Listen for new server
targets socket connections.
QNearFieldTarget
QNdefMessage Query properties, QLlcpSocket
Collection of 0 or more read/write messages, Read / write data. For
records send commands or server & client sockets.
establish a client socket
QNdefRecord Generic NFC
Access to NDEF data.
Subclasses for handling Tag access
specific details.
Peer to peer
13 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Qt NFC Source Code
• Qt Mobility is Open Source
– How does a method work? How to make best
use of it? Take a look at the source code!
• Download complete source package
– Latest source:
http://qt.gitorious.org/qt-mobility/
– Find implementation in:
C:QtMobilitysrcconnectivitynfc
14 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Refresh your Qt Knowledge
• The following tutorials require basic C++ & Qt skills
• Need more?
15 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Nfc Corkboard
https://projects.developer.nokia.com/nfccorkboards
Tasks
– Extend Qt SDK example with NFC:
Touch tag to create note
– Qt Quick based UI
– C++ based NFC
– Integrate C++ with QML
16 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Importing the Example
• From Qt Creator’s Getting
Started screen
– Search for Corkboards example
– Or open:
C:QtSDKExamples4.7declarative
toyscorkboardscorkboards.pro
17 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Choosing Targets
• Select at least the Symbian Anna target
– Qt 4.7.4 & Qt Mobility 1.2 is required
18 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Test!
• Connect phone via USB ^
– Ovi/Nokia Suite mode
– Start CODA on device
• Check
Selected Symbian target
Device is recognized
Play to compile and deploy!
19 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

We will add this:
App Overview ndefmanager.cpp/.h
NFC Tag discovery and
reading
main.cpp corkboards.qml Day.qml
Application startup UI definition Delegate for drawing
Loads and shows Defines data model the UI for a single day
corkboards.qml and view Interaction for notes
20 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Model, View & Delegate
ListModel ListView Delegate
Defines free-form list Shows data from a Template defining each
data source model in a list item instantiated by the
view
Container for Horizontal or vertical
ListElement definitions
in: corkboards.qml in: corkboards.qml in: Day.qml
id: list id: flickable
21 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Add Connectivity
• Edit the Qt project file (corkboards.pro)
– Uncomment & add mobility component: connectivity
CONFIG += mobility
MOBILITY += connectivity
– Add LocalServices Capability (for Symbian)
symbian:TARGET.CAPABILITY += NetworkServices LocalServices
Allows Internet access Allows NFC
22 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Good to Know: Symbian Security *
* Qt apps are native apps; therefore, the security model of the target operating system applies.
1. Determine the required security / privacy features
– Most common: (See: developer.nokia.com/Community/Wiki/Capabilities)
Feature Capability
Internet access, telephony, messaging NetworkServices
Access location (GPS, etc.) Location
Camera, record audio UserEnvironment Basic / User Capabilities
Contacts, Calendar ReadUserData / WriteUserData
Bluetooth, NFC LocalServices
Extended / System
IMEI, model name, battery status ReadDeviceData
Capabilities
2. Add to Qt project file (.pro)
symbian:TARGET.CAPABILITY += Location LocalServices
23 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Good to Know: Symbian Security
3. Get the right certificate during development
No / Basic Capabilities Extended Capabilities
Use auto-generated self signed certificate Sign up for Nokia Publish account (€1)
(default, no action required) publish.nokia.com
Request development certificate (free)
developer.nokia.com/Distribute/Packaging_and_signing.xhtml
Sign your app
(Qt Creator build settings)
Test on your develoment device(s)
24 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Good to Know: Symbian Security
4. Publish No / Basic Capabilities
Extended Capabilities
Sign up for Nokia Publish account (€1)
publish.nokia.com
Request unique UID in 0x2... range and
development certificate (free)
developer.nokia.com/Distribute/Packaging_and_signing.xhtml
Package your Qt app with the Smart Installer
(Qt Creator build settings)
Need Certified Signed capabilities? Publish to the Nokia Store
developer.nokia.com/Community/Wiki/Capabilities
-> Purchase a Publisher ID ($200 / year)
Submit to Certified Signed process @ www.symbiansigned.com
25 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

NdefManager
• New C++ class
– Right-click the project
→ Add New ...
→ C++ Class
– Class name: NdefManager
– Base class: QObject
26 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Qt Meta-Object System
• C++ extended with QObject
– Introspection: meta-information at runtime
– Inter-object communication: signals & slots
– Parent / Child hierarchy: easier memory
management
27 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Include
• Headers, define member variable
ndefmanager.h
#include <qnearfieldmanager.h>
#include <qndeffilter.h>
#include <qnearfieldtarget.h>
#include <qndefmessage.h>
#include <qndefrecord.h>
#include <qndefnfcurirecord.h>
#include <QUrl>
#include <QDebug> // we will test first!
QTM_USE_NAMESPACE // Use Qt Mobility namespace
[...]
private:
QNearFieldManager *nfcManager;
28 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Start Waiting
ndefmanager.cpp
NdefManager::NdefManager(QObject *parent) : QObject(parent)
{
// NdefManager (this) is the parent; will automatically delete nfcManager
nfcManager = new QNearFieldManager(this);
nfcManager->setTargetAccessModes(QNearFieldManager::NdefReadTargetAccess);
// React only to Uri records (NfcRtd, "U")
QNdefFilter filter;
filter.appendRecord<QNdefNfcUriRecord>();
nfcManager->registerNdefMessageHandler(filter,
this, SLOT(targetDetected(QNdefMessage,QNearFieldTarget*)));
// Get notified when the tag gets out of range
connect(nfcManager, SIGNAL(targetLost(QNearFieldTarget*)),
this, SLOT(targetLost(QNearFieldTarget*)));
}
29 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Signals & Slots
• Signal
– Emitted when a particular event occurs (e.g., clicked())
– Qt objects: predefined signals
– Also create your own signals
• Slot
– Function called in response to a signal
– Qt objects: predefined slots (e.g., quit())
– Also create your own slots
• Connection signals  slots established by developer,
handled by Qt framework
30 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Signals & Slots
• Type safe
– Signal signature must match signature of receiving slot
– (Slot might also have shorter signature and ignore the rest of the
arguments)
• Loosely coupled
– Emitter doesn’t know or care which slots receive signal
– Information encapsulation
• Integrated, independent components
– Slots are normal C++ member functions
– Don’t know if signals are connected to them
31 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Lost & Found
• Methods to handle lost & found tags = Slots
ndefmanager.h
private slots:
void targetDetected(const QNdefMessage &message,
QNearFieldTarget *target);
void targetLost(QNearFieldTarget *target);
• Tip
– Alt + Enter, and Qt Creator writes the .cpp method definition!
32 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

React
• New target: write debug output to console for now
ndefmanager.cpp
void NdefManager::targetDetected(const QNdefMessage &message,
QNearFieldTarget *target)
{
qDebug() << "Uri Target detected!";
}
• Target out of range: delayed object delete
ndefmanager.cpp
void NdefManager::targetLost(QNearFieldTarget *target)
{
target->deleteLater();
}
33 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Register C++ with QML
• Make your C++ class available in QML
– QML Name: NdefManager
– QML Library: Nfc 1.0
main.cpp
#include <QtDeclarative>
#include "ndefmanager.h"
int main(int argc, char *argv[]) {
QApplication app(argc, argv);
qmlRegisterType<NdefManager>("Nfc", 1, 0, "NdefManager");
[...]
}
34 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

NdefManager in QML
• Import module
corkboards.qml
import Nfc 1.0
• Create Instance
corkboards.qml
NdefManager {
id: ndefManager
}
35 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Test! #2
• Run the app
• Touch a URI formatted NDEF tag
• Observe the Application Output
36 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Parse Tag & Emit Contents
• Revisit and extend the target detection slot
ndefmanager.cpp
void NdefManager::targetDetected(const QNdefMessage &message,
QNearFieldTarget *target) {
qDebug() << "Uri Target detected!";
// Go through all records in the message
foreach (const QNdefRecord &record, message) {
// Check type again, just to make sure
if (record.isRecordType<QNdefNfcUriRecord>()) {
// Convert to the specialized URI record class
QNdefNfcUriRecord uriRecord(record);
// Emit a signal with the URI
emit nfcReadTagUri(uriRecord.uri());
}
}
}
37 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Define the Signal
• Signals have no implementation
– They represent information, not a method to execute
ndefmanager.h
signals:
void nfcReadTagUri(const QUrl& nfcTagUri);
38 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Create new Notes
• Handle our new signal
– on<signal> : <javascript code>
– Get current corkboard page → append new notes element →
key: “noteText”, value: URI from NDEF message
corkboards.qml
NdefManager {
id: ndefManager
onNfcReadTagUri:
list.get(flickable.currentIndex).notes.append({"noteText":nfcTagUri})
}
39 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Test! #3
• Touch Uri-formatted NDEF NFC tags to create notes on the
current page!
40 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Interactive Nfc Corkboard
https://projects.developer.nokia.com/nfccorkboards
Tasks
– Extend previous example
– React to any kind of tags
– Write tags by pressing the red flag
while touching a tag
41 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Overview – Before
Register NDEF filters and detect targets
QNdefFilter filter;
filter.appendRecord<QNdefNfcUriRecord>();
nfcManager->registerNdefMessageHandler(filter, this,
SLOT(targetDetected(QNdefMessage,QNearFieldTarget*)));
Signal is only emitted when
a tag containing all records defined
in the filter are found
The slot directly gets the NDEF message
void targetDetected(const QNdefMessage &message,
QNearFieldTarget *target);
42 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Overview – After
Detect any kind of targets
connect(nfcManager, SIGNAL(targetDetected(QNearFieldTarget*)),
this, SLOT(targetDetected(QNearFieldTarget*)));
nfcManager->startTargetDetection();
Signals is emitted for every target that is detected
void targetDetected(QNearFieldTarget *target); {
const bool hasNdefMessage = target->hasNdefMessage();
if (hasNdefMessage) {
connect(target, SIGNAL(ndefMessageRead(QNdefMessage)),
this, SLOT(ndefMessageRead(QNdefMessage)));
target->readNdefMessages();
}
}
Another signal is emitted when reading the message from the target is finished
void NdefManager::ndefMessageRead(const QNdefMessage &message) ;
43 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

React to all targets
• Generic target detection instead of listening to specific tag
message(s)
– Remove previous targetDetected() with two parameters
ndefmanager.h
public slots:
void nfcWriteTag(const QString& nfcTagText); // New
private slots:
void targetDetected(QNearFieldTarget *target); // Modified from prev.
void ndefMessageRead(const QNdefMessage &message); // New
private:
QNearFieldTarget *cachedTarget; // New
44 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Start Generic Target Detection
ndefmanager.cpp
NdefManager::NdefManager(QObject *parent) : QObject(parent)
{
// [...]
// React only to Uri records (NfcRtd, "U")
QNdefFilter filter;
filter.appendRecord<QNdefNfcUriRecord>();
nfcManager->registerNdefMessageHandler(filter,
this, SLOT(targetDetected(QNdefMessage,QNearFieldTarget*)));
// Get notified when the tag gets out of range
connect(nfcManager, SIGNAL(targetLost(QNearFieldTarget*)),
this, SLOT(targetLost(QNearFieldTarget*)));
connect(nfcManager, SIGNAL(targetDetected(QNearFieldTarget*)),
this, SLOT(targetDetected(QNearFieldTarget*)));
nfcManager->startTargetDetection();
}
45 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Read NDEF Message
• Detected a target? Read its message.
ndefmanager.cpp
void NdefManager::targetDetected(QNearFieldTarget *target)
{
qDebug() << "Target detected!";
const bool hasNdefMessage = target->hasNdefMessage();
if (hasNdefMessage) {
connect(target, SIGNAL(ndefMessageRead(QNdefMessage)),
this, SLOT(ndefMessageRead(QNdefMessage)));
target->readNdefMessages();
}
// Cache target to member variable for writing
cachedTarget = target;
}
46 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Target Lost
• Set cached target to NULL
ndefmanager.cpp
void NdefManager::targetLost(QNearFieldTarget *target) {
cachedTarget = NULL; // New
target->deleteLater();
}
47 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Parse NDEF Message
• Same code as before, different method
ndefmanager.cpp
void NdefManager::ndefMessageRead(const QNdefMessage &message) {
// Go through all records in the message
foreach (const QNdefRecord &record, message) {
// Check type
if (record.isRecordType<QNdefNfcUriRecord>()) {
// Convert to the specialized URI record class
QNdefNfcUriRecord uriRecord(record);
// Emit a signal with the URI
emit nfcReadTagUri(uriRecord.uri());
}
}
}
48 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Write URI Ndef Message
ndefmanager.cpp
void NdefManager::nfcWriteTag(const QString &nfcTagText) {
// The device currently has a target in reach
if (cachedTarget) {
// Convert text to a URI, adding missing http:// if necessary
QUrl convertedUrl = QUrl::fromUserInput(nfcTagText);
// Check if it is a valid URL
if (convertedUrl.isValid() && nfcTagText.contains('.')) {
QNdefMessage message;
// Create a URI NDEF record
QNdefNfcUriRecord uriRecord;
uriRecord.setUri(convertedUrl);
message.append(uriRecord);
qDebug() << "Writing URI ...";
// Write NDEF message to the tag
cachedTarget->writeNdefMessages(QList<QNdefMessage>() << message);
} else {
qDebug() << "No valid URI";
}
} else {
qDebug() << "No cached target available";
}
}
49 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Extend UI with Write Button
Day.qml, between lines 122 / 123 (below MouseArea with id: mouse)
Image {
id: writeButton
source: "NfcFlag.png"
rotation: -8 // Note image itself is rotated
anchors { bottom: parent.bottom; right:parent.right }
MouseArea {
anchors.fill: parent
onClicked: ndefManager.nfcWriteTag(myText.text)
}
}
NfcFlag.png <project dir>qml
50 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Test! https://projects.developer.nokia.com/nfccorkboards
• Touch a tag, at the same time press the NFC flag of a note
– Writes the note text to the tag The extended solution on Nokia
Developer Projects handles
– Remember to enter a valid URI! additional record types and
potential errors.
51 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Nfc Chat
https://projects.developer.nokia.com/nfcchat
Tasks
– Develop an NFC chat from scratch
– NFC Peer to Peer mode
– LLCP Protocol (server & client sockets)
– Qt Quick UI
52 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

App Overview
main.cpp main.qml nfcpeertopeer.cpp/.h
Application startup UI definition Target discovery
Loads and shows Defines data model NFC Peer to peer
main.qml and view sockets (client &
server)
53 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

New Project
• Qt Quick Application
– Name: NfcChat
– Built-in elements only
– Targets: Symbian Device
(including Symbian Anna)
– Accept defaults for the rest
54 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Add Connectivity
• Edit the Qt project file (nfcchat.pro)
– Uncomment & add mobility component: connectivity
CONFIG += mobility
MOBILITY += connectivity
– Add LocalServices Capability
symbian:TARGET.CAPABILITY += NetworkServices LocalServices
Allows Internet access Allows NFC
55 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

UI Design – NFC Send Button
• Button Image
– Copy NfcButton.png to the project’s qml folder
C:QtdevNfcChatqmlNfcChatNfcButton.png
• Open Switch to UI Designer for main.qml
• Create the Button Image
– From Library → Resources: drag the button image to the top
right window corner
– In Properties, change the id to “sendButton”
– In Properties → Layout, set top and right anchors to “Parent
(rectangle1)” (Margin: 0)
• Interactivity
– From Library → Items: drag the “Mouse Area” on top of the
button image (gets a child in the Navigator – drag the
“mouse_area1” on the “sendButton” if it isn’t)
– In Properties Layout, set anchors to fill the parent
56 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

UI Design – Message Editor
• Hello World cleanup
– Delete the “Hello World” text and the window-wide
mouse area
• Text Edit element
– From Library → Items: drag the “Text Edit” element
to the top left window corner
– In Properties, change the Id to “sendTextEdit”
– In Properties → TextEdit, change the text to “Hello
NFC”
– In Properties → TextEdit, change the font size to
10 points
– In Properties → Layout, set top and left anchors to
“Parent (rectangle1)” and the right anchor to
“sendButton” (Margin: 0)
57 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

UI Design – Message View
• ListView
– Will display messages stored in a
data model
– From Library → Items: drag the “List
View” element to the window
– In Properties, change the id to
“messageView”
– In Properties → Layout, set top
anchor to “sendButton”. Other edges:
“Parent (rectangle1)”. All Margin: 0.
58 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

NfcPeerToPeer
• Go to the “Edit” view
• New C++ class
– Right-click the project
→ Add New ...
→ C++ Class
– Class name: NfcPeerToPeer
– Base class: QObject
59 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Include
• Headers, define member variable
nfcpeertopeer.h
#include <qnearfieldmanager.h>
#include <qllcpserver.h>
#include <qllcpsocket.h>
QTM_USE_NAMESPACE // Use Qt Mobility namespace
[...]
private:
QLatin1String nfcUri;
QNearFieldManager *nfcManager;
QLlcpServer *nfcServer;
QLlcpSocket *nfcClientSocket;
QLlcpSocket *nfcServerSocket;
60 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Search for Targets
• Save own unique service Uri and start target detection
nfcpeertopeer.cpp
NfcPeerToPeer::NfcPeerToPeer(QObject *parent) :
QObject(parent), nfcUri("urn:nfc:xsn:nokia.com:nfcchat")
{
nfcManager = new QNearFieldManager(this);
connect(nfcManager, SIGNAL(targetDetected(QNearFieldTarget*)),
this, SLOT(targetDetected(QNearFieldTarget*)));
connect(nfcManager, SIGNAL(targetLost(QNearFieldTarget*)),
this, SLOT(targetLost(QNearFieldTarget*)));
// Only detect other NFC devices. Leave the phone to handle NFC tags.
nfcManager->startTargetDetection(QNearFieldTarget::NfcForumDevice);
}
61 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Signals & Slots
• Handle targets
nfcpeertopeer.h
private slots:
void targetDetected(QNearFieldTarget *target);
void targetLost(QNearFieldTarget *target);
• Emit chat messages to the UI
nfcpeertopeer.h
signals:
void chatMessage(const QString& nfcClientMessage);
62 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

React
• New target: emit info message
nfcpeertopeer.cpp
void NfcPeerToPeer::targetDetected(QNearFieldTarget *target)
{
emit chatMessage("Target detected");
}
• Target out of range: emit message & delayed object delete
nfcpeertopeer.cpp
void NfcPeerToPeer::targetLost(QNearFieldTarget *target)
{
target->deleteLater();
emit chatMessage("Target lost");
}
63 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Register C++ with QML
• Make your C++ class available in QML
– QML Name: NfcPeerToPeer
– QML Library: NfcPeerToPeer 1.0
main.cpp
#include <QtDeclarative>
#include "nfcpeertopeer.h"
int main(int argc, char *argv[]) {
QApplication app(argc, argv);
qmlRegisterType<NfcPeerToPeer>("NfcPeerToPeer", 1, 0, "NfcPeerToPeer");
[...]
}
64 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

NfcPeerToPeer in QML
• Import module
main.qml
import NfcPeerToPeer 1.0
• Update the list model when a NFC chat message arrives
main.qml
NfcPeerToPeer {
id: nfcPeerToPeer
onChatMessage: {
messageModel.append( {"chatMessage": nfcClientMessage} )
}
}
ListModel { id: messageModel }
ListView { model: messageModel
delegate: Text { text: chatMessage }
// [...]
}
65 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Test!
• Run the app on two phones
– Switch phones in the Run Settings
• Touch both phones
– Admire how they detect each other!
66 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

NFC LLCP Server Socket
• Define slots for new server connections & sending text
nfcpeertopeer.h
public slots:
void sendText(const QString& text);
private slots:
void handleNewConnection();
• Listen for new server connections
nfcpeertopeer.cpp
NfcPeerToPeer::NfcPeerToPeer(QObject *parent)
// [...]
nfcServer = new QLlcpServer(this);
connect(nfcServer, SIGNAL(newConnection()),
this, SLOT(handleNewConnection()));
nfcServer->listen(nfcUri);
}
67 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Connections & Sending
• Create a socket for a new server connection
nfcpeertopeer.cpp
void NfcPeerToPeer::handleNewConnection() {
if (nfcServerSocket) { nfcServerSocket->deleteLater(); }
nfcServerSocket = nfcServer->nextPendingConnection();
}
• Slot to send chat messages over the server socket
nfcpeertopeer.cpp
void NfcPeerToPeer::sendText(const QString& text) {
if (nfcServerSocket && nfcServerSocket->isOpen()) {
nfcServerSocket->write(text.toUtf8());
emit chatMessage("Message sent");
}
}
68 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Sending Chat Messages
• Call the sendText() slot in MouseArea’s onClicked handler
main.qml
onClicked: nfcPeerToPeer.sendText(sendTextEdit.text)
69 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

NFC LLCP Client Socket
• Define slot to read incoming text
nfcpeertopeer.h
private slots:
void readText();
• Create the client socket (to be connected to NFC targets)
nfcpeertopeer.cpp
NfcPeerToPeer::NfcPeerToPeer(QObject *parent)
// [...]
nfcClientSocket = new QLlcpSocket(this);
connect(nfcClientSocket, SIGNAL(readyRead()),
this, SLOT(readText()));
}
70 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Connections & Reading
• Connect the socket to a target in targetDetected()
nfcpeertopeer.cpp
nfcClientSocket->connectToService(target, nfcUri);
• Read text from the socket and emit a signal
nfcpeertopeer.cpp
void NfcPeerToPeer::readText() {
QByteArray rawData = nfcClientSocket->readAll();
QString data = QString::fromUtf8(rawData.constData(), rawData.size());
emit chatMessage(data);
}
• Cleanup in targetLost()
nfcpeertopeer.cpp
nfcClientSocket->disconnectFromService();
71 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Test! #2 https://projects.developer.nokia.com/nfcchat
The extended solution on Nokia Developer
Projects includes MeeGo support, cached
text sending, error handling and is based on
• Touch upper back of two phones Qt Quick Components.
Note: if installing the solution, uninstall your
own app first to avoid a name conflict..
– While touching, press the send button
72 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

NFC Summary
73 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Nfc Examples http://www.nfcinteractor.com/
Tech. Tag / p2p Showcase
Powerful tag & NDEF reading, dynamic NDEF message
Nfc Interactor Qt Tag
composer, reusable tag handling classes, Nfc detection
Higher-level tag reading / writing, app autostart, Nfc
Nfc Corkboard Qt Tag
detection
Nfc Chat Qt p2p p2p data transfer, Nfc detection
Nfc Creator Java ME Tag Tag reading / writing
Nfc Settings Qt Quick Qt - Nfc detection
Nfc Content Handler Plug-in Symbian Tag App autostart
Nfc NPP Example Qt p2p p2p data transfer (Google NPP protocol)
Nfc Peer-to-Peer Example Qt p2p p2p data transfer
Simple LLCP Chat Java ME p2p p2p data transfer
http://www.developer.nokia.com/Develop/NFC/Code_examples/
74 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Summary developer.nokia.com/NFC
Design
Develop Distribute
Guidelines
75 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl

Thank You.
Andreas Jakl NFC Introduction
Related Presentations
bit.ly/NfcIntro
[@mopius]
Windows (Phone) 8 NFC App Scenarios
nfcinteractor.com bit.ly/NFCAppScenarios
Technology Wizard
Nokia NFC Development on the Windows 8 Platform
bit.ly/Win8NFC
76 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl