Risultati BlackBerry App Contest 2014

14 luglio 2014 in contest, hackathon, news, Senza categoria, z10

Siamo lieti di annunciare i risultati del BlackBerry App Contest 2014!

BlackBerry App Contest 2014 Winners

BlackBerry App Contest 2014 Winners

La scelta dei vincitori è stata difficile e molto ponderata sia per i criteri di selezione delle applicazioni, che per la qualità delle applicazioni in gioco.

Criteri :

  • 25% Grown Potential
  • 25% Integrazione col device ( Utilizzo API BB10 )
  • Bonus aggiuntivo +10% se Cross Platform ( Cordova , Webworks 2.0 )

Primo Premio

un BlackBerry Z10 !

z10

Secondo Premio

Voucher per esame gratuito BlackBerry Certified Builder  !

( Maggiori informazioni su BlackBerry Certified Builder al link  https://developer.blackberry.com/blackberrybuilders/ )

 

Terzo Premio

un BlackBerry Playbook !

playbook

Le applicazioni vincitrici e le loro posizioni sono :

  • La Corsa Rosa – Davide Massetti          1° Posto! Si aggiudica un BlackBerry Z10
  • WallExpo – Marco Bavagnoli                   2° Posto! Si aggiudica un Voucher BlackBerry Certified Builder
  • Lighting Diagram – Emanuele Poggi      2° Posto ! Si aggiudica un Voucher BlackBerry Certified Builder
  • OrigamiPedia – Alessandro Azzolini     3° Posto ! Si aggiudica un BlackBerry Playbook!

 

Complimenti a tutti i partecipanti per l’impegno e la qualità delle loro applicazioni!

Ringraziamo Luca Filigheddu  e l’impegno di tutti i DevGroup Manager Italiani che ricordo sono : Alessandro La Rosa, Andrea De Gaetano, Alessandro Bellotti, Francesco Surdo e Marco Gallo.

Al prossimo contest BlackBerry!

 

 

 

Avatar di Marco

da Marco

Tutorial - StarRate custom component (Qt/Cascades)

25 luglio 2013 in Tutorial

Trattasi di un componente solamente visuale oppure anche interattivo per la visualizzazione o l’input di un classico voto a 5 stelle (nessun riferimento al movimento ;) ). Con la stessa tecnica si potrebbero creare molti altri controlli.
La classe è derivata da bb::cascades::ImageView per cui una volta creata l’immagine da visualizzare, basterà chiamare la funzione setImage() per vederla nella nostra UI.
Per cominciare bisogna esporre la classe a QML:

qmlRegisterType("StarRate", 1, 0, "StarRate");

