{"id":432,"date":"2018-11-06T18:02:58","date_gmt":"2018-11-06T18:02:58","guid":{"rendered":"http:\/\/www.profeluismitre.com.mx\/Ejemplos\/?page_id=432"},"modified":"2018-11-06T18:22:02","modified_gmt":"2018-11-06T18:22:02","slug":"imagenes-como-botones","status":"publish","type":"page","link":"https:\/\/profeluismitre.com.mx\/Ejemplos\/?page_id=432","title":{"rendered":"Im\u00e1genes Como Botones"},"content":{"rendered":"

.site {
\n background-color: #a1d87f;
\n}<\/p>\n

@Autor: Prof. Luis Mitre<\/p>\n

En Este Ejemplo pondremos im\u00e1genes como botones para utilizarlos como Men\u00fas<\/p>\n

 <\/p>\n

Paso 1.<\/strong> Creamos nuestro Proyecto (Solo para el Ejemplo recuerda que el c\u00f3digo lo puedes implementar donde tu lo necesites).<\/p>\n

Paso 2.<\/strong> Creamos nuestro Paquete (Puedes utilizar cualquier nombre).<\/p>\n

Paso 3.<\/strong> Creamos la Clase VentanaBotones, que es la cual contendra los iconos para convertirlos en Men\u00fas la cual debe de extiendes de JPanel.<\/p>\n

El C\u00f3digo de Esta clase quedar\u00eda de la siguiente manera:<\/p>\n

import java.awt.Color;\r\nimport java.awt.FlowLayout;\r\n\r\nimport javax.swing.ImageIcon;\r\nimport javax.swing.JButton;\r\nimport javax.swing.JPanel;\r\n\r\npublic class VentanaBotones extends JPanel{\r\n\t\/\/creamos los botones y en su constructor insertamos la imagen\r\n\tpublic JButton btnVentas=new JButton(new ImageIcon(\".\/imagenes\/ventas.png\"));\r\n\tpublic JButton btnNuevoUsuario=new JButton(new ImageIcon(\".\/imagenes\/usuario.png\"));\r\n\tpublic JButton btnAgregar=new JButton(new ImageIcon(\".\/imagenes\/agregar.png\"));\r\n\tpublic JButton btnInventario=new JButton(new ImageIcon(\".\/imagenes\/inventario.png\"));\r\n\tpublic JButton btnRegistrar=new JButton(new ImageIcon(\".\/imagenes\/registrar.png\"));\r\n\tpublic JButton btnConsultar=new JButton(new ImageIcon(\".\/imagenes\/consultar.png\"));\r\n\t\r\n\tpublic VentanaBotones(){\r\n\t\t\/\/establecemos el color que tendra de fondo el panel que en este caso es verde\r\n\t\tColor fondoBoton=new Color(0,255,0);\r\n\t\t\/\/agregamos el color al panel\r\n\t\tsetBackground(fondoBoton);\r\n\t\t\/\/estas variables nos ayudaran a dar el tama\u00f1o a los botones para que sean uniformes\r\n\t\tint tamanox=100;\r\n\t\tint tamanoy=100;\r\n\t\t\/\/agregamos los tama\u00f1os a los botones\r\n\t\tbtnAgregar.setSize(tamanox, tamanoy);\r\n\t\tbtnConsultar.setSize(tamanox, tamanoy);\r\n\t\tbtnInventario.setSize(tamanox, tamanoy);\r\n\t\tbtnNuevoUsuario.setSize(tamanox, tamanoy);\r\n\t\tbtnRegistrar.setSize(tamanox, tamanoy);\r\n\t\tbtnVentas.setSize(tamanox, tamanoy);\r\n\t\t\/\/acada boton lo modificamos\r\n\t\tbtnAgregar.setOpaque(true);\/\/ esto hace transparente el boton\r\n\t\tbtnAgregar.setBorder(null);\/\/con esto quitamos su borde\r\n\t\tbtnAgregar.setBackground(fondoBoton);\/\/agregamos el mismo fondo para que no se\r\n\t\t\t\t\t\t\t\t\t\t\t\/\/note donde empieza un boton y termina el otro\r\n\t\t\/\/con la siguiente propiedad agrega un mensaje cuando\r\n\t\t\/\/el cursor del mouse se posiciona encima del boton\r\n\t\tbtnAgregar.setToolTipText(\"Agregar mas Cantidad de Un Producto\");\r\n\t\t\r\n\t\t\/\/hacemos exactamente lo mismo para cada boton\r\n\t\tbtnConsultar.setOpaque(true);\r\n\t\tbtnConsultar.setBorder(null);\r\n\t\tbtnConsultar.setBackground(fondoBoton);\r\n\t\tbtnConsultar.setToolTipText(\"Consultar Productos\");\r\n\t\t\r\n\t\tbtnInventario.setOpaque(true);\r\n\t\tbtnInventario.setBorder(null);\r\n\t\tbtnInventario.setBackground(fondoBoton);\r\n\t\tbtnInventario.setToolTipText(\"Listado de todos los Productos\");\r\n\t\t\r\n\t\tbtnNuevoUsuario.setOpaque(true);\r\n\t\tbtnNuevoUsuario.setBorder(null);\r\n\t\tbtnNuevoUsuario.setBackground(fondoBoton);\r\n\t\tbtnNuevoUsuario.setToolTipText(\"Agregar Nuevo Usuario\");\r\n\t\t\r\n\t\tbtnRegistrar.setOpaque(true);\r\n\t\tbtnRegistrar.setBorder(null);\r\n\t\tbtnRegistrar.setBackground(fondoBoton);\r\n\t\tbtnRegistrar.setToolTipText(\"Registrar Nuevo Producto\");\r\n\t\t\r\n\t\tbtnVentas.setOpaque(true);\r\n\t\tbtnVentas.setBorder(null);\r\n\t\tbtnVentas.setBackground(fondoBoton);\r\n\t\tbtnVentas.setToolTipText(\"Ventas\");\r\n\t\t\/\/asignamos el gestor de posicion que en este caso es por flujo\r\n\t\tsetLayout(new FlowLayout());\r\n\t\t\/\/agregamos los botones al panel\r\n\t\tadd(btnConsultar);\r\n\t\tadd(btnInventario);\r\n\t\tadd(btnNuevoUsuario);\r\n\t\tadd(btnAgregar);\r\n\t\tadd(btnVentas);\r\n\t\tadd(btnRegistrar);\r\n\t}\r\n}<\/pre>\n
Nota: las im\u00e1genes se deben de poner en una carpeta llamada im\u00e1genes dentro del proyecto:<\/p>\n
\"\"<\/p>\n
Paso 4.<\/strong> Creamos nuestra clase VentanaPrincipal la cual extiende de un JFrame ya que esta es la que se visualiza y es la que recibe todas las ventanas.<\/p>\n
El c\u00f3digo de la clase quedar\u00eda de la siguiente manera:<\/p>\n
import java.awt.BorderLayout;\r\nimport java.awt.CardLayout;\r\nimport java.awt.Color;\r\nimport java.awt.FlowLayout;\r\nimport java.awt.Font;\r\nimport java.awt.event.ActionEvent;\r\nimport java.awt.event.ActionListener;\r\n\r\n\r\nimport javax.swing.JFrame;\r\nimport javax.swing.JLabel;\r\nimport javax.swing.JPanel;\r\n\r\npublic class VentanaPrincipal extends JFrame implements ActionListener{\r\n\t\/\/creamos el objeto del panel botones\r\n\tVentanaBotones pnlBotones=new VentanaBotones();\r\n\t\/\/creamos el panel que recibira todas las ventanas\r\n\tJPanel pnlCentral=new JPanel();\r\n\t\/\/creamos paneles de las ventanas que mostraremos\r\n\tJPanel pnlVentas=new JPanel();\r\n\tJPanel pnlNuevo=new JPanel();\r\n\tJPanel pnlAgregar=new JPanel();\r\n\tJPanel pnlInventario=new JPanel();\r\n\tJPanel pnlRegistrar=new JPanel();\r\n\tJPanel pnlConsular=new JPanel();\r\n\t\/\/creamos etiquetas para poner nombre a los paneles\r\n\tJLabel lblVentas=new JLabel(\"Panel Ventas\");\r\n\tJLabel lblNuevo=new JLabel(\"Panel Nuevo\");\r\n\tJLabel lblAgregar=new JLabel(\"Panel Agregar\");\r\n\tJLabel lblInventario=new JLabel(\"Panel Inventario\");\r\n\tJLabel lblRegistrar=new JLabel(\"Panel Registrar\");\r\n\tJLabel lblConsular=new JLabel(\"Panel Consultar\");\r\n\t\/\/creamos el objeto baraja que sera el que nos permita cambiar la ventana que se muestra\r\n\tCardLayout baraja=new CardLayout();\r\n\t\/\/creamos el tipo de letra para las etiquetas\r\n\tFont letraEtiquetas=new Font(\"Arial\",1,20);\r\n\t\r\n\t\/\/iniciamos nuestro constructor\r\n\tpublic VentanaPrincipal(){\r\n\t\t\/\/agregamos el gestor a la Ventana\r\n\t\tsetLayout(new BorderLayout());\r\n\t\t\/\/empesamos a construir todas las ventanas a mostrar\r\n\t\tpnlAgregar.setLayout(new FlowLayout());\/\/agregamos el layout\r\n\t\tpnlAgregar.add(lblAgregar);\/\/agregamos la etiqueta\r\n\t\tpnlAgregar.setBackground(new Color(255,0,0));\/\/agregamos fondo de color\r\n\t\t\/\/hacemos lo mismo con el resto de las ventanas\r\n\t\tpnlConsular.setLayout(new FlowLayout());\r\n\t\tpnlConsular.add(lblConsular);\r\n\t\tpnlConsular.setBackground(new Color(255,255,0));\r\n\t\tpnlInventario.setLayout(new FlowLayout());\r\n\t\tpnlInventario.add(lblInventario);\r\n\t\tpnlInventario.setBackground(new Color(255,0,255));\r\n\t\tpnlNuevo.setLayout(new FlowLayout());\r\n\t\tpnlNuevo.add(lblNuevo);\r\n\t\tpnlNuevo.setBackground(new Color(0,255,0));\r\n\t\tpnlRegistrar.setLayout(new FlowLayout());\r\n\t\tpnlRegistrar.add(lblRegistrar);\r\n\t\tpnlRegistrar.setBackground(new Color(0,0,255));\r\n\t\tpnlVentas.setLayout(new FlowLayout());\r\n\t\tpnlVentas.add(lblVentas);\r\n\t\tpnlVentas.setBackground(new Color(255,255,255));\r\n\t\t\r\n\t\t\/\/agregamos el gestor baraja al panel central\r\n\t\tpnlCentral.setLayout(baraja);\r\n\t\t\/\/agregamos cada panel ventana al central y le pones un nombre a cada ventana\r\n\t\tpnlCentral.add(pnlAgregar,\"agregar\");\r\n\t\tpnlCentral.add(pnlConsular,\"consultar\");\r\n\t\tpnlCentral.add(pnlInventario,\"inventario\");\r\n\t\tpnlCentral.add(pnlNuevo,\"nuevo\");\r\n\t\tpnlCentral.add(pnlRegistrar,\"registrar\");\r\n\t\tpnlCentral.add(pnlVentas,\"ventas\");\r\n\t\t\/\/agregamos el panel botones y el panel central a la ventana principal\r\n\t\tadd(pnlBotones,BorderLayout.NORTH);\r\n\t\tadd(pnlCentral,BorderLayout.CENTER);\r\n\t\t\/\/establecemos el tama\u00f1o de la ventana\r\n\t\tsetSize(500, 500);\r\n\t\t\/\/establecemos la accion a realizar cuando se cierre el frame\r\n\t\tsetDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);\r\n\t\t\/\/acemos visible la ventana\r\n\t\tsetVisible(true);\r\n\t\t\/\/le agregamos a cada uno de los botones el escuchadar de acciones\r\n\t\tpnlBotones.btnAgregar.addActionListener(this);\r\n\t\tpnlBotones.btnConsultar.addActionListener(this);\r\n\t\tpnlBotones.btnInventario.addActionListener(this);\r\n\t\tpnlBotones.btnNuevoUsuario.addActionListener(this);\r\n\t\tpnlBotones.btnRegistrar.addActionListener(this);\r\n\t\tpnlBotones.btnVentas.addActionListener(this);\r\n\t}\r\n\t\r\n\t\/**\r\n\t * en este metodo estableces que hara cada boton\r\n\t * que en este caso cada boton invocara a una ventana dentro\r\n\t * de la baraja\r\n\t *\/\r\n\tpublic void actionPerformed(ActionEvent evento) {\r\n\t\tif(evento.getSource()==pnlBotones.btnAgregar){\r\n\t\t\tbaraja.show(pnlCentral, \"agregar\");\r\n\t\t}else if(evento.getSource()==pnlBotones.btnConsultar){\r\n\t\t\tbaraja.show(pnlCentral, \"consultar\");\r\n\t\t}else if(evento.getSource()==pnlBotones.btnInventario){\r\n\t\t\tbaraja.show(pnlCentral, \"inventario\");\r\n\t\t}else if(evento.getSource()==pnlBotones.btnNuevoUsuario){\r\n\t\t\tbaraja.show(pnlCentral, \"nuevo\");\r\n\t\t}else if(evento.getSource()==pnlBotones.btnRegistrar){\r\n\t\t\tbaraja.show(pnlCentral, \"registrar\");\r\n\t\t}else if(evento.getSource()==pnlBotones.btnVentas){\r\n\t\t\tbaraja.show(pnlCentral, \"ventas\");\r\n\t\t}\r\n\t\t\r\n\t}\r\n}<\/pre>\n
Paso 5.<\/strong> por Ultimo creamos nuestra clase Auxiliar que es la cual ejecuta el programa, quedando de la siguiente manera:<\/p>\n
public class Auxiliar {\r\n\tpublic static void main(String[] args) {\r\n\t\t\/\/ creamos el objeto de nuestra ventana principal\r\n\t\tVentanaPrincipal objeto = new VentanaPrincipal();\r\n\t}\r\n}<\/pre>\n
Con esto terminamos deber\u00eda de quedar parecido a la siguiente imagen solo con las im\u00e1genes que tu decidas poner.<\/p>\n
\"\"<\/p>\n
Con esto tendr\u00edamos\u00a0una ventana con unos iconos como imagen, cabe recalcar que las im\u00e1genes\u00a0que utilices preferentemente sean en formato PNG, y que el tama\u00f1o sea aproximadamente de 72×72 Pixeles o dependiendo del tama\u00f1o que tu desees.<\/b><\/p>\n
Espero te sirva………<\/strong><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
.site { background-color: #a1d87f; } @Autor: Prof. Luis Mitre En Este Ejemplo pondremos im\u00e1genes como botones para utilizarlos como Men\u00fas   Paso 1. Creamos nuestro Proyecto (Solo para el Ejemplo recuerda que el c\u00f3digo lo puedes implementar donde tu lo necesites). Paso 2. Creamos nuestro Paquete (Puedes utilizar cualquier nombre). Paso 3. Creamos la Clase […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-432","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/profeluismitre.com.mx\/Ejemplos\/index.php?rest_route=\/wp\/v2\/pages\/432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/profeluismitre.com.mx\/Ejemplos\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/profeluismitre.com.mx\/Ejemplos\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/profeluismitre.com.mx\/Ejemplos\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/profeluismitre.com.mx\/Ejemplos\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=432"}],"version-history":[{"count":6,"href":"https:\/\/profeluismitre.com.mx\/Ejemplos\/index.php?rest_route=\/wp\/v2\/pages\/432\/revisions"}],"predecessor-version":[{"id":446,"href":"https:\/\/profeluismitre.com.mx\/Ejemplos\/index.php?rest_route=\/wp\/v2\/pages\/432\/revisions\/446"}],"wp:attachment":[{"href":"https:\/\/profeluismitre.com.mx\/Ejemplos\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}