Oscar's Code

Usar UpdateProgress Para Cubrir La Pantalla

Oscar Martinez — Mon, 31 Oct 2011 13:00:55 +0000

Como mencione en otro post, AJAX es utilizado para hacer las paginas web mas interactivas y responsivas. Vimos que el control UpdatePanel es una manera fÃ¡cil de aÃ±adir funciones AJAX a una pagina web.

Pero hay ocasiones en que una operaciÃ³n no se puede completar muy rÃ¡pido, asÃ que para el usuario puede parecer como que nada esta pasando en la pagina.

ASP.NET ofrece el control UpdateProgress para mostrar contenido HTML al usuario mientras el navegador esta esperando que una operaciÃ³n AJAX termine.

Por favor observa que un control UpdateProgress puede ser asociado con un control UpdatePanel en especifico o puede ser disparado por cualquier UpdatePanel en la pagina.

Crea una AplicaciÃ³n Web ASP.NET.

Abre la pagina Default.aspx y copia el cÃ³digo siguiente.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="CoverScreen._Default" %>





    

    
    

    
        
            
        
    

    
        
            
            
                Loading...

Primero tenemos una secciÃ³n style. La clase overlay serÃ¡ utilizada para cubrir la pantalla con un div semitransparente. El div serÃ¡ hecho visible por el control UpdateProgress cuando sea necesario.

Para utilizar los controles UpdatePanel y UpdateProgress necesitamos agregar un control ScriptManager.

DespuÃ©s agregamos el UpdatePanel con un botÃ³n para disparar un postback asÃncrono.

Finalmente agregamos el control UpdateProgress. Este control tiene los elementos div que serÃ¡n hechos visibles cada vez que el botÃ³n sea presionado. El primer div cubrirÃ¡ toda la pantalla gracias al estilo que definimos anteriormente. DespuÃ©s mostramos otro div con un texto y una imagen en el centro de la pantalla.

Para la imagen cree un gif animado en http://ajaxload.info/.

En este ejemplo asociamos el UpdateProgress con el UpdatePanel explÃcitamente. Esto no es realmente necesario ya que solo tenemos un UpdatePanel en la pagina.

Ahora editemos el cÃ³digo detrÃ¡s.

using System;

namespace CoverScreen
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(3000);
        }
    }
}

Todo lo que hacemos aquÃ es pausar el subproceso (thread) por 3 segundos cuando el botÃ³n es presionado para que podamos ver el UpdateProgress en acciÃ³n.

Ejecuta el proyecto.

Haz clic en el botÃ³n.

El texto Loading y la imagen aparecerÃ¡n por 3 segundos.

Puedes descargar el cÃ³digo de este ejemplo aquÃ.

Por favor deja tus comentarios.

The post Usar UpdateProgress Para Cubrir La Pantalla first appeared on Oscar's Code.

Use UpdateProgress To Cover Screen

Oscar Martinez — Mon, 31 Oct 2011 13:00:33 +0000

As I mentioned in another post, AJAX is used to make web pages more interactive and responsive. We saw that the UpdatePanel control is an easy way of adding AJAX to a web page.

But there are times when an operation canâ€t be completed quickly, so to the user it might seem like nothing is going on.

ASP.NET offers the UpdateProgress control to show HTML content to the user while the browser is waiting for an AJAX operation to complete.

Please note that an UpdateProgress control can be associated to a specific UpdatePanel control, or it can be triggered by any UpdatePanel in the page.

Go ahead and create a new ASP.NET Web Application.

Open the Default.aspx page and copy the following code.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="CoverScreen._Default" %>





    

    
    

    
        
            
        
    

    
        
            
            
                Loading...

First, youâ€ll see a style section. The overlay class will be used to cover the screen with a semi-transparent div. That div will be made visible by the UpdateProgress control when necessary.

In order to use the UpdatePanel and UpdateProgress controls we need to add a ScriptManager control.

Then, we add the UpdatePanel with a button to trigger an asynchronous post-back.

Finally, we add the UpdateProgress control. This control has the div elements that will be made visible every time the button is clicked. The first div will cover the whole screen thanks to the style we defined earlier. Then, we show another div with some text and an image in the center of the screen.

For the image I created an animated gif on http://ajaxload.info/.

In this sample, we explicitly associated the UpdateProgress to the UpdatePanel. This is not really necessary since we only have one UpdatePanel in the page.

Now edit the code behind.

using System;

namespace CoverScreen
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(3000);
        }
    }
}

All we do here is to pause the thread for 3 seconds when the button is clicked so that we can see the UpdateProgress in action.

