Hace poco hable del horizonte de RIActive en este 2013, y este es el primer cambio. Vamos a hablar de backend!

En nuestro grupo de facebook hace una semana cerré la votación para nuestra siguiente reunión del grupo. Esta vez opte por colocar a votación los temas, entre los que estuvieron Objective-C, Sencha, Rails, Rubymotion y otros. Y ganó uno, fue Ruby!

Entonces vamos a establecer las reglas de este evento:

1. El registro de los asistentes será por Eventbrite.

2. La URL se las enviaremos por correo.

3. Los que deseen seguir el evento por redes sociales el hastag será #RubyOnLine

4. Al final de la plática colocare los slides y ejemplos hechos en la red.

5. Las cuentas de twitter y facebook de RIActive publicaran tambien los links.

Yo seré el principal orador de esta plática y hablaré de Ruby y sus bondades como lenguaje de programación.

Esta es la agenda del evento online:

• Presentación del evento

• Ruby lang

• Las diferentes plataformas

• Instalación RVM y REnv

• Las sentencias básicas

• Lo más avanzado

• Gems y Rake

• Rails, Cucumber, Integración continua, Redmine, ActiveAdmin

• Recomendaciones para seguir aprendiendo

• Preguntas y respuestas

• Despedida del evento

La fecha y hora del evento será viernes 7 de Junio del 2013 a las 10hrs a través de Adobe Connect.

Esta es la liga del evento para registrarse:

http://rubyonline.eventbrite.com

Espero verlos ahí para compartir!

Fundadores y Managers

Primero hay que hablar del cambio de manager y co-manager. Desde hace más de un año Edgar Parada (@edgarparada evangelista Blackberry) dejó de ser nuestro manager para convertirse en miembro fundador del grupo al igual que Alberto González (@albertx consultor en seguridad). Desde entonces tuvimos una etapa de transición en muchos aspectos respecto al grupo, sus temáticas, medios de comunicación y otros puntos importantes. Ahora Sergio Brito (@yacafx) será el nuevo manager del grupo y un servidor Francisco Granados (@gzfrancisco) el co-manager.

Blog

Las primeras mejoras que hicimos fue la migración de dominios y servidores de web para que el sitio fuera más rápido en la descarga de sus contenidos, situación que por trabajo de ambos nos llevó mucho tiempo. Otra más fue el cambio del diseño del sitio y de paso el cambio de logotipo (en este último un agradecimiento público a Maria Daniela Acevedo (@madanielaa) que nos apoyo con un montón de cambios, sorry Mady). Ahora el sitio tiene un diseño responsive y fresco, esperamos que les guste.

riactive.mx

Equipo

Después de evaluar mucho hemos buscado y encontrado nuevos perfiles de desarrollo. Encontramos a personas realmente valiosas y algunas ya forman parte de nuestro equipo staff de RIActive como Jesus Macedo (@jesus_macedo), Margarita (@gr_maggi), Marco Merida (@zerma), Bernardo Pineda (@bpineda) y Joel Ortiz (@flashinstructor) que tienen experiencia en diferentes campos y aportan mucho valor a la comunidad.

Pero aún estamos en búsqueda de otros perfiles que estén interesados en compartir conocimiento en programación, ux, usabilidad y diseño de funcionalidad.

Temas

En lo que nosotros estuvimos con estos cambios, el panorama de las RIA’s cambió por completo y lo que antes era una novedad ahora es pan de todos los días. Los nuevos temas son desarrollo movil, big data, lenguajes de última generación entre muchos otros. Flash como plataforma pasó a último plano en nuestros contenidos y ha sido por la demanda de temas nuevos como desarrollo móvil o programación ágil. Hemos tenido eventos apoyados directamente por Facebook y Blackberry. Y ahí fue donde dijimos “el rumbo de riactive ya cambio” entonces decidimos hablar de muchos otros temas que no solo abarcan RIA’s, Flash o Web. En el evento de “Mobile Talks” que vino Maximiliano Firtman, hablamos de desarrollo nativo en iOS, Appcelerator, Blackberry y HTML5 en aplicaciones móviles. Les comento que tuvo muy buen recibimiento por parte de ustedes (en general) y eso nos motivo a realizar el cambio. Ahora trataremos de muchos otros temas como HTML5, backend en los numerosos lenguajes y sus frameworks, desarrollo nativo de iOS, Android, WindowsPhone y BB10, también hablaremos de diseño de funcionalidad con usabilidad, experiencia de usuario y seguridad en nuestros desarrollos. Por qué? simplemente porque es lo que todos nosotros hacemos día con día y lo queremos compartir con la comunidad.

Medios de comunicación

La mayoría conoce nuestra lista de usuarios en google groups, pero también abrimos un grupo de usuarios en facebook y un fan page que tiene muy poco que iniciamos con él. Aún no vemos la necesidad de un foro porque pensamos que ya existen muchos que hablan de estos temas, pero ya saben, “nunca digas nunca”.

• Facebook fan page
• Facebook group
• Grupo de google

Eventos

Hemos tenido una falta de eventos propios y es por trabajo o porque no se pueden empatar agendas de algunos presentadores, es algo que estamos solucionando poco a poco. Por lo pronto va a haber una reunión online en la cual hablaremos de la comunidad y el tema principal es Ruby. En otro post hablaré del evento, fechas y horas.

Como bien saben lo que si no hemos descuidado es la de atender eventos externos como presentadores en escuelas y eventos corporativos. A los que pueden asistir si lo desean:

Expo Campeche 2013: Marco Merida

Marco Mérida, impartió un taller el 16 de Mayo en Expo Campeche en el que hablo de desarrollo móvil con tecnologías web.

Evento

Agenda de conferencias

¿Hacía dónde vamos con los Dispositivos Móviles?

Yo, Francisco Granados daré una presentación el 25 de Mayo en ITESM Cuernavaca, Morelos para hablar de la mayoría de las opciones que tenemos en desarrollo móvil. Con gusto me pondré platicar con ustedes si me los encuentro por allá.