questo prima del comando QmlDocument::create(“asset:///main.qml”) che si trova in applicationui.cpp

Dopodichè sarà disponibile nei nostri .qml con “import StarRate 1.0″ e questo può essere un risultato

StarRate

e questo è il codice QML:

import bb.cascades 1.0
import StarRate 1.0

Container {
    layout: AbsoluteLayout {
    }
    Container { // starContainer
        id: starContainer
        property int w: 500
        property double touchXpos
        property double touchYpos
        minWidth: w
        minHeight: w / 5 + 50
        background: Color.DarkGray
        verticalAlignment: VerticalAlignment.Center
        layoutProperties: AbsoluteLayoutProperties {
            positionY: 400.0
        }
        onTouchEnter: {
            starValueContainer.visible = true;
        }
        onTouchExit: {
            starValueContainer.visible = false;
        }
        onTouch: {
            if (event.isDown()) starValueContainer.visible = true;
            if (event.isUp()) starValueContainer.visible = false;
            if (event.isMove()) {
                touchXpos = event.windowX;
                touchYpos = event.windowY;
                starRate.value = event.localX / w * 5;
                starValueLabel.text = Math.ceil(starRate.value);
            }
        }
        StarRate {
            id: starRate
            minWidth: starContainer.w
            minHeight: starContainer.w / 5
            diameter: 80
            penWidth: 2
            innerColor: Qt.rgba(1, 1, .5, 1)
            outerColor: Qt.rgba(.6, .6, 0, 1)
            emptyColor: Qt.rgba(.9, .9, .9, 1)
            value: 1
        } // StarRate
    } // starContainer
    Container { // value label that happear when tapping over stars
        id: starValueContainer
        background: Color.Black
        visible: false
        minWidth: 60.0
        minHeight: 90.0
        topPadding: 3.0
        rightPadding: 3.0
        bottomPadding: 3.0
        leftPadding: 3.0
        layoutProperties: AbsoluteLayoutProperties {
            positionX: starContainer.touchXpos - 30
            positionY: starContainer.touchYpos - 200.0

        }
        layout: DockLayout {
        }
        Container {
            background: Color.create("#262626")
            horizontalAlignment: HorizontalAlignment.Fill
            verticalAlignment: VerticalAlignment.Fill
            layout: DockLayout {

            }
            Label {
                id: starValueLabel
                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
                textStyle.fontSize: FontSize.Large
                textStyle.textAlign: TextAlign.Center
                textStyle.color: Color.White
            }
        }
    } // value label that happear when tapping over stars
    StarRate {
        id: starRate2
        layoutProperties: AbsoluteLayoutProperties {
            positionY: 650.0
        }
        minWidth: starContainer.w
        minHeight: starContainer.w / 5
        diameter: 40
        penWidth: 2
        innerColor: Qt.rgba(0, 0, 1, 1)
        outerColor: Qt.rgba(1, 1, 1, 1)
        emptyColor: Qt.rgba(.8, .8, 1, 1)
        value: 3.5
    } // StarRate
}

sarebbe bastato solo l’utilizzo di StarRate{}, ma ho voluto aggiungere in questo esempio la possibilità di poter toccare il componente e dare la possibilità all’utente di “dare un voto” cioè di scegliere quale “value” deve avere il componente StarRate. Ho aggiunto inoltre un altro StarRate con colori e dimensioni diverse.
diameter è la dimensione della singola stellina, percui la larghezza dell’immagine sara diameter*5 e l’altezza sarà uguale a diameter.
penWidth è lo spessore della traccia nera di contorno
innerColor il gradiente interno della stellina
outerColor il gradiente esterno della stellina
emptyColor il colore della stellina vuota
value il valore compreso tra 0.0 e 5.0

Con un diametro più o meno dai 100 in su, ho notato che le prestazioni calano parecchio (quando si usa il componente come input), ma dandogli un valore di 80 e scalando l’immagine non si perde un gran chè di qualità. Quindi un diametro di 40 può andar bene per un componente largo 400 (40*5 farebbe 200) come si vede nelle stellette blu di esempio.

e ora il sorgente della classe da aggiungere alla nostra applicazione

/**
* Summary: rate component system for BB10
*
* Author:  Marco Bavagnoli <lil.deimos@gmail.com>
*          Vercelli (VC) - Italy
*
* Copyright © 2013 Marco Bavagnoli. All rights reserved.
*
*/
#ifndef STARRATE_H_
#define STARRATE_H_

#include <bb/cascades/ImageView>

using namespace bb::cascades;

class StarRate: public bb::cascades::ImageView {
	Q_OBJECT
	Q_PROPERTY (double value    READ value    WRITE setValue NOTIFY valueChanged)
	Q_PROPERTY (double diameter READ diameter WRITE setDiameter NOTIFY diameterChanged)
	Q_PROPERTY (int    penWidth READ penWidth WRITE setPenWidth NOTIFY penWidthChanged)
	Q_PROPERTY (QColor innerColor READ innerColor WRITE setInnerColor NOTIFY innerColorChanged)
	Q_PROPERTY (QColor outerColor READ outerColor WRITE setOuterColor NOTIFY outerColorChanged)
	Q_PROPERTY (QColor emptyColor READ emptyColor WRITE setEmptyColor NOTIFY emptyColorChanged)

public:
	StarRate();
	~StarRate();

private:
	void calcStarShape();
	void composeStarImages();

	// Properties
	double value()      { return m_value; }
	double diameter()   { return m_diameter; }
	int    penWidth()   { return m_penWidth; }
	QColor innerColor() { return m_innerColor; }
	QColor outerColor() { return m_outerColor; }
	QColor emptyColor() { return m_emptyColor; }
	void setValue(double v);
	void setDiameter(double d);
	void setPenWidth(int w);
	void setInnerColor(QColor c);
	void setOuterColor(QColor c);
	void setEmptyColor(QColor c);

private Q_SLOTS:
	void initComponent();

signals:
	void valueChanged();
	void diameterChanged();
	void penWidthChanged();
	void innerColorChanged();
	void outerColorChanged();
	void emptyColorChanged();

private:
	double m_value;
	double m_diameter;
	double m_radius;
	int    m_penWidth;
	QColor m_innerColor;
	QColor m_outerColor;
	QColor m_emptyColor;
	QImage *emptyStarsImg;
	QImage *filledStarsImg;
	QPolygonF starShape;
};

#endif /* STARRATE_H_ */
/**
* Summary: rate component system for BB10
*
* Author:  Marco Bavagnoli <lil.deimos@gmail.com>
*          Vercelli (VC) - Italy
*
* Copyright © 2013 Marco Bavagnoli. All rights reserved.
*
*/

#include "StarRate.h"
#include <bb/cascades/Image>

StarRate::StarRate() :
	emptyStarsImg(0),
	filledStarsImg(0),
	m_value(-1),
	m_diameter(40),
	m_radius(20),
	m_penWidth(1),
	m_innerColor(QColor(250,250,0, 255)),
	m_outerColor(QColor(250,100,100, 255)),
	m_emptyColor(QColor(220,220,220))
{
	connect(this, SIGNAL(creationCompleted()),  this, SLOT(initComponent()));
}

StarRate::~StarRate() {
	delete filledStarsImg;
	delete emptyStarsImg;
}

void StarRate::initComponent() {
	calcStarShape();
	composeStarImages();
	setValue(m_value);
}
void StarRate::calcStarShape()
{
    // Compose the star polygon
    qreal radiusMax = m_diameter;
    qreal radiusMin = m_diameter*.6;
    starShape.clear();
    int i = 10;
    for (int n=0; n<i; n+=2) {
        starShape.append (QPointF(
                              cos(2*M_PI/i*(n+0)-M_PI/i)*radiusMax,
                              sin(2*M_PI/i*(n+0)-M_PI/i)*radiusMax
                              )*( radiusMax /m_diameter)/2);
        starShape.append (QPointF(
                              cos(2*M_PI/i*(n+1)-M_PI/i)*radiusMin,
                              sin(2*M_PI/i*(n+1)-M_PI/i)*radiusMin
                              )*( radiusMin /m_diameter)/2);
    }
}

void StarRate::composeStarImages() {
    // Draw 5 empty stars image
    if (emptyStarsImg!=0) delete emptyStarsImg;
    emptyStarsImg = new QImage(m_diameter*5, m_diameter, QImage::Format_ARGB32);
    int n;
    memset(emptyStarsImg->bits(), 0x00, emptyStarsImg->byteCount() );
    for (n=0; n<5; n++)
    {
        QBrush starBrush(m_emptyColor);
        QPainter painter(emptyStarsImg);
        QPen pen(QColor(Qt::black));
        pen.setWidthF(m_penWidth);
        painter.setBrush(starBrush);
        painter.setPen(pen);
        painter.setRenderHint(QPainter::Antialiasing, true);
        painter.drawPolygon( starShape.translated(m_radius+m_diameter*n, m_radius) );
    }

    // Draw 5 filled stars image
    if (filledStarsImg!=0) delete filledStarsImg;
    filledStarsImg =  new QImage(m_diameter*5, m_diameter, QImage::Format_ARGB32);
    memset(filledStarsImg->bits(), 0x00, filledStarsImg->byteCount() );
    for (n=0; n<5; n++)
    {
        QRadialGradient radialGrad(m_radius+m_diameter*n , m_radius , m_radius/2);
        radialGrad.setColorAt(0, m_innerColor);
        radialGrad.setColorAt(1, m_outerColor);

        QBrush starBrush(radialGrad);
        QPainter painter(filledStarsImg);
        QPen pen(QColor(Qt::black));
        pen.setWidthF(m_penWidth);
        painter.setBrush(starBrush);
        painter.setPen(pen);
        painter.setRenderHint(QPainter::Antialiasing, true);
        painter.drawPolygon( starShape.translated(m_radius+m_diameter*n,m_radius) );
    }
}

///////////////////////////////////////////////////
// Properties functions
///////////////////////////////////////////////////
void StarRate::setValue(double v) {
//	if (m_value == v) return;
	if (v < 0 || v > 5) return;
	m_value = v;
	if (emptyStarsImg==0 || filledStarsImg==0) return;

	bb::ImageData imageData(bb::PixelFormat::RGBA_Premultiplied, emptyStarsImg->width(), emptyStarsImg->height());
	int w=imageData.width();
	int widthToGet = (double)w * ( m_value * 20.0 / 100.0);

	// Copy in the exposed image a percentage given by widthToGet of filledStarsImg and in the remain percentage emptyStarsImg
	unsigned char *dstLine = imageData.pixels();
	for (int y = 0; y < imageData.height(); y++) {
		unsigned char * dst = dstLine;
		// Copy filled stars part
		for (int x = 0; x < widthToGet; x++) { 			QRgb srcPixel = filledStarsImg->pixel(x, y);
			*dst++ = qRed(srcPixel);
			*dst++ = qGreen(srcPixel);
			*dst++ = qBlue(srcPixel);
			*dst++ = qAlpha(srcPixel);
		}
		// Copy empty stars part
		for (int x = widthToGet; x < imageData.width(); x++) { 			QRgb srcPixel = emptyStarsImg->pixel(x, y);
			*dst++ = qRed(srcPixel);
			*dst++ = qGreen(srcPixel);
			*dst++ = qBlue(srcPixel);
			*dst++ = qAlpha(srcPixel);
		}
		dstLine += imageData.bytesPerLine();
	}

	setImage(Image( imageData ));
}
void StarRate::setDiameter(double d) {
	if (m_diameter == d) return;
	m_diameter = d;
	m_radius   = d/2;
	initComponent();
	emit diameterChanged();
}
void StarRate::setPenWidth(int w) {
	if (m_penWidth == w) return;
	m_penWidth = w;
	initComponent();
	emit penWidthChanged();
}
void StarRate::setInnerColor(QColor c) {
	if (m_innerColor == c) return;
	m_innerColor = c;
	initComponent();
	emit innerColorChanged();
}
void StarRate::setOuterColor(QColor c) {
	if (m_outerColor == c) return;
	m_outerColor = c;
	initComponent();
	emit outerColorChanged();
}
void StarRate::setEmptyColor(QColor c) {
	if (m_emptyColor == c) return;
	m_emptyColor = c;
	initComponent();
	emit emptyColorChanged();
}

enjoy!

Avatar di Marco

da Marco

Tutorial - settings (Qt/Cascades)

23 luglio 2013 in Tutorial

Salvare settaggi, preferenze utente, impostazioni varie può essere molto utile anche per le più semplici delle applicazioni.
Per esempio si potrebbe visualizzare uno splash screen o un messaggio solo al primo avvio o dopo un tot di volte o ti tempo trascorso.
In un’applicazione di geolocalizzazione, si potrebbero salvare (in un array) tutti i punti di interesse dell’utente e visualizzarli in una ListView.
Insomma, si possono salvare tutte quei dati utili che andrebbero persi quando l’applicazione viene chiusa.
Nell’approccio che verrà illustrato si usarà la classe QSettings. Essendo questa molto performante, la si potrà usare nella maggior parte dei casi, anche quelli che memorizzano parecchi dati, mentre per una quantità di dati molto elevati (tipo memorizzare Wikipedia :) ) è consigliabile usare un archivio in formato sqlite o simili.