Run the project.

Click on the button.

The Loading text and image will appear for 3 seconds.

You can download the sample code here.

Please leave your comments.

The post Use UpdateProgress To Cover Screen first appeared on Oscar's Code.

Create Charts in ASP.NET

Oscar Martinez — Tue, 06 Sep 2011 13:00:49 +0000

The Microsoft Chart control allows us to easily create many types of charts in Windows applications and in ASP.NET applications.

If youâ€re using .NET 3.5 (Visual Studio 2008), you will need to download a separate installer from Microsoftâ€s download page. Optionally, you can also download an Add-on for Visual Studio 2008 that will add the Chart control to the Toolbox.

Starting with .NET 4 (Visual Studio 2010), the Microsoft Chart control is part of the framework. You donâ€t need to download anything else.

Create a new ASP.NET Web Application and add a reference to System.Web.DataVisualization.

If youâ€re using Visual Studio 2010 or if you installed the Add-on for Visual Studio 2008, youâ€ll see the Chart control in the Toolbox under the Data section.

Before you can start using the Chart control, you need to set up an http handler in the web.config for the path ChartImg.axd.

For .NET 3.5, add the following inside the section.

And hereâ€s the one for .NET 4.

This is how the browser will request the chart to the web server. If you donâ€t add this http handler to the web.config, youâ€ll get the following error.

Error executing child request for ChartImg.axd

To start using the Chart control in a page, youâ€ll need to register it first like this:

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

If you want to make the control available to all the pages in your application, you can register the Chart control in the web.config:

Change the assembly version if youâ€re using .NET 3.5.

Letâ€s add a couple of charts to a web page. Iâ€ll use the Default.aspx page.

<%@ Page Title="Chart Sample" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="ChartSample._Default" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

The first chart will be a column chart, and the second one will be a pie chart. Take a look at how we set the dimensions, the colors, and the titles and label formats. We also set up legends for the second chart.

We could also define the lists of points for our series here. But in this case, weâ€ll add the points in the code behind.

Letâ€s define the data weâ€ll use to populate the charts. Iâ€ll show you two types of data sources we can use to populate the points for the charts. Add a new class to the project and name it DataAccess.

For the first chart, weâ€ll use a DataTable to represent data from a database. For the second chart, weâ€ll use a collection of objects that would represent a model in our application.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;

namespace ChartSample
{
    public class DataAccess
    {
        public static DataTable GetSalesPerMonth()
        {
            DataTable dt = new DataTable();

            DataColumn col = new DataColumn();
            col.ColumnName = "Month";
            col.DataType = typeof(String);
            dt.Columns.Add(col);

            col = new DataColumn();
            col.ColumnName = "Sales";
            col.DataType = typeof(Decimal);
            dt.Columns.Add(col);

            DataRow row = dt.NewRow();
            row["Month"] = "July";
            row["Sales"] = 122000m;
            dt.Rows.Add(row);

            row = dt.NewRow();
            row["Month"] = "August";
            row["Sales"] = 96000m;
            dt.Rows.Add(row);

            row = dt.NewRow();
            row["Month"] = "September";
            row["Sales"] = 135000m;
            dt.Rows.Add(row);

            dt.AcceptChanges();

            return dt;
        }

        public static IEnumerable GetSalesByDepartment()
        {
            List sales = new List();

            Sale s = new Sale();
            s.Department = "Service";
            s.Sales = 35000m;
            sales.Add(s);

            s = new Sale();
            s.Department = "Stores";
            s.Sales = 60000m;
            sales.Add(s);

            s = new Sale();
            s.Department = "Internet";
            s.Sales = 40000m;
            sales.Add(s);

            return sales;
        }
    }

    public class Sale
    {
        public String Department { get; set; }
        public Decimal Sales { get; set; }
    }
}

In a real application, these methods would probably read data from a database, but to keep the sample simple, Iâ€ve hard coded some data. The first method returns a DataTable, while the second method returns a list of objects.

Now open the Default.aspx.cs file and add the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace ChartSample
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                BindCharts();
            }
        }

        private void BindCharts()
        {
            DataTable dt = DataAccess.GetSalesPerMonth();
            DataView data = new DataView(dt);
            Chart1.Series["Series1"].Points.DataBind(data, "Month", "Sales", "");

            IEnumerable data2= DataAccess.GetSalesByDepartment();
            Chart2.Series["Series1"].Points.DataBind(data2, "Department", "Sales", "");
        }
    }
}

A chart can have multiple series, and a series is nothing more that a collection of points. Each point has an X value and a Y value.