Registro

Blackberry Live 2013

Nuestro manager, Sergio Brito estuvo esta semana en el Blackberry Live 2013 y nos dio a conocer las últimas noticias de Blackberry y su plataforma BB10.

Evento

Conclusión

Como podrán ver hay muchos cambios y anuncios que hacerles, espero que con esto se sientan más atraídos a esta comunidad que tiene como principal objetivo compartir el conocimiento y aprender constantemente. Los quiero dejar con una cita que tal vez muchos han leído y en lo personal siento que es la ideología en este horizonte de RIActive.

Don’t get set into one form, adapt it and build your own, and let it grow, be like water. Bruce Lee.

Previo a la keynote comenzaron las buenas noticias con Unity, que después de hace unas semana detener el desarrollo para Flash, abre el Unity BlackBerry 10 Open Beta, al cual puedes registrarte, contando entre los puntos fuertes la eficiencia y robustez del hardware del Z10, principalmente por el procesador SnapDragon que tiene dentro. Con esta noticia se comenzaron a generar grandes expectativas sobre el tipo de juegos que podrán desarrollarse para la plataforma. El equipo del DevBlog tiene mas detalles al respecto.

El Cypress Saloon lucia literalmente abarrotado para comenzar el evento con su respectiva transmisión por internet, la cual está online para que la puedas ver, y el CEO Thorsten Heins hacía su aparición preguntando si ya todos teniamos nuestro Z10!, así es hubo Z10 para TODOS los asistentes al BlackBerry Live!

La charla entonces recapitulo todo lo que ha pasado con el BlackBerry 10 desde el año pasado hasta ahora y como se ha logrado posicionar los nuevos dispositivos, Z10 y Q10, lo que dio pie a la presentación del nuevo Q5, que es un dispositivo de bajo costo pero con el mismo sistema operativo. El Q5 viene en rojo, negro, blanco y rosa y hasta ahora solo vendrá en versión con teclado, que para los amantes del QWERTY debemos comentar, que tanto para este como para el Q10, esta nueva versión del teclado esta muy bien hecha, mejorada y muy usable. Lo sabemos, el “touch” es lo de hoy, pero hay usuarios que siguen amando el teclado físico

Se anuncio la llegada de la versión 10.1 del OS que de entre todas las características nuevas resalta el HDR en la cámara. Pero lo que entusiasmo a muchos es que con esta nueva versión del sistema operativo ya será posible usar SKYPE y con otras aplicaciones que vienen en camino como SoundHound se incrementaran las 120,000 apps que actualmente hay en el BlackBerry World, aunque siguen haciendo falta apps importantisimas como Spotify, Netflix e Instagram… esperemos que estas pronto lleguen.

Entusiasmados estábamos cuando para dar una probada del poder de QNX como sistema operativo base del BlackBerry 10 apareció en hermoso Bentley con una pantalla táctil en el tablero corriendo BB10 y que por supuesto se integra a los nuevos dispositivos de la marca con sus respectivos features como hacer BBMVideo!, aunque por seguridad al estar en movimiento el coche esta funcionalidad se bloquea. ver la integración y respuesta del BB10 en “hardware” tan sofisticado como un coche te da una certera idea de la capacidad y potencia de este sistema operativo.

Con bombo y platillo se anuncio el Blackberry Enterprise Service 10.1 que ademas de tener Balance ahora permitirá la administración no solo de dispositivos BlackBerry si no también de Apple y Android.

Posteriormente Frank Boulben, CMO, mostró el impacto que ha tenido su estrategia de marketing basándose en un circulo conocido como el “Digital Content Hub” donde programas como KeepMoving y Blackberry Elite Members forman una parte importante en la estrategia de marketing así como las redes sociales y los anuncios impresos y comerciales por tv.

Acto seguido entra Alicia Keys donde ademas de hablar del proyecto KeepMoving y del concierto que estaria dando en los estudios universal por la noche para los asistentes al BlackBerry Live anuncio el BlackBerry Scholars Program, un programa de becas destinado a inspirar a las mujeres a entrar en los campos de estudio que impliquen el desarrollo de tecnología y mobile computing.

Y bueno… si ya habíamos tenido el deleite de contar un lujoso Bentley en el escenario pues por que no traerse el Auto Formula 1 del equipo MERCEDES AMG PETRONAS escoltado por nada mas y nada menos que Lewis Hamilton, cosa que sirvió para el lanzamiento de los BBM Channels, que son una suerte de foros interactivos basados en el BlackBerry Messenger

Pasado esto y con la gente bastante entusiasmada se dio el último anuncio que emocionó a mas de uno, una de las principales características que tiene la plataforma de BlackBerry, el BBMessenger, se abre a iOS y Android, dando con esto una gran competencia a What’s App, pues si unas de las cosas que mejor ha hecho durante muchos años BlackBerry es la mensajería basada en el BBM.

Con esto cerro la keynote y mucha gente entusiasmada, buenas noticias para la plataforma, para usuarios y para developers. Podemos redondear que el aire que se respira en el BBLive es mucha motivación y entusiasmo, esperemos que BlackBerry mantenga este paso pues a parecer de muchos están haciendo bien las cosas y desarrollando cosas interesantes.

Mientras tanto, ¿qué te ha parecido esto? ¿Crees que BlackBerry este haciendo bien las cosas y este regresando al mercado? Cuéntanos que piensas

No olvides seguirnos en Twitter y en Facebook, pues estaremos publicando los pormenores de esta edición.

Las mejoras que han hecho son una gran ayuda en especial para diseñadores y para todos aquellos que están integrándose a un mercado de diseño y desarrollo web. Para los que ya tenemos un rato en este mundo hay herramientas como Edge Inspect CC y Edge Code CC que realmente simplifican mucho de nuestro trabajo diario.

Bueno, ya basta de bla bla bla y revisemos los anuncios que se dieron hoy en el Adobe MAX

