miércoles, 24 de diciembre de 2014

HTML y CSS desde cero - Atributos y comentarios

Que tal gente, en este segundo tutorial vamos a ver lo que son los atributos y como hacer comentarios en nuestro código.

Los atributos son propiedades que le ponemos a las etiquetas html, como por ejemplo:

<a href="http://ww.google.com">Ir a google</a>

Si se fijan arriba,  tenemos una etiqueta <a> </a>, y esta etiqueta tiene un atributo llamado href de color rojo, a este atributo le pusimos un valor que es lo que esta en color azul "http://ww.google.com".

Los atributos se ponen dentro de la etiqueta de apertura (inicio), primero se pone el nombre del atributo (href), después el signo igual (=) y por ultimo el valor entre comillas ("http://ww.google.com").

Si analizamos la linea anterior:
<a href="http://ww.google.com">Ir a google</a>
Esta etiqueta <a> </a> es para poner links en nuestra página, el atributo href  es para indicar alguna página web a donde vamos a dirigirnos, en esta caso "http://ww.google.com" y entre las etiquetas debemos poner el texto que querremos que se muestre en la página web, si nosotros hacemos click en ese texto que ponemos entre las etiquetas, nos dirigiremos a la pagina definida en el atributo href.

Esta etiqueta si la ejecutamos en el navegador, tendriamos algo como lo siguiente:
Ir a google
Vieron, solo se ve el texto que pusimos entre las etiquetas, pero si hacemos click nos llevara a la pagina que definimos con el atributo href

Existen muchos atributos, el cual los iremos viendo a medida que avanza el curso, en cada etiqueta podemos usar atributos diferentes, por ejemplo en la etiqueta <img></img> podemos usar el atributo src para indicar alguna ruta, pero ya veremos mas a fondo como usar estas etiquetas y estos atributos.

En pocas palabras, los atributos nos sirven para dar propiedades a las etiquetas.


Los comentarios sirven explicar partes de códigos que nosotros ponemos en nuestras paginas, solo son para nosotros los desarolladores y no para el usuario, el navegador no tendrá en cuenta los comentarios que nosotros ponemos al ejecutar la pagina, solo los ignora y no los muestra en la pagina, es decir no son códigos que el navegador ejecuta, simplemente son para explicar y entender mejor el código que nosotros escribimos. Bueno espero lo entiendan jaja.

Un comentario se vería de la siguiente manera:
<!-- Esto es un comentario y no se ejecutara -->

Para hacer un comentario siempre debes escribir estas 2 cosas:
<!-- inicio
--> cierre
y entre medio de ellas el comentario que quieras. Un comentario completo se vería de la siguiente manera:
<!-- Acá escribirás tu comentario -->

También puedes escribir comentarios de varias lineas, pero siempre entre <!-- -->. Un comentario de varias lineas se vería de la siguiente manera:
<!-- Esto es un comentario
de varias lineas
un saludo-->

Puedes poner tantos comentarios como quieras, en cualquier parte de tu código html.

Bueno gente, nos vemos en el siguiente tutorial, un saludo y feliz navidad a todos
Recuerden cualquier duda comentar, estoy aquí.

martes, 23 de diciembre de 2014

Java Swing básico - Área de texto con barras de desplazamientos (JTextArea y JScrollPane)

Bienvenidos una vez mas al curso, en este tutorial veremos como hacer un área de texto. Un área de texto o JTextArea en java, es un elemento que nos permite escribir múltiples lineas, tantas como quera el usuario, se ve de la siguiente manera:


El programa que haremos, tendrá un área de texto en toda nuestro programa. También agregaremos un JScrollPane que son las barras de desplazamiento vertical y horizontal:


import javax.swing.JFrame;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;


public class Ventana extends JFrame{

 public Ventana(){
  setTitle("JTextArea tutorial");//Titulo de la ventana
  setBounds(200,200,400,350);//Posicion y tamaño de la ventana: X, Y, Width, Height
  setResizable(false);//La ventana no se podra redimensionar
  setLayout(null);//Ningun layout, trabajaremos con coordenadas
  setDefaultCloseOperation(EXIT_ON_CLOSE);//Al cerrar la ventana se cerrara el proceso
  
  JTextArea textArea = new JTextArea();//Creamos el JTextArea
  JScrollPane scroll = new JScrollPane(textArea);//Creamos el JTextArea y le pasamos como parametro el textArea
  scroll.setBounds(0,0,395,323);//Posicionamos el JScrollPane "scroll"
  add(scroll);//Agregamos el scroll a la ventana
  
  setVisible(true);//Una vez creada la ventana, la hacemos visible
 }
 