We could use a loop to add each point to the Points property. This would probably be the case if we were capturing the values from the user.

When we already have data from another source, such as a database, we simply use the DataBind method.

The first parameter is a IEnumerable collection, such as a List. This is why we canâ€t use the DataTable object directly and need to create a DataView object.

The second parameter is the name of the field or property for the X values, and the third parameter the field or property for the Y values.

Run the project.

Please leave your comments.

The post Create Charts in ASP.NET first appeared on Oscar's Code.

Crear Graficas en ASP.NET

Oscar Martinez — Tue, 06 Sep 2011 13:00:26 +0000

El control Chart (Grafica) nos permite crear fÃ¡cilmente muchos tipos de graficas en aplicaciones Windows y en aplicaciones ASP.NET.

Si estas usando .NET 3.5 (Visual Studio 2008), necesitaras descargar un instalador aparte de la pagina de descarga de Microsoft. Opcionalmente puedes descargar un Add-on para Visual Studio 2008 que agregara el control Chart al Cuadro de Herramientas.

Comenzando con .NET 4 (Visual Studio 2010), el control Microsoft Chart es parte del framework. No es necesario descargar nada mas.

Crea un nueva AplicaciÃ³n Web ASP.NET y agrega una referencia a System.Web.DataVisualization.

Si estas utilizando Visual Studio 2010 o si instalaste el Add-on para Visual Studio 2008, veras el control Chart en el Cuadro de Herramientas debajo de la secciÃ³n Datos.

Antes de poder utilizar el control Chart, es necesario establecer un manejador http (http handler) en el web.config para la ruta ChartImg.axd.

Para .NET 3.5, agrega lo siguiente dentro de la secciÃ³n .

Y aquÃ esta para .NET 4.

AsÃ es como el navegador solicitara la grafica del servidor . Si no agregas este manejador http al web.config, recibirÃ¡s el siguiente error.

Error al ejecutar la solicitud secundaria para ChartImg.axd

Para utilizar el control Chart en una pagina, necesitaras registrarlo primero asÃ:

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

Si quieres hacer el control disponible para todas la paginas en la aplicaciÃ³n, puedes registral el control Chart en el web.config:

Solo cambia la versiÃ³n si estas utilizando .NET 3.5.

Vamos a agregar un par de graficas a una pagina web. Utilizare la pagina Default.aspx.

<%@ Page Title="Chart Sample" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="ChartSample._Default" %>

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

La primera grafica serÃ¡ una grafica de columnas, y la segunda serÃ¡ una grafica circular, tambiÃ©n conocida como grafica de pastel. Observa como establecimos las dimensiones, los colores, los tÃtulos y formatos de etiquetas. TambiÃ©n establecimos un cuadro de leyendas para las segunda grafica.

TambiÃ©n podrÃamos definir las listas de puntos para nuestras series aquÃ. Pero en este caso, agregaremos los puntos con cÃ³digo.

Vamos a definir los datos que usaremos para poblar las graficas. Mostrare dos tipos de orÃgenes de datos que podemos utilizar para poblar los puntos de las graficas. Agrega una nueva clase al proyecto y nÃ³mbrala DataAccess.

Para la primer grafica, utilizaremos un DataTable para representar informaciÃ³n de una base de datos. Para la segunda grafica, usaremos una colecciÃ³n de objetos para representar un modelo en una aplicaciÃ³n.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;

namespace ChartSample
{
    public class DataAccess
    {
        public static DataTable GetSalesPerMonth()
        {
            DataTable dt = new DataTable();

            DataColumn col = new DataColumn();
            col.ColumnName = "Month";
            col.DataType = typeof(String);
            dt.Columns.Add(col);

            col = new DataColumn();
            col.ColumnName = "Sales";
            col.DataType = typeof(Decimal);
            dt.Columns.Add(col);

            DataRow row = dt.NewRow();
            row["Month"] = "July";
            row["Sales"] = 122000m;
            dt.Rows.Add(row);

            row = dt.NewRow();
            row["Month"] = "August";
            row["Sales"] = 96000m;
            dt.Rows.Add(row);

            row = dt.NewRow();
            row["Month"] = "September";
            row["Sales"] = 135000m;
            dt.Rows.Add(row);

            dt.AcceptChanges();

            return dt;
        }

        public static IEnumerable GetSalesByDepartment()
        {
            List sales = new List();

            Sale s = new Sale();
            s.Department = "Service";
            s.Sales = 35000m;
            sales.Add(s);

            s = new Sale();
            s.Department = "Stores";
            s.Sales = 60000m;
            sales.Add(s);

            s = new Sale();
            s.Department = "Internet";
            s.Sales = 40000m;
            sales.Add(s);

            return sales;
        }
    }

