Mis primeros pasos en Programación Android (Hello World y algo más)

Ahora si amigos nos llego la hora de agregar algo de sabor a estos tutoriales de desarrollo.  Para poder completar este tutorial es necesario haber leído e implementado los dos anteriores.  Les dejo los enlaces para que hagan referencia a ellos .

1. Mis primeros pasos en Programación Android
2. Mis primeros pasos en Programación Android (Mi Primer Hello World!)

Para comenzar con este tutorial debemos abrir eclipse y localizar la app que creamos en Mis primeros pasos en Programación Android (Mi Primer Hello World!).  Lo que vamos hacer con la app es agregar varios controles y le vamos a asociar algunos eventos en código java.  
Cuando tengamos eclipse abierto vamos a buscar el “main.xml” que está dentro de  la carpeta “Lauout” de nuestro proyecto “HelloWorld” y le damos doble clic para modificar la misma .  Para referencia vea la imagen (1.1).

Imagen (1.1)

Una vez abierta la pantalla vamos a fijarnos en la parte derecha en donde están los controles que podemos agregar a nuestra pantalla.  Estando ahí buscamos un control que dice “Button” le damos un click y hacemos “drag and drop” a la pantalla.  Buscamos la propiedad de “Text”  y le ponemos “Click Me”.  En el LinearLayout buscamos la propiedad “Layout Width” y le ponemos  “fill_parent”. Luego seleccionamos el “TextView” buscamos la propiedad “ID” y le ponemos “@+id/txtHello”.  La pantalla debe quedar como en la imagen(1.2)


Imagen(1.2)



Luego de hacer lo anterior nuestro próximo paso es agregar el código java para que el botón haga lo necesario.  Lo que buscamos que el botón haga es que cuando lo presionen cambie el texto de “TextView” por el que queramos poner.  
Ahora vamos a buscar el la clase de java “helloworld.java” el cual está localizada el directorio “src” del proyecto. Ver la imagen (1.3) para referencia. 

Imagen (1.3)

Luego de haberlo localizado la clase le damos doble click y la pantalla se debe ver como la imagen(1.4)

Imagen(1.4)

Como vemos en la imagen(1.4) , la pantalla muestra el código java que se va a ejecutar cuando la aplicación se activa.  Ahora llego el momento de la acción en android.  Vamos a agregar unas series de líneas de código.  Si vemos la imagen(1.5) vemos las líneas que vamos a agregar.   Si vemos la imagen(1.5) vemos que le agregamos unas librerías que necesitamos importar :
import android.app.Activity;
import android.os.Bundle; -
import android.view.View;
import android.widget.Button; - Manipular el element boton.
import android.widget.TextView; - Manipular el element textview.

También  se le agregaron las variables de los controles que agregamos:
Button btnClickme;
TextView txthello;


Y por último en el evento onCreate le agregamos el código para capturar el evento click del botón y cambiar el texto del “textview”:
 btnClickme =   (Button) this
.findViewById(R.id.button1);
       
       txthello = (TextView) this.findViewById(R.id.txtHello);
       
       btnClickme.setOnClickListener(new View.OnClickListener() {
public void onClick(View arg0) {

txthello.setText("El Texto Que Quieras en TextView");
}
});

El código al final debe verse como en la imagen(1.5).  Una vez completado los cambios lo que nos resta es darle debug para ver si funciona.  En la imagen(1.6) muestra la aplicación ejecutada y luego del click el text cambiado.  Después de esto amigos lo que nos resta es por nosotros mismos ir agregando más controles y alternativas a la app.  Pueden publicar en el post como les va.  Cualquier duda o pregunta se pueden comunicar conmigo a wascar@yosoyandroid.com o pueden escribir en los comentarios.


Imagen(1.5)



Imagen(1.6)

Mis primeros pasos en Programación Android (Mi Primer Hello World!)

Como en todo entorno de desarrollo siempre hay un “HelloWorld” app.  Pues Android no es la excepción.  Como parte de los tutoriales de YoSoyAndroid en el área de desarrollo vamos a crear nuestra primera app denominada “HelloWorld”.
 Para poder dar comienzo a este tutorial es necesario a ver leído el anterior  el cual se puedes ver aquí.  Para comenzar debemos abrir Eclipse. Una vez eclipse esté disponible para trabajar vamos a la barra de herramientas y presionamos el botón que está marcado con el recuadro que está en la imagen (1.1).
Imagen (1.1)

El botón va a activar una pantalla en la cual vamos a crear nuestro primer proyecto en Android  “HelloWorld”. La pantalla tiene una serie de campos que vamos a llenar según la imagen (1.2) y (1.3)
Imagen (1.2)

Imagen (1.3)

Una vez completemos  oprimimos el botón de “Finish”. Cuando se oprima el botón nuestro eclipse debe quedar como en la imagen (1.4)

Imagen (1.4)

En la mano izquierda vemos el explorador del proyecto.  El explorador despliega todos los archivos que pertenece n a dicho proyecto.  En el explorador de proyecto vamos a buscar el directorio “layout” el cual está dentro del directorio “res” y le damos dos clicks al archivo “main.xml”.  Una vez le demos doble click la pantalla de eclipse  se verá como en la imagen (1.5).