La keynote dio inicio con un recuento de la historia de herramientas en la historia de Adobe por parte del CEO Shantanu Narayen mostrando un video interactivo espectacular que requirió 40 proyectores sincronizados sobre una pantalla de cerca de mil metros cuadrados a 0.5 billones de pixeles que pueden ver en el video onDemand.

Today’s production required 40 synchronized projectors, 1/4 acre of screen with 0.5B pixels rendered every second #AdobeMAX

— Adobe MAX (@adobemax) May 6, 2013

Como introducción a la Creative Cloud dieron el interesante numero de información que generamos al día, algo así como 2.5 exabytes entre tweets, videos, facebook, archivos, mails etc.

¿Y que creen? ¡Se acabo la serie de CS! ahora las suites y productos serán conocidas como CC o lo que es igual la CS7 vio luz pero bajo el nombre de CC (Creative Cloud) y con esto es decirle “hola” a nuevas apps y “adios” a otras como Fireworks

La puerta se abrió con Photoshop CC y Terry White quien mostró features nuevos como Adobe Camera Raw 8 con 3 características interesantes: Advanced Healing brush, Radial Gradient and Upright tool, este último gustó mucho pero creo que impacto más el filtro Shake Reduction que se había mostrado el MAX pasado como una de las cosas en que estaban trabajando.

Historia aparte Illustrator CC, del cual mostraron dos features Bitmap Brushes y Touch Type Tool, que mas de un diseñador en el Nokia Theatre L.A. LIVE dejó sin aliento.

Por la parte de diseño fue todo, y entro a escena Jason Levine, principal evangelista para las herramientas de video y audio de Adobe, dando a conocer la integración de After Effects CC con Maxon Cinema 4D

Y por fin! lo más esperado para los Dev’s en la sala, las herramientas que hay para desarrollo web bajo el brand de “Edge Tools & Services” y presentadas por Jeffrey Veen, quien fuera fundador de Typekit.

Entre Assets auto generados, layers y demás nace un feature mas que adHoc para Photoshop CC que permitirá exportar a Web en un archivo manipulable desde Edge Reflow CC llamado “Edge Reflow Request” y así poder generar desde el diseño sitios responsivos. Habrá que ver como se ve el código generado, que performance presenta y que ojalá y no sufra el mismo destino que Flash Catalyst

Después vinieron unos no tan nuevos como Edge Inspect CC y Edge Animate CC que no mostraron nada nuevo a excepción de la integración final con Creative Cloud y su cliente para escritorio en una dinámica llamada “Creative Process” en el cual Jeffrey Veen hizo mancuerna con Scott Belsky mostrando como colaborar en un proyecto con assets, configuraciones y demás archivos generados con las herramientas del Creative Cloud.

Aplicación que impresionó fue Kuler para mobile, la cual te permite hacer uso de una camará y de allí tomar los colores antes de hacer una captura y a partir de esto generar la paleta de colores. El app se ve bastante usable y con una implementación inteligente e integrada a los servicios del Creative Cloud.

Se anunció también que las fuentes de TypeKit estarán disponibles para ser instaladas en nuestras desktops al mero estilo de Font Folio. La plataforma de Behance queda tambien integrada al Creative Cloud, recordemos que es una plataforma que fotografos usan para compartir su trabajo y que fue adquirida por Adobe para hacer el CC más “social”.

Ya por último dieron a conocer un par de proyectos: “Mighty” y “Napolean”. Mighty es un “smart stylus” para poder dibujar en tabletas con varias cualidades como puntos de presión, bluetooth, gruesos de lineas y demás, muy similar a lo que hace una wacom.

“Napolean” es, en resumén, una regla “inteligente” que complementa a Mighty. Lo interesante de estos dos proyectos es que son la primer iniciativa en materia de hardware por parte de Adobe.

Cerró el día Claudia de Almeida, directora de diseño de Wired, mostrando al mero estilo de Minority Report, Project Context, un re-imaginado y re-inventado cuarto editorial entre tabletas y pantallas touch manipulado el trabajo detrás de toda producción editorial.

David Wadhwani, anunció que todas las nuevas apps del Creative Cloud o el mejor entendido como CS7 verá luz para el usuario final el 17 de Junio.

Algo que si quedo muy claro es que las herramientas mostradas si facilitan mucho la vida de los diseñadores, y de aquellos enfocados a la parte Web pero de herramientas para dev’s como PhoneGap no se habló nada… en fin veamos mañana como va la keynote y que cosas puedan venir.

Mientras tanto, ¿qué es lo que más te ha parecido esta ola de anuncios? ¿Cual es el feature qué mas te ha gustado?

No olvides seguirnos en Twitter y en Facebook, pues estaremos publicando los pormenores de esta edición.

Podrás ver una nutrida galería de fotos de la Keynote en nuestro grupo de Facebook.

QML es un lenguaje diseñado para trabajar e integrar de forma fácil archivos C++, todo esto con la finalidad de implementar en  nuestro proyecto nuevos módulos o clases Qt, nuevas definiciones de UI QML o simplemente para acceder a fuentes datos externas.

Entonces, nos podemos dar cuenta que nuestro proyecto ya cuenta con algunos archivos “cpp” creados por defecto (dentro del folder src), por ejemplo el archivo “main.cpp” define que view será lanzado inicialmente al momento de ejecutar nuestra app. Así mismo encontraremos archivos “hpp” que no son mas que las cabeceras de los archivos “cpp”.

Antes de iniciar debemos descargar la base datos SQLLite con la cual poblaremos nuestro DropDown. Esta la copiamos dentro de un folder llamado “db” que crearemos dentro del folder “assets” de nuestra aplicación. La base de datos lleva por nombre “dropdown_db” y contiene una tabla llamada “tecnologias” y cuenta con los campos “idtecnologia y tecnologia”.

Bien ahora empezaremos abriendo nuestro archivo “DropDownMenu.cpp” este se encuentra dentro del folder “src”, este tendrá la estructura siguiente:

// Default empty project template
#include "DropDownMenu.hpp"

#include <bb/cascades/Application>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/AbstractPane>

using namespace bb::cascades;

DropDownMenu::DropDownMenu(bb::cascades::Application *app)
: QObject(app)
{
    // create scene document from main.qml asset
    // set parent to created document to ensure it exists for the whole application lifetime
    QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);

    // create root object for the UI
    AbstractPane *root = qml->createRootObject();
    // set created root object as a scene
    app->setScene(root);
}

Agregaremos una línea más de código la cual nos servirá para acceder desde nuestro archivo QML principal (main.qml) a métodos y funciones necesarias para poblar nuestro DropDown:

// Default empty project template
#include "DropDownMenu.hpp"

#include <bb/cascades/Application>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/AbstractPane>

using namespace bb::cascades;

DropDownMenu::DropDownMenu(bb::cascades::Application *app)
: QObject(app)
{
    // create scene document from main.qml asset
    // set parent to created document to ensure it exists for the whole application lifetime
    QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);

    //ASIGNAMOS EL "CONTEXT PROPERTY" PARA COMPARTIR EL CONTEXTO ASOCIADO AL DOCUMENTO
    qml->setContextProperty("_DropDownApp", this);

   // create root object for the UI
    AbstractPane *root = qml->createRootObject();
    // set created root object as a scene
    app->setScene(root);
}

Ahora abriremos el archivo “DropDownMenu.hpp” y nombraremos un nuevo método público el cual servirá posteriormente para sustituir nuestro código JS que abre nuestro “Sheet”, de esta forma todo nuestro código se encontrará en los archivos “cpp”. Además crearemos una propiedad privada llamada “sheetFormulario” de tipo Sheet, por lo tanto debemos de incluir las librerías necesarias para trabajar con este tipo de dato.

// Default empty project template
#ifndef DropDownMenu_HPP_
#define DropDownMenu_HPP_

//AGREGAMOS LA LIBRERÍA SHEET
#include <bb/cascades/Sheet>

#include

//AGREGAMOS EL NAMESPACE
using namespace bb::cascades;

namespace bb { namespace cascades { class Application; }}

/*!
 * @brief Application pane object
 *
 *Use this object to create and init app UI, to create context objects, to register the new meta types etc.
 */
class DropDownMenu : public QObject
{
    Q_OBJECT
public:
    DropDownMenu(bb::cascades::Application *app);
    virtual ~DropDownMenu() {}

    //AQUÍ NUESTRO MÉTODO
    Q_INVOKABLE
    void abreFormularioQML();

private:
    //AQUÍ NUESTRA PROPIEDAD
    Sheet *sheetFormulario;
};

#endif /* DropDownMenu_HPP_ */

Regresamos al archivo “DropDownMenu.cpp” y definimos el método “abreFormularioQML()”:

// Default empty project template
#include "DropDownMenu.hpp"

#include <bb/cascades/Application>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/AbstractPane>

using namespace bb::cascades;

DropDownMenu::DropDownMenu(bb::cascades::Application *app)
: QObject(app)
{
   ...
}

//DEFINICIÓN DEL MÉTODO
void DropDownMenu::abreFormularioQML()
{
	QmlDocument *qmlFormulario = QmlDocument::create("asset:///formulario.qml").parent(this);
	qmlFormulario->setContextProperty("_DropDownApp", this);
	sheetFormulario = qmlFormulario->createRootObject();
}

Ahora toca iniciar con el proceso de conexión a la base de datos SQLlite, nosotros debemos considerar que dependiendo la localización de nuestros archivos en nuestro proyecto estos pueden ser de solo lectura, para garantizar que podemos leer y escribir en la base de datos debemos copiarla al directorio “data”, si bien en este tutorial solo nos interesa rescatar datos y colocarlos en el DropDown, es una buena práctica realizar la copia de la base de datos al directorio mencionado. Para esto crearemos un método “copiarBd”.

En el archivo DropDownMenu.hpp:

// Default empty project template
#ifndef DropDownMenu_HPP_
#define DropDownMenu_HPP_

#include <bb/cascades/Sheet>

//AGREGAMOS LAS LIBRERÍAS PARA ACCESO Y MANIPULACIÓN DE DATOS
#include <bb/data/SqlDataAccess>
#include <QtSql/QtSql>

#include

using namespace bb::cascades;

//AGREGAMOS EL NAMESPACE
using namespace bb::data;

namespace bb { namespace cascades { class Application; }}

/*!
 * @brief Application pane object
 *
 *Use this object to create and init app UI, to create context objects, to register the new meta types etc.
 */
class DropDownMenu : public QObject
{
 Q_OBJECT
public:
 DropDownMenu(bb::cascades::Application *app);
 virtual ~DropDownMenu() {}

 //AQUÍ NUESTRO MÉTODO
 bool copiarBd();

 Q_INVOKABLE
 void abreFormularioQML();

private:
 Sheet *sheetFormulario;
 //AQUÍ NUESTRAS PROPIEDADES
 QSqlDatabase miBd;
 QString miRutaBd;
};

#endif /* DropDownMenu_HPP_ */

En el archivo DropDownMenu.cpp:

// Default empty project template
#include "DropDownMenu.hpp"

#include <bb/cascades/Application>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/AbstractPane>

//AGREGAMOS LAS LIBRERÍAS PARA ACCESO, MANIPULACIÓN DE DATOS Y DEBUG
#include <bb/data/SqlConnection>
#include <bb/data/SqlDataAccess>
#include

using namespace bb::cascades;

DropDownMenu::DropDownMenu(bb::cascades::Application *app)
: QObject(app)
{
    ...
}

void DropDownMenu::abreFormularioQML()
{
    ...
}