Prima di tutto si dovrà esporre la classe a QML:

Settings *settings = new Settings("SettingsDemo.conf", "", this);
qml->setContextProperty("settings", settings);

dopodichè si potrà usare l’oggetto “settings” (quasi) ovunque in Cascades.

con la seguente sequenza si vuole ottenere la voce “appRunTimes” nella sezione “main”, si aggiungerà 1 al risultato che verrà sostituito al precedente:

applicationRunTimes = settings.getValue("main/appRunTimes", 0);
applicationRunTimes ++;
settings.setValue("main/appRunTimes", applicationRunTimes);

lo “0″ passato a getValue() è il valore di default che verrà assegnato a applicationRunTimes nel caso in cui non sia ancora stato memorizzato.
Il risultato di questo, sarà scritto nel file di configurazione (che si trova in “data/Settings/SettingsDemo.conf”):

[main]
appRunTimes=1

Un’altro uso che si può fare di questo componente è la gestione di array.

[array]
users/1/password=password0
users/1/user=utente0
users/2/password=password1
users/2/user=utente1
users/3/password=password2
users/3/user=utente2
users/size=3

Questo potrebbe essere un possibile uso.
Per aggiungere un elemento si userà:

settings.appendToArray("array/users", { "user" : nomeUtente , "password" : password } );

