Download Ejemplo

Construcción de Interfaces a Usuario:
Ejemplo
Un Editor de Circuitos
Construcción de Interfaces a Usuario - ©1999
Aplicación Interactiva
 Gráficos
 Tratamiento de eventos
Construcción de Interfaces a Usuario - ©1999
Editor de Circuitos
 Multiples Vistas
 Barra de herramientas
 Manipulación directa
Construcción de Interfaces a Usuario - ©1999
Arquitectura MVC
 Modelo
 Vista
 Controlador
Construcción de Interfaces a Usuario - ©1999
Modelo
 Suscripción al modelo
 Notificación de eventos
public void changeChip(int num) {
for (int i=0; i< views.length; i++)
views[i].changeChip(num);}
Construcción de Interfaces a Usuario - ©1999
Vista/Controlador
 Comportamiento
– Vista
• paint
• tratar notificación del modelo
– Controlador
• tratamiento de selección
• mapear la entrada en llamados al
modelo
Construcción de Interfaces a Usuario - ©1999
PartListView
 Presentación
(0,0)
top
– Area de un Chip
bottom
Rectangle chipArea(int num) {
Rectangle b=getBounds();
return new Rectangle(b.top+num* CH,
b.left, b.top+(num+1)* CH, b.right)
}
– Dibujo
left
void paint(Graphics g) {
fot (int i=0;i < circuit.chips.length; i++)
Rectangle r=chipArea(i));
g.drawRect(r);
.....
g.drawString(circuit.chips[i].name,r.top,r.left + WC);
}
}
right
Construcción de Interfaces a Usuario - ©1999
PartListView
 Notificación de cambios
changeChip
void changeChip(int num) {
invalidate(chipArea(num)); }
 Controlador
changeChip
addChip
invalidate
Circuit
int whichChip (Point mp) {
return mp.y - getBounds().top / CH ; }
– Selección de Chip
PListV
changeChip
LayoutV
void mouseUp(Point p,int mod) {
circuit.selectChip(whichChip(p)); }
– Foco sobre Chips
void mouseDown(int b,Point p,int mod) {
circuit.selectChip(whichChip(p)); }
void mousemove(Point p,int mod) {
if (mod.mouseDown())
circuit.selectChip(whichChip(p)); }
Construcción de Interfaces a Usuario - ©1999
PartListView
 Controlador
– Cambio de nombre
void mouseUp(Point p,int mod) {
circuit.selectChip(whichChip(p));
charIndex=WhichChar(p); }
void keyPress(char key, int mod) {
if (circuit.selectedChip) {
//no se puede editar sin un chip seleccionado
switch(key) {
case BACKSPACE:
if(charIndex >0)
//borro siemprey cuando no este al comienzo
circuit.curChip().name.delete(charIndex);
break;
default:
circuit.curChip().name.at(charIndex,key);
}
}}
Construcción de Interfaces a Usuario - ©1999
LayoutView
 Mayor Complejidad
 Descomponer en partes simples
Icon
Drawing
ChipV
WireV
Construcción de Interfaces a Usuario - ©1999
LayoutView
Construcción de Interfaces a Usuario - ©1999
Drawing
public void paint(Graphics g) {
for(int i=0;i< components.length; i++)
components[i].paint(g); }
public Component select(Point p) {
Component sel;
for(int i=0;i< components.length; i++) {
sel=components[i].select(p);
if (sel != null) return sel; }
return null;}
public Rectangle bounds() {
Rectangle r=new Rectangle(0,0,0,0);
for(int i=0;i< components.length; i++)
r.union(components[i].bounds);
return r; }
Construcción de Interfaces a Usuario - ©1999
LayoutView
 Notificación de cambios
void changeChip(int num) {
invalidate(d.chipV(num).bounds()); }
 Controlador
– Selección de modo
• MouseUp and ChipIcon.selected
IconMode=ChipMode
Damage bounds of ChipIcon and WireIcon
• MouseUp and WireIcon.selected
IconMode=WireMode
Damage bounds of ChipIcon and WireIcon
– Borrado
• MouseUp and DeleteIcon.selected
Model.deleteChip(model.selectedChip)
Model.deleteWire(model.selectedWire)
Construcción de Interfaces a Usuario - ©1999
LayoutView
 Controlador
– Creación
• MouseDown and IconMode== ChipMode and no chip selected
draw the new chip
remember chip location
• MouseMove and creating a chip
erase the chip in old location
draw the chip in new location
• mouseUp and we are creating a chip
erase the chip in old location
Model.addChip(MouseLocation)
• MouseDown and IconMode== WireMode and no chip selected and
mouse over a connector
........
– Movimiento
• MouseDown and mouse is over a chip to be selected
select the chip and remember that the controller is in dragging mode
• MouseMove and the controller is dragging
erase the chip in its old location
redraw the chip in its new location
• MouseUp and the controller is dragging
erase the chip in its old location
Invoke the MoveChip method on the model
Construcción de Interfaces a Usuario - ©1999