 public static void main(String[] args) {
  new Ventana();
 }
}



Para usar el JTextArea (Area de texto) y el JScrollPane (Barras de desplazamiento) debemos importar lo siguiente, aparte de lo que ya sabemos:
import javax.swing.JScrollPane;
import javax.swing.JTextArea;

Para crear un JTextArea lo hacemos de la siguiente manera:
JTextArea textArea = new JTextArea();//Creamos el JTextArea

Si se fijan cuando creamos el JTextArea, no pusimos ninguna propiedad, como setBounds ni nada de eso.

Después debemos crear un JScrollPane y pasarle como parámetro el JTextArea que queremos que contenga las barras de desplazamiento, en este caso le pasamos textArea, que así es como se llama.
También le estamos poniendo una posición y tamaño y por ultimo lo agregamos a la ventana.
     JScrollPane scroll = new JScrollPane(textArea);//Creamos el JTextArea y le pasamos como parametro el textArea
     scroll.setBounds(0,0,395,323);//Posicionamos el JScrollPane "scroll"
     add(scroll);//Agregamos el scroll a la ventana

Una vez hecho esto, nos quedara de la siguiente manera:


Bueno gente, espero que el tutorial haya sido de su agrado, nos vemos en el siguiente.
Si les quedo alguna duda, no duden en comentar.

lunes, 22 de diciembre de 2014

Java Swing básico - Campos de textos (JTextField)

Bienvenidos a otro tutorial mas de Java Swing, en el que veremos como usar JTextField, este nuevo control visual nos permite poner un campo de texto, en el que el usuario podrá ingresar datos. Nosotros podemos obtener esos datos y hacer lo que queramos con ellos:


En este tutorial construiremos un pequeño programa que le pida el nombre al usuario y cuando pulse un botón, se obtendrán los valores del JTextField, osea el nombre del usuario y mostraremos ese nombre en un JLabel.


import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JTextField;


public class Ventana extends JFrame implements ActionListener{
 private JLabel labelNombre;
 private JTextField jtf;
 private JButton boton;
 public Ventana(){
  setTitle("Ventana java");//Titulo de la ventana
  setBounds(200,200,250,180);//Posicion y tamaño de la ventana: X, Y, Width, Height
  setResizable(false);//La ventana no se podra redimensionar
  setLayout(null);//Ningun layout, trabajaremos con coordenadas
  setDefaultCloseOperation(EXIT_ON_CLOSE);//Al cerrar la ventana se cerrara el proceso
  
  labelNombre = new JLabel();//Creamos el JLabel y no le pasamos nada como parametro
  labelNombre.setBounds(10,10,200,20);//Le ponemos una posicion
  add(labelNombre);//Lo agregamos a la ventana
  
  jtf = new JTextField();//Creamos un JTextField y no le pasamos nada como parametro
  jtf.setBounds(10,50,200,20);//Le ponemos una posicion
  add(jtf);//Lo agregamos a la ventana
  
  boton = new JButton("Listo");//Creamos un boton
  boton.setBounds(100,90,100,30);//Le ponemos una posicion
  boton.addActionListener(this);//Agregamos este boton al Listener
  add(boton);//Lo agregamos a la ventana
  
  setVisible(true);//Una vez creada la ventana, la hacemos visible
 }

 public void actionPerformed(ActionEvent e) {
  String valorTextField = jtf.getText();//Obtenemos el valor del JTextField "jtf"
  labelNombre.setText(valorTextField);//Cambiamos el valor del JLabel "labelNombre"
 }
 
 public static void main(String[] args) {
  new Ventana();
 }
}

Para usar JTextField tenemos que importar, aparte de lo que ya sabemos:
import javax.swing.JTextField;

Creamos 3 variables de clases:
        private JLabel labelNombre;
        private JTextField jtf;
        private JButton boton;

