GRIDS 4x4 - This is very APPealing

Bem vindo a uma série de workshops todo o terreno

Bom dia. O GRIDS tem o prazer de organizar o ciclo de workshops de programação GRIDS 4x4. Organizado por Estudantes e Docentes do DEM, destina-se a Estudantes do MIEM entre o 1º e o 3º ano interessados em desenvolver competências nesta área cada vez mais importante para o Engenheiro do futuro. Em anexo podes encontrar o cartaz geral, tal como o deste evento.

Todas as sessões são independentes, pelo que podes sempre participar. This is very APPealing é a última sessão GRIDS 4x4 em 2018, onde vamos relembrar alguns conceitos sobre aplicações Android e inovar a sua utilização e aplicação. Será criada uma aplicação ao longo do evento para controlar uma surpresa que a equipa desenvolveu para a sessão final do GRIDS 4x4! Terá lugar no dia 28 de Novembro, a partir das 1600h, na sala 22.3.14. As inscrições estão abertas até ao dia 16 de Novembro, com vagas limitadas. Não hesites, podes inscrever-te aqui! Depois desta data, receberás um e-mail de confirmação com instruções para o registo.

Para participares neste workshop precisas de um computador para instalar o Android Studio. Os links necessários encontram-se abaixo junto com alguns tutoriais e ajudas.

Para qualquer questão, não hesites em contactar-me (jalex@ua.pt). Vem programar connosco, vai ser um ano cheio de coisas incríveis!

Software

Neste workshop disponibilizamos uma imagem de máquina virtual com todos os programas necessários instalados. Cabe ao participante decidir se instala os programas nativamente e verifica se está instalado correctamente ou se apenas cria uma máquina virtual com a imagem fornecida.

Sugerimos que leia os manuais de instruções do GRIDS Apps, 1º e 2º link dos manuais, se estiver a instalar os programas no seu computador. Para verificar se tem tudo configurado correctamente, temos este projecto template para compilar na sua máquina e que será usado como base no workshop. Caso algo corra mal, pode sempre entrar em contacto por (gridsappsteam@gmail.com) ou pesquisar no seu motor de busca preferido.

Projecto Template

Manuais


Workshop

Neste workshop vamos fazer uma aplicação android e para isto temos de compreender o funcionamento de alguns objectos e elementos gráficos. Com isto segue-se um pequeno guia para criar o essencial numa aplicação.

Objectos da interface gráfica

Os objectos são muito diferentes mas têm atributos comuns entre si, com isto dito, torna-se fácil entender e editar a gosto.

ImageView

O ImageView permite mostrar imagens como diz o nome, no entanto, pode ser usado como botão de fundo transparente que torna muito mais útil para a criação de interfaces mais limpas.

101
102
103
104
105
106
107
<ImageView
    android:id="@+id/imv_btn_up"
    android:layout_width="75dp"
    android:layout_height="75dp"
    android:layout_marginLeft="75dp"
    android:layout_marginTop="75dp"
    android:src="@drawable/ic_arrow_upward_gray_24dp"/>

Atributo Função
android:id="@+id/imv_btn_up" define o id
android:layout_width="75dp" define a altura
android:layout_height="75dp" define a largura
android:layout_marginLeft="75dp" define o espaço livre à esquerda
android:layout_marginTop="75dp" define o espaço livre por cima
android:src="@drawable/ic_arrow_upward_gray_24dp" define o grafismo a desenhar

EditText

Este objecto é capaz de receber texto escrito pelo utilizador.

101
102
103
104
105
106
107
<EditText
    android:id="@+id/et_message"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="5"
    android:hint="@string/message_hint"
    android:textColor="@color/colorPrimary"/>

Atributo Função
android:id="@+id/et_message" define o id
android:layout_width="0dp" define a largura para ser mudada face ao peso que possui
android:layout_height="match_parent" define a altura igual ao objecto dentro do qual se encontra
android:layout_weight="5" define o peso/importância / maior o número maior o tamanho
android:hint="@string/message_hint" define o texto de ajuda a mostrar quando a caixa de texto está vazia
android:textColor="@color/colorPrimary" define a cor do texto

Dinâmica da interface gráfica

Com os objectos criados, tem que se aceder aos mesmos para lhes atribuir funcionalidade no programa. Para isto utiliza-se uma classe chamada Listener que fica à escuta de toques no mesmo. Para aceder aos objectos, tem que os iniciar e só depois pode-se atribuir o Listener que desejar.

Botões

101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
package tk.gridsapps.mqttremote;
import android.widget.ImageView;
public class FullscreenActivity extends AppCompatActivity {

    //Cria as variáveis
    private Vibrator vib;
    private Integer tVib = 50; //miliseconds

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fullscreen);
        FullscreenActivity.context = getApplicationContext();

        //Atribui o objecto gráfico à variável bta do tipo ImageView
        ImageView btA = findViewById(R.id.imv_btn_a);
        vib = (Vibrator) getSystemService(Context.VIBRATOR_SERVICE);

        //Cria um listener para qualquer toque no objecto
        btA.setOnTouchListener(new View.OnTouchListener(){
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                //Quando o objecto for pressionado, irá accionar esta acção
                if (event.getAction()==MotionEvent.ACTION_DOWN){
                    mqa.publishM("5",topic);
                    vib.vibrate(tVib);
                //Quando o objecto for solto, irá accionar esta acção
                }else if (event.getAction()==MotionEvent.ACTION_UP){
                    mqa.publishM("0",topic);
                }
                return true;
            }
        });

    }

}

EditText

101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
package tk.gridsapps.mqttremote;
import android.widget.EditText;
import android.widget.ImageView;
public class FullscreenActivity extends AppCompatActivity {

    //Cria as variáveis
    private EditText etMessage;
    private String topic = "bomber/actions";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fullscreen);
        FullscreenActivity.context = getApplicationContext();

        //Atribui o objecto gráfico à variável global etMessage do tipo EditText
        etMessage = findViewById(R.id.et_message);
        imvSend = findViewById(R.id.imv_send);

        //Cria um listener para cliques no objecto
        imvSend.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //Ao ser clicado, o texto da caixa de texto será enviada para o tópico designado
                mqa.publishM(etMessage.getText().toString(),topic);
            }
        });
    }

}