    public class Sale
    {
        public String Department { get; set; }
        public Decimal Sales { get; set; }
    }
}

En una aplicaciÃ³n real estos mÃ©todos probablemente leerÃan la informaciÃ³n de una base de datos, pero para mantener el ejemplo simple, he codificado la informaciÃ³n. El primer mÃ©todo retorna un objeto DataTable, mientras que el segundo retorna una lista de objetos.

Ahora abre el archivo Default.aspx.cs y agrega el cÃ³digo a continuaciÃ³n.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace ChartSample
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                BindCharts();
            }
        }

        private void BindCharts()
        {
            DataTable dt = DataAccess.GetSalesPerMonth();
            DataView data = new DataView(dt);
            Chart1.Series["Series1"].Points.DataBind(data, "Month", "Sales", "");

            IEnumerable data2= DataAccess.GetSalesByDepartment();
            Chart2.Series["Series1"].Points.DataBind(data2, "Department", "Sales", "");
        }
    }
}

Una grafica puede tener mÃºltiples series, y una serie no es mas que una colecciÃ³n de puntos. Cada punto tiene un valor X y un valor Y.

PodrÃamos utilizar un ciclo para aÃ±adir cada punto a la propiedad Points. Este podrÃa ser el caso si estuviÃ©ramos capturando los valores del usuario por ejemplo.

Cuando ya tenemos informaciÃ³n de otra fuente, como una base de datos, simplemente llamamos el mÃ©todo DataBind.

El primer parÃ¡metro es una colecciÃ³n IEnumerable, tal como List. Esta es la razÃ³n por la que no podemos utilizar el objeto DataTable directamente y necesitamos crear un objeto DataView.

El segundo parÃ¡metro es el nombre del campo o propiedad para los valores X, y el tercer parÃ¡metro es el campo o propiedad para los valores Y.

Ejecuta el proyecto.

Por favor deja tus comentarios.

The post Crear Graficas en ASP.NET first appeared on Oscar's Code.

Agregar jQuery a una Aplicación Web ASP.NET

Oscar Martinez — Mon, 01 Aug 2011 13:00:57 +0000

jQuery es la librerÃa AJAX por default cuando creas una nueva AplicaciÃ³n Web ASP.NET o AplicaciÃ³n Web ASP.NET MVC en Visual Studio 2010. Pero si tienes una aplicaciÃ³n web (Formularios Web) existente, necesitaras agregar manualmente jQuery a tu proyecto.

Abre Visual Studio o Visual Web Developer Express y abre una aplicaciÃ³n web. Yo he creado un proyecto nuevo y lo he nombrado jQuerySample.

Si aun no lo tienes, crea una carpeta nueva en tu proyecto (Clic derecho -> Agregar -> Nueva Carpeta) y nÃ³mbrala Scripts.

Descarga jQuery de la pagina de descarga. La versiÃ³n mas reciente es 1.6.2. Haz clic derecho en el vinculo Minified y elige Guardar Destino Como. Guarda el archivo jquery-1.6.2.min.js en la carpeta Scripts.

Puedes renombrar el archivo a jquery-min.js o jquery.js si prefieres un nombre corto. En este ejemplo yo no lo renombre.

Necesitaras incluir el nuevo archivo en el proyecto. Ve a Proyecto â€“> Ver todos los archivos o haz clic en el botÃ³n Mostrar todos los archivos en el Explorador de soluciones. Haz clic derecho en el archivo jquery-1.6.2.min.js y selecciona Incluir en el proyecto.

Ahora vamos a habilitar jQuery. Puedes habilitar jQuery en paginas especificas o en todas las paginas si estas utilizando una pagina Maestra (Master page).

Abre el archivo Site.Master y agrega la siguiente etiqueta script dentro de la etiqueta head.

Cuando la etiqueta head contiene runat=â€serverâ€, el atributo href de la etiqueta link es automÃ¡ticamente resuelto en tiempo de ejecuciÃ³n, pero el atributo src de la etiqueta script no lo es, asÃ que tenemos que utilizar la funciÃ³n ResolveUrl.

Si estas creando un sitio publico, tambiÃ©n podrÃas cargar jQuery de la CDN de Google con esta etiqueta.

Gracias a Encosia por este truco. La URL comienza con // para que funcione con http y https.

Vamos a crear un pequeÃ±o ejemplo similar al que creamos cuando introducimos la funciÃ³n $get.