Para crear JTextField lo hacemos de la siguiente manera:
                jtf = new JTextField();//Creamos un JTextField y no le pasamos nada como parametro
  jtf.setBounds(10,50,200,20);//Le ponemos una posicion
  add(jtf);//Lo agregamos a la ventana

Cuando pulsemos sobre el botón, se ejecutara el método actionPerformed(), el cual sobrescribiremos:
public void actionPerformed(ActionEvent e) {
  String valorTextField = jtf.getText();//Obtenemos el valor del JTextField "jtf"
  labelNombre.setText(valorTextField);//Cambiamos el valor del JLabel "labelNombre"
 }
Si se fijan arriba, primero obtenemos el valor del JTextField con el método getText() y luego cambiamos el valor del JLabel con el método setText()

Si ejecutamos el siguiente código obtendremos algo como esto:


Algunos métodos útiles:

getText(); Con esto podemos obtener todo lo que haya escrito en el campo.

setText(); Con esto podemos cambiar el valor del mismo.

Hasta aquí el tutorial de hoy, los vemos en el próximo.
Recuerden comentar cualquier duda.


HTML y CSS desde cero - Sintaxis y etiquetas basicas

Bienvenidos al primer tutorial de HTML y CSS en el cual veremos la sintaxis de HTML y las etiquetas mas básicas del mismo.


Para empezar a escribir código, solo necesitamos un editor de texto cualquiera, recomiendo Sublime Text 3, y un navegador de internet, que creo que todos tenemos, el que yo usare sera Google chrome, teniendo eso es suficiente, ahora para empezar a escribir el código, tenemos que crear un archivo de texto con cualquier nombre, puede ser "Mi primer pagina web" y al final colocarle la extensión html, quedaría algo así:

Ahora procederemos a abrir este archivo, pero con editor de texto, como los antes mencionados.

Es aquí en donde empezamos a escribir nuestro código html.

Html es un lenguaje que usa etiquetas. Una etiqueta se vería de la siguiente manera:
<html> </html>

En html toda etiqueta que se abre debe cerrarse,
Para abrir una etiqueta lo hacemos así:
<html>
Y para cerrarla:
</html>

 Dentro de una etiqueta podemos contener mas etiquetas, un ejemplo:
<html>
          <body>
          </body>
</html>
Si se fijan bien, vemos que la etiqueta html contiene otra etiqueta dentro, llamada body.
Siempre hay que seguir estas reglas, si queremos contener una o varias etiquetas dentro de otra, debemos colocarlas entre las etiquetas de inicio y de cierre de la etiqueta contenedora, y así podemos contener tantas etiquetas como queramos dentro de otras, e incluso podemos contener etiquetas dentro de otras etiquetas contenidas por otras y así tantas como queramos:
Ejemplo:
Así seria de la manera correcta:
<html>
          <body>
                    <h1>
                    </h1>
          </body>
</html>
De manera incorrecta:
<html>
          <body>
                    <h1>
                    </h1>
</html>
          </body>


Lo primero que debemos hacer y siempre lo harás, es definir el tipo de documento:


Con esto estamos indicando que usaremos html en su versión 5, ultima versión de html.

Ahora debemos poner las siguientes etiquetas que son las mas basicas y siempre pondras:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

La primera etiqueta que pusimos: <!DOCTYPE html> es para definir el tipo de documento, osea le estamos diciendo que usaremos la versión 5(Última versión) de html.

Las etiquetas <html> </html> son las que contendrán todo el contenido de la web, es decir, entre estas etiquetas van todas las demás.

Las etiquetas <head> </head> o cabecera, contiene información de primera, es decir es lo primero que se carga al cargar el sitio web como puede ser codificación de caracteres que usaremos, enlazar scripts y estilos, también podemos colocar un titulo en la pestaña. Osea que no necesariamente es lo que se va a ver en pantalla, si no que son valores que configuramos para que todo valla bien.

Las etiquetas <body> </body> o cuerpo, contendrá todo el contenido visual de la web, es decir, es lo que va a ver el que entra a tu pagina.

Las etiquetas <title> </title> o titulo, me permiten poner un titulo, pero que solo sera visible en las pestañas del navegador.

