Blog personal de Fernando F. Gallego

Escribo esto casi como un recordatorio de las posibles formas de manejar eventos en Android, pongo por caso cómo manejar los eventos OnClick de un botón:

Inline:

1
2
3
4
5

this.btnCalcular.setOnClickListener(new View.OnClickListener() {
      public void onClick(View v) {
       	calcularRuta();
      }
});

Con un delegado:

1
2
3
4
5
6
7
8
9

private OnClickListener btnMyLocation_OnClick = new OnClickListener() {		
	@Override
	public void onClick(View v) {
		// Desde aquí no tenemos acceso a la clase 
		// así que podemos llamar a una método de 
		// la clase para modificarla			
	}
};
this.btnMyLocation.setOnClickListener(this.btnMyLocation_OnClick);

Implementando OnClickListener como una interfaz (esta opción no permitiría manejar eventos OnClick diferenetes salvo que hagamos un switch del View en la función OnClick para identificarlo):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

public class ExampleActivity extends Activity implements OnClickListener {
    protected void onCreate(Bundle savedValues) {
        ...
        Button button = (Button)findViewById(R.id.corky);
        button.setOnClickListener(this);
    }
 
    // Implement the OnClickListener callback
    public void onClick(View v) {
      switch(v.getId())
      {
          case(R.id.corky):
          ...
      }
    }
    ...
}

En el XML del layout:

1
2
3
4

<Button
android:onClick="metodo"
... 
/>

1
2
3
4

public void metodo(View v)
{
   //hacer algo
}

(fuente: http://developer.android.com/guide/topics/ui/ui-events.html)

Últimamente ando con temas de Android en el curro y estoy aprendiendo un montón, tanto que tengo pensados unas serie de posts sobre Android donde contaré cómo hacer aquellas cosas que no están demasiado bien explicadas en la documentación, o que hay que investigar un poco para conseguir hacerlas.

Como aún sigo trasteando, voy a empezar con una entrada cortita.

En este caso queremos pintar un botón de un color que no sea el del tema que estemos usando pero no queremos coger el photoshop y currarnos un botón bonito y sombreado desde cero y todos sus estados de seleccionado, pulsado, etc. solo para cambiarle el color, así que tiraremos de una función muy sencilla integrada en Android que consiste en aplicarle un filtro de color alpha al botón en cuestión partiendo de la base del típico botón gris:

Para lograr esto sólo tenemos que aplicar esta línea:

1

button.getBackground().setColorFilter(0xFFFF0000, PorterDuff.Mode.MULTIPLY);

Siendo 0xFFFF0000 el color en formato ARGB que queremos aplicar, en este caso, rojo.

Es muy interesante poder aplicar este tipo de filtros porque nos permite hacer un montón de efectos sobre los controles predefinidos en Android. Esta técnica no es exclusiva de Android, sino que también es muy usada en Photoshop para cambiar colores por ejemplo.

Aquí una tablita con las operaciones que se pueden hacer (no se si Android soporta todas)

(fuente: Stack Overflow)

En la Campus Party 2010 he asistido a una charla de espresso-team relacionada con aplicaciones web para móviles que se ejecutan como si fueran nativas. En este ámbito PhoneGap se lleva la palma y dado que las instrucciones de la web no son todo lo aclaratorias que deberían ser, voy a a indicar algunos consejos que me han ayudado a compilar el .jar con las librerías y a crear el proyecto de prueba:

Pasos:

1. Instalar el Java JDK:
http://java.sun.com/javase/downloads/index.jsp

2. Instalar Eclipse:
http://www.eclipse.org/downloads/ (extraer en algún sitio)

3. Instalar Android SDK:
http://developer.android.com/sdk/index.html (descomprimir en alguna ruta sin espacios, ej e:\android-sdk)
Importante para evitar dolores de cabeza después, añadir a la variable de entorno PATH la ruta hasta la carpeta del SDK (ej e:\android-sdk) y a la carpeta tools (ej. e:\android-sdk\tools)

4. Instalar el plugin ADT para Eclipse:
http://developer.android.com/sdk/eclipse-adt.html

5. Añadir componentes del SDK:
http://developer.android.com/sdk/adding-components.html

Si hay alguna duda hasta aquí, es como seguir la guía de Android para desarrolladores: http://developer.android.com/sdk/index.html

6. Instalar Apache ANT:
http://ant.apache.org/index.html (descomprimir en una carpeta sin espacios ej. e:\apache-ant)
IMPORTANTE: Crear dos variables de entorno, JAVA_HOME con la ruta al java_sdk (ej. C:\Program Files (x86)\Java\jdk1.6.0_20) y ANT_HOME con la ruta a la carpeta de ANT (ej. e:\apache-ant), además, añadir la ruta al /bin de ANT al PATH (ej. e:\apache-ant\bin)

7. Instalar ruby
Con instalador: http://rubyinstaller.org/

8. Instalar PhoneGap:
Hay dos opciones, instalar un cliente de github y bajárselo con él, o descargarte la última versión a mano de http://github.com/phonegap/phonegap-android (descomprimir en una carpeta)

9. Correr el comando mágico que creará tu .jar y el proyecto de ejemplo:
Dentro de la carpeta de phonegap-android:
ruby ./droidgap [ruta al android sdk] [nombre aplicacion] [nombre del package] [ruta al www] [ruta al proyecto de prueba]

dónde:
[ruta al android sdk] = ruta donde has descomprimido el SDK de android
[nombre aplicacion] = el que quieras, será el nombre de la aplicación
[nombre del package] = el que quieras, será el nombre del paquete
[ruta al www] = ruta donde están las fuentes html, que si no tienes, puedes poner la carpeta example de phonegap-android
[ruta al proyecto de prueba] = carpeta donde se creará el proyecto para abrir con Eclipse

En mi caso:
ruby ./droidgap e:\\Android\\android-sdk-windows test com.forgotten example/ e:\\Android\\proyectos\\phonegap1

10. Abrir Eclipse, crear un nuevo proyecto Android e indicar que lo queremos crear a partir de un código fuente existente, que será el que hemos indicado en [ruta al proyecto de prueba]

11. En el árbol de ficheros, clic derecho en libs/phonegap.jar > Build path > Add to build path

12. Clic derecho en la carpeta del proyecto dentro de Ecplise > Run As > Android Aplication.
Debes tener configurado un AVD compatible con el build target indicado en el manifest.xml.
Para más info sobre esto mejor ver el quick start de http://developers.android.com

Posibles errores:
./droidgap:37:in “’: No such file or directory – ant jar (Errno::ENOENT)
Solución, añadir la ruta de ANT a la variable de entorno PATH.

./droidgap:49:in “’: No such file or directory – android create project
Solución, añadir la ruta a las tools de Android SDK a la variable de entorno PATH.

Esto me ha llevado un montón conseguirlo por no leer las cosas, así que espero que sirva de ayuda

El otro día, hablando con mi compañero de curro, le planteé la duda de por qué usaba split en lugar de explode para separar cadenas en un array dado un delimitador, cómo no supo responderme ni yo tampoco sabía la diferencia, fui a mirar el manual en php.net y la diferencia realmente es que:

• explode() toma como parámetros la cadena con el delimitador, la cadena sobre la que se aplica y un parámetro opcional para limitar el número de elementos que se van a separar conteniendo el último el resto de la cadena sin partir
• split() toma como parámetro una expresión regular cómo delimitador, la cadena sobre la que se aplica y un parámetro opcional para limitar el número de elementos.

La función split en realidad es mucho más flexible para según que cosas pero más costoso si sólo queremos partir por un carácter que suele ser lo habitual, entonces es mejor usar explode(). Además, desde PHP 5.3, split() está obsoleta (por lo que provocará un Warning) y se recomienda usar preg_split() en su lugar, que además admite otro parámetro flag para modificar su comportamiento.

Espero que hayáis aprendido una cosa más

Referencias:
explode()
split()
preg_split()

Como en los otros posts (I y II) sobre la API de Google Calendar no quedó muy claro el proceso de conexión y autenticación Google, voy a pegarte un trocito de código que además de cargar las librerías necesarias para usar las APIs de Google, también te enseña como hacerlo a través de un proxy, como es el caso de mi empresa.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<?php
	require_once 'Zend/Loader.php';
	Zend_Loader::loadClass('Zend_Gdata_App_HttpException');  
	Zend_Loader::loadClass('Zend_Gdata_ClientLogin');  	  
	Zend_Loader::loadClass('Zend_Http_Client_Exception');  
	Zend_Loader::loadClass('Zend_Http_Client');  
	Zend_Loader::loadClass('Zend_Http_Client_Adapter_Proxy'); 
	Zend_Loader::loadClass('Zend_Gdata_Calendar');
 
	$config = array(  
	    'adapter'    => 'Zend_Http_Client_Adapter_Proxy',  
	    'proxy_host' => 'proxy.empresa.es',  
	    'proxy_port' => 8080  ,
		'proxy_user' => 'usuario_proxy',
		'proxy_pass' => 'contraseña_proxy',
		'proxy_auth' => Zend_Http_Client::AUTH_BASIC
	); 
 
	$proxiedHttpClient = new Zend_Gdata_HttpClient('http://www.google.com:443', $config); 
 
 
	$service = Zend_Gdata_Calendar::AUTH_SERVICE_NAME;
	$user = "usuario@gmail.com";
	$pass = "password";
 
	try {  
		$httpClient = Zend_Gdata_ClientLogin::getHttpClient($user, $pass , $service,  $proxiedHttpClient);  
	} catch (Zend_Gdata_App_HttpException $httpException) {  
	exit("An error occurred trying to connect to the proxy server\n" .          
		$httpException->getMessage() . "\n");  
	}  
 
 
	// Create an instance of the Calendar service
	$service = new Zend_Gdata_Calendar($proxiedHttpClient);

En caso de que el proxy no requiera usuario y contraseña, omitiremos las líneas de proxy_user y proxy_pass.

Una vez auténticados, ya podemos operar con el objeto $service para operar con Google Calendar en este caso pero también sirve para Google Docs, Youtube, etc. añadiendo las librerías correspondientes.

Cabe destacar que si te da un error de SSL (stream_socket_enable_crypto() [streams.crypto]: this stream does not support SSL/crypto in …) debes incluir la extensión OpenSSL en el php.ini añadiendo la linea extension=”openssl.so” y reiniciando el servidor para que se active.

También es posible que de un error Fatal error: Call to undefined method Zend_Http_Client::setClientLoginToken() in C:\xampp\php\ZendGdata\library\Zend\Gdata\ClientLogin.php on line ***, por eso he cambiado una línea que ponía
new Zend_Http_Client(’http://www.google.com:443?, $config);
por la que pone
new Zend_Gdata_HttpClient(’http://www.google.com:443?, $config);

Ahora ya podemos por ejemplo listar todos nuestros calendarios así:

36
37
38
39
40
41
42
43
44
45
46
47
48

try {
	    $listFeed= $service->getCalendarListFeed();
	} catch (Zend_Gdata_App_Exception $e) {
	    echo "Error: " . $e->getMessage();
	}
 
	echo "<h1>Calendar List Feed</h1>";
	echo "<ul>";
	foreach ($listFeed as $calendar) {
	    echo "<li>" . $calendar->title .
	         " (Event Feed: " . $calendar->id . ")</li>";
	}
	echo "</ul>";

Fuentes:
GData Tips
Zend Framework
http://archive.netbsd.se/?ml=squirrelmail-plugins&a=2007-07&t=4669364

Este sábado pasado asistí al Android Developer Lab organizado por Google y que se celebró en Fuenlabrada, en la Universidad Rey Juan Carlos I.

El día antes corría el rumor por twitter de que Google estaba regalando su nuevo móvil Nexus One a los asistentes de los demás eventos de Android que estaban haciendo por Europa. Ese rumor se volvió confirmación mientras se celebraban los eventos de Paris y NY (sólo que en Nueva York regalaban Motorola Droid). Así que con ese aliciente, el madrugón del Sábado para estar allí a las 10 de la mañana no sabía tan mal.

Al llegar lo primero que hicieron fue repartir los teléfonos a los asistentes registrados que éramos bastantes y llenamos la sala de conferencias.

El evento en sí, me resulto un poco decepcionante, puede ser que fuese influenciado en que el inglés del ponente me resultaba más difícil de entender que el de su compañero que hablaba menos. También porque no hicimos nada de networking (iba con @mr_villa y su amigo @olerud). Parece ser que hubo gente de And.roid.es, de GeeksPhone, Droiders y de Inizziativa (ganadores del ADC2). Pero especialmente porque pedían que llevásemos un portátil con el SDK 2.1 instalado, supuestamente para ver algo de código, pero de eso nada.

Después de la charla de introducción con datos de lo bueno que es Android y de lo que está creciendo y de ver cómo los usuarios de Android usan más sus aplicaciones y las borran menos que respecto al iPhone, nos invitaron a comer unos sandwiches y unas cocacolas para seguir después con otra pequeña charlita sobre el SDK y las APIs de desarrollo donde enseñaron un par de snippets de código para emplear geolocalización y fondos animados.

En general, si no hubiese sido por el Nexus One del cual haré una reseña en breve, la charla me habría resultado decepcionante aunque doy por hecho que otras personas la habrán aprovechado mucho más que yo desvirtualizando otros usuarios de twitter con los que se comunican, al estilo de lo que hicimos nosotros en el congreso de webmasters.

Pues por fin hemos integrado ambas partes, el reconocimiento de dedos y tracking con la retroproyección de la imagen en pantalla y la verdad es que funciona bastante bien. En el vídeo que hay más abajo se puede ver el resultado. Va bastante lento debido a que el ordenador que hemos conectado es un netbook con un procesador Atom de 1Gb de RAM y una gráfica Intel GMA de las báscias, aún así, hace el tratamiento de imagen bastante bien pero cuando hagamos la prueba con el Core2Duo será otro cantar y la aplicación de demostración irá como un avión. Entre tanto dejo aquí el vídeo.

Como algunos ya sabéis, Naranjo y yo andamos montando una mesa multitáctil al estilo de la Microsoft Surface, pero en plan casero, y ahorrarnos unos 11000€ que vale el bicho.

El caso es que estamos construyéndola desde cero, montando nosotros la estructura de la mesa, a nuestro gusto, pensada para sentarse alrededor con sillas normales como si fuese una mesa de comedor. La idea original es usarla para juegos de rol, donde en el centro tengamos la pantalla y desde la posición sentada podamos llegar a cualquier punto de la mesa. Así podríamos mostrar mapas de las regiones, del campo de batalla, la cuadrícula de combate, etc. Pero por supuesto nuestra ambición va más allá, queremos terminarla y ofrecerla como un producto terminado a cualquiera que esté interesado en disponer de una mesa multitáctil. Además, queremos desarrollar más aplicaciones que hagan un uso innovador de esta tecnología y convertirlo en algo a tener en cuenta de cara al futuro de las nuevas tecnologías e interfaces multitouch.

Hay unas cuantas fotos de la construcción de la mesa más abajo y también encontrarás el vídeo que he colgado en YouTube en el que se ve como la aplicación creada por NuiGroup reconoce los dedos con el montaje que tenemos hecho que de momento no son más que un monton de leds infrarrojos dispuestos en 8 grupos de 8 leds un poco al tuntún y una webcam modificada para que filtre la luz natural y vea la infraroja.

Vídeo de la primera prueba de tracking con un portátil

Hacía tiempo que no escribía por aquí!

Estan siendo unos días intensos, desde que terminó en congreso he estado hablando con gente muy interesante a través de twitter, y me he ido enterando a través de ellos de otros eventos orientados al negocio en internet, muy en auge, y otro tipo de iniciativas emprendedoras.

Después de perderme el Evento Blog España de Sevilla que pintaba muy muy bien, y el FICOD en Madrid por ser entre semana, a los cuales me habría encantado ir y que al menos pude seguir por twitter e internet, al menos estoy asistiendo al iWeekend.

Consiste en juntarnos 50 personas interesadas en emprender un proyecto y elegir entre todos, una de las ideas propuestas para ser lanzada durante los días que dura el evento. El domingo tiene que haber una versión funcional muy básica de la idea, y esto se está haciendo en 10 lugares simultáneamente, lo cual es un indicador de que la iniciativa está gustando. En Madrid es la segunda edición ya.

La idea que se ha seleccionado para Madrid es un sitio web donde emprendedores buscan microinversiones de instituciones y particulares colgando sus ideas de empresa para ser revisadas por dichos inversiones que pueden elegir cuanto invertir en cada propuesta. Yo, para no ser menos, estoy en la parte de desarrollo, pero es un gustazo trabajar en equipo, con los demás desarrolladores y con los demás equipos, sobre todo los de diseño, que son los directamente relacionados con nosotros. Esperamos lanzar una beta funcional para el domingo a última hora.

Además, estoy aprendiendo mucho sobre como lanzar una empresa, cosas a tener en cuenta, modelos de financiación, gente que ya ha emprendido, etc. Hoy nos ha dado una charla uno de los fundadores de BuyVip y nos ha contado su experiencia y la verdad es que me parece apasionante todo este mundo. ¡Mamá! ¡quiero ser emprendedor!

Por otra parte, a través de twitter se puede seguir los comentarios del resto de iWeekends que se están desarrollando en paralelo siguiendo las etiquetas de #iweekend, #iw_mad, #iwcs, etc…

Cuando tenga un rato colgaré fotos pero se pueden ir viendo algunas en el Blog de Patricia Araque.También puedes ver una lista de twitteros del iWeekend de Madrid aquí

@laurixi y yo agotados tras el segundo dia de iWeekend y viendo la presentación del plan de negocio

Diseño elegido para el logo de emprendemás

Como siempre se me olvida, voy a apuntar aquí cómo se hacen objetos o clases nuevas en javascript.

Lo primero es crear una función con el nombre del objeto, ya demás puede llevar parámetros, por ejemplo:

function miObjeto(parametro1, parametro2)
{
this.primerParam = parametro1;
this.segundoPara = parametro2;
}

Fijarse que para añadir atributos, se usa this.atributo.

Con eso podemos crear instancias de esa clase así:
var instancia1 = new miObjeto(”p1″,”p2″);

Si ahora hiciesmos un alert(instancia1.primerParam); nos saldría “p1“.

Hasta ahora esto vendría a ser como un struct de C, pero si queremos convertirlo en un objeto, con métodos, se declaran así:

miObjeto.prototype.metodo = function(parametro1,parametro2)
{
this.primerParam = parametro1;
this.segundoParam = parametro2;
}

ahora podemos llamar así:
instancia1.metodo(”a1″,”a2″);
y al hacer el alert(instancia1.primerParam); nos daría “a1“.

Así de simple se usa el método prototype, para prototipar nuevas funciones a un objeto, hale, ya os he desvelado el secreto de esas webs tan chulas en javascript, ¡a trabajar!.