Agrega un nuevo Formulario Web al proyecto o abre la pagina Default.aspx.

Agrega lo siguiente.

AquÃ mostramos dos elementos div, unos azul y uno verde, y un botÃ³n. Observa como uno de los div es ejecutado en el servidor.

Cuando el botÃ³n es presionado, este llama a la funciÃ³n changeColorAndSize.

La funciÃ³n $() toma un selector CSS y encuentra todos lo elementos que coinciden. En este caso utilizamos # para encontrar el elemento con una ID especifica. Para el div que es ejecutado en el servidor utilizamos la propiedad ClientID.

DespuÃ©s usamos la funciÃ³n css() para cambiar el estilo de un elemento.

Ejecuta el proyecto.

Haz clic en el botÃ³n.

El color y el tamaÃ±o de los elementos div cambiara.

Por favor deja un comentario si tienes alguna pregunta o sugerencia.

The post Agregar jQuery a una Aplicación Web ASP.NET first appeared on Oscar's Code.

Add jQuery to an ASP.NET Web Application

Oscar Martinez — Mon, 01 Aug 2011 13:00:02 +0000

jQuery is the default AJAX library when you create a new ASP.NET Web Application or ASP.NET MVC Web Application in Visual Studio 2010. But if you have an existing web application (Web Forms), youâ€ll need to manually add jQuery to your project.

Open Visual Studio or Visual Web Developer Express and open your web application. Iâ€ve created a new project named jQuerySample.

If you donâ€t have it yet, create a new folder in your project (Right-click -> Add -> New Folder) and name it Scripts.

Download jQuery from the download page. Current version is 1.6.2. Right-click on the Minified link and choose Save Target As. Save the jquery-1.6.2.min.js file to the Scripts folder.

You can rename the file to jquery-min.js or just jquery.js if you prefer a short name. I didnâ€t rename it in this sample.

Youâ€ll need to include the new file in the project. Go to Project â€“> View All Files or click on the Show All Files button in the Solution Explorer. Right-click the jquery-1.6.2.min.js file and select Include In Project.

Now letâ€s enable jQuery. You could enable jQuery in specific pages or in all pages if youâ€re using a Master page.

Open the Site.Master file and add the following script tag inside the head tag.

When the head tag runs on the server, the href attribute of the link tag is automatically resolved at runtime, but the src attribute of the script tag is not, so we need to use the ResolveUrl function.

If youâ€re creating a public website, you could also load jQuery from Googleâ€s CDN with this tag.

Thanks to Encosia for this tip. The URL starts with // so it works with both http and https.

Letâ€s create a little sample similar to the one we created when we introduced the $get function.

Add a new Web Form to the project or open the Default.aspx page.

Add the following.

Here, we display two div elements, a blue one and a green one, and a button. Notice how one of the div runs on the server.

When the button is clicked, it calls the changeColorAndSize function.

The $() function takes a CSS selector and finds all elements that match. In this case, we use # to find the element with a specific ID. For the div that run on the server we use the ClientID property.

Then we use the css() function to change an elementâ€s style.

Go ahead and run the project.

Click on the button.

The color and size of the two div elements will change.

Please leave a comment if you have a question or suggestion.

The post Add jQuery to an ASP.NET Web Application first appeared on Oscar's Code.

Una Introducción a JavaBeans

Oscar Martinez — Mon, 18 Jul 2011 13:00:45 +0000

Antes de examinar herramientas mas avanzadas de JSP, vamos a hablar un poco de lo que son JavaBeans.

Un JavaBean, algunas veces llamado simplemente bean, es una clase que cumple con dos reglas muy simples.

Incluye un constructor publico sin argumentos, tambiÃ©n conocido como constructor por default.
Provee mÃ©todos get, set, e is para las propiedades. El mÃ©todo is es usado en lugar del mÃ©todo get para propiedades booleanas.

Eso es todo.

En realidad la Ãºnica regla requerida es tener un constructor sin argumentos, pero una clase sin propiedades no es muy Ãºtil, verdad?

Algunas personas dicen que un JavaBean tambiÃ©n debe de implementar la interfaz Serializable. Esto no es realmente necesario, pero no es una mala idea, ademÃ¡s de que es muy fÃ¡cil de hacer.

Veamos la clase Product de nuestro ejemplo anterior.

package ServletSample.Business;

public class Product {
    private int id;
    private String name;
    private float price;

    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }

    public float getPrice() {
        return price;
    }
    public void setPrice(float price) {
        this.price = price;
    }

    public Product(){
        this.id = -1;
        this.name = "";
        this.price = 0f;
    }

    public Product(int id, String name, float price) {
        this.id = id;
        this.name = name;
        this.price = price;
    }

}

