NFC Development with Qt on Symbian and MeeGo
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.
Andreas Jakl
[@mopius]
nfcinteractor.com
Technology Wizard
Nokia
NFC Introduction bit.ly/NfcIntro Windows (Phone) 8 NFC App Scenarios bit.ly/NFCAppScenarios NFC Development on the Windows 8 Platform bit.ly/Win8NFC R
ela
ted
Pre
sen
tati
on
s
2
NFC Development
© 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
NFC Development Alternatives
3 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
Java ME
Works on Series 40 and Symbian devices.
Limited use of smartphone features.
Qt Mobility
Cross-platform API.
Best flexibility and ease of app
development.
Symbian Native
Low level control over devices’ NFC support.
More complex, platform knowledge required.
Windows Phone 8
Proximity APIs Similar on Windows 8
Extra presentation: bit.ly/Win8NFC
Lumia 610 NFC – WP7 bit.ly/WpNfc
4 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
NFC Developer Offering
Tools
Qt Development
Qt SDK 1.2 Qt Mobility 1.2
Symbian Development
Symbian Belle SDK
Java ME development
Nokia 6212 Classic NFC SDK or Symbian Belle SDK
Channel
Nokia Store NFC Collection
5 © 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
Contactless Communication API
6 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
• JSR 257
– Tag discovery and data exchange
– NDEF messages
• Example project: Nfc Creator
– https://projects.developer.nokia.com/
nfccreator
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
8
Qt Mobility NFC
© 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
9 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
What is Qt?
Developer
Publish to – Nokia Store (Symbian, MeeGo) – Windows – Linux – Mac – Embedded
App Source Code
Using Qt SDK for – Dev. environment – Testing – Translation – Help
Using Qt framework for – User Interface – Networking – Location (GPS) – Web integration – ...
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
– 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
More information: bit.ly/StartNfc
* Apps compiled with the Symbian Anna target are compatible to Symbian^3, Anna & Belle.
11 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
Qt Mobility
Mobility 1.0
Bearer Management API Contacts Location Messaging Multimedia Publish and Subscribe Service Framework Sensors System Information Versit
Mobility 1.1
Camera Document Gallery Feedback Landmarks Maps/Navigation Organizer Service Framework – Out of process
Mobility 1.2
Connectivity (Bluetooth, NFC)
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
13 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
API Overview* QNearFieldManager
Detects and filters targets
QLlcpServer Listen for new server socket connections.
QNearFieldTarget Query properties,
read/write messages, send commands or
establish a client socket
QNdefMessage Collection of 0 or more
records
QNdefRecord Access to NDEF data.
Subclasses for handling specific details.
QLlcpSocket Read / write data. For
server & client sockets.
* Not a class diagram, but explains sequential usage order
Generic NFC
Tag access
Peer to peer
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:\QtMobility\src\connectivity\nfc
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
16
Nfc Corkboard
© 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
Tasks
– Extend Qt SDK example with NFC:
Touch tag to create note
– Qt Quick based UI
– C++ based NFC
– Integrate C++ with QML
https://projects.developer.nokia.com/nfccorkboards
Importing the Example
• From Qt Creator’s Getting
Started screen
– Search for Corkboards example
– Or open:
C:\QtSDK\Examples\4.7\declarative\
toys\corkboards\corkboards.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
20 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
App Overview
main.cpp
Application startup
Loads and shows corkboards.qml
corkboards.qml
UI definition
Defines data model and view
Day.qml
Delegate for drawing the UI for a single day
Interaction for notes
ndefmanager.cpp/.h
NFC Tag discovery and reading
We will add this:
in: corkboards.qml id: list
in: corkboards.qml id: flickable
21 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
Model, View & Delegate
ListModel
Defines free-form list data source
Container for ListElement definitions
ListView
Shows data from a model in a list
Horizontal or vertical
Delegate
Template defining each item instantiated by the view
in: Day.qml
Add Connectivity
• Edit the Qt project file (corkboards.pro)
– Uncomment & add mobility component: connectivity
– Add LocalServices Capability (for Symbian)
22 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
CONFIG += mobility
MOBILITY += connectivity
symbian:TARGET.CAPABILITY += NetworkServices LocalServices
Allows Internet access Allows NFC
Good to Know: Symbian Security *
1. Determine the required security / privacy features
– Most common:
2. Add to Qt project file (.pro)
23 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
* Qt apps are native apps; therefore, the security model of the target operating system applies.
Feature Capability
Internet access, telephony, messaging NetworkServices
Access location (GPS, etc.) Location
Camera, record audio UserEnvironment
Contacts, Calendar ReadUserData / WriteUserData
Bluetooth, NFC LocalServices
IMEI, model name, battery status ReadDeviceData
(See: developer.nokia.com/Community/Wiki/Capabilities)
symbian:TARGET.CAPABILITY += Location LocalServices
Basic / User Capabilities
Extended / System Capabilities
Good to Know: Symbian Security
3. Get the right certificate during development
24 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
No / Basic Capabilities Extended Capabilities
Sign up for Nokia Publish account (€1) 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)
Use auto-generated self signed certificate (default, no action required)
Good to Know: Symbian Security
4. Publish
25 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
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)
Publish to the Nokia Store Need Certified Signed capabilities? developer.nokia.com/Community/Wiki/Capabilities -> Purchase a Publisher ID ($200 / year) Submit to Certified Signed process @ www.symbiansigned.com
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
28 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
#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;
ndefmanager.h
29 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
Start Waiting 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*)));
}
ndefmanager.cpp
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
• 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
private slots:
void targetDetected(const QNdefMessage &message,
QNearFieldTarget *target);
void targetLost(QNearFieldTarget *target);
ndefmanager.h
React
• New target: write debug output to console for now
• Target out of range: delayed object delete
33 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
void NdefManager::targetDetected(const QNdefMessage &message,
QNearFieldTarget *target)
{
qDebug() << "Uri Target detected!";
}
ndefmanager.cpp
void NdefManager::targetLost(QNearFieldTarget *target)
{
target->deleteLater();
}
ndefmanager.cpp
Register C++ with QML
• Make your C++ class available in QML
– QML Name: NdefManager
– QML Library: Nfc 1.0
34 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
#include <QtDeclarative>
#include "ndefmanager.h"
int main(int argc, char *argv[]) {
QApplication app(argc, argv);
qmlRegisterType<NdefManager>("Nfc", 1, 0, "NdefManager");
[...]
}
main.cpp
NdefManager in QML
• Import module
• Create Instance
35 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
import Nfc 1.0
corkboards.qml
NdefManager {
id: ndefManager
}
corkboards.qml
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
37 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
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());
}
}
}
ndefmanager.cpp
Define the Signal
• Signals have no implementation
– They represent information, not a method to execute
38 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
signals:
void nfcReadTagUri(const QUrl& nfcTagUri);
ndefmanager.h
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
39 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
NdefManager {
id: ndefManager
onNfcReadTagUri:
list.get(flickable.currentIndex).notes.append({"noteText":nfcTagUri})
}
corkboards.qml
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
41
Interactive Nfc Corkboard
© 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
Tasks
– Extend previous example
– React to any kind of tags
– Write tags by pressing the red flag
while touching a tag
https://projects.developer.nokia.com/nfccorkboards
42 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
Overview – Before QNdefFilter filter;
filter.appendRecord<QNdefNfcUriRecord>();
nfcManager->registerNdefMessageHandler(filter, this,
SLOT(targetDetected(QNdefMessage,QNearFieldTarget*)));
void targetDetected(const QNdefMessage &message,
QNearFieldTarget *target);
Signal is only emitted when a tag containing all records defined in the filter are found
Register NDEF filters and detect targets
The slot directly gets the NDEF message
43 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
Overview – After connect(nfcManager, SIGNAL(targetDetected(QNearFieldTarget*)),
this, SLOT(targetDetected(QNearFieldTarget*)));
nfcManager->startTargetDetection();
void targetDetected(QNearFieldTarget *target); {
const bool hasNdefMessage = target->hasNdefMessage();
if (hasNdefMessage) {
connect(target, SIGNAL(ndefMessageRead(QNdefMessage)),
this, SLOT(ndefMessageRead(QNdefMessage)));
target->readNdefMessages();
}
}
Signals is emitted for every target that is detected
Detect any kind of targets
void NdefManager::ndefMessageRead(const QNdefMessage &message) ;
Another signal is emitted when reading the message from the target is finished
React to all targets
• Generic target detection instead of listening to specific tag
message(s)
– Remove previous targetDetected() with two parameters
44 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
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
ndefmanager.h
45 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
Start Generic Target Detection 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();
}
ndefmanager.cpp
Read NDEF Message
• Detected a target? Read its message.
46 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
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;
}
ndefmanager.cpp
Target Lost
• Set cached target to NULL
47 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
void NdefManager::targetLost(QNearFieldTarget *target) {
cachedTarget = NULL; // New
target->deleteLater();
}
ndefmanager.cpp
Parse NDEF Message
• Same code as before, different method
48 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
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());
}
}
}
ndefmanager.cpp
49 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
Write URI Ndef Message 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";
}
}
ndefmanager.cpp
50 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
Extend UI with Write Button 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)
}
}
Day.qml, between lines 122 / 123 (below MouseArea with id: mouse)
NfcFlag.png <project dir>\qml\
Test! • Touch a tag, at the same time press the NFC flag of a note
– Writes the note text to the tag
– Remember to enter a valid URI!
51 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
The extended solution on Nokia Developer Projects handles additional record types and
potential errors.
https://projects.developer.nokia.com/nfccorkboards
52
Nfc Chat
© 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
Tasks
– Develop an NFC chat from scratch
– NFC Peer to Peer mode
– LLCP Protocol (server & client sockets)
– Qt Quick UI
https://projects.developer.nokia.com/nfcchat
53 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
App Overview
main.cpp
Application startup
Loads and shows main.qml
main.qml
UI definition
Defines data model and view
nfcpeertopeer.cpp/.h
Target discovery
NFC Peer to peer sockets (client & server)
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
– Add LocalServices Capability
55 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
CONFIG += mobility
MOBILITY += connectivity
symbian:TARGET.CAPABILITY += NetworkServices LocalServices
Allows Internet access Allows NFC
UI Design – NFC Send Button • Button Image
– Copy NfcButton.png to the project’s qml folder
C:\Qt\dev\NfcChat\qml\NfcChat\NfcButton.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
60 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
#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;
nfcpeertopeer.h
Search for Targets
• Save own unique service Uri and start target detection
61 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
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);
}
nfcpeertopeer.cpp
Signals & Slots
• Handle targets
• Emit chat messages to the UI
62 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
private slots:
void targetDetected(QNearFieldTarget *target);
void targetLost(QNearFieldTarget *target);
nfcpeertopeer.h
signals:
void chatMessage(const QString& nfcClientMessage);
nfcpeertopeer.h
React
• New target: emit info message
• Target out of range: emit message & delayed object delete
63 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
void NfcPeerToPeer::targetDetected(QNearFieldTarget *target)
{
emit chatMessage("Target detected");
}
nfcpeertopeer.cpp
void NfcPeerToPeer::targetLost(QNearFieldTarget *target)
{
target->deleteLater();
emit chatMessage("Target lost");
}
nfcpeertopeer.cpp
Register C++ with QML
• Make your C++ class available in QML
– QML Name: NfcPeerToPeer
– QML Library: NfcPeerToPeer 1.0
64 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
#include <QtDeclarative>
#include "nfcpeertopeer.h"
int main(int argc, char *argv[]) {
QApplication app(argc, argv);
qmlRegisterType<NfcPeerToPeer>("NfcPeerToPeer", 1, 0, "NfcPeerToPeer");
[...]
}
main.cpp
NfcPeerToPeer in QML • Import module
• Update the list model when a NFC chat message arrives
65 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
import NfcPeerToPeer 1.0
main.qml
NfcPeerToPeer {
id: nfcPeerToPeer
onChatMessage: {
messageModel.append( {"chatMessage": nfcClientMessage} )
}
}
ListModel { id: messageModel }
ListView { model: messageModel
delegate: Text { text: chatMessage }
// [...]
}
main.qml
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
• Listen for new server connections
67 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
NfcPeerToPeer::NfcPeerToPeer(QObject *parent)
// [...]
nfcServer = new QLlcpServer(this);
connect(nfcServer, SIGNAL(newConnection()),
this, SLOT(handleNewConnection()));
nfcServer->listen(nfcUri);
}
nfcpeertopeer.cpp
public slots:
void sendText(const QString& text);
private slots:
void handleNewConnection();
nfcpeertopeer.h
Connections & Sending
• Create a socket for a new server connection
• Slot to send chat messages over the server socket
68 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
void NfcPeerToPeer::sendText(const QString& text) {
if (nfcServerSocket && nfcServerSocket->isOpen()) {
nfcServerSocket->write(text.toUtf8());
emit chatMessage("Message sent");
}
}
nfcpeertopeer.cpp
void NfcPeerToPeer::handleNewConnection() {
if (nfcServerSocket) { nfcServerSocket->deleteLater(); }
nfcServerSocket = nfcServer->nextPendingConnection();
}
nfcpeertopeer.cpp
Sending Chat Messages
• Call the sendText() slot in MouseArea’s onClicked handler
69 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
onClicked: nfcPeerToPeer.sendText(sendTextEdit.text)
main.qml
NFC LLCP Client Socket
• Define slot to read incoming text
• Create the client socket (to be connected to NFC targets)
70 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
NfcPeerToPeer::NfcPeerToPeer(QObject *parent)
// [...]
nfcClientSocket = new QLlcpSocket(this);
connect(nfcClientSocket, SIGNAL(readyRead()),
this, SLOT(readText()));
}
nfcpeertopeer.cpp
private slots:
void readText();
nfcpeertopeer.h
Connections & Reading • Connect the socket to a target in targetDetected()
• Read text from the socket and emit a signal
• Cleanup in targetLost()
71 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
void NfcPeerToPeer::readText() {
QByteArray rawData = nfcClientSocket->readAll();
QString data = QString::fromUtf8(rawData.constData(), rawData.size());
emit chatMessage(data);
}
nfcpeertopeer.cpp
nfcClientSocket->connectToService(target, nfcUri);
nfcpeertopeer.cpp
nfcClientSocket->disconnectFromService();
nfcpeertopeer.cpp
Test! #2
• Touch upper back of two phones
– While touching, press the send button
72 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
The extended solution on Nokia Developer Projects includes MeeGo support, cached
text sending, error handling and is based on Qt Quick Components.
Note: if installing the solution, uninstall your own app first to avoid a name conflict..
https://projects.developer.nokia.com/nfcchat
73
NFC Summary
© 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
74 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
Nfc Examples Tech. Tag / p2p Showcase
Nfc Interactor Qt Tag Powerful tag & NDEF reading, dynamic NDEF message composer, reusable tag handling classes, Nfc detection
Nfc Corkboard Qt Tag Higher-level tag reading / writing, app autostart, Nfc 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/
http://www.nfcinteractor.com/
75 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
Summary Design
Guidelines
developer.nokia.com/NFC
Develop Distribute
Thank You.
76 © 2012 Nokia Nokia NFC Development with Qt v2.2.0 November 5, 2012 Andreas Jakl
Andreas Jakl
[@mopius]
nfcinteractor.com
Technology Wizard
Nokia
NFC Introduction bit.ly/NfcIntro Windows (Phone) 8 NFC App Scenarios bit.ly/NFCAppScenarios NFC Development on the Windows 8 Platform bit.ly/Win8NFC R
ela
ted
Pre
sen
tati
on
s