1. Construcción de Interfaces a Usuario - ©1999 Construcción de Interfaces a Usuario: Ejemplo Un Editor de Circuitos

2. Construcción de Interfaces a Usuario - ©1999 Aplicación Interactiva 4 Gráficos 4 Tratamiento de eventos

3. Construcción de Interfaces a Usuario - ©1999 Editor de Circuitos 4 Multiples Vistas 4 Barra de herramientas 4 Manipulación directa

4. Construcción de Interfaces a Usuario - ©1999 Arquitectura MVC 4 Modelo 4 Vista 4 Controlador

5. Construcción de Interfaces a Usuario - ©1999 Modelo 4 Suscripción al modelo 4 Notificación de eventos public void changeChip(int num) { for (int i=0; i< views.length; i++) views[i].changeChip(num);}

6. Construcción de Interfaces a Usuario - ©1999 Vista/Controlador 4 Comportamiento –Vista paint tratar notificación del modelo –Controlador tratamiento de selección mapear la entrada en llamados al modelo

7. Construcción de Interfaces a Usuario - ©1999 PartListView 4 Presentación –Area de un Chip Rectangle chipArea(int num) { Rectangle b=getBounds(); return new Rectangle(b.top+num* CH, b.left, b.top+(num+1)* CH, b.right) } –Dibujo 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); } left right top bottom (0,0)

8. Construcción de Interfaces a Usuario - ©1999 PartListView 4 Notificación de cambios void changeChip(int num) { invalidate(chipArea(num)); } 4 Controlador int whichChip (Point mp) { return mp.y - getBounds().top / CH ; } –Selección de Chip 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)); } CircuitPListVLayoutV addChip changeChip invalidate

9. Construcción de Interfaces a Usuario - ©1999 PartListView 4 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); } }}

10. Construcción de Interfaces a Usuario - ©1999 LayoutView 4 Mayor Complejidad 4 Descomponer en partes simples Icon ChipV Drawing WireV

11. Construcción de Interfaces a Usuario - ©1999 LayoutView

12. 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; }

13. Construcción de Interfaces a Usuario - ©1999 LayoutView 4 Notificación de cambios void changeChip(int num) { invalidate(d.chipV(num).bounds()); } 4 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)

14. Construcción de Interfaces a Usuario - ©1999 LayoutView 4 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