Bueno gente, eso es todo por este tutorial, los espero en el siguiente, un saludo.
Cualquier duda comentar 

domingo, 21 de diciembre de 2014

HTML y CSS desde cero - Introduccion

Que tal gente, hoy me decidí por empezar un nuevo curso, el cual va dirigido para todas aquellas personas que quieran aprender Html y CSS desde cero, el curso sera rápido y sencillo de entender sin tantas complicaciones.

Hmtl por si no lo sabían, cosa que lo dudo ¿Por algo están acá no? jaja, es un lenguaje de marcado, o mas sencillamente, es un lenguaje en donde damos estructura a un sitio web, piensen como que es el esqueleto de la web. Html no es nada si no lo acompañamos con CSS, el cual es un lenguaje de diseño en el cual definimos los estilos de nuestra pagina web, osea HTML seria el esqueleto y CSS seria la parte elegante es decir la piel.
Cuando nosotros cargamos una web, estamos cargando el documento html ,que es interpretado por el navegador, y es lo que nos mostrara el mismo en pantalla, junto con los estilos CSS y todo eso.

En fin espero sigas este curso y te diviertas, un saludo.

viernes, 19 de diciembre de 2014

Java Swing básico - Múltiples botones y manejar eventos(JButton)

Que tal gente, en este tutorial vamos a ver como manejar eventos para varios botones.
Si se acuerdan en el tutorial anterior, habíamos agregado un boton, el cual al apretarlo cambiaba el valor de JLabel, que pasa si quisiéramos agregar otro boton que haga algo diferente, para hacerlo es demasiado sencillo, solo deberemos agregar unos condicionales if  a nuestro método que maneja los eventos (actionPerformed).

El programa tendrá 3 botones, si damos click en alguno de ellos, se cambiara el valor de un JLabel, dicho valor, dirá cual botón fue el que se pulso.


import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;


public class Ventana extends JFrame implements ActionListener{
 private JLabel label;
 private JButton boton1, boton2, boton3;
 
 public Ventana(){
  setTitle("JButton tutorial");//Titulo de la ventana
  setBounds(200,200,400,150);//Posicion y tamaño de la ventana: X, Y, Width, Height
  setResizable(false);//La ventana no se podra redimensionar
  setLayout(null);//Ningun layout, trabajaremos con coordenadas
  setDefaultCloseOperation(EXIT_ON_CLOSE);//Al cerrar la ventana se cerrara completamente
  
  label = new JLabel("Ningun boton se ha pulsado");//Creamos el label y le pasamos el nombre como parametro
  label.setBounds(10,10,200,20);//Lo posicionamos: X, Y, Width, Height
  add(label);//Agregamos el label a la ventana
  
  boton1 = new JButton("Boton 1");//Creamos el boton1
  boton1.setBounds(10,50,100,30);//Los posicionamos y le damos tamaño
  boton1.addActionListener(this);//Lo agregamos al Listener
  add(boton1);//Lo agregamos a la ventana
  
  boton2 = new JButton("Boton 2");//Creamos el boton2
  boton2.setBounds(130,50,100,30);//Los posicionamos y le damos tamaño
  boton2.addActionListener(this);//Lo agregamos al Listener
  add(boton2);//Lo agregamos a la ventana
  
  boton3 = new JButton("Boton 3");//Creamos el boton3
  boton3.setBounds(250,50,100,30);//Los posicionamos y le damos tamaño
  boton3.addActionListener(this);//Lo agregamos al Listener
  add(boton3);//Lo agregamos a la ventana
  
  setVisible(true);//Una vez creada la ventana, la hacemos visible
 }
 
 public void actionPerformed(ActionEvent e){
  if(e.getSource() == boton1){//Comprobamos si se pulso el boton1
   label.setText("Se ha pulsado el boton 1");//Cambiamos el valor del JLabel "label"
  }
  else if(e.getSource() == boton2){//Comprobamos si se pulso el boton2
   label.setText("Se ha pulsado el boton 2");//Cambiamos el valor del JLabel "label"
  }
  else{//Si no se pulso ninguno de los anteriores,entonces fue el 3
   label.setText("Se ha pulsado el boton 3");//Cambiamos el valor del JLabel "label"
  }
 }
 