Per trovare l’indice di un elemento (il primo):

var id = settings.getIndexOfValueInArray( "array/users", "user" , "utente2" );

una volta ottenuto l’id si potrà rimuovere l’elemento:

settings.removeArrayEntry("array/users", id);

oppure cambiare un valore:

settings.changeValueInArray( "array/users",   "user","utente2"   ,  "password","newPassword");

Ho pensato questo componente per le mie personali necessità, ma come dice la licenza nel sorgente ( :-) ), si potrebbero aggiungere metodi per la gestione degli array. Per esempio implemetare un metodo per aggiungere automaticamente una chiave univoca agli elemente e agevolare così la ricerca, la rimozione e la sostituzione.

Inoltre gli array possono essere recuperati in formato XML, JSon (o meglio in QVariantList) oppure in una comoda GoupDataModel.
Il formato XML non è utilizzabile per ora in Cascades in quanto XmlDataModel supporta solo la lettura di un file come input di dati.

Per leggere l’array sarà sufficiente:

var variantEntries = settings.getVariantArray("array/users");

variantEntries conterrà i valori accessibili tramite per esempio variantEntries[2].user oppure variantEntries[2]["user"]

Per inserire l’array in un GroupDataModel (anche qui per mia comodità ho usato GroupDataModel, ma si potrebbe usare altro) basterà chiamare getArrayDataModel() come qui di seguito:

ListView {
    id: listView
    property variant settingsQt: settings
    dataModel: GroupDataModel {}
	   onCreationCompleted: settings.getArrayDataModel( "settings", listView.dataModel );
	   listItemComponents: [
            ListItemComponent {
	            type: "item"
	            Container {
	            	id: rootItem
                 	Label { text: ListItemData.userName + " - " + ListItemData.password }
                 }
            }
        ]
}

Si noti che settings non puà essere usato direttamente all’interno di un ListItemComponent in quanto questo è al di fuori dell’environment Qt. Ci viene in aiuto la variabile ListItem.view che restituisce l’oggetto ListView.
per esempio:

rootItem.ListItem.view.settingsQt.removeArrayEntry("array/users", n);

Qui sotto troverete il progetto con qualche esempio di utilizzo.
SettingsDemo

Avatar di admin

da admin

And the Special Prize goes to…

10 luglio 2013 in contest

Lo Special Prize del contest appena concluso, messo in palio per l’app giudicata migliore in assoluto tra le partecipanti, viene assegnato a… Blue!

bb10appcontest_blue

Blue si aggiudica quindi un fiammante BlackBerry Z10, congratulazioni!

Avatar di admin

da admin

Annunciati i vincitori del primo BB10 App Contest!

10 luglio 2013 in contest

Le votazioni per il primo BB10 App Contest si sono chiuse, ed è quindi tempo di proclamare i vincitori!

Miglior porting: Breezi

bb10appcontest_breeziIl meteo a portata di mano in una app essenziale, dal design pulito ed accattivante.

Migliore app nativa: MB10

bb10appcontest_mb10Un lavoro certosino di trasposizione in nativo di vari contenuti del sito MondoBlackberry

I complimenti vanno comunque a tutti i developer che hanno partecipato al contest, per l’alto livello delle app realizzate e per l’entusiasmo dimostrato nel partecipare al primo contest ufficiale dei BlackBerry Developer Group italiani!

Tutorial - Signing Keys e Debug Token (HTML5/WebWorks)

28 giugno 2013 in Tutorial

Ciao a tutti.

Creo questo tutorial per integrare alcuni punti fondamentali per sviluppare sulla piattaforma BlackBerry.

La prima cosa che vorrei segnalare è la richiesta delle chiavi di firma (signing keys), richiedibili al seguente indirizzo https://www.blackberry.com/SignedKeys/codesigning.html .

Le chiavi di firma sono fondamentali e uniche, per cui appena ricevuta la mail con i due files (client-RDK-xxxxxx.csj e client-PBDT-xxxxx.csj) fatene copia di Backup in luogo sicuro insieme al PIN (CSJ PIN) che avete inserito in fase di richiesta.
Vediamo nel dettaglio i due files:

- client-RDK-xxxxxx.csj : Questo è il file che si utilizza per firmare le applicazioni e pubblicarle sul BlackBerry World.
- client-PBDT-xxxxx.csj : Questo file viene utilizzato per generare un token di debug da utilizzare per testare l’applicazione su un dispositivo.
Per registrare le chiavi di firma ricevute aprite la console alla seguente cartella:

C:/Program Files (x86)Research In Motion/BlackBerry 10 WebWorks SDK < version > /dipendenze/tools/bin cartella ed eseguite il seguente comando (blackberry-signer) modificandolo con i vostri dati:
blackberry-signer -register -csjpin <csj pin> -storepass <KeystorePassword>
<client-RDK-xxxxxx.csj file> <client-PBDT-xxxxx.csj file>
Questo comando crea i seguenti file: author.p12, barsigner.csk e barsigner.db, ricordatevi di fare una copia di backup anche di questi tre files.
Adesso possiamo richiedere il debug token, per testare le nostre App sul device senza doverle “firmare” ogni volta.

Richiedere il debug token è molto semplice, aprire la console, andare in questa cartella:

C:/Program Files (x86)/Research In Motion/BlackBerry 10 WebWorks SDK < version > /dipendenze/tools/bin

ed eseguire il seguente comando:

blackberry-debugtokenrequest -storepass <KeystorePassword>
-devicepin <device PIN> <debug_token_file_name.bar>

Dove:
<KeystorePassword> è la password che avete usato in fase di registrazione delle chiavi di firma
<device PIN> è il PIN del device su cui volete caricare/testare la vs. App (file.BAR)
<debug_token_file_name.bar> è il nome che volete assegnare al debug Token, suggerisco di mettere debugtoken.bar, con altri nomi ho riscontrato problemi.

Vi ricordo che con le stesse chiavi di firma si possono richiedere debug token fino a 100 device PIN diversi e che la durata del debug token è di trenta giorni.

Mantenendo aperta la console eseguite il seguente comando per installare il vostro debugtoken.bar sul device:

blackberry-deploy -installDebugToken <path to debug token> -device <Development IP Address> -password <device password>