Esta clase es un JavaBean porque el primer constructor no toma ningÃºn argumento. TambiÃ©n defino mÃ©todos get y set para las propiedades. En este ejemplo, mis propiedades son Id, Name, y Price.

Nota sobre constructores: Si no defines ningÃºn constructor en tu clase, un constructor sin argumentos es asumido por el compilador. AsÃ que tambiÃ©n podrÃa definir mi clase asÃ, y seguirÃa siendo considerada un JavaBean.

package ServletSample.Business;

public class Product implements java.io.Serializable{
    private int id;
    private String name;
    private float price;

    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }

    public float getPrice() {
        return price;
    }
    public void setPrice(float price) {
        this.price = price;
    }

}

Observa que no hay ningÃºn constructor en esta ocasiÃ³n.

TambiÃ©n observa como el JavaBean es ahora serializable. La interfaz Serializable no requiere que implementos ningÃºn mÃ©todo.

En el siguiente post haremos algunas cosas interesantes con JavaBeans.

Por favor deja tu comentario si tienes alguna pregunta.

The post Una Introducción a JavaBeans first appeared on Oscar's Code.

An Introduction to JavaBeans

Oscar Martinez — Mon, 18 Jul 2011 13:00:20 +0000

Before we look into more advanced features of JSP, letâ€s talk about JavaBeans.

A JavaBean, sometimes just called bean, itâ€s a class that follows two simple rules.

Include a public zero-argument constructor, also known as default constructor.
Provide get, set, and is methods for properties. The is method is used instead of get for boolean properties.

Thatâ€s all.

Really the only required rule is to have a zero-argument constructor, but a class with no properties is not very useful, is it?

Some people say that a JavaBean must also implement the Serializable interface. This is not really necessary, but itâ€s not a bad idea, plus itâ€s pretty easy to do.

Letâ€s take a look at the Product class from our previous sample.

package ServletSample.Business;

public class Product {
    private int id;
    private String name;
    private float price;

    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }

    public float getPrice() {
        return price;
    }
    public void setPrice(float price) {
        this.price = price;
    }

    public Product(){
        this.id = -1;
        this.name = "";
        this.price = 0f;
    }

    public Product(int id, String name, float price) {
        this.id = id;
        this.name = name;
        this.price = price;
    }

}

This class is a JavaBean because the first constructor doesnâ€t take any arguments. Also, I define get and set methods for the properties. In this example, my properties are Id, Name, and Price.

Note about constructors: If you donâ€t define any constructor in your class, a default constructor is assumed by the compiler. So I could define my class like this, and it would still be considered a JavaBean.

package ServletSample.Business;

public class Product implements java.io.Serializable {
    private int id;
    private String name;
    private float price;

    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }

    public float getPrice() {
        return price;
    }
    public void setPrice(float price) {
        this.price = price;
    }

}

Note thereâ€s no constructor this time.

Also note how the JavaBean is now serializable. The Serializable interface doesnâ€t require us to implement any method.

In the next post, weâ€ll do some interesting things with JavaBeans.

Please leave a comment if you have any question.

The post An Introduction to JavaBeans first appeared on Oscar's Code.

Introducción a MVC con Servlets y JSP

Oscar Martinez — Tue, 05 Jul 2011 13:00:57 +0000

Modelo-Vista-Controlador (MVC) es un patrÃ³n usado en ingenierÃa de software para separar la lÃ³gica de aplicaciÃ³n de la interfaz de usuario.

Como el nombre sugiere, el patrÃ³n MVC tiene tres capas. El modelo define la capa de negocios de la aplicaciÃ³n, la vista define la capa de presentaciÃ³n, y el controlador maneja el flujo de la aplicaciÃ³n.

Aunque el patrÃ³n MVC no es especifico a aplicaciones web, encaja muy bien en este tipo de aplicaciones. En aplicaciones web con Java, el modelo consiste de clases Java simples, la vista consiste de paginas JSP, y el controlador consiste de servlets.

Vamos a usar el ejemplo que hemos estado utilizando en los Ãºltimos dos posts. Si deseas crear un nuevo proyecto en NetBeans, necesitaras las dos clases de los Ãºltimos dos proyectos que representan la capa de negocios.

La primer clase es ServletSample.Business.Product.

package ServletSample.Business;