 public static void main(String[] args) {
  Ventana v = new Ventana();
 }
}


Recuerden importar todo lo que usaremos.

Crearemos 4 variables de clases, 3 JButton y un JLabel:
        private JLabel label;
 private JButton boton1, boton2, boton3;


Tal como hicimos en el tutorial anterior, creamos el botón, lo posicionamos, le damos tamaño, lo agregamos al Listener y lo agregamos, como queremos agregar 3 botones, pues haremos este proceso 3 veces:
                boton1 = new JButton("Boton 1");//Creamos el boton1
  boton1.setBounds(10,50,100,30);//Los posicionamos y le damos tamaño
  boton1.addActionListener(this);//Lo agregamos al Listener
  add(boton1);//Lo agregamos a la ventana
  
  boton2 = new JButton("Boton 2");//Creamos el boton2
  boton2.setBounds(130,50,100,30);//Los posicionamos y le damos tamaño
  boton2.addActionListener(this);//Lo agregamos al Listener
  add(boton2);//Lo agregamos a la ventana
  
  boton3 = new JButton("Boton 3");//Creamos el boton3
  boton3.setBounds(250,50,100,30);//Los posicionamos y le damos tamaño
  boton3.addActionListener(this);//Lo agregamos al Listener
  add(boton3);//Lo agregamos a la ventana

Ahora llega la parte que queríamos. Para manejar varios botones deberemos modificar el método actionPerformed, deberemos agregar un condicional para cada caso:
if(e.getSource == boton1){/*Haremos esto*/}
e.getSource() obtiene el botón, y nosotros estamos comprobando, si el botón pulsado es el boton1 pues haremos algo:
public void actionPerformed(ActionEvent e){
  if(e.getSource() == boton1){//Comprobamos si se pulso el boton1
   label.setText("Se ha pulsado el boton 1");//Cambiamos el valor del JLabel "label"
  }
  else if(e.getSource() == boton2){//Comprobamos si se pulso el boton2
   label.setText("Se ha pulsado el boton 2");//Cambiamos el valor del JLabel "label"
  }
  else{//Si no se pulso ninguno de los anteriores,entonces fue el 3
   label.setText("Se ha pulsado el boton 3");//Cambiamos el valor del JLabel "label"
  }
 }

Si ejecutamos el código completo, deberíamos ver algo como esto:


Bueno gente, eso fue todo, los espero en el siguiente tutorial.

Cualquier duda comentar.

jueves, 18 de diciembre de 2014

Java Swing básico - Botones y eventos (JButton)

Bienvenidos una vez mas, en este tutorial vamos a ver como agregar botones a nuestros programas, y que reaccionen cuando pulsemos sobre ellos, este elemento es uno de los mas utilizados.

Un botón visualmente se vería de la siguiente manera:



Lo que haremos sera, que al pulsar sobre un botón, se cambie el valor de un JLabel, es decir el texto del mismo.


import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;


public class Ventana extends JFrame implements ActionListener{
 private JButton boton;
 private JLabel label;
 
 public Ventana(){
  setTitle("JButton tutorial");//Titulo de la ventana
  setBounds(200,200,250,150);//Posicion y tamaño de la ventana: X, Y, Width, Height
  setResizable(false);//La ventana no se podra redimensionar
  setLayout(null);//Ningun layout, trabajaremos con coordenadas
  setDefaultCloseOperation(EXIT_ON_CLOSE);//Al cerrar la ventana se cerrara el proceso
  
  label = new JLabel("El boton no se ha pulsado");//Creamos un JLabel
  label.setBounds(10,10,200,20);//Posicion del JLAbel: X, Y, Width, Height
  add(label);//Agregamos el JLabel a la ventana
  
  boton = new JButton("Cambiar texto");//Creamos el JButton
  boton.setBounds(10,50,130,30);//Posicion del JButton: X, Y, Width, Height
  boton.addActionListener(this);//Agregamos el boton al Listener para que reaccione a una accion, y le pasamos el Listener
  add(boton);//Agregamos el JButton a la ventana
  
  setVisible(true);//Una vez creada la ventana, la hacemos visible
 }
 

 public void actionPerformed(ActionEvent e) {
  label.setText("El boton se ha pulsado");//Cambiamos el valor del JLabel "label"
 }
 