Ricordatevi di fare una copia del debugtoken.bar e di copiarlo nella root del BlackBerry 10 WebWorks SDK in questo modo il tutto funzionerà correttamente e
potrete testare le app sui device senza firmarle.

Vi ricordo che ogni firma richiede accesso a internet e incremento della build release.

Vediamo ora come fare la build dell’app come debug e come release.

Per prima cosa impacchettate la cartella del vs. progetto creando un file .Zip contenente tutto (config.xml, index.html, *.htm, css, js, image e quant’altro avete inserito).

Poi aprite la console ed andate nella cartella :

C:Program Files (x86)Research In MotionBlackBerry 10 WebWorks SDK 1.0.4.11

(Usiamo come esempio un progetto di nome hello)

per la versione debug eseguite questo comando:

bbwp C:/Users/……/RippleSites/hello/hello.zip -d -o C:/Users/…../RippleSites/hello/output

per la versione release eseguite questo comando:

bbwp C:/Users/…../RippleSites/hello/hello.zip -g <password signing keys> –buildId <numero di release> -o C:/Users/……/RippleSites/hello/output

In entrambi i casi, nella cartella C:/Users/……/RippleSites/hello/output troveremo due sotto cartelle, simulator e device, dove al loro interno ci saranno
i file .BAR (hello.BAR) da poter installare rispettivamente sul simulatore o sul dispositivo.
Vi ricordo che il file BAR in versione release è quello da inviare al Vendor Portal (BlackBerry World) per la certificazione e pubblicazione sullo store.

Ultimo passo il deploy del file BAR, della vostra app sul device.

Da console andate nella cartella:

C:/Program Files (x86)/Research In Motion/BlackBerry 10 WebWorks SDK 1.0.4.11/dependencies/tools/bin

e sia che abbiate il BAR release o debug basta eseguire questo comando:

blackberry-deploy -installApp -password <password del device> -device <indirizzo Ip device> -package C:/Users/…../RippleSites/hello/output/device/hello.bar

Ciao a tutti.

Avatar di Andrea

da Andrea

Tutorial - Creare un App con WebWorks da Zero (3rd): introduzione a BBUI.JS

21 aprile 2013 in Tutorial

BBUI.JS e’ un progetto opensource ospitato su github (https://github.com/blackberry/bbUI.js/), che mira a rendere semplice la realizzazione di apps WebWorks con aspetto e caratteristiche uguali a quelle di un’applicazione nativa per BlackBerry.

Per realizzare questo, BBUI.JS mette a disposizione un set di controlli customizzati realizzati con css e javascript.
Alcuni dei vantaggi dall’utilizzo di questa libreria sono:

  • look&feel di un’applicazione BB10 nativa.
  • gestione delle schermate applicative, chiamati screens, in file HTML separati.
  • gestione a stack delle schermate (push/pop)
  • supporto risoluzioni device BB10 (ma non solo) automatico: al momento per Z10 e Q10.

L’elenco dei componenti utilizzabili e’ qui: https://github.com/blackberry/bbUI.js/wiki

Creazione di un progetto
Collegatevi alla pagina github di bbuijs e scaricate l’ultima versione disponibile della libreria.
All’interno della libreria scaricata c’e’ una cartella “samples” che rappresenta un piccolo progetto di test con tutti i componenti di BBUI.JS disponibili.
Copiate la directory samples nella vostra directory RippleSites.
Aprite Chrome e provate ad eseguire il tutto su Ripple.

Possiamo usare la directory “samples” come base per i nostri futuri progetti WebWorks, facendo un po’ di pulizia tra i file dentro samples:

  • rimuovere tutti i file con estensione .htm ad eccezione di index.htm
  • rimuovere immagini inutili dalla directory images: le directory avatars, grid , images_list, menu_icons, inboxList, slider, tabs possono essere rimosse. Eventualmente nell’utilizzo di qualche componente verificaste qualche mancanza di immagini, dalla console di chrome dovreste individuare un messaggio di errore con le immagini mancanti per poterle riaggiungere.
  • rimpiazzare icona, splashscreen dentro la directory images.
  • cambiare alcuni parametri del file config.xml , in particolare autore , id dell’applicazione, descrizione, versione etc (vedi tut.2) .
  • rinominate la directory samples in qualcosa di piu’ sensato per il progetto che state realizzando.
  • ricordate di avere il progetto nella directory RippleSites.

Il progetto sample utilizza il file index.htm come pagina di partenza.
Aprite il file index.htm con un editor di testo a vostra scelta: notepad, gvim, jedit o se preferite usate qualcosa di piu’ complesso come Aptana.
Dentro il file index.htm ci sono diverse sezioni che per ora ignoreremo: fate una ricerca per la stringa “pushScreen“.
Dovreste trovare una riga come la seguente nella pagina:

bb.pushScreen(‘menu.htm’, ‘menu’);

cambiamola in

bb.pushScreen(‘home.htm’, ‘home’);

All’interno dell’index.htm questa riga definisce quale pagina/screen deve essere chiamata al lancio dell’applicativo.
Dobbiamo immaginare che la nostra applicazione sia composta come una pila di schermate su cui agiamo con le operazioni popScren e pushScreen.

Ogni volta che eseguiamo un pushScreen, aggiungiamo una schermata alla lista e la mettiamo in cima.
Ogni volta che eseguiremo un popScreen, andiamo a togliere il primo elemento della lista.

La nostra applicazione visualizza sempre le schermate in cima alla pila di schermate.

Creiamo nella cartella un nuovo file home.htm con il seguente contenuto:

<div data-bb-type="screen" data-bb-effect="fade" style="background-color: white">

		<div data-bb-type="panel-header" >
		Hello BBDevs.com!	
	</div>
	<div data-bb-type="action-bar">
		<div data-bb-type="action"  data-bb-img="ic_info.png" data-bb-style="button" onclick="bb.pushScreen('credits.htm');">Credits</div>
	</div>
</div>

Qua non abbiamo fatto altro che mostrare un messaggio sullo schermo e renderlo uno screen adatto per BBUI.JS.

Abbiamo inoltre aggiunto un pulsante che come azione prevede il passaggio alla schermata dei credits.
Creiamo ora un secondo file credits.htm con il seguente contenuto:

<div data-bb-type="screen" data-bb-scroll-effect="on">
	<div align="center">
		<h2>Informazioni e Disclaimer</h2>
	</div>

	<h3>APP per il Terzo Tutorial di BBDevs.com sul come scrivere un app per WebWorks da 0.</h3>

	<div data-bb-type="action-bar" data-bb-back-caption="Back">
	</div>
</div>

La seguente riga del file credits.htm

<div data-bb-type="action-bar" data-bb-back-caption="Back"> </div>

indica a bbui.js di inserire nella schermata la barra standard in basso di BB10 che permette di tornare alla schermata precedente.

Il comportamento di default di questa barra è quello di richiamare popScreen, quindi anche se non lo vediamo esplicitamente riportato, è perchè BBUI.JS se ne occupa per noi.
Il resto delle pagine.. per ora è semplice HTML :)