Imagen(1.5)

En la imagen(1.5) vemos más opciones.  

Imagen(1.5)

Ahora que conocemos un poco más nuestra pantalla  vamos a editar el texto que dice “Hello World, helloworldmain!” y le vamos a poner lo queramos.  Para hacer el cambios necesitamos la pantalla de propiedades. Para poder verla vamos a al menú Windows-> Show View ->Others->el Folder de General y seleccionamos “properties” y ok. Una vez vemos el tab de propiedades seleccionamos el texto que dice “Hello World, helloworldmain!” y buscamos en las propiedad la que dice “Text” la cual tiene como valor “@string/hello”.  Estando ahí remplazamos por lo que queramos que diga.  En la imagen (1.6) pueden ver el tab de propiedades y la propiedad “Text”

Imagen (1.6)

Ya tenemos nuestra app lista para ejecutarla.  Para poder ver nuestra app en acción es necesario crear un emulador de Android.  Para crear el emulador buscamos el icono como el que está marcado en la imagen( 1.7).

Imagen (1.7)

Luego va a parecer una pantalla como en la (Imagen 1.8).

Imagen (1.8)

En la pantalla de “Andoid SDK and AVD Manager” imagen( 1.8) seleccionamos “Virtual deivices” y oprimimos el botón de “New…”. Cuando oprimamos el botón nos saldrá una pantalla como en la imagen (1.9) y vamos a llenarla  tal y como aparece en la imagen. Una vez la llenemos la damos al botón de “Create AVD”.  Una vez creada le damos al botón de “Start”. Que está ubicado en la imagen (1.8) a la derecha. Luego aparecerá una pantalla a la cual le damos “Launch” sin marcar ninguna opción.

Imagen (1.9)

Cuando suba el emulador debe verse como en la Imagen (2.0). Una vez este el emulador arriba podemos probar nuestra app.  Para probarla solo tenemos que paranos enciema del projecto dar un click derecho e ir a la opción que dice “debug as” y seleccionamos “Android  Application”. Como referencia puede ver la imagen (2.1).


Imagen (2.0)

Imagen (2.1)
Una vez nuestra app se compile y suba la veremos en nuestro emulador como aparece en la imagen (2.2) .  Ya con esto lo que nos resta es ponernos creativos y empezar a agregar controles y acciones.  Si te gustan las aventuras puedes agregar un botón y cambiar el texto. Si tienen preguntas me pueden contactar a través de wascar@yosoyandroid.com o en mi twitter @mrwass.  Espero que les sea útil para comenzar con el desarrollo de app para android.

Imagen (2.2)

Mis primeros pasos en Programación Android (Preparar ambiente de desarrollo)

¿Te gustaría poder hacer una aplicación para Android? Si la respuesta es si, esto es lo que deberías hacer.  Como muchos sistemas operativos para móviles como lo son IOS, WebOS, Blackberry OS entre otros ofrecen un SDK(Software Development Kit).  Un SDK es un conjunto de herramientas y programas de desarrollo que permite al programador crear aplicaciones para un determinado paquete de software, estructura de software, plataforma de hardware, sistema de computadora, consulta de videojuego, sistema operativo o similar.  Pero bien ya se acabaron las explicaciones cursis.  Lo primero que tienes hacer.  Para poder hacer una app nativa necesitas de una herramienta llamada Eclipse. Para Instalar Eclipse en tu PC o Mac debes seguir los siguientes pasos
Visita la web de Eclipse, y descarga la última versión. La que le recomiendo es la que dice “Eclipse IDE for Java EE Developers”.
Descomprime el archivo en el lugar donde quieras instalarlo. Entra en el directorio donde lo descomprimes y busca un directorio llamado eclipse y da doble clic en  eclipse.exe  ejecutar. La primera vez que arranques, te pedirá que le indiques un directorio donde colocar tu espacio de trabajo (workspace). Selecciona la ruta que quieras, que es donde se guardarán tus proyectos.

 
Para instalar el SDK de Android en eclipse tienes que hacer lo siguiente.
En  Eclipse, selecciona Software Updates, en el menú Help. Aparecerá una ventana de addons.
Haz click en Available Software en la parte superior.
En la parte derecha, haz click en Add Site.
En la ventana que aparece, introduce alguna de estas dos direcciones (a mí, la https me daba siempre error):



https://dl-ssl.google.com/android/eclipse/
La dirección que entraste aparecerá ahora en la lista de software disponible. Selecciona Android DDMS y Android Developers Tools y pulsa Install para instalarlos. Acepta la licencia de uso.

Una vez finalizada la instalación, dele restart a Eclipse.
Una vez reiniciado, debemos configurar Eclipse para que acceda al SDK de Android ya instalado. Abre el menú Window y selecciona Preferences. En el apartado Android, en SDK Location debemos introducir la ruta donde hemos descomprimido el SDK de Android.
Presiona Ok para cerrar la ventana de preferencias. Con eso ya tienes el SDK de Android listo para hacer tu primera app