 public static void main(String[] args) {
  new Ventana();
 }
}

Como siempre, antes que nada debemos importar lo que vamos a usar, en este tutorial usaremos, ademas de lo que ya hemos visto los JButton y los eventos para los mismos.
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;

Debemos hacer que la clase implemente de ActionListener, el cual nos provee un método (actionPerformed), que es el método encargado de manejar los eventos.
public class Ventana extends JFrame implements ActionListener{

Luego de esto debemos crear 2 variables de clase sin inicializar, una de tipo JButton y otra JLabel.
private JButton boton;
private JLabel label;

No explico lo demás, ya que lo explique en tutoriales anteriores, y doy por hecho que ya lo sabes hacer.
Después en el constructor inicializaremos las variables previamente creadas.
Al igual que en tutoriales anteriores:
Primero creábamos un JLabel, le colocamos una posición y un tamaño, y lo agregamos a la ventana, bueno acá es lo mismo, solo que antes de agregarlo, tenemos que hacer un paso extra, tenemos que añadir el botón al Listener para que el mismo realice una acción que nosotros mismos creamos.
  boton = new JButton("Cambiar texto");//Creamos el JButton
  boton.setBounds(10,50,130,30);//Posicion del JButton: X, Y, Width, Height
  boton.addActionListener(this);//Agregamos el boton al Listener para que reaccione a una accion, y le pasamos el Listener
  add(boton);//Agregamos el JButton a la ventana

Si se acuerdan, habíamos implementado la interface ActionListener, que nos proveía un método el cual se llama actionPerformed. Este método se llamara cada vez que pulsemos sobre un botón que se haya agregado el Listener, Obligatoriamente deberemos escribir este método (actionPerformed):
Si miramos el método, veremos que adentro de los bloques del mismo, escribimos lo que hará el botón una vez lo pulsemos, en este caso, le cambiamos el valor al JLabel:
public void actionPerformed(ActionEvent e) {
  label.setText("El boton se ha pulsado");//Cambiamos el valor del JLabel "label"
 }

si ejecutamos el código, obtendríamos algo como lo siguiente:


Algunos métodos útiles:

setText("Nombre visual del botón");  Este método me permite cambiar el nombre del botón, le pasamos como parámetro el nombre.

setEnabled(false); Con este método podremos activar o desactivar el botón, según los convenga.

Bueno terminamos con este tutorial, en el siguiente tutorial veremos como añadir múltiples botones, y que cada uno haga algo diferente.

Cualquier duda, no te olvides de comentar.

miércoles, 17 de diciembre de 2014

Java Swing básico - Mostrar texto (JLabel)

En este tutorial vamos a ver un elemento muy basico y a la vez muy usado a la hora de crear interfaces de usuario.
El JLabel, básicamente es texto que vemos en pantalla, puede ser que mostramos algún nombre, o algo para indicarle al usuario, como por ejemplo:



Para crear un JLabel, tendremos que tener una ventana en donde poder visualizar dicho elemento.


import javax.swing.JFrame;
import javax.swing.JLabel;


public class Ventana extends JFrame{
 
 public Ventana(){
  setTitle("JLabel tutorial");//Titulo de la ventana
  setBounds(200,200,400,400);//Posicion y tamaño de la ventana: X, Y, Width, Height
  setResizable(false);//La ventana no se podra redimensionar
  setLayout(null);//Ningun layout, trabajaremos con coordenadas
  setDefaultCloseOperation(EXIT_ON_CLOSE);//Al cerrar la ventana se cerrara el proceso
  
  JLabel label = new JLabel("Version 1.0");//Creamos el label y le pasamos el nombre como parametro
  label.setBounds(150,150,200,20);//Lo posicionamos: X, Y, Width, Height
  add(label);//Agregamos el label a la ventana
  
  setVisible(true);//Una vez creada la ventana, la hacemos visible
 }
 
