Angelfg: /* Introdución */

2015-07-28T07:46:19Z

Introdución

Página nueva

==Introdución==
*O control '''EditText''' serve para introducir e editar texto por parte do usuario dunha aplicación Android.
*Este control é unha subclase da clase '''TextView''' que se viu anteriormente.
[[Image:00_Part_of_Android_View_Hierarchy.png|600px]]
*Imaxe obtida de: http://www.itcsolutions.eu/2011/08/27/android-tutorial-4-procedural-vs-declarative-design-of-user-interfaces

*A forma de engadir un EditText en XML nun layout é a través do compoñente: <EditText/>
*Unha propiedade importante é: '''android:inputType'''
**Permitirá que so se introduzan números, texto, passwords, teléfonos, etc.
**Tamén indicará se o control é dunha soa liña ou multiliña.
**Facer que non autocomplete as palabras, etc.
*Ademais permiten copiar, cortar e pegar.

[[Image:00_edittext-noextract.png]]
*Cando se entra nun cadro de texto, nun dispositivo que non teña teclado físico conectado, abrirase en pantalla un '''teclado virtual''' (tamén chamado lixeiro/soft) que se adaptará á propiedade '''android:inputType''' como veremos a continuación.

*Finalmente a tecla '''Enter''' no teclado virtual poder realizar distintas accións, ben por defecto ou ben explicitamente coa propiedade '''android:imeOptions''' (IME: Input Method Editor)

*'''Referencias''':
**O control EditText: http://developer.android.com/reference/android/widget/EditText.html
**Campos de texto: http://developer.android.com/design/building-blocks/text-fields.html
**Campos de texto para programadores: http://developer.android.com/guide/topics/ui/controls/text.html
**Filtros de entrada (android:inputType): http://developer.android.com/reference/android/widget/TextView.html#attr_android:inputType
**IME: http://developer.android.com/guide/topics/text/creating-input-method.html
**android:imeOptions: http://developer.android.com/reference/android/widget/TextView.html#attr_android:imeOptions

*'''IMPORTANTE''': Se se vai usar un AVD imos desactivar o teclado hardware para que cando premamos nun cadro de texto nos apareza o teclado virtual.
Lembrar que na imaxe aparece unha API 18 pero nos estamos traballando cunha API 16.

[[Image:Android_2013_U2_08_EditText_01.jpg|400px]]
*Desactivar o teclado por hardware

==Casos prácticos==
*Comezamos creando un proxecto no que realizar as probas: '''U2_08_EditText'''

===Distintos tipos de datos: a propiedade android:inputType===
*A imaxe amosa un AVD con distintos tipos de campos, e cunha lenda interior indicando que tipo de dato hai que introducir nese campo.
[[Image:Android_2013_U2_08_EditText_02.jpg|300px]]

*O layout xml que define esa pantalla é o seguinte. Observar como sempre as liñas marcadas.

<syntaxhighlight lang="xml" line highlight="10,11,16,17,22,23,28,29,34,35">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe un número enteiro"
android:inputType="numberSigned" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe un número decimal"
android:inputType="numberSigned|numberDecimal" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe palabras...(saíra a 1ª letra en maísculas)"
android:inputType="textCapWords|textMultiLine" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enderezo e-mail. Esta línea sae por fóra da pantalla"
android:inputType="textEmailAddress" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe a clave."
android:inputType="textPassword" />

</LinearLayout>
</syntaxhighlight>
*Propiedade '''android:hint''': indica o texto que se vai amosar no control cando este está baleiro.
*Propiedade '''android:inputType''': indica o tipo de datos que se poden introducir no campo.
**Se non se pon a propiedade, o campo acepta toda combinación de caracteres.
**Pódense combinar os filtros facendo uso de '''"|"'''.
*Obviamente os valores dos Hints é mellor telos declarados en constantes en recursos XML.

