instalar y trabajar con la clase visual editor de eclipse

8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse

1/19

Instalar y trabajar con la clase Visual Editor de Eclipse (Java)Fecha Saturday, 21 April a las 07:24:35

Tema Java

Os explicamos paso a paso, con capturas de pantalla, cmo instalar y utili!ar la clase visual "#isual$lass% en &clipse "entorno de desarrollo visual para Java%' &sta clase es muy (til para reali!ar

apliaciones Java con entorno visual ")ormularios, *otones, cuadros de texto, cuadros de opcin, listasdesple+a*les, +rid, )rames, men(s, etc%'

Añadir al entorno visual Java Eclipse la clase "Visual Editor"

ay varias )ormas de instalar esta clase visual "visual class% en &clipse, una de ellas ser-adescar+.ndola manualmente y descomprimiendo el )ic/ero '!ip en la carpeta de instalacin de &clipse' osotros os explicaremos una )orma m.s sencilla y r.pida "autom.tica%'

na ve! instalado &clipse "pulsa au- para ver un manual de cmo /acerlo%, accederemos &clipse, pulsaremos en el men( Ayuda Actuali!aciones de so)tare 6uscar e instalar''':

Selecconaremos la opcin 6uscar caracter-sticas nuevas para instalar, pulsaremos Si+uiente:

http://www.ajpdsoft.com/modules.php?name=News&file=article&sid=270&mode=&order=0&thold=0http://www.ajpdsoft.com/modules.php?name=News&file=article&sid=270&mode=&order=0&thold=0


2/19

&n este paso podremos indicar los sitios de actuali!aciones para *uscar nuevas caracter-sticas, tam*in podremos a8adir nuevos sitios remotos' 9ara instalar la clase #isual &ditor marcaremos Callisto Discovery Site y The Eclipse Project Updates, pulsaremos inali!ar:

;ndicaremos el duplicado de sitio "servidor% del ue se reali!ar. la descar+a de Callisto Discovery Site "en nuestro caso [United Kingdom] UK Mirror service (http:

Seleccionaremos el duplicado de sitio de actuali!aciones para The Eclipse Project Updates:


3/19

&clipse iniciar. la *(sueda de actuali!aciones en los sitios de actuali!aciones marcados anteriormente'9ara instalar #isual &ditor de &clipse marcaremos las opciones:

•


4/19

8orgeclipseem' (--.8 o compati*le 5ava EM9 Model (,-,v-../.0,:2M3333/$455$K;odels and >odel ?evelopment

o &clipse >odelin+ rameor= "&>% @untime &ndser Bools 2'2'2

9ulsaremos Si+uiente para continuar:

9uesto ue al+unas de las descar+as ue /emos seleccionado tienen licencia de caracter-stica,de*eremos aceptarla para continuar con la instalacin, para ello marcaremos Acepto los trminos delos acuerdos de licencia' 9ulsaremos Si+uiente para continuar con la instalacin de #isual &ditor de&clipse:


5/19

9uesto ue al+unas de las caracter-sticas de las opciones marcadas para la instalacin "#isual &ditor% noest.n )irmadas nos mostrar. este aviso' 9ulsaremos ;nstalar todo para continuar:

Antes de iniciar la descar+a de las actuali!aciones, el asistente de &clipse nos pedir. la u*icacin dondeueramos instalar cada uno de los pauetes seleccionados, por de)ecto los instalar. en C>?eclipse'9ulsaremos inali!ar para continuar:


6/19

&l asistente de actuali!acin de &clipse inicar. la descar+a de las actuali!aciones seleccionadas:

na ve! )inali!ada la descar+a e instalada, el asistente de instalacin y actuali!acin de &clipse nosmostrar. una aviso indicando ue es recomenda*le reiniciar el entorno de tra*aCo &clipse para ue seapliuen los cam*ios' 9ulsaremos S- para reiniciar &clipse:

$on el texto: Es recomenda*le reiniciar el entorno de tra*ajo para %#e los cam*ios s#rtan e'ecto@ peroes posi*le aplicar los cam*ios en la con'ig#raci"n act#al sin reiniciar ADesea reiniciar ahoraB


7/19

A!IAI#$ VI%&A! 'E EJE! $ VI%&A! E'IT* + E!I%E

na ve! instalada la clase #isual &ditor de &clipse, reali!aremos una aplicaci,n de ejemplo paraexplicar cmo usarla' ?esde &clipse, pulsaremos en el men( Arc/ivo uevo 9royecto''':

Seleccionaremos el tipo de proyecto nuevo "en nuestro caso Proyecto 5ava%, pulsaremos Si+uiente para continuar:

;ndicaremos el nom*re del proyecto "en nuestro caso pr#e*aplicacion)is#al %, tam*in podremosindicar la versin de J@& "Java @untime &nvironmet%, en nuestro caso jre,/.2.,, indicaremos la rutade la aplicacin y pulsaremos inali!ar:


8/19

Seleccionaremos el nuevo proyecto creado y pulsaremos con el *otn derec/o del ratn so*re l, pulsaremos en uevo Visual class:


9/19

&n caso de no aparecer #isual $lass pulsaremos so*re Otros''' y seleccionaremos Java #isual$lass:

;ntroduciremos el nom*re del 9auete, el nom*re del Bipo, seleccionaremos la superclase javax.swing.JFrame y pulsaremos inali!ar:


10/19

&clipse crear. autom.ticamente un JFrame ue ser. el contenedor principal de nuestra aplicacin'Bam*in mostrar. la 9aleta de componentes visuales "9alette% con:

• $omponentes " Swing Components% como: J6utton, J$/ec=6ox, J@adio6utton, JDa*el,

JBextield, J9assordield, JBextArea, JSlider, JScroll6ar, JDist, J$om*o6ox, JBree, JBa*le,J9ro+ress6ar, JOption9ane, JBext9ane, J&ditor9ane'

• $ontenedores " Swing Container % como: Jrame, J9anel, JScroll9ane, JSplit9ane, JBa**ed9ane,

J?es=top9ane, J;nternalrame, J?ialo+, JEindo, JBool6ar, JApplet'

• >en(s " Swing Menus% como: J>enu6ar, JBool6ar, J>enu, J9opup>enu, J>enu;tem,

J$/ec=6ox>enu;tem, J@adio6utton>enu;tem'

>ostrar. la ventana de 9ropiedades, donde se mostrar.n las caracter-sticas con)i+ura*les propias decada control seleccionado' &n la parte in)erior mostrar. la ventana de cdi+o de la aplicacin:

$omo eCemplo insertaremos un componente de tipo J6utton y otro de tipo JBextield, para mostrar enun mensaCe el contenido del JBextield' 9ara a8adiremos un contenedor llamado Janel ue ser. elcontenedor de nuestro J6utton y JBextield' Seleccionaremos la solapa Sing Containers de la ventanade 9alette y pulsaremos so*re J9anel, a continacin nos posicionaremos con el cursor del ratn so*re el.rea $enter del Jrame y /aremos clic:


11/19

os mostrar. una ventana donde podremos indicar el nom*re del componente J9anel ue /emosinsertado, en nuestro caso jPanel , pulsaremos Aceptar para continuar :

Antes de insertar el J6utton y el JBextield, si ueremos tener li*ertad a*soluta a la /ora de posicionar

un control en el contenedor J9anel de*eremos cam*iar la propiedad layout a n#ll ' &sto se /ace pulsando so*re el J9anel insertado anteriormente y seleccionando esta propiedad en la ventana de9ropiedades, tal y como se muestra en la ima+en:


12/19

A/ora a8adiremos el componente JTe-tField de la ventana 9alette, solapa Sing Components y losoltaremos en la parte del J9anel ue deseemos:


13/19

;ndicaremos el nom*re, en nuestro caso t7tMensaje y pulsaremos Aceptar:

ACustaremos el tama8o y la posicin y le a8adiremos un J!abel in)ormativo en la parte i!uierda, en la propiedad text del JDa*el pondremos >ensaCe:

A8adiremos tam*in el J6utton de la misma )orma, con el nom*re *MostrarMensaje y la propiedadte7t a Mostrar :


14/19

A continuacin a8adiremos el si+uiente cdi+o )uente Java al J6utton a8adido, para ello pulsaremoscon el *otn derec/o del ratn so*re el J6utton *MostrarMensaje, seleccionaremos &vents action9er)ormed:


15/19

&l entorno &clipse nos crear. el evento actionPer'ormed de la clase javaateventctionEvent , ue seeCecutar. cuando se /a+a clic so*re el J6utton' &n este procedimiento crea, por de)ecto, la si+uientel-nea de cdi+o:

Systemo#tprintln(8actionPer'ormed(8 ?? TFDF #to3generated Event st#* actionPer'ormed(

ue no /ace otra cosa ue mostrar un mensaCe en la consola de depuracin con el texto

actionPer'ormed( y tam*in /a a8adido un comentario de tipo BO?O ue nos indica ue el evento /asido auto+enerado:

Si compilamos la aplicacin en este momento, seleccionando el tri.n+ulo invertido ue aparece a la

derec/a de , &Cecutar como Java 6ean:

y pro*amos a pulsar el *otn >ostrar o*tendremos este resultado:


16/19

action9er)ormed"% en la $onsola'

&n nuestro caso eliminaremos la l-nea de cdi+o creada por &clipse para el evento action9er)ormed delJ6utton y a8adiremos lo si+uiente:

Systemo#tprintln(t7tMensajegetTe7t(

con el mtodo +etBext o*tendremos el valor de la propiedad text del componente JBextield'

Fuedar. al+o as-:

public void actionPerformed(java.awt.event.ActionEvent e) {

System.out.println(txtMensaje.et!ext())"

#

Si compilamos la aplicacin, cuando pulsemos el *otn >ostrar visuali!ar. en la $onsola el textointroducido en el JBextield:


17/19

9rue*a aplicacin &clipse en la $onsola'

&l c,di.o /uente Java completo de la aplicacin "casi todo +enerado autom.ticamente por &clipse%:

pac$ae pruebaAplicacion%isual"

import java.awt.&order'ayout"

import javax.swin.Panel"

import javax.swin.rame"

import javax.swin.&utton"

import java.awt.*ectanle"import javax.swin.!extield"

import javax.swin.'abel"

import java.awt.+imension"

public class PruebaAplicacion%isual extends rame {

private static final lon serial%ersion,-+ /'"

private Panel j0ontentPane null"

private Panel jPanel null"

private !extield txtMensaje null"

private 'abel j'abel null"

private &utton bMostrarMensaje null"

122

2 !3is is t3e default constructor

21

public PruebaAplicacion%isual() {

super()"

initiali4e()"

#

122

2 !3is met3od initiali4es t3is

2

2 5return void

21

private void initiali4e() {

t3is.setSi4e(new +imension(6789 /:/))"

t3is.set0ontentPane(et0ontentPane())"

t3is.setSi4e(6779 :77)"

t3is.set0ontentPane(et0ontentPane())"

t3is.set!itle(;rame;)"

#

122

2 !3is met3od initiali4es j0ontentPane

2

2 5return javax.swin.Panel

21

private Panel et0ontentPane() {

if (j0ontentPane null) {

j0ontentPane new Panel()"

j0ontentPane.set'ayout(new &order'ayout())"

j0ontentPane.add(etPanel()9 &order'ayout.0E


18/19

#

122

2 !3is met3od initiali4es jPanel

2

2 5return javax.swin.Panel

21

private Panel etPanel() {

if (jPanel null) {

j'abel new 'abel()"

j'abel.set&ounds(new *ectanle(=9 />9 ?@9 /))"

j'abel.set!ext(;Mensaje;)"

jPanel new Panel()"

jPanel.set'ayout(null)"

jPanel.add(et!xtMensaje()9 null)"

jPanel.add(j'abel9 null)"

jPanel.add(et&MostrarMensaje()9 null)" #

return jPanel"

#

122

2 !3is met3od initiali4es txtMensaje

2

2 5return javax.swin.!extield

21

private !extield et!xtMensaje() {

if (txtMensaje null) {

txtMensaje new !extield()"

txtMensaje.set&ounds(new *ectanle(>9 /?9 /669 :7))"

#

return txtMensaje"

#

122

2 !3is met3od initiali4es bMostrarMensaje

2

2 5return javax.swin.&utton

21

private &utton et&MostrarMensaje() {

if (bMostrarMensaje null) {

bMostrarMensaje new &utton()"

bMostrarMensaje.set&ounds(new *ectanle(:769 /?9 >/9 :/))"

bMostrarMensaje.set!ext(;Mostrar;)" bMostrarMensaje.addAction'istener(

new java.awt.event.Action'istener() {

public void actionPerformed(

java.awt.event.ActionEvent e) {

System.out.println(txtMensaje.et!ext())"

#

#)"

#

return bMostrarMensaje"

#

# 11 5jveBdeclCindex7BvisualCconstraint;/79/7;

Dos /icheros .enerados por Eclipse para nuestra aplicacin visual de eCemplo con #isual &ditor son:

• :G9ro+ramasGJavaGprue*aAplicacion#isual "carpeta%

o prue*aAplicacion#isual "carpeta%

9rue*aAplicacion#isualH1'class

9rue*aAplicacion#isual'class

9rue*aAplicacion#isual'Cava

o 'classpat/

o 'proCect

9ara reali!ar este manual G art-culo /emos utili!ado:

• S?I &clipse 3'2'0'

• >icroso)t Eindos 9 9ro)esional'


19/19

• #isual &ditor 1'2'1'

•

instalar y trabajar con la clase visual editor de eclipse

Documents