public class Product {
    private int id;
    private String name;
    private float price;

    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }

    public float getPrice() {
        return price;
    }
    public void setPrice(float price) {
        this.price = price;
    }

    public Product(){
        this.id = -1;
        this.name = "";
        this.price = 0f;
    }

    public Product(int id, String name, float price) {
        this.id = id;
        this.name = name;
        this.price = price;
    }

}

La segunda clase es ServletSample.Business.ProductService.

package ServletSample.Business;

import java.util.List;
import java.util.ArrayList;

public class ProductService {

    public List getProducts(){
        List products = new ArrayList();
        products.add(new Product(1,"HP Laptop",799f));
        products.add(new Product(2,"IBM Desktop",599f));
        products.add(new Product(3,"Cannon Printer",159f));
        return products;
    }

    public Product getProduct(int id) {
        Product product = null;
        switch(id)
        {
            case 1:
                product = new Product(1,"HP Laptop",799f);
                break;
            case 2:
                product = new Product(2,"IBM Desktop",599f);
                break;
            case 3:
                product = new Product(3,"Cannon Printer",159f);
                break;
        }
        return product;
    }
}

Ahora vamos a agregar un servlet al proyecto. Puedes referirte al post donde muestro como crear un servlet para los pasos correspondientes.

package ServletSample.Web;

import ServletSample.Business.ProductService;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ProductServlet extends HttpServlet {

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        ProductService service = new ProductService();
        String value = request.getParameter("id");
        if (value != null) {
            int id = Integer.parseInt(value);
            request.setAttribute("single_product", service.getProduct(id));
        } else {
            request.setAttribute("product_list", service.getProducts());
        }
        getServletConfig().getServletContext().getRequestDispatcher("/product.jsp").forward(request,response);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    } 

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

}

Este servlet es el controlador de nuestra pequeÃ±a aplicaciÃ³n.

Primero trata de leer un parÃ¡metro de la solicitud (request). Dependiendo de si el parÃ¡metro esta presente o no, obtiene uno o todos los productos del modelo (capa de negocios).

Una vez que obtiene los datos necesarios del modelo, guarda esta informaciÃ³n en la solicitud usando el mÃ©todo setAttribute.

Finalmente el controlador redirige la solicitud y la respuesta a una JSP, la vista de la aplicaciÃ³n. Para hacer esto, primero llamamos el mÃ©todo getRequestDispatcher para obtener un objeto RequestDispatcher con la ruta del JSP. DespuÃ©s llamamos el mÃ©todo forward de este objeto.

Si comparas este servlet con el que creamos en nuestro post anterior, notaras cuan mas pequeÃ±o y limpio es el nuevo servlet.

<%@ page contentType="text/html" pageEncoding="UTF-8"%>

<%@ page import="ServletSample.Business.Product" %>
<%@ page import="ServletSample.Business.ProductService" %>
<%@ page import="java.text.DecimalFormat" %>
<%@ page import="java.util.List" %>




    
        
        MVC Sample
    
    
        <%
        if (request.getAttribute("single_product") != null) {
            Product product = (Product)request.getAttribute("single_product");
        %>

        Product Details
        ID: <%= product.getId()%>
        Name: <%= product.getName()%>
        Price: $ <%= new DecimalFormat("#0.00").format(product.getPrice()) %>
        Go Back

        <% } else { %>

        Product List
        

            <% for (Product product : (List)request.getAttribute("product_list")) {%>

            
            <% }
          }%>

        
            
                    Name
                    Options
            

                <%= product.getName()%>
                Details...

Este JSP es la vista de la aplicaciÃ³n. Recibe toda la informaciÃ³n que necesita desde el controlador. No necesita llamar a la capa de negocio directamente.

Notaras que este JSP tiene menos cÃ³digo Java que el JSP de nuestro post anterior. Pero aun tenemos un poco de cÃ³digo Java en el JSP. Mostrare las herramientas que JSP tiene para deshacernos completamente de ese cÃ³digo en otro post.

Ejecuta el proyecto. Escribe product en la direcciÃ³n URL. La lista de productos aparecerÃ¡.

Observa como escribimos la direcciÃ³n URL del servlet, nuestro controlador, no la direcciÃ³n del JSP.

Haz clic en uno de los vÃnculos.

Los detalles del producto se muestran. Haz clic en el vinculo para regresar a la lista de productos.

Por favor deja tus comentarios o sugerencias.

The post Introducción a MVC con Servlets y JSP first appeared on Oscar's Code.

Introduction to MVC with Servlets and JSP

Oscar Martinez — Tue, 05 Jul 2011 13:00:39 +0000