*Lanzamos a aplicación nun AVD sen botonera hardware.
*'''NOTA Edición 2015''': No caso de usar un AVD con API 21, o botón '''Next''' é substituído por '''">"''', o botón '''Done'' (Feito) por unha marca de verificación.
<gallery caption="Distintos teclados" widths="350" heights="300px" perrow="2">
Image:Android_2013_U2_08_EditText_03.jpg| Cando nos posicionamos no primeiro campo, como é para enteiros con signo (inputType), ofrece un teclado con só números, signo "-" e "." ou ",".<br>Probar a introducir un número decimal.<br> Observar tamén que a tecla '''Enter''' foi substituída por '''Next''', para pasar ao seguinte campo. Pronto estudaremos esta tecla.
Image:Android_2013_U2_08_EditText_04.jpg| O segundo campo xa admite números decimais e con signo. A tecla '''Enter''' segue marcando '''Next'''.
Image:Android_2013_U2_08_EditText_05.jpg| O teclado xa contempla as letras e demais. Observar como de xeito automático pon en maiúsculas a primeira letra de cada palabra.
Image:Android_2013_U2_08_EditText_06.jpg| Como o terceiro campo é multiliña a tecla de '''Enter''' é agora un retorno de carro para poder seguir escribindo varias liñas no campo.
Image:Android_2013_U2_08_EditText_07.jpg| Situámonos co dedo (ou rato) no seguinte campo. Agora o teclado xa ofrece a @ para o mail. A tecla '''Enter''' segue sendo '''Next'''.
Image:Android_2013_U2_08_EditText_08.jpg| E agora é o momento de introducir a password. Observar como a tecla '''Enter''' é agora '''Done''' (Feito). Porque este campo é último e xa non hai máis a continuación.
Image:Android_2013_U2_08_EditText_09.jpg| Unha vez que se preme na tecla '''Done''' desaparece o teclado.

</gallery>

===Control de eventos no teclado virtual. Distintas accións da tecla "Enter": android:imeOptions===
*A tecla '''Enter''' no teclado virtual pode realizar unha serie de accións:
**Por defecto:
***o sistema determina se existe outro elemento ao que poida ir o foco, nese caso a función da tecla é '''Next'''.
***Se non o atopa a acción da tecla é '''Done'''.
***Salvo nalgúns '''inputType''' como por exemplo o multiliña.
**Podemos asignar explicitamente que acción se desexa que se leve a cabo cada caixa de texto. Para iso está o atributo '''android:imeOptions'''.
***Que dun campo vaia ao anterior, que envíe o texto, que busque o texto, etc. En referencias está un enlace ás posibles accións.

*O seguinte XML vai e a mesma pantalla anterior, só que as accións da tecla '''Enter''' para algúns '''EditText''' foi cambiada. Observar as accións definidas nas liñas marcadas.
<syntaxhighlight lang="xml" line highlight="11,18,32">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe un número enteiro"
android:imeOptions="actionDone"
android:inputType="numberSigned" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe un número decimal"
android:imeOptions="actionPrevious"
android:inputType="numberSigned|numberDecimal" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe palabras...(saíra a 1ª letra en maísculas)"
android:inputType="textCapWords|textMultiLine" />

<EditText
android:id="@+id/et_mail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enderezo e-mail. Esta línea sae por fóra da pantalla"
android:imeOptions="actionSend"
android:inputType="textEmailAddress" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Escribe a clave."
android:inputType="textPassword" />

</LinearLayout>
</syntaxhighlight>

<gallery caption="Introducir datos" widths="350" heights="300px" perrow="2">
Image:Android_2013_U2_08_EditText_10.jpg| O primeiro campo ten definida a acción '''Done''' para a tecla '''Enter'''.
Image:Android_2013_U2_08_EditText_11.jpg| O segundo campo a acción ir ao anterior campo.
Image:Android_2013_U2_08_EditText_12.jpg| O campo do mail, ten definida a acción '''Send''' que vai ser capturada en Java e realizar unha acción en consecuencia.
</gallery>

*Codificación en Java que captura a acción '''actionSend''' dun campo de texto (email) e o que fai e recoller o texto desa caixa de texto, o e-mail, e volver a imprimir unha mensaxe nesa mesma caixa de texto.

<syntaxhighlight lang="java" line highlight="20,22-34">
package com.example.u2_08_edittext;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.inputmethod.EditorInfo;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.TextView.OnEditorActionListener;

public class U2_08_EditText extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_u2_08_edit_text);

final EditText etMail = (EditText) findViewById(R.id.et_mail);

etMail.setOnEditorActionListener(new OnEditorActionListener() {
@Override
public boolean onEditorAction(TextView v, int actionId, KeyEvent event) {
boolean handled = false;
if (actionId == EditorInfo.IME_ACTION_SEND) {
v.setText("Mensaxe enviada a: "+v.getText());
//etMail.setText("Mensaxe enviada a: " + etMail.getText());
handled = true;
}

return handled;
}
});

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.u2_08__edit_text, menu);
return true;
}

}
</syntaxhighlight>

*'''Liña 20''': creamos un obxecto (etMail) que apunta ao EditText no que se introduce o mail.
*'''Liña 22 - 33''': chamamos a método Listener (''escoitador'') (que veremos máis adiante) do obxecto etMail: '''setOnEditorActionListener ()'''
**Ese método será chamado cando se realice unha acción nun TextView
**Lembrar que un EditText é unha subclase de TextView
**Por exemplo, cando se prema unha tecla ou cando haxa unha acción IME seleccionada polo usuario.
**Como parámetro váiselle pasar a creación dunha clase anónima que implementa unha interface (OnEditorActionListener) para a cal hai que sobreescribir o único método que ten a interface (onEditorAction()).

*'''Liñas 24-29''': sobreescritura do método OnEditorAction() no que se reciben 3 parámetros:
**O TextView que xerou o evento (v). Neste caso a caixa de texto do mail
**O ID da acción enviada
**E se o evento foi xerado pola tecla '''Enter''' ou non (event).
**Comprobamos se o ID da acción é o SEND, nese caso modificamos o contido da caixa de texto do mail.

*'''Liña 28''': realiza a mesma función ca 27. Lembrar que '''v''' é un TextView que apunta á caixa de edición do mail e que etMail é un EditText que apunta ao mesmo elemento.

*Para que o IDE nos cre a '''clase anónima''':
**Escribir a chamada ao método (ollo ; final incluído): '''etMail.setOnEditorActionListener( );'''
**Escribir '''new''' entre os paréntesis: '''etMail.setOnEditorActionListener(new );'''
**Premer CTRL+Barra espaciadora e xa o sistema completa todo o demais.
**Logo só queda poñer o noso código no método a sobreescribir.

*Lembrar premer '''SHIFT+CTRL+O''' para importar os paquetes correspondentes.

<gallery caption="Acción Send" widths="350" heights="300px" perrow="2">
Image:Android_2013_U2_08_EditText_12.jpg| Ao premer en '''Send'''
Image:Android_2013_U2_08_EditText_13.jpg| O sistema captura o evento e envía unha mensaxe a o mesma caixa de texto.
</gallery>

<br> -- [[Usuario:angelfg|Ángel D. Fernández González]] e [[Usuario:Carrion|Carlos Carrión Álvarez]] -- (2015).

EditText. Control de eventos I - Historial de revisiones

Angelfg: /* Introdución */