Ruben Rincon's Forum Nokia Blog

J2ME Canvas Qwerty Keyboard For Touch Devices

rdrincon — Wed, 22 Jul 2009 21:15:04 +0300

I have published recently one of the components I was working in some of my free time during the last semester. We can find often developers asking in discussion boards how to enter text in Canvas applications in phones like 5800 or 5530 (Touch phones with no physhical keyboard). One of the workarounds is to use the famous TextBox approach but it is kind of disrupting if we are talking about look and Feel and despite is a very valid approach it's not that user friendly. (hit your canvas textfield component, hit the textbox that popsup and then you have the native keyboard with different colors to the ones you have in your app)

This new component is 100% customizable (size, colors, buttons, all) and it is proved to perform pretty well in 5800 and 5530. The whole souce code has been shared along with a complete example.

To have access to all the information please follow this link:

Canvas Qwerty Keyboard for Touch Devices

The keyboard can be either used in Fullsize or small size mode.

Full size mode

Small size mode

I hope you enjoy it.

:Rubén

Mexico All Mobile For an Entire Day

rdrincon — Thu, 04 Jun 2009 00:01:48 +0300

Last saturday May the 30th I had the pleasure to be part of the MobileCamp Mexico 2009. This is the first of this events related to mobile carried on in the country. There were about 120 developers in the place who enjoyed the time talking about mobile technologies, exchanging experience, gadgets, and even code. The event was carried out in unconference style, meaning that there is not arranged scheduled beforehand but everything is set the exact same day.

How the idea was born:

Everything started a couple months ago when I went to the last Barcamp in Queretaro (two hours driving from Mexico) and I met a well recognized developer community called Tequilla Valley (which is nothing related to alcohol). After I had my own conference about widgets and some networking and relax time we planted the seed of having a barcamp for mobile as the ones taking place in big cities.

About the place:

One of the most interesting things of the event was the place where it was held. Close to downtown in Mexico you can find an arqueological place called Tlatelolco. Beside it there is a center owned by UNAM with wonderful view to the ruins. We had a couple rooms including one big nicknamed that day as the Hall of Justice just as the Superfriends cartoon.

About the sponsors:

The whole event was possible thanks to those companies/organizations that participated by apportting their economical and human resources. We had a total of 12 sponsors from different areas of the Mobile Industry.

We (Forum Nokia) installed a mini experience center (basically a 5800 and N96 connected to two screens) where developers were able to test the handsets and the different services. As a funny note I would like to talk about my best customer ... a kid about 7 years old with his father testing all the NGage games ... I bet he went straight to the Nokia Flagship to get one.

In the same way we had stands from several sponsors like the Mexican operator Iusacel (who additionally provided the coffe & cookies), Dell, Palm and some other companies who helped to spread the voice of the event. I would like to remark this design & Flash company called "Amigo Imaginario" that provided nice tshirts to organizers ... with our twitnames !!! so cool.

About Tequila Valley:

This developer community composed of developers from all around the contry in all the fields (Web, OpenSource, Mobile, etc) has tought all of us a lesson about how to be in community. They organize all kind of small and big events almost every week even in some coffe house to talk about technology, share code or in someones appartment just to code together and make good use of other people knowledge. I have also seen other countries trying to adopt the same idea of community ... congratullations to these guys.

About the Conferences:

Being an open event there was a variety of conferences that cover developer platforms in different brands like Nokia, BB, Iphone and also different platforms like SMS & Bluetooth.

What corresponds to me, I had a very active participation with three different conferences along the day:

I presented to the dev community how Nokia is encouraging developers to create relevant local content with strategies like CallingAllInnovators, the Open Screen Funding Project and how to market them through relevant channels like the OVI Store. The fact of having mexican people in the final round of the two most important Forum Nokia contest in the last year is also very encouraging and brought lot of attention.

Then We had a small conference/demonstration session about how to create a widget in only 15 mins using the S60 Aptana Plugin. Not to my surprise, the developers attending were very receptive and showed a lot of expertise on the area asking very good and deep questions.

To finalize my conferences, we had one more conference/demonstration bringing on the topic of the Qt developer platform. This was so far one of the topics that brought most of the attention, I had different people gently inviting me to talk in several events about it and even some people from education centers telling me that wanted to put Qt as part of their education programs. Developers see a big potencial and future with this technology and so do I... and I was even able to show them in 15 minutes how to create a native Qt app using the QT Designer and send it to the phone for on device demonstration.

Among the other conferences we had people talking about advertising using bluetooth push technology and all the implications to bear in mind, ideas for creating a public SMS network, comments regarding Web 2.0 in mobile phones, how to create FlashLite applications using Adobe Creative Studio (I really liked that animation of a cat made with flash moving his eyes up and down), Mozilla presenting their Mobile Web Browser Fennec in a Nokia N800 tablet and off course, some conferences about creating apps for BB and Iphone.

Closing the event:

that was one of the most entusiastic moments of the day since there were a lot of gifts from the sponsors. Among that there were caps, USB, a lot of T-shirts and 3 handsets (2 of them Nokia E71). We decided to make the raffle in a geeky way using random.org ... believe me, it was a lot of fun.

The event was concluded and placing the foothold in this sort of mobile related events in México. Looking forward to have the second version of it.

Widget Example: Using google calendar and S60 Platform Services

rdrincon — Wed, 04 Feb 2009 01:32:46 +0200

This is a simple and basic example widget that uses google calendar and the platform services of the S60 5ed.

It shows how to access the google calendar javascript API to retrieve information of a public calendar. In this case a test calendar I created but you can changed for your own.

The widget is composed by two basic screens, each screen represented by a <div> tag within the .html file.

The First screen will show a list of events ordered by date. The name of the event and the date will be displayed in each entry.

The second screen will show the details of a picked event. It also contains an options menu with two actions, the first one allows to store the event in the default phone calendar, the second one allows to return to the event list.

The Javascript Calendar Service API is used to store the event in the phone.

Two important notes:

1. The application does not check if the calendar already has a specific entry, so if you add it twice you will see it twice on the phone.

2. Since the WebKit is not yet supported by the google Calendar API, you will see a message asking you to use it at your own risk... well, you'd better take the risk, works just fine.

Here... a couple sceenshots and the link download the example.

Download Google Calendar Widget example

Let me know your comments.

VideoTutorial: creando un Widget con Aptana Studio y el WRT S60 plugin

rdrincon — Sat, 20 Dec 2008 18:20:16 +0200

Una gran noticia para los desarrolladores de widgets. Nokia ha hecho el primer release de un plugin para Aptana Studio. Con este plugin se pueden elaborar widgets de una forma muy rápida. Como en algún lugar escuché: si una imagen vale mil palabras, un video vale un millón; por eso, aquí les dejo un videotutorial en donde se realiza un ejemplo completo de un Widget que utiliza el Google Language Ajax API para que vean lo fácil que es hacer un widget.

Pueden ver el videotutorial en el siguiente link: VIDEOTUTORIAL: WIDGET TRADUCTOR

En este link pueden descargar Aptana Studio:
http://aptana.com/

En este link encontrarán el WRT S60 plugin para Aptana:
http://aptana.com/nokia

En este link pueden descargar el ejemplo completo: Traductor

Nota:

Hay otro detalle del cual no hablo en el videotutorial pero con el que algunos pueden tener problemas:

Cuando se va a efectuar la transición en una pantalla que no ha tenido ningún cambio, algunas veces la pantalla no se refresca hasta que movemos el cursor sobre ella. Este inconveniente se resuelve utilizando la siguiente línea:

setTimeout('widget.performTransition();', 0);

en lugar de utilizar sólamente:

widget.performTransition();

Las tecnologías Web se toman los dispositivos móviles!

rdrincon — Mon, 24 Nov 2008 02:55:37 +0200

Las tecnologías convencionales para el desarrollo de aplicaciones móviles como J2ME, C++ y python son lenguajes de programación orientado a objetos y pensados desde un principio para programadores. Que pasa con aquellos que en el boom de las tecnologías Web aprendieron a utilizar Html, Flash, JavaScript y decidieron convertirse en desarrolladores web? entre ellos, miles de diseñadores gráficos que pasaron del papel al computador. Bueno, ellos también tienen su oportunidad de incursionar en el mundo de las aplicaciones móviles sin necesidad de aprender una nueva tecnología.

La primera tecnología de la que hablaremos es Flash que siempre ha sobresalido por la simplicidad con la que podemos elaborar estupendas animaciones e interfaces de usuario. Existen dos aproximaciones para desarrollar contenido, la primera es haciendo mover elementos por el documento en una escala de tiempo y la segunda opción, que es más avanzada, es utilizar ActionScript, un lenguaje muy parecido a JavaScript.

Para los desarrolladores de esta plataforma, existe una extensión para dispositivos móviles llamada Flash Lite. Esta tecnología es un subconjunto de su contraparte web y agrega algunos elementos específicos para los dispositivos móviles como el uso de menús en los softkeys. Flash Lite ha evolucionado en diferentes versiones, en la primera versión (v1.1) hay soporte a elementos básicos multimedia y ActionScript 1.0; en FlashLite 2.x se incorpora ActionScript 2.0 y elementos avanzados multimedia como conexión remota utilizando sockets y en la versión 3.0 se agregan entre otras cosas el soporte a streaming multimedia. No podemos negar que ha existido fragmentación en cuanto a las versiones pero lo cierto es que el número de dispositivos que la soportan crecen de forma exponencial y se mantiene la compatibilidad hacia atrás. Flash Lite es una muy buena opción para realizar aplicaciones sencillas que requieran de una interfaz gráfica avanzada como protectores de pantalla, juegos sencillos, animaciones y publicidad. Otra gran ventaja a favor de FlashLite son las potentes herramientas de desarrollo suministradas por Adobe. El Adobe Flash Creative Studio contiene un componente llamado Adobe Devide Central que permite la simulación de aplicaciones en todas las versiones de FlashLite y para diferentes resoluciones de pantalla.

Conoce más sobre FlashLite siguiendo este link: Flash Lite

Continuando con tecnologías web, hemos visto como han evolucionado en la última década y hoy ya utilizamos el concepto Web 2.0 que es en resumen y sin entrar en detalles una web interactiva en donde las páginas dejaron de ser estáticas y se reemplazaron por páginas dinámicas mediante un uso extensivo de lenguajes de tipo script como javaScript, aparecieron nuevos estándares de intercambio de información basados en XML como RSS, ATOM, se acogieron tecnologías como CSS permitiendo estructurar y organizar la presentación de páginas web y se establecieron técnicas de programación como Ajax permitiendo obtener datos de un servidor sin interrumpir la visualización ni el comportamiento de una página.

La siguiente imagen es un mapa mental de Web 2.0 en donde se ven claramente los elementos quel la conforman. (tomado de wikipedia)

La gran noticia para los desarrolladores web y diseñadores es que pueden utilizar todas estas tecnologías para hacer aplicaciones que corran en dispositivos celulares y además utilizar algunas características específicas de los teléfonos e integrarlas con ellas. Estos conceptos se centran en una sóla palabra “widget”. Este es un término que nació para aplicaciones de escritorio y que permiten acceder de forma rápida y directa a funciones que requieren interacción con la web. El mismo concepto se aplica a los Widgets en los dispositivos móviles. Son aplicaciones que viven en el dispositivo (aparecen en el menú de aplicaciones) se ejecutan en el teléfono y tienen la capacidad de conectarse a Internet para realizar actualización de contenido, consultas, entre otras cosas.

La razón de ser de los widgets es generar una gran experiencia de usuario, permitiendo crear llamativas interfaces de usuario ajustadas a la pantalla del dispositivo, minimizando el flujo de datos por la red ya que todo el control y flujo de pantallas existe en el dispositivo y permitiendo la incorporación de un menú de opciones como lo vemos en la siguiente gráfica.

Un widget se compone de un archivo HTML muy sencillo que se utiliza sólo como punto de partida, es decir como primera pantalla. Las siguientes pantallas se arman utilizando JavaScript y hojas de estilo (archivos CSS) siguiendo el Document Object Model, la lógica de toda la aplicación la proporciona JavaScript. Adicionalmente a los objetos soportados por JavaScript existen algunos elementos específicos al teléfono que permiten la creación de menús y acciones ligados a los softkeys. Otra característica importante es el soporte a Ajax a través del objeto XMLHttpRequest que permite hacer consultas de datos por Internet de forma asíncrona sin interrumpir o bloquear la funcionalidad de la aplicación.

Existen actualmente dos versiones de Widgets, la primera (1.0) es soportada por los teléfonos S60 3ed Feature Pack 2 (como el N78) y algunos de Feature Pack 1 en las versiones de software más reciente (como N95 y E71). En esta versión se puede tener acceso a información básica del sistema como nivel de carga de batería y disponibilidad e intensidad de señal. La versión WRT 1.1 soportada en los teléfonos Nokia S60 5ed (como el 5800 Xpress Music y que veremos en Latinoamérica hasta el próximo año) incluye un conjunto de librerías denominadas Service API que permiten una integración mucho más fuerte con el dispositivo tal como un application manager, acceso a calendario, lista de contactos, datos del GPS y Mensajería.

Muchos se preguntarán que tanta es la portabilidad de los Nokia WRT Widgets con respecto a otros fabricantes o dispositivos. El motor de los Nokia widgets es el Webkit, un framewok para aplicaciones utilizado también por el navegador Web de los S60, Safari, Google Chrome y además otros fabricantes como Motorola en algunas de sus plataformas. Los elementos generales como Interfaz de Usuario, conectividad y lógica de la aplicación son 100% reutilizables, sin embargo, los elementos que hagan referencia a capacidades específicas del dispositivo como el Service API deberán ser portados de acuerdo a las especificaciones de cada fabricante u plataforma.

Conoce más sobre widgets en el siguiente link: Widgets

También les recomiendo este webinar en Español: Webinar Widgets

En conclusión, las tecnologías Web tienen un gran futuro en el marco de aplicaciones móviles, además cada vez se integran más con las capacidades específicas del teléfono, son altamente portables y tienen un Time To Marquet mínimo comparado con las tecnologías de programación convencionales.