Questa e’ solo un’introduzione, nel prossimo tutorial vedremo come realizzare qualcosa di piu’ complesso che utilizza BBUIJS.

Se avete domande o suggerimenti, nei commenti :) grazie

Avatar di Andrea

da Andrea

Tutorial - Creare un App con WebWorks da Zero (2nd): il config.xml

15 aprile 2013 in Tutorial

Il config.xml è un file di configurazione applicativo utilizzato all’interno di ogni applicazione BB10 in WebWorks, per dare al sistema operativo informazioni su:

  • come dovrà presentarsi/comportarsi l’applicazione una volta installata: icona, splashscreen iniziale, descrizione, autore , orientamento etc.
  • quali risorse dovrà utilizzare e quindi quali permessi richiedere all’utente di autorizzare. Es. accesso alla Fotocamera, a BBM etc
  • quali sono i domini/indirizzi su cui potrà accedere: e questo presumo per motivi di sicurezza, si possono specificare un set di domini a cui l’applicazione potrà accedere.

Per facilitare la lettura ho preparato 2 immagini con la spiegazione

Prima parte di un config.xml

e la seconda parte

Seconda parte del config.xml

Da notare che queste informazioni sono da ritenersi valide solo per app BlackBerry 10 e dispositivi Z10 e Q10.

Per le specifiche della icona della app potete guardare qua: https://developer.blackberry.com/devzone/design/bb10/application_icons.html

Lo splashscreen, in caso di applicazione per Z10 deve valere 1280×768 (in caso di landscape) o 768×1280 (in caso di visualizzazione portrait).

Per Q10 c’è solo l’orientamento portrait, e lo splashscreen deve essere 720×720.

Potete specificare piu’ sezioni “splash” una sotto l’altra nel config.xml e il sistema operativo all’avvio dell’app sceglierà il piu’ opportuno.

Tenete a mente che quanto detto sulle risoluzioni puo’ cambiare nel tempo in quanto si attendono device futuri che avranno risoluzione 1280×720 e per i quali dovrete informarvi attraverso la documentazione ufficiale.

Potrete anche specificare come dominio nell’access il seguente

<access uri ="*"/>