Model-View-Controller (MVC) is a pattern used in software engineering to separate the application logic from the user interface.

As the name implies, the MVC pattern has three layers. The model defines the business layer of the application, the view defines the presentation layer of the application, and the controller manages the flow of the application.

Although the MVC pattern is not specific to web applications, it fits very well in this type of applications. In web applications with Java, the model consists of simple Java classes, the view consists of JSP pages, and the controller consists of servlets.

Letâ€s use the sample weâ€ve been working on for the last two posts. If you want to create a new project in NetBeans, youâ€ll need the two classes from the last two projects that represent the business layer.

The first class is ServletSample.Business.Product.

package ServletSample.Business;

public class Product {
    private int id;
    private String name;
    private float price;

    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }

    public float getPrice() {
        return price;
    }
    public void setPrice(float price) {
        this.price = price;
    }

    public Product(){
        this.id = -1;
        this.name = "";
        this.price = 0f;
    }

    public Product(int id, String name, float price) {
        this.id = id;
        this.name = name;
        this.price = price;
    }

}

The second class is ServletSample.Business.ProductService.

package ServletSample.Business;

import java.util.List;
import java.util.ArrayList;

public class ProductService {

    public List getProducts(){
        List products = new ArrayList();
        products.add(new Product(1,"HP Laptop",799f));
        products.add(new Product(2,"IBM Desktop",599f));
        products.add(new Product(3,"Cannon Printer",159f));
        return products;
    }

    public Product getProduct(int id) {
        Product product = null;
        switch(id)
        {
            case 1:
                product = new Product(1,"HP Laptop",799f);
                break;
            case 2:
                product = new Product(2,"IBM Desktop",599f);
                break;
            case 3:
                product = new Product(3,"Cannon Printer",159f);
                break;
        }
        return product;
    }
}

Now letâ€s add a servlet to the project. You can refer to the post where I showed how to create a servlet for the corresponding steps.

package ServletSample.Web;

import ServletSample.Business.ProductService;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ProductServlet extends HttpServlet {

    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        ProductService service = new ProductService();
        String value = request.getParameter("id");
        if (value != null) {
            int id = Integer.parseInt(value);
            request.setAttribute("single_product", service.getProduct(id));
        } else {
            request.setAttribute("product_list", service.getProducts());
        }
        getServletConfig().getServletContext().getRequestDispatcher("/product.jsp").forward(request,response);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    } 

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

}

This servlet is the controller of our little application.

First, it tries to read a parameter from the request. Depending on if thereâ€s a parameter or not, it gets a product or all of the products from the model (business layer).

Once it retrieved the necessary data from the model, it saves this data in the request using the setAttribute method.

Finally, the controller forwards the request and response objects to a JSP, the view of the application. To do this, we first call the getRequestDispatcher method to get a RequestDispatcher object with the path of the JSP. Then we call the forward method of this object.

If you compare this servlet with the one we created in our previous post, youâ€ll notice how much smaller and cleaner the new servlet is.

Now letâ€s create the JSP. You can refer to the post where I showed how to create a JSP for the corresponding steps.

<%@ page contentType="text/html" pageEncoding="UTF-8"%>

<%@ page import="ServletSample.Business.Product" %>
<%@ page import="ServletSample.Business.ProductService" %>
<%@ page import="java.text.DecimalFormat" %>
<%@ page import="java.util.List" %>




    
        
        MVC Sample
    
    
        <%
        if (request.getAttribute("single_product") != null) {
            Product product = (Product)request.getAttribute("single_product");
        %>

        Product Details
        ID: <%= product.getId()%>
        Name: <%= product.getName()%>
        Price: $ <%= new DecimalFormat("#0.00").format(product.getPrice()) %>
        Go Back

        <% } else { %>

        Product List
        

            <% for (Product product : (List)request.getAttribute("product_list")) {%>

            
            <% }
          }%>

        
            
                    Name
                    Options
            

                <%= product.getName()%>
                Details...

This JSP is the view of the application. It receives all the information it needs from the controller. It doesnâ€t need to call the business layer directly.

Youâ€ll notice that this JSP has less Java code than the JSP from our previous post. But thereâ€s still some Java code in the JSP. Iâ€ll show you the tools JSP has to get rid of that code in another post.

Go ahead and run the project. Type product in the URL. The Product List will appear.

Notice how we type the URL of the servlet, our controller, not the URL of the JSP.

Click on one of the links.

The product details are shown. Click on the link to go back to the product list.

Please leave your comments or suggestions.

The post Introduction to MVC with Servlets and JSP first appeared on Oscar's Code.