Nuevos métodos de pago para android

Hace unas semanas el equipo de Google añadió nuevos métodos de pagos al mercado androide.  Por los cuales ahora puedes pagar tus app a través de Visa, cuenta de AT&T, cuenta de T-Mobile, MasterCard, AmericanExpress y Discover. 

En adición a esto también ahí buenas noticias para los desarrolladores aumentado a 50MB el tamaño maximo para las aplicaciones.  Con esto se puede hacer app mas completas y con gráficos impresionantes.

Capture ASP.NET Update Panel Begin Request and End Request

This time I explain the possibility to call some javascript code when update panel execute a request. This code get the begin request and end request events.

Instance of scriptmanager in asp.net

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>

Put this code in javascript file or page with script tag's.

Script tag:

<script language="javascript"> //Code Here </script>

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandle);

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandle);


function beginRequestHandle(sender, Args){
//some code here
alert('Begin Request');

}





function endRequestHandle(sender, Args){

//  some code here
alert('End Request');
}

other events:

• initializeRequest: This event is before begin postback.
• pageloading: Execute after the last postback has been received but before the page is updated.
• pageLoaded: Execute after the regions of the page have been updated after the last postback

any suggestion leaves a comment.
good luck.

Best Way to Register jquery and other scripts in asp.net pages

This time I want to explain the best way to register scripts in asp.net pages using the script manager. If you need to know what is the script manager go to script manager Overview.
Here the code for register.

    <asp:ScriptManager ID="ScriptManager1" runat="server">
       <Scripts>
           <asp:ScriptReference Path="jquery/jquery-1.3.2.js" ScriptMode="Release" />
           <asp:ScriptReference Path="jquery/ui/ui.core.js" ScriptMode="Release" />
           <asp:ScriptReference Path="jquery/ui/ui.datepicker.js" ScriptMode="Release" />
           <asp:ScriptReference Path="jquery/jquery.jqURL.js" ScriptMode="Release" />
       </Scripts>
   </asp:ScriptManager>

Remeber put this code inside form tag.
any suggestion leaves a comment.
good luck.

How can I call a web service in asp.net from jquery

In this article we are going to show how I call web service in asp.net 2.0 and to return a xml document. After creating the service and returning the xml document we go to do the call using the jquery ajax. The code showed in this example is in vb.net.
This is the code of the web service.
You add a web service to your project that should be called Service.

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.Xml
Imports System.Data
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<System.Web.Script.Services.ScriptService()> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class Services
Inherits System.Web.Services.WebService

Dim xmlDoc As New XmlDocument
<Web.Services.WebMethod()> _
Public Function checkuser(Byval UserName as string, Byval Password as string) As XmlDocument
  Try
      xmlDoc = New XmlDocument
      Dim result As String = ""
              If UserName = "Pablo" and Password = "12345" then
                 result = "True"
              else
               result = "False"
              end if
  
      xmlDoc.LoadXml("<result val='" & result & "'>" & result & "</result>")
      Return xmlDoc
  Catch ex As Exception
      xmlDoc.LoadXml("<result val='False'>False</result>")
      Err.Clear()
      Return xmlDoc
  End Try

End Function

End Class

This is the code to call web service from jquery

function checkuser(){
var params = 'UserName=Pablo&Password=12345';
var doc;
var result = new Array();
var rtn;

$.ajax({
    type: "GET",
    url: "Services.asmx/CheckUserName",
    data: params,
    timeout: 30000,
    beforeSend: function(xhr){
        xhr.setRequestHeader("Content-Length", params.length);
    
    },
    dataType: "xml",
    complete: function(xhr, data){

        if (xhr.status == 200) {
        //este if verifica si el explorador puede utilizar el XMLDOM ActiveX
            if (window.ActiveXObject) {
                doc = new ActiveXObject("Microsoft.XMLDOM");
                doc.async = false;
                doc.loadXML(xhr.responseText);
            
                rtn = doc.text;
                result = rtn.split("_")
            
                if (result[0] == 'True') {
               
                    
                         alert('good validation');                   
                
                }
                else {
                    $('#lblmsg').html('Invalid User Name');
                }
            
            }
            else {
                var dat;
                dat = xhr.responseText;
                //si no soporta XMLDOM ActiveX utiliza un loop de jquery para localizar los valores dentro del documento xml
                $(xhr.responseXML).find("result").each(function(){
            
                    rtn = $(this).attr("val");
                    result = rtn.split("_")
                    if (result[0] == 'True') {
                                      
                       alert('good validation');                       
                    }
                    else {
                        $('#lblmsg').html('Invalid User Name');
                    
                    }
              
                });
            
            }
        }
    
        else {
    
            alert("Service Error!");
        }
    
        //alert(result)

    }

});

}

Now from any html or aspx page call the function checkuser. In this case I use html control to calling the function

    function btnCallService_onclick() {
checkuser()
}

</script>
<input id="btnCallService" type="Button" value="Call Service" onclick="return btnCallService_onclick()" />

any suggestion leaves a comment.
good luck