Android - Primeros Pasos - Nuestra primera aplicación

Aunque en la mayoría de los artículos he usado netbeans y es posible usar netbeans para desarrollar aplicaciones para Android, en el momento de escribir este artículo los plugins para Android están bastante mejor en eclipse por lo que usaré dicha herramienta de desarrollo.

Lo primero que debemos hacer es desacargarnos la sdk de Android, la cual nos va a a incluir ya eclipse con todo lo necesario para desarrollar para Android. Podemos descargarla desde http://developer.android.com/sdk/index.html.Una vez descargada la descrompimimos en la carpeta donde deseemos dejarla instalada.

En la carpeta donde hayamos descomrpimido la SDK tendremos ahora los siguientes elementos:

• eclipse
• sdk
• SDK manager.exe

Entramos en la carpeta eclipse, arrancamos el eclipse y creamos un nuevo proyecto tal como vemos en la siguiente imagen.

Cuando creamos el proyecto nos aparece la siguiente pantalla, donde debemos rellenar el nombre del proyecto y el paquete así como la versión mínima de sistema operativo en la que va a funcionar nuestra aplicación y la máxima.

La siguiente pantalla la dejamos como está para que nos cree una actividad por defecto. Una actividad es un componente el cual nos proporciona una pantalla donde podremos insertar los elementos para interactuar con el usuario, por decirlo de una manera simple cada actividad equivale a una pantalla.

La siguiente pantalla que nos aparece nos permite seleccionar el icono de la aplicación.

A continuación nos aparece una nueva pantalla donde nos permite seleccionar el estilo de actividad a crear.

Finalmente nos preguntará por el nombre de la actividad a crear.

Con esto ya tenemos nuestra aplicación Android creada, la cual nos mostrará el mensaje "Hello word!".

Ahora vamos a explicar un poco la estructura del proyecto creado. Aparece un conjunto de carpetas en el proyecto tal como puede verse en la siguiente imagen.

• src. En esta carpeta se encuentran los fuentes en java.
• gen. Contiene los fuentes compilados.
• assets. Es la carpeta donde podemos guardar todos los archivos que deseamos que acompañen a la aplicación y que se van a incluir en la misma.
• libs. Son las librerías usadas por nuestro proyecto.
• res. Contiene lo que en Android se denominan recursos, entre ellos podemos tener imágenes, layouts (definiciones de pantalla) o textos.

Vamos ahora a ver el contenido de algunos archivos importantes. Primero empezamos con la clase MainActivity.java

package com.ljlg.programandoblog;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
  
}

En la clase anterior lo que aparece son las operaciones que se van a realizar al arrancar, por decirle de alguna manera es la clase principal de nuestra aplicación y es en el archivo AndroidManifest.xml donde se define está clase como la principal.

En la primera función que aparece lo que se hace es cargar la pantalla definida como activity_main, esta pantalla se encuentra definida en la carpeta /res/layout/activity_main.xml. Si abrimos dicho archivo tendremos un editor gráfico que nos permite modificar la pantalla.

 Algo similar ocurre con la segunda función pero en este caso con el menú que nos va a aparecer en la aplicación el cual se encuentra definido en /res/menu/main.xhtml.

Ya tenemos la aplicación básica creada y explicados los conceptos básicos necesarios, en proóximos artículos entraré un poco mas a fondo en la definición de las pantallas de nuestra aplicación.

Espero que el artículo os haya sido de utilidad.

Carrusel de imágenes en movimiento con javascript 2

Anteriormente he puesto un post con como crear un carrusel de imágenes usando una librería javascript en este caso os indico como crear vuestro propio carrusel de imágenes de modo que las  imágenes tengan movimeinto como podeís ver en el siguiente ejemplo.

El código para crear este carrusel de imágenes es el siguiente:

<!-- Cargamos la librería jquery que vamos a usar -->
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"/>

<script>

   // Función a ejecutar una vez cargado el documento
   $(document).ready(function() {
    try
    {

      // Lista de imágenes que queremos cargar
      var imagenes = new Array();
      imagenes[0] = 'carrusel01.png';
      imagenes[1] = 'carrusel02.png';
      imagenes[2] = 'carrusel03.png';

      var numero_imagenes = 3;
      var imagen_actual = 0;

      var width_image = 800;
      var height_image = 450;

      // Calculamos el máximo que podemos mover una imagen tanto 
      // verticalmente o horizontalmente
      var max_y = height_image - $('#carrusel').height();
      var max_x = width_image - $('#carrusel').width();

      $('#carrusel').css('backgroundPosition', '0 0');      // Velocidad del desplazamiento
      var scrollSpeed = 50;
     
      // Posición actual de la imagen
      var current_x = 0;
      var current_y = 0;


      // Iniciamos un temporizador que ejecutará la función que
      // realiza el movimiento cada cierto tiempo
      var timer = setInterval(function() {
        moveBackground()
      }, scrollSpeed);

      var estado = 1;

      // Función encargada de realizar el movimiento
      function moveBackground() {
      
        // Se definen estados que indican que movimiento realizar
        // en cada momento
        if (estado == 1) // nos desplazamos vertical y horizontalmente
        {
          if (current_x > (-1 * max_x))
          {
            current_x = current_x - 1;
          }
          current_y = current_y - 1;
          if (current_y == (-1 * max_y)) // Cambio de movimiento, hemos llegado al máximo
          {
            estado = 2;
          }
        }
        else if (estado == 2) // nos desplazamos horizontalmente
        {
          current_x = current_x - 1;
          if (current_x <= (-1 * max_x))
          {
            estado = 3;
          }
        }
        else if (estado == 3)
        {
         
          // Se va a proceder al cambio de imagen, antes
          // de nada se para el temporizador, para que no se 
          // ejecute mientras realizamos el cambio
          clearInterval(timer);
          current_x = 0;
          current_y = 0;
          estado = 1;                            
         
          // Se oculta el contenedor mientras se cambia la imagen
          // esto es simplemente para crear un efecto de difuminado
          // al cambiar la imagen, para ello usamos la función fadeOut 
          // de jquery
          $('#carrusel').fadeOut(2000, function() {
            <!-- Se selecciona la nueva imagen -->
            imagen_actual = imagen_actual + 1;
            if (imagen_actual == numero_imagenes)
            {
              imagen_actual = 0;
            }
            // Se sustituye la imagen
            $('#carrusel').css('background-image', "url('" + imagenes[imagen_actual] + "')")
              $('#carrusel').fadeIn(2000, function() {               
                 // Se reinicia el temporizador
                 timer = setInterval(function() {
                  moveBackground()
                }, scrollSpeed);
              }
            );
          });
        }

        // Se cambia la posición
        $('#carrusel').css("backgroundPosition", current_x + "px " + current_y + "px");
      }
    }
    catch (err)
    {
      alert(err);
    }
  });