che dichiara che l’applicazione vuole accedere a qualsiasi sito ma, per ragioni di sicurezza solo per i domini esplicitamente dichiarati (come nel nostro esempio), sara’ possibile effettuare chiamate XMLHttpRequest/Ajax. Maggiori dettagli sull’argomento qui: https://developer.blackberry.com/html5/documentation/securing_your_ww_app_1866986_11.html

In allegato anche l’xml completo usato nel tutorial:

Config.xml

L’elenco di tutti i parametri e dei valori ammessi in config.xml e’ disponibile qui:

https://developer.blackberry.com/html5/documentation/config_doc_elements.html

Se avete domande o suggerimenti per migliorare l’articolo, scrivete nei commenti!

Grazie a: Fabrizio C., Angelo G. e Aniello D.S. per i feedbacks e miglioramenti.

Avatar di Andrea

da Andrea

Tutorial - Creare un App con WebWorks da Zero (1st): helloworld e template

8 aprile 2013 in Tutorial

Questo è il primo di una serie di tutorial collegati tra loro per guidarvi nello sviluppo di un applicazione per BlackBerry10 utilizzando WebWorks.

Lo scopo è quello di affrontare i passi chiave per sviluppare un applicazione da zero e terminerà con la pubblicazione su app world blackberry dell’app realizzata nei vari tutorial.

Ricordate che con l’app realizzata potrete partecipare al contest: http://www.bbdevs.com/site/blackberry-10-app-contest/

Prerequisiti

Scompattate l’archivio e copiatelo nella directory RippleSites.

Lanciare il progetto

Il progetto template contiene:

  1. un file di configurazione config.xml che viene usato: da webworks e da BB10 e contiene informazioni sull’app che andiamo a realizzare; ad esempio contiene il nome dell’icona e dello splashscreen all’interno del progetto e del file html da eseguire al lancio dell’applicazione. Vedremo in dettaglio in altro tutorial l’importanza di questo file.
  2. un file index.html con una pagina di sample.
  3. jquery e un file mobile.css.

Andate nella cartella RippleSites/mobtemplate e aprite il file index.html dentro Chrome: 

Template Hello BBDevs

Cliccare ora sull’icona di Ripple Emulator e premere su Start Ripple Services, la freccia rossa in figura, questo attiverà un piccolo web server.

2

Il webserver  utilizza come ROOT la directory RippleSites e quindi il vostro progetto dovrebbe essere raggiungibile qui http://localhost:9910/mobtemplate/index.html . Aprite la pagina e cliccate nuovamente sul Ripple Emulator, quindi questa volta premete su Enable.

Vi verrà chiesto come Ripple dovrà intepretare il progetto, selezionate BlackBerry WebWorks e dovreste avere questo risultato:

3

Ok non è molto per ora, ma consiglio di spulciare nel file index.html e config.xml del template per farsi un’idea di come è organizzato questo progetto template.

Seguirà presto un altro tutorial, se avete dubbi, domande, suggerimenti scriveteci nei commenti!

Tutorial - Ad Service in Cascades

4 aprile 2013 in Tutorial

Per implementare il servizio bastano sei semplici step:

1 – Creare un nuovo progetto Cascades

2 – Aprire il file “nomeapp.pro” del vostro progetto, inserire la seguente stringa

“LIBS += -lbbcascadesadvertisement”

salvare e chiudere il file.

3 - Aprire il file “bar-descriptor.xml”,  nella scheda applicazioni, selezionare Device Identifying Information e facoltativamente GPS Location per gli annunci basati sulla localizzazione, salvare e chiudere il file.

4 – Nel file Qml che visualizzerà il Banner inserire il seguente codice:

import bb.cascades.advertisement 1.0 (all’inizio del file)

ed in un Container

Banner {
zoneId: 117145 //ZoneID di esempio per i test
refreshRate: 60
preferredWidth: 320
preferredHeight: 50
transitionsEnabled: true

//immagine da visualizzare in caso non ci sia un banner da visualizzare
placeHolderURL: “asset:///images/placeholder.png”
backgroundColor: Color.Green
borderColor: Color.Gray
borderWidth: 2
horizontalAlignment: HorizontalAlignment.Center
}

5 – Aggiungere il codice in grassetto al file main.cpp

#include <bb/cascades/advertisement/Banner>

ed in Q_DECL_EXPORT int main(int argc, char **argv)
{

qmlRegisterType<bb::cascades::advertisement::Banner>(“bb.cascades.advertisement”, 1, 0, “Banner”);

}

salvare e chiudere il file.

6 – Quando l’App è pronta, richiedere il proprio ZoneID al seguente link:

https://adservices.blackberry.com/

Aprire il file Qml che contiene il Banner e sostituire il zoneID di prova con quello definitivo ricevuto da AdService, salvare e chiudere il file.

E questo è tutto.

Facile ed indolore.