Professional Documents
Culture Documents
ModelViewController
Oquemodelo,visoecontrole?
Comoimplementaracamadademodelo?
Oprincpiodaresponsabilidadenica
Objetosimutveis
Quaiseventospodemsertratados?
Oquesocadeiasderesponsabilidades?
Umpadrobemconhecido
Oqueaviso?
Viso
(View)
Oqueomodelo?
Controlador
(Controller) Eoqueocontrolador?
Modelo Porqueesseumbom
(Model) padrodeprojeto?
Exemplo:fazedordepontos
Especificao do programa:
Crie uma aplicao que desenhe pontos aleatrios na tela.
Esta aplicao dever ter dois botes, red e green.
Ela ter tambm duas caixas de texto: x e y.
E uma rea de tela onde pontos devem ser desenhados.
Ao clicar em red, um ponto vermelho dever ser
desenhado em uma posio aleatria dentro da rea de
pontos.
Ao clicar em green um ponto verde dever ser desenhado.
As caixas de texto marcaro a coordenada do ltimo ponto
desenhado.
Qualavisodoprograma?
Especificao do programa:
Crie uma aplicao que desenhe pontos aleatrios na tela.
Esta aplicao dever ter dois botes, red e green.
Ela ter tambm duas caixas de texto: x e y.
E uma rea de tela onde pontos devem ser desenhados.
Ao clicar em red, um ponto vermelho dever ser
desenhado em uma posio aleatria dentro da rea de
pontos.
Ao clicar em green um ponto verde dever Prser ipo:
ottdesenhado.
Es qu e m a tize um
As caixas de texto marcaro a coordenada do ltimo ponto
o t t i po d es sa
desenhado.
pr
viso.
ProtRpo
Quantoscomponentes
esseprotRpopossui?
Oqueagranderea
dedesenho?
Comocriaresse
protRpoemXML?
Comocriarosbotes?
<?xmlversion="1.0"encoding="u\8"?>
<LinearLayoutxmlns:android="h`p://schemas.android.com/apk/res/android"
android:id="@+id/root"
android:orientaRon="verRcal"
Obser
v
android:gravity="center_horizontal"
s.
android:layout_width="ll_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/text1"
android:text="@string/defaultText"
android:focusable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/> LinearLayout LinearLayout
<EditText (Horizontal) (Horizontal)
android:id="@+id/text2"
android:text="@string/defaultText"
android:focusable="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:orientaRon="horizontal"
android:background="@drawable/dk_grey"
Text Text Bu`on Bu`on
android:layout_width="ll_parent"
android:layout_height="wrap_content">
<Bu`on
android:id="@+id/bu`on1"
android:text="@string/labelRed"
android:textColor="@drawable/red"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Bu`on
android:id="@+id/bu`on2"
android:text="@string/labelGreen"
android:textColor="@drawable/green"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout> acRvity_mail.xml
Noesqueaisos"Resources"
strings.xml
<resources>
<string name="app_name">AulaBattlefiled</string>
<string name="defaultText"></string>
<string name="menu_settings">Settings</string>
<string name="title_activity_main">MainActivity</string>
<string name="labelGreen">Green</string>
<string name="labelRed">Red</string>
</resources>
colors.xml
<resources>
<drawable name="red">#FFFF0000</drawable>
<drawable name="green">#FF00FF00</drawable>
<drawable name="lt_grey">#dddddd</drawable>
<drawable name="grey">#999999</drawable>
<drawable name="dk_grey">#666666</drawable>
</resources>
AreadePontos
public class AulaActivity3 extends Activity {
final Dots dotModel = new Dots();
private DotView dotView;
...
public void onCreate(Bundle state) {
super.onCreate(state);
dotView = new DotView(this, dotModel);
setContentView(R.layout.main);
((LinearLayout)findViewById(R.id.root)).
addView(dotView,0); Sob demanda:
Por hora, vamos
...
apenas supor que
}
AulaAcRvity3.java DotView e Dots
existem, e que
podemos us-los.
OModelo
OModelosoosdadossobreosquaisa
aplicaoatua.
Easoperaesqueessesdadossabemrealizar.
a m ao t o s:
r
Prog ada a Ob j e
e n t d a d os
Ori q u a ndo er
de q u
Mas,qualomodelo Ed e s
f a z er qu a l
sabem
dessanossaaplicaoem co is a ?
questo?
UmPonto
Oqueumpontosabefazer?
Emoutraspalavras,qualainterfacedeum
ponto?
Implem
e
E como ntao:
UmPonto implem
e
podem
os
interfa ntar essa
ce?
Oqueumpontosabefazer?
Emoutraspalavras,qualainterfacedeum
ponto?
public float getX();
Dot getLastDot();
List<Dot> getDots();
void clearDots();
Eventosde
Pontos
Alistadepontosescuta
eventos.
Masqueeventossoesses?
public class Dots { Eventosde
public interface DotsChangeListener {
}
void onDotsChange(Dots dots); Pontos
private final LinkedList<Dot> dots = new LinkedList<Dot>();
private DotsChangeListener dotsChangeListener;
public void setDotsChangeListener(DotsChangeListener l) {
dotsChangeListener = l;
}
public void addDot(float x, float y, int color, int dim) {
dots.add(new Dot(x, y, color, dim));
notifyListener();
} Alistadepontosescuta
public void clearDots() {
dots.clear(); eventos.
notifyListener();
} Masqueeventossoesses?
private void notifyListener() {
if (null != dotsChangeListener) {
dotsChangeListener.onDotsChange(this);
}
}
} Dots.java
Responsabilidade(s)
Alistadepontossabedesenharosprprios
pontosnateladodisposiRvo?
Quaisosprsdedaresse
conhecimentolistadepontos?
Equaisoscontras?
Invariantes
Deacordocomoprincpioda
Responsabilidadenica,alistadepontosno
deveriasaberdesenharospontosemuma
teladedisposiRvo.
Mastemosumproblema: O que fazer?!
Algumtemdedesenharospontos.
Paradesenharospontos,precisoveralistade
pontos.
Masnoqueremosqueessalistapossaser
modicadaforadeDots. (Por que?)!
Dots.java ObjetosImutveis
public class Dots {
private final LinkedList<Dot> dots =
new LinkedList<Dot>();
private final List<Dot> safeDots =
Collections.unmodifiableList(dots);
public List<Dot> getDots() { Temos aqui um
return safeDots; outro padro de
} projetos. Que
public void addDot padro esse?
(float x, float y, int color, int diameter) {
dots.add(new Dot(x, y, color, diameter));
notifyListener(); Mas quebramos o
} princpio da
... substituio de
} Liskov. Como?
SubsRtuiodeLiskov
OndeesperaseumRpo,podeserecebero
subRpo.
Esseocernedaprogramaoorientadaa
objetos.
Eumadasrazesque
levammuitosengenheiros
anorecomendara
heranacomomecanismo
dereso.
AJaneladePontos
Precisamosdeumavisopara
desenharospontos.
NoexisteumavisodesseRpona
bibliotecadeAndroid.
PrecisamoscrilaaparRrde
primiRvasgrcas.
Masemgeralmelhorreusar
cdigoquejexiste.
DotView
publicclassDotViewextendsView{
privatenalDotsdots;
publicDotView(Contextcontext,Dotsdots){}
@Override
protectedvoidonMeasure(intwidthMeasureSpec,
intheightMeasureSpec){
setMeasuredDimension(getSuggestedMinimumWidth(),
getSuggestedMinimumHeight());
}
@Override
protectedvoidonDraw(Canvascanvas){}
}
DotView.java
DotView
publicclassDotViewextendsView{
privatenalDotsdots;
publicDotView(Contextcontext,Dotsdots){}
@Override
O que
protectedvoidonMeasure(intwidthMeasureSpec,
d e v eramos
intheightMeasureSpec){
f azer no
setMeasuredDimension(getSuggestedMinimumWidth(),
construtor?
getSuggestedMinimumHeight());
}
@Override
protectedvoidonDraw(Canvascanvas){}
}
DotView.java
DotView
publicclassDotViewextendsView{
privatenalDotsdots;
public DotView(Context context, Dots dots) {
publicDotView(Contextcontext,Dotsdots){}
@Override super(context);
this.dots = dots;
protectedvoidonMeasure(intwidthMeasureSpec,
setMinimumWidth(180);
intheightMeasureSpec){
setMinimumHeight(200);
setMeasuredDimension(getSuggestedMinimumWidth(),
setFocusable(true);
getSuggestedMinimumHeight());
}
}
@Override
protectedvoidonDraw(Canvascanvas){}
E c om o seria
}
onDraw?
DotView.java
DotView.java
DotView
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.WHITE);
paint.setStyle(Style.FILL);
for (Dot dot : dots.getDots()) {
paint.setColor(dot.getColor());
canvas.drawCircle(dot.getX(), dot.getY(), dot.getDiameter(), paint);
}
}
DotView.java
DotView
@Override
protected void onDraw(Canvas canvas) {
O que esse
canvas.drawColor(Color.WHITE);
cdigo est
Paint paint = new Paint();
fazendo?
paint.setStyle(Style.STROKE);
paint.setColor(hasFocus() ? Color.BLUE : Color.GRAY);
canvas.drawRect(0, 0, getWidth() - 1, getHeight() - 1, paint);
paint.setStyle(Style.FILL);
for (Dot dot : dots.getDots()) {
paint.setColor(dot.getColor());
canvas.drawCircle(dot.getX(), dot.getY(), dot.getDiameter(), paint);
}
}
DotView.java
DotView
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.WHITE);
Obotogreenrecebeumclique.
?
Obotoredrecebeumclique.
?
OControlador
Quaiseventosprecisamsercontrolados?
Obotogreenrecebeumclique.
Umpontoverdecriadonalistadepontos.
Obotoredrecebeumclique.
Umpontovermelhocriadonalistadepontos.
Equandoospontossodesenhados?
EventosdeBoto
AulaAcRvity3.java
public class AulaActivity3 extends Activity {
public void onCreate(Bundle state) {
....
((Button) findViewById(R.id.button1))
.setOnClickListener(new Button.OnClickListener() {
public void onClick(View v) {
makeDot(dotModel, dotView, Color.RED);
}
});
((Button) findViewById(R.id.button2))
.setOnClickListener(new Button.OnClickListener() {
public void onClick(View v) {
makeDot(dotModel, dotView, Color.GREEN);
}
}); Hum que feio:
o
qu as e ig ua l. E c omo a
... cdigo p le m e n t ao de
m o s im
}
Po r que no pode e Dot?
...
m ak
} fator-lo?
DesenhandoosPontos
private final Random rand = new Random();
RastreandooTouchPad
public class TrackingTouchListener
implements View.OnTouchListener { O que seriam
private final Dots mDots; esse p e esse
TrackingTouchListener(Dots dots) { s?
mDots = dots;
}
private void addDot
(Dots dots, float x, float y, float p, float s) {
dots.addDot(x, y, Color.CYAN,
(int) ((p * s * AulaActivity3.DOT_DIAMETER) + 1));
}
public boolean onTouch(View v, MotionEvent evt) {
...
}
} Como deve ser a implementao!
de onTouch? !
TrackingTouchListener.java
return true;
} Mas como podemos registrar!
esse escutador de eventos?!
TrackingTouchListener.java
return true;
}
AulaAcRvity3.java
dotView.setFocusable(true);
EventosdeTeclas
dotView.setOnKeyListener(new OnKeyListener() {
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (KeyEvent.ACTION_UP != event.getAction()) {
int color = Color.BLUE;
switch (keyCode) {
case KeyEvent.KEYCODE_SPACE: O que este
color = Color.MAGENTA;
break; programa faz?!
case KeyEvent.KEYCODE_ENTER:
color = Color.YELLOW;
break;
default:
;
}
makeDot(dotModel, dotView, color);
}
return true;
}
});
EventosdeTecla
Cadateclapossuium
nmeroidenRcador.
Teclaspodemser
tratadasdeforma
diferenciadaemum
switch.
CaixadeTextoEditvel
Eventos de Teclado:
Adicione uma caixa de texto
sua aplicao.
Esta caixa precisa escutar
eventos de teclado.
Teclas numricas causam o
aparecimento de pontos
cinza na rea de desenho.
As outras teclas escrevem
na caixa de texto.
CaixadeTextoEditvel
<?xmlversion="1.0"encoding="u\8"?>
<LinearLayoutxmlns:android="h`p://schemas.android.com/apk/res/android"
...
<LinearLayout
android:orientaRon="horizontal"
android:background="@drawable/grey"
android:layout_width="ll_parent"
android:layout_height="wrap_content">
<EditText O que esse
android:id="@+id/text3"
a tributo faz?
android:text="@string/defaultText"
android:focusable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
acRvity_main.xml
CadeiadeResponsabilidades
Eventossoimplementadossegundouma
cadeiaderesponsabilidadesdedoisnveis.
Elementosgrcossabemtrataralguns
eventos.
Umacaixadetextoescreveriaemsuareaas
teclaspressionadas.
Ousuriopodesobreescreverestetratamento
padro.
Maspodepassaralgunseventosparaeletambm.
AulaAcRvity3.java
Passa,nopassa
final EditText tb3 = (EditText) findViewById(R.id.text3);
tb3.setOnKeyListener(new OnKeyListener() {
public boolean onKey(View v, int keyCode, KeyEvent event) {
if (KeyEvent.ACTION_UP != event.getAction()) {
if (keyCode >= KeyEvent.KEYCODE_0 &&
keyCode <= KeyEvent.KEYCODE_9) {
int color = Color.GRAY;
makeDot(dotModel, dotView, color);
return true;
}
}
return false;
} Esses
});
eventos ns
tratamos!!
EventosdeFoco
Mudando o foco:
Comodetectaramudana
Adicione um tratador de defoco?
mudana de foco Comodesenharpontos
dotView.
Se dotView ganha foco, dessas
ento voc precisa cores?
desenhar um ponto
alaranjado.
Se dotView perde foco,
ento voc precisa
desenhar um ponto
azul claro.
EventosdeFoco
AulaAcRvity3.java
dotView.setOnFocusChangeListener(new OnFocusChangeListener() {
public void onFocusChange(View v, boolean hasFocus) {
if (!hasFocus) {
makeDot(dotModel, dotView, Color.rgb(0, 128, 255));
} else {
makeDot(dotModel, dotView, Color.rgb(255, 128, 0));
}
}
});
@Override
public boolean
onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case CLEAR_MENU_ID:
dotModel.clearDots();
return true;
default:
;
}
return false;
}
AulaAcRvity3.java
AdicionandoumMenu
public final int CLEAR_MENU_ID = 1;
@Override
public boolean onCreateOptionsMenu(Menu menu) {
menu.add(Menu.NONE, CLEAR_MENU_ID, Menu.NONE, "Clear");
return true;
}
@Override
public boolean
onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case CLEAR_MENU_ID:
dotModel.clearDots();
return true;
default: O que fazem
; esses
} parmetros?
return false;
C o mo podemos
}
descobrir?
AulaAcRvity3.java
Recapitulando
Avisoainterfacegrcada
Viso aplicao,edenidaporum
arquivoXML,maisumconjuntode
(View) objetosgrcos(EditText,
Button,etc)
Controlador Omodelosoosdadosquea
aplicaomanipula.Nesse
(Controller) exemplo:pontoelistadepontos.
Ocontroladorsoosescutadores
Model etratadoresdeeventos.Emgeral
implementadoscomo
(Modelo) observadores.
Exerccio:Dimetro
SemprequeofocoesRversobreareade
pontos,eousurioclicarnodpad,desenhe
umalinhaligandoosdoispontosmais
distantesdatela.
dotView.setOnKeyListener(newOnKeyListener(){
publicbooleanonKey(Viewv,intkeyCode,KeyEventevent){
if(KeyEvent.ACTION_UP!=event.getAcRon()){
intcolor=Color.BLUE;
switch(keyCode){
DenindooEvento
caseKeyEvent.KEYCODE_MENU:
returnfalse;
caseKeyEvent.KEYCODE_SPACE:
color=Color.MAGENTA;
break;
caseKeyEvent.KEYCODE_ENTER:
color=Color.YELLOW;
break;
caseKeyEvent.KEYCODE_DPAD_CENTER:
dotView.drawDiameter();
returnfalse;
default:;
}
makeDot(dotModel,dotView,color);
}
returntrue;
}
});
} AulaAcRvity3.java
CalculandooDimetro
@Override publicclassDotViewextendsView{
protectedvoidonDraw(Canvascanvas){ privatebooleandrawDiameter=false;
... ...
if(this.drawDiameter){ publicvoiddrawDiameter(){
doublemaxDistance=0.0F; this.drawDiameter=true;
Dotori=dots.getLastDot(); this.invalidate();
Dotdst=ori; }
for(Dotd1:dots.getDots()){ }
for(Dotd2:dots.getDots()){
doublecurrDistance=distance(d1,d2);
if(currDistance>maxDistance){
ori=d1;
dst=d2;
maxDistance=currDistance;
}
}
}
canvas.drawLine(ori.getX(),ori.getY(),dst.getX(),dst.getY(),paint);
this.drawDiameter=false;
}
} DotView.java