 public static void main(String[] args) {
  new Ventana();
 }
}



Para crear el JLabel lo hacemos de la siguiente manera:

Para poder usar un JLabel, obligatoriamente tenemos que importar:
import javax.swing.JLabel;

Luego creamos el objeto JLabel, el cual al crearlo recibe un parámetro, que es el nombre que se vera en nuestro programa:
JLabel label = new JLabel("Version 1.0");

Luego con setBounds() le damos posición y tamaño, esta función recibe 4 parametros:
1) Posicion en X
2) Posicion en Y
3) Ancho del elemento
4) Alto del elemento
NOTA: La coordenada X se extiende hacia la derecha y la la coordenada Y hacia abajo.
label.setBounds(150,150,200,20);

Ahí tenemos el JLabel creado, con su tamaño y posición, pero ahora debemos agregarlo a una ventana, para ello debemos llamar un método de la clase JFrame, add() que nos permitirá agregar cualquier componente Swing, como botones, JLabel, área de textos etc.
add(label);

Si ejecutamos el código obtendremos algo como esto



Algunos métodos útiles:

label.setText("Texto actualizado"); Con esto podemos cambiar el texto de un JLabel.

Bueno eso fue todo, nos vemos en el siguiente tutorial.
Cualquier duda, comentar. Soy bastante activo.

martes, 16 de diciembre de 2014

Java Swing básico - Introducción a Swing

Bienvenidos al curso básico de swing aquí en la web.
Swing es un paquete de librerías de Java que nos permite crear interfaces gráficas(GUI).
En este curso veremos los elementos mas usados para crear nuestras interfaces gráficas.
También voy a crear otro curso mas avanzado de swing, donde tocaremos temas mas complejos.
Espero y les guste el curso :)

Empieza aquí el curso

Java Swing básico - Crear una ventana (JFrame)

Hola gente, en este primer tutorial, crearemos una ventana y veremos algunos métodos que podemos usar para crear y modificar nuestra ventana.
import javax.swing.JFrame;


public class Ventana extends JFrame{
 
 public Ventana(){
  setTitle("Ventana java");//Titulo de la ventana
  setBounds(200,200,400,400);//Posicion y tamaño de la ventana: X, Y, Width, Height
  setResizable(false);//La ventana no se podra redimensionar
  setLayout(null);//Ningun layout, trabajaremos con coordenadas
  setDefaultCloseOperation(EXIT_ON_CLOSE);//Al cerrar la ventana se cerrara el proceso
  setVisible(true);//Una vez creada la ventana, la hacemos visible
 }
 
 public static void main(String[] args) {
  new Ventana();
 }
}



Si ejecutamos este código obtendremos algo como esto:



setTitle: Le colocamos un titulo a nuestra ventana en la parte superior.

setBounds: Posicionamos y damos tamaño a la ventana, este método recibe 4 parámetros:
1) Posición en X de la ventana
2) Posición en Y de la ventana
3) El largo de la ventana
4) El ancho de la ventana
NOTA: El punto 0, 0 en java empieza de la esquina superior izquierda, osea que desde ahí se extienden las coordenadas:


La coordenada X se aumenta hacia la derecha, y la Y hacia abajo, este dibujo lo explica todo:



Osea que si agrego una ventana en la coordenada X=0 y Y=0 lo estaría poniendo en la esquina superior izquierda de la pantalla, es de ahí, donde crecen las coordenadas. Si quisiéramos la ventana mas a la izquierda, solo tendríamos que aumentar el valor de la X.

setResizable: Con este método, podemos hacer que la ventana no se pueda agrandar ni maximizar, si le pasmos false, no podremos agrandar ni maximizar, si le pasamos true, si lo podremos hacer.

setLayout: Con esto podemos elegir un layout(forma en la que se organizan los elementos), mas adelante veremos mas a profundidad cada uno de ellos, En este caso nosotros le pasamos null, osea que no usaremos ningún layout, eso significa que agregaremos lo componentes indicándoles coordenadas en X e Y.

setDefaultCloseOperation: Si no agregamos esta linea, al cerrar la ventana seguirá corriendo, para eso agregamos esta linea, para que se cierre completamente.

setVisible: Una vez tengamos la ventana hecha, con esto podemos hacer visible la ventana, ya que por default la ventana no se muestra. Si le pasamos true, mostraremos la ventana, y si le pasamos false, ocultaremos la ventana.

Eso es todo, nos vemos en el siguiente tutorial, un saludo.

Si algo no entendieron, díganmelo en los comentarios, soy bastante activo.