//DEFINICIÓN DEL MÉTODO
bool DropDownMenu::copiarBd() {

	QString dataFolder = QDir::homePath();
	QString archivoBdNuevo = dataFolder + "/dropdown_db";
	QFile archivoNuevo(archivoBdNuevo);

	if (!archivoNuevo.exists()) {
		QString appFolder(QDir::homePath());
		appFolder.chop(4);
		QString archivoBdOriginal = appFolder
				+ "app/native/assets/db/dropdown_db";
		QFile archivoOriginal(archivoBdOriginal);

		if (archivoOriginal.exists()) {
			return archivoOriginal.copy(archivoBdNuevo);
		} else {
			qDebug()
					<< "Imposible copiar la base de datos, la base de datos no existe.";
			return false;
		}
	}

	return true;
}

Después de crear el método para copiar nuestra base de datos lo implementamos dentro del constructor y abrimos la base de datos para realizar transacciones:

// Default empty project template
#include "DropDownMenu.hpp"

#include <bb/cascades/Application>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/AbstractPane>
#include <bb/data/SqlConnection>
#include <bb/data/SqlDataAccess>
#include

using namespace bb::cascades;

DropDownMenu::DropDownMenu(bb::cascades::Application *app)
: QObject(app)
{
    // create scene document from main.qml asset
    // set parent to created document to ensure it exists for the whole application lifetime
    QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);

    qml->setContextProperty("_DropDownApp", this);

    // create root object for the UI
    AbstractPane *root = qml->createRootObject();
    // set created root object as a scene
    app->setScene(root);

    //IMPLEMENTAMOS EL MÉTODO PARA COPIAR LA BD
    if (copiarBd()) {
	miRutaBd = "./data/dropdown_db";
	miBd = QSqlDatabase::addDatabase("QSQLITE","database_helper_connection");
	miBd.setDatabaseName(miRutaBd);

	if (!miBd.isValid()) {
		qWarning() << "No puede asignarse nombre a la base de datos";
	}

	bool success = miBd.open();

	if (!success) {
		qWarning() << "No puede abrirse la base de datos.";
	}
    }
}

void DropDownMenu::abreFormularioQML()
{
 ...
}

bool DropDownMenu::copiarBd() {
 ...
}

Una vez abierta la base de datos podemos realizar consultas para extraer los datos y poblar nuestro DropDown, para esto crearemos un método más, el cual llamaremos “listaTecnologiasSQL()”. En este método no solo realizaremos la consulta a los datos, si no también, asignaremos esos datos al DropDown que se encuentra en nuestro QML. Este método lo invocaremos al final de las instrucciones del método “abreFormulario()”.

// Default empty project template
#include "DropDownMenu.hpp"

#include <bb/cascades/Application>
#include <bb/cascades/QmlDocument>
#include <bb/cascades/AbstractPane>
#include <bb/data/SqlConnection>
#include <bb/data/SqlDataAccess>
#include

//AGREGAMOS LAS LIBRERÍAS PARA MANIPULAR ACCEDER A CONTAINERS Y DROPDOWNS
#include <bb/cascades/Container>
#include <bb/cascades/DropDown>

using namespace bb::cascades;

DropDownMenu::DropDownMenu(bb::cascades::Application *app)
: QObject(app)
{
 ...
}

void DropDownMenu::abreFormularioQML()
{
 ...
    //INVOCAMOS EL MÉTODO
    listaTecnologiasSQL();
}

bool DropDownMenu::copiarBd() {
 ...
}

//DEFINICIÓN DEL MÉTODO
void DropDownMenu::listaTecnologiasSQL(){

	QVariantList sqlListaTecnologias;
	SqlDataAccess miAccesoDatosSQL(miRutaBd);

	sqlListaTecnologias = miAccesoDatosSQL.execute("SELECT * FROM tecnologias").value();

	if (miAccesoDatosSQL.hasError()) {
		DataAccessError err = miAccesoDatosSQL.error();
		qWarning() << "SQL error: type=" << err.errorType() << ": " << err.errorMessage();         }         Container *contFormulario = sheetFormulario->findChild<Container*>("contDropDown");
	DropDown *listaTecnologias = contFormulario->findChild<DropDown*>("ddLista");

	for(int i=0; i < sqlListaTecnologias.size(); i++)
	{
		Option *OpcTecnologia = new Option();

		QVariant datos  = sqlListaTecnologias.at(i);
		QMap<QString, QVariant> map = datos.toMap();
		QString tecnologia = map["tecnologia"].toString();
		QString idtecnologia = map["idtecnologia"].toString();

		OpcTecnologia->setText(tecnologia);
		OpcTecnologia->setValue(idtecnologia);
		listaTecnologias->add(OpcTecnologia);
	}

	sheetFormulario->open();
}

Hay que recordar que este método también debe ser nombrado en el archivo “DropDownMenu.hpp”, lo cual nos dejará un código similar a este:

// Default empty project template
#ifndef DropDownMenu_HPP_
#define DropDownMenu_HPP_

#include <bb/cascades/Sheet>

#include <bb/data/SqlDataAccess>
#include <QtSql/QtSql>

#include

using namespace bb::cascades;
using namespace bb::data;
namespace bb { namespace cascades { class Application; }}

/*!
 * @brief Application pane object
 *
 *Use this object to create and init app UI, to create context objects, to register the new meta types etc.
 */
class DropDownMenu : public QObject
{
 Q_OBJECT
public:
 DropDownMenu(bb::cascades::Application *app);
 virtual ~DropDownMenu() {}

 bool copiarBd();

 Q_INVOKABLE
 void abreFormularioQML();

 //AQUÍ NUESTRO MÉTODO
 Q_INVOKABLE
 void listaTecnologiasSQL();

private:
 Sheet *sheetFormulario;
 QSqlDatabase miBd;
 QString miRutaBd;
};

#endif /* DropDownMenu_HPP_ */

De esta manera ya tenemos nuestro código para acceder a los datos y poblar nuestro DropDown. Ahora invocaremos desde el archivo “main.qml” el método “listaTecnologiasSQL()” cuando se de click sobre el botón “btnAbrirForm”. También debemos importar las clases necesarias para el acceso a datos “import bb.data 1.0″ en el archivo “main.qml” y “LIBS += -lbbdata” en nuestro archivo “DropDownMenu.pro”.

// Default empty project template
import bb.cascades 1.0
import bb.data 1.0

// creates one page with a label

Page {
    Container {
        layout: DockLayout {
        }
        Button {
            id: btnAbrirForm
            ...
            onClicked: {
                //var form = contFormulario.createObject()
                //form.open()
                _DropDownApp.abreFormularioQML();
            }
        }
        attachedObjects: [
           ...
        ]
    }
}

En el archivo “DropDownMenu.pro”:

APP_NAME = DropDownMenu
CONFIG += qt warn_on cascades10
include(config.pri)

LIBS += -lbbdata

En el archivo “formulario.qml” debemos agregar propiedades “objectName” a nuestro Container y DropDown, para que puedan ser accedidos desde el método “listTecnologiasSQL()” de nuestro archivo “.cpp”.

import bb.cascades 1.0

Sheet {
    id: sheetForm
    Page {
        titleBar: TitleBar {
            ...
        }

        Container {
            objectName: "contDropDown"
            ...

            DropDown {
                objectName: "ddLista"
                ...
            }
        }
    }
}

Listo con esto poblaremos desde una base de datos SQLlite un DropDown colocado en un Sheet usando C++ con Cascades, así es como se verá el resultado final del app, nos leemos pronto… Bytes!!!

Hace algunos ayeres, cuando jQuery  todavía no nacía, un amigo y yo estábamos a punto de trabajar en un proyecto web. A él se le ocurrió la gran idea de que lo hiciéramos con Javascript  y AJAX para aprender. Creo que no necesito decirles que a nivel de administración de proyectos, la aplicación fue un desastre. Además de que tuvimos que limitarlo a que sólo vieran la aplicación en Internet Explorer. No fue sino años después que  comencé a meterme a jQuery. Fue un gran alivio ver que no teníamos que hacer bloques de código para cada navegador. Pero precisamente quiero tomar el tema de la depuración de Javascript.

Corría el año 2006, el furor por el mundial en Alemania y desafortunadamente para nosotros, todavía no existían las herramientas para depurar nuestro código del lado del cliente, por lo que cuando el navegador encontraba algún error, era un dolor de cabeza buscarlo debido a que el depurador no precisaba la ubicación del error. En su lugar, decía Error en línea 1, carácter 1, cuando en realidad el error estaba en la línea 1000. En un archivo de 100 líneas no hay tanto problema, pero cuando es una aplicación con varios archivos y miles y miles de líneas de código, créanme que no es divertido tener que poner alertas a cada rato para ver donde deja de funcionar tu código.

Afortunadamente, hoy en día, tenemos diversas herramientas para dicha tarea y quiero recomendarles unas cuantas que me han servido a lo largo de éstos años.

Firefox con Firebug instalado

Esta combinación es, para mi gusto, la herramienta por excelencia para cualquier desarrollador de Javascript y AJAX. No sólo podemos ver las llamadas de POST y GET durante su ejecución, sino podemos ver el contenido de diversas variables dentro de algún bloque de código, y podemos evaluar algún código en ese momento. Hay herramientas similares tanto en Chrome, Safari e IE, (inclusive hay un Firebug Lite para Chrome) pero la forma de su estructura y en la que aparecen los datos de Firebug para Firefox me parece la más cómoda y útil. Tengan cuidado, si la aplicación que vas a realizar está pensada para ser vista en diversos navegadores, recomiendo ver la aplicación en todos los navegadores que se piensa soportar. Me ha pasado que código con errores funciona en los navegadores más utilizados, tales como FF, Chrome, Safari y Opera, pero IE se pone más quisquilloso, marca el error y termina la ejecución.

Utilizando la consola

Está herramienta es muy útil al momento de tratar de ver el contenido de una variable del tipo que sea (cadena, objeto, arreglo, etc).  Es el equivalente a un

en PHP o un trace en Actionscript.

El console.log() mostrará en el depurador el contenido de dicha variable, objeto, etc.  Para poder ver el Firebug es necesario presionar F12 con lo cual se abrirá el Firebug:

Es necesario tenerla activa y tener la consola seleccionada para ver la salida del console.log().

Ej.

console.log(‘cadena’);
console.log(123);
var objeto = new Object();
objeto.nombre = 'Bernardo';
objeto.apellido = 'Pineda';
objeto.edad = 31;
console.log( objeto );

Y si le damos clic al objeto, nos muestra sus detalles:

Esto puede ser muy útil al momento de enviar y recibir datos en formato JSON, del cual hablaremos en una entrada posterior.

Más opciones en firebug

De igual forma, podemos mandar mensajes al depurador de Javascript que no afectan la ejecución del mismo. Para un listado completo, consultar http://getfirebug.com/logging

Métodos no reconocidos

Por último, me ha pasado en contadas ocasiones que en algunos navegadores termina la ejecución antes de tiempo al haber dejado mensajes de depuración en el código. Esto se debe a que no todos los navegadores tienen definidas las funciones de depuración y al no estar definidas, marca el error y detiene la ejecución. Específicamente me pasó con Internet Explorer 7. Afortunadamente podemos escribir un código que evita que suceda ésto.

https://gist.github.com/bpineda/5401653

Dicho código, simplemente define las funciones de manera anónima, aunque las deje vacías para que no marque error de función no definida.

Espero les haya sido útil el artículo y puedan evitarse dolores de cabeza al depurar aplicaciones con Javascript. Hasta la próxima.

Citando la documentación de Cascades for Blackberry 10 un Sheet es:

Sheets are full-screen views that are placed as separate layers on top of the current screen context. A sheet displays a view from within the current application.

Sheets are primarily used to display a UI that’s related to the creation or selection of content, often as temporary subtasks to the main navigation of the application. You can think of a sheet as representing a separate flow, or detour, from the main application flow.

Dicho esto, se puede presentar la necesidad que colocar un componenete DropDown (como un comboBox traducido al HTML XD) dentro de una Sheet y que sea poblado desde una fuente de datos externa como podría ser un XML, JSON o una base de datos local en SQLlite.

El objetivo de este tutorial es que poblemos el componente DropDown desde una base de datos SQLLite considerando que este estará dentro de un Sheet.

Para esto requerimos:

• Instalar QNX Momentics IDE For BlackBerry 10 Native SDK
• Un manejador de base de datos SQLLite como: SQLLite DataBase Browser ó PHPLiteAdmin (si eres phpero )

Una vez instalada la IDE, creamos un proyecto nuevo de Cascades, con un Template Standard y lo llamaremos DropDownMenu, nos lanzará por default el qml principal de nuestra aplicación (main.qml).

En la parte superior derecha de nuestra IDE seleccionaremos la perspectiva de edicion QML para empezar a trabajar algunos aspectos de diseño de nuestra app, si es tu primera vez usando Momentics veras que es muy similar a cualquier otra IDE basada en ECLIPSE.

// Default empty project template
import bb.cascades 1.0

// creates one page with a label
Page {
     Container {
          layout: DockLayout {}
          Label {
               text: qsTr('Hello World')
               textStyle.base: SystemDefaults.TextStyles.BigText
               verticalAlignment: VerticalAlignment.Center
               horizontalAlignment: HorizontalAlignment.Center
          }
     }
}

Eliminamos el componente Label del documento y agregamos del panel de componentes un componente Button el cual nos servirá para lanzar la Sheet con el componente DropDown.

Al componente Button le definimos una id, text y alignment ya sea por código o desde el panel de propiedades QML:

• id: btnAbrirForm
• text: Abrir Formulario
• horizontalAlignment: HorizontalAlignment.Center
• verticalAlignment: VerticalAlignment.Center

Page {
     Container {
          layout: DockLayout {}
          Button {
               id: btnAbrirForm
               text: 'Abrir Formulario'
               horizontalAlignment: HorizontalAlignment.Center
               verticalAlignment: VerticalAlignment.Center
          }
     }
}

Ahora lo que sigue es crear otro el archivo qml (formulario.qml) que servirá como contenedor de nuestro componente DropDown y el cual invocaremos cuando demos click sobre el boton “btnAbrirForm”, para crearlo seleccionamos el folder “assets” de nuestro proyecto y desde la barra de menú damos click en “file->new->QML File”, le asignamos el nombre de “formulario.qml”.

En el documento formulario.qml dentro del componente container incluimos el componente DropDown y le asignamos la id: ddLista y el title: Seleccione una opción. Ademas de esto, algo que es sumamente importante es asignar que esta vista es de tipo Sheet.

import bb.cascades 1.0

Sheet {
     Page {
          Container {
               DropDown {
                    id: ddLista
                    title: 'Seleccione una opción'
               }
          }
     }
}

Teniendo listo ambos qml (main.qml y formulario.qml) lo que resta es indicarle al boton “btnAbrirForm” que cuando se le de click lanze el documento formulario.qml. Para lograr esto tenemos que hacer referencia del documento formulario.qml dentro del documento main.qml por medio de la propiedad attachedObjects y usando un componentDefinition. Le asignamos una id: contFormulario y el source apuntando al archivo formulario.qml.

Page {
     Container {
          layout: DockLayout {}
          Button {
          ...
          }

          attachedObjects: [
               ComponentDefinition {
                    id: contFormulario
                    source: 'formulario.qml'
               }
          ]
     }
}

Por medio del evento onClicked creamos un objeto del formulario.qml y lo abrimos por medio del método open() de esta forma se abrirá nuestro Sheet desplegando el componente DropDown.

Page {
     Container {
          layout: DockLayout {}
          Button {
               id: btnAbrirForm
               ...
               onClicked: {
                    var form = contFormulario.createObject()
                    form.open()
               }
          }

          attachedObjects: [
          ...
          ]
     }
}

Nos regresamos el documento formulario.qml para colocar un TitleBar y tener una opción para cerrar (dismissAction) el Sheet. Por medio del método close() cerraremos el Sheet actual haciendo referencia a su id: sheetForm.

Sheet {
     id: sheetForm
     Page {
          titleBar: TitleBar {
               dismissAction: ActionItem {
               title: 'Cerrar'

                    onTriggered: {
                         sheetForm.close()
                    }
               }
          }

          Container {
               DropDown {
                    id: ddLista
                    title: 'Seleccione una opción'
               }
          }
     }
}

Solo por cuestion de diseño agregaremos al Container paddings y al componente DropDown lo alinearemos de tal forma que cubra todo el espacio con respecto al ancho del Container.

Container:

• topPadding: 20
• leftPadding: 20
• rightPadding: 20

DropDown:

• horizontalAlignment: HorizontalAlignment.Fill

Dando como resultado un código como el siguiente:

Sheet {
     id: sheetForm
     Page {
          titleBar: TitleBar {
               dismissAction: ActionItem {
               title: 'Cerrar'

                    onTriggered: {
                         sheetForm.close()
                    }
               }
          }

          Container {
               topPadding: 20
               leftPadding: 20
               rightPadding: 20

               DropDown {
                    id: ddLista
                    title: 'Seleccione una opción'
                    horizontalAlignment: HorizontalAlignment.Fill
               }
          }
     }
}

De esta forma tenemos listo todo en nuestras vistas, en la 2da. parte de este tutorial realizaremos la conexión a la base de datos SQLLite y poblaremos nuestro DropDown usando código C++. Nos leemos pronto, bytes.

Christian George: Facebook ¿Empresarial?

@elcraneo

En esta primer conferencia, Christian habló acerca del porqué como desarrolladores y emprendedores, nos deben interesar los números que manejan las redes sociales más importantes (como es en este caso, Facebook). Dichos números significan posibles compradores y fans de nuestra marca/aplicación, que pueden además ayudar a promocionar nuestro producto.

Al momento de proponer una idea sea bien para un negocio o una aplicación, debemos también dejar de pensar como simples usuarios y comenzar a ver las redes sociales como una herramienta potencial que atrae fans y clientes. Otro punto a tener en cuenta es que si bien no todos los usuarios ‘fans’ de tu marca consumen tu producto/servicio, el hecho de que compartan tus publicaciones e interactúen con tu pagina, provocará que en determinado momento tu marca llegue a ese comprador que espera ahí afuera sin saber que sera fan y consumidor de tu marca.

Edgar Parada: BlackBerry10 Social Apps

@edgarparada

La conferencia impartida por Edgar Parada, evangelista de BlackBerry, inició explicando las principales redes sociales y como es que han tenido gran influencia en las personas; Facebook, Twitter, Google +, LinkedIn. Continuo haciendo mención de las aplicaciones que iniciaron como una idea vaga y terminarón siendo aplicaciones con mucho auge dentro la vida diaria de las personas.

Habló del nuevo sistema operativo  BlackBerry 10 que esta basado en QNX, resaltando que el día de ayer fue el lanzamiento en México de estos dispositivos. Invitó a los presentes para que no dudarán en crear aplicaciones para BlackBerry, describiendo las plataformas y frameworks soportadas que esta empresa ofrece a los desarrolladores; como Cascades, HTML5 y Adobe AIR.

Finalmente mencionó que cuando a aplicaciones móviles se refiere, es importante saber elegir el Modelo de Negocio que se va utilizar para su distribución, algunos de los que destacó fue: Freemium, la cual es gratis pero que si deseas adquirir otras características se requiere hacer un pago. Premium, la cual tiene un costo que va de un dólar o más. Edgar sugirió crear una versión gratuita y una de pago, ya que si la aplicación es lo suficientemente buena puedes venderla sin problema, los usuarios la comprarian.

Anni Garza: Social Media Art

@anniGarzaLau

Continuando con la interesante conferencia de Anni Garza, desde el impacto de los medios digitales en el arte y cómo es que en la actualidad una simple búsqueda en internet puede revelar muchos aspectos de tu vida y mucha gente no está consciente del peligro que esto implica, por ello mismo comenzó a trabajar en una app artística (a la vez que útil) en la cual combina algoritmos biológicos para crear una “descomposición facial” que protege la identidad del usuario ante las tecnologías de reconocimiento facial y al mismo tiempo le da un acabado diferente a la fotografía final.

Sergio Brito: The Facebook SDK

@yacaFx

Para cerrar, Sergio Brito, nos presentó un enfoque actual sobre el desarrollo de las distintas aplicaciones, móviles, web y desktop, y la integración que estas pueden tener con las redes sociales para (cuando se trata de un producto) tener más impacto en los usuarios finales y llevar el “boca en boca” en una de las maneras más efectivas en que se puede expandir una idea, producto o marca.

También habló de los distintos sabores de el SDK de Facebook (Android, iOS y plataformas web) así como la útil Graph API y los permisos que deben dar los usuarios para distintas funciones y accesos a información, tales como consultar la lista de amigos o permisos para postear en el muro.

Cuatro charlas con diferentes enfoques sobre un mismo tema, el como ganar a los usuarios y hacer que se comprometan con nuestros productos finales de la mejor manera que podemos como desarrolladores, crear contenido de calidad y que valga la pena, con ideas innovadoras que vayan un paso más allá, pensando en las necesidades del usuario y llegando a explotar las características únicas que sean llamativas y útiles a la vez.

Autores: Jesus Macedo, Marco Mérida y Margarita García

Aprovechando que estamos estrenando diseño y que ya somos parte del User Group Developers de Facebook tendremos este jueves 21 de Marzo una serie de conferencias para platicar sobre el SDK de Facebook y revisaremos su API a nivel general así como las distintas herramientas y smartphones disponibles como el nuevo BlackBerry Z10 para generar y correr nuestras apps.

Pueden registrarse al evento en la siguiente url:

http://fbmeetupmx.eventbrite.com

EL cartel del evento es el siguiente:

Nos vemos el jueves!
Saludos y Happy Coding!!!
Sergio Brito – @yacaFx

Hola RIActiveros!

Pues todo se alineo para poder compartir con ustedes un evento más donde toca el turno enfocarnos a fondo en el desarrollo mobile, las distintas tecnologias y plataformas existentes para todos los gustos y así poder conocer y tener a la mano distintas alternativas para lograr llevar nuestra idea a un dispositivo mobile con el lenguaje y herramientas que más se nos acomode.

La carta de este evento es bastante variada y muy nutrida pues tendremos oportunidad de escuchar de primera mano que pasa y que hay en las principales plataformas actuales como Blackberry, iOS, Android y Windows 8 y del mismo modo sobre frameworks y herramientas conocidas y otras no tanto como Appcelerator, Dreamweaver, Flash Builder, Visual Studio, AIR, HTML5, Cascades, Xcode y .Net.

Al final contaremos con una mesa redonda donde los speakers de estas MobiTalks estarán debatiendo sobre sus temas de expertise en la perspectiva mobile actual por lo que pinta para una contienda mas que interesante.

La parrilla de speakers estará conformada por:

• Maximiliano Firtman – @firt
• Erick Camacho - @ecamacho
• Francisco Cuevas - @pacocuevas
• Alejandro Mercado - @alexmarket

El registro es via Eventbrite en http://mobitalks2012.eventbrite.com/ no olviden llevar su registro para el acceso y si es un medio digital mucho mejor

¿Donde y cuando será el evento?

No olviden usar los social media de RIActive:  Grupo en Facebook , Twitter @RIActive y hashtag #MobiTalks

Nos vemos el lunes!

Saludos y Happy Coding!!!

Sergio Brito – @yacaFx

*Un agradecimiento especial a @madanielaa por su colaboración con el diseño del logo del evento