Instalar y Trabajar Con La Clase Visual Editor de Eclipse
-
Upload
daniela-machaca -
Category
Documents
-
view
220 -
download
0
Transcript of 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
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
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:
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
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:
•
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
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:
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
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:
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
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
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
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/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
8/19
Seleccionaremos el nuevo proyecto creado y pulsaremos con el *otn derec/o del ratn so*re l, pulsaremos en uevo Visual class:
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
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:
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
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:
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
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:
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
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:
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
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 :
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
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:
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
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:
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
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:
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
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
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
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'
-
8/19/2019 Instalar y Trabajar Con La Clase Visual Editor de Eclipse
19/19
• #isual &ditor 1'2'1'
•