</script>


<div id="carrusel" style="width:600px; height: 400px; background-image: url('carrusel01.png')">

Como puede verse la idea es bastante sencilla, se trata de usar las imágenes como fondo e ir desplazando la posición del mismo cada cierto tiempo.

En este caso he definido  sólo dos tipos de movimientos pero es posible definir todos los estados que uno desee y generar los movimientos en la dirección que se deseen.

Mensaje de espera al enviar formularios con PHP

Supongamos que tenemos un formulario en PHP y que el procesamiento de los datos del mismo puede ser lento, en este caso es importe que los usuarios sepan que se está realizando el proceso y que deben esperar por esto. Para ello vamos a ver como mostrar un cuadro de espera.

Lo que vamos a hacer es crear dos archivos PHP que en este caso voy a llamar formulario.php, donde se encontrará el formulario, y procesar_formulario.php que será el archivo que será llamado a través de AJAX, mientras este se procese aparecerá un cudro de en espera.

El primero de ellos tendrá el formulario y su contenido es el siguiente:

  <html>
    <head>

     
      <!-- Estilo para el cuadro de espera -->
      <style>           
        .waiting {
          width:210px;
          height:35px;
          position:absolute;
          left:50%;
          top:50%;
          margin:-100px 0 0 -150px;
          border-radius: 10px;
          border: 1px solid #cccccc;
          background-color: white;
          padding: 5px;   
          display:none;
        }
      </style>       

      
     
       <!-- Librerías de jquery -->
       <script type="text/javascript" language="javascript" 
                                     src="jquery-1.11.0.min.js"></script>

      <script>       // Función para recolocar el cuadro de espera en función del
       // tamaño del navegador
        $(window).resize(function() {
          $('.waiting').css({
            position: 'absolute',
            left: ($(window).width() - $('.waiting').outerWidth()) / 2,
            top: ($(window).height() - $('.waiting').outerHeight()) / 2
            });
        });

        // Ejecutar el resize una primera vez
        $(window).resize();

        // Función que va a enviar el formulario
        function enviarFormulario() {
          try
          {
            // Parámetros que se van a pasar
            var datos = {
              "nombre": document.getElementById("nombre").value,
              "apellidos": document.getElementById("apellidos").value
            };
           
            // Función de jquery que ejecuta la petición ajax
            $.ajax({
              data: datos,
              url: 'procesar_formulario.php',
              type: 'post',
              beforeSend: function() {                
                // Mostrar la pantalla de procesando antes de realizar la llamada
                document.getElementById("waiting").style = "display:block";
              },
              success: function(respuesta) {
                // Si se realiza con éxito la llamada entonces
                // se muestra el resultado de la misma y 
                // se oculta el cuadro de espera
                $("#respuesta_ajax").html(respuesta);
                document.getElementById("waiting").style = "display:none";
              }
            });
          }
          catch (err)
          {
            alert(err);
          }
        }
      </script>
    </head>

    <body>



      <!-- Cuadro de espera -->
      <div id="waiting" class="waiting" >
        <div style="float:left">
          <!-- Imagen animada. Podeis generar las vuestras en 
               http://www.ajaxload.info/-->
          <img src="ajax-loader.gif" align="middle"/>
        </div>
        <div style="float:left; padding-top:5px;padding-left: 15px;
          font-weight: bold;">Procesando  petici&oacute;n ....</div>
      </div>    


      <!-- Div para mostrar el resultado de la petición ajax -->
      <div id="respuesta_ajax"></div>

      <!-- Formulario --> 
      <form>
        <div style="display:table-row">
          <div style="display: table-cell">Nombre:</div>
          <div style="display: table-cell"><input type="text" id="nombre"/></div>
        </div>

        <div style="display:table-row">
          <div style="display: table-cell">Apellidos:</div>
          <div style="display: table-cell"><input type="text" id="apellidos"/>
          </div>
        </div>       

        <div>
          <input type="button" value="Enviar Datos" onclick="enviarFormulario();">
        </div>

      </form>
    </body>
  </html>

El segundo es el que procesará los datos del formulario:

<?php

  // Esperar 20 segundos (para que se muestre bien el cuadro de en espera)
  sleep(20);
  // Leer los datos del formulario y mostrarlos
  echo htmlspecialchars($_POST['nombre']).' '
        .htmlspecialchars($_POST['apellidos']);
?> 

Con esto ya tenemos un formulario con un mensaje de espera en su procesamiento.