NotePad da Área de Recursos - Código Comentado - Parte 02

Arquivos de Layout e Menus

Com o Android é possível fazer a separação de áreas da interface em diferentes arquivos xml.

No projeto do NotePad, existem os seguintes arquivos xml:

Layout

• note_editor.xml
• noteslist_item.xml
• title_editor.xml

Menu

• editor_options_menu.xml
• list_context_menu.xml
• list_options_menu.xml

E o que são cada um deles?

note_editor.xml

É o arquivo que é responsável por mostrar o conteúdo da nota para edição no seu aplicativo. O arquivo consiste em um widget View, como mostrado abaixo:

<?xml version="1.0" encoding="utf-8"?>
<view xmlns:android="http://schemas.android.com/apk/res/android"
    class="com.example.android.notepad.NoteEditor$LinedEditText"
    android:id="@+id/note"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:padding="5dp"
    android:scrollbars="vertical"
    android:fadingEdge="vertical"
    android:gravity="top"
    android:textSize="22sp"
    android:capitalize="sentences"
/>

A área em amarelo é a área em questão dessa xml.

noteslist_item.xml

É o arquivo que define o layout da lista de itens (i.e. as notas cadastradas no aplicativo). O arquivo é como está mostrado abaixo:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:gravity="center_vertical"
    android:paddingLeft="5dip"
    android:singleLine="true"
/>

Área onde são mostradas as notas existentes está marcada em amarelo.

title_editor.xml

É o arquivo que responde pela interface da janelinha pop-up que aparece quando o usuário quer editar o título da nota. Consiste em um layout do tipo LinearLayout com dois widgets internos: um EditText, que mostrará o nome do título para que possa ser alterado e um Button para efetivar a alteração.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="6dip"
    android:paddingRight="6dip"
    android:paddingBottom="3dip">
    <EditText android:id="@+id/title"
        android:maxLines="1"
        android:layout_marginTop="2dp"
        android:layout_marginBottom="15dp"
        android:layout_width="wrap_content"
        android:ems="25"
        android:layout_height="wrap_content"
        android:autoText="true"
        android:capitalize="sentences"
        android:scrollHorizontally="true" />
    <Button android:id="@+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="@string/button_ok"
        android:onClick="onClickOk" />
</LinearLayout>

O popup está bem em evidência na tela.

Aqui começa algo interessante no Android. Os menus são separados da parte inferior do layout. Com isso, você pode reaproveitar o layout e montar o menu da maneira como achar mais conveniente. 

editor_options_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu_save"
          android:icon="@drawable/ic_menu_save"
          android:alphabeticShortcut='s'
          android:title="@string/menu_save"
          android:showAsAction="ifRoom|withText" />
    <item android:id="@+id/menu_revert"
          android:icon="@drawable/ic_menu_revert"
          android:title="@string/menu_revert" />
    <item android:id="@+id/menu_delete"
          android:icon="@drawable/ic_menu_delete"
          android:title="@string/menu_delete"
          android:showAsAction="ifRoom|withText" />
</menu>

list_context_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/context_open"
          android:title="@string/menu_open" />
    <item android:id="@+id/context_copy"
          android:title="@string/menu_copy" />
    <item android:id="@+id/context_delete"
          android:title="@string/menu_delete" />
</menu>

list_options_menu.xml


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <!--  This is our one standard application action (creating a new note). -->
    <item android:id="@+id/menu_add"
          android:icon="@drawable/ic_menu_compose"
          android:title="@string/menu_add"
          android:alphabeticShortcut='a'
          android:showAsAction="always" />
    <!--  If there is currently data in the clipboard, this adds a PASTE menu item to the menu
          so that the user can paste in the data.. -->
    <item android:id="@+id/menu_paste"
          android:icon="@drawable/ic_menu_compose"
          android:title="@string/menu_paste"
          android:alphabeticShortcut='p' />
</menu>


Nas imagens abaixo você pode ver os botões:

Ou seja, cada parte da interface é dividida em trechos pequenos de XML que podem ser customizados  facilmente, fazendo com que qualquer tela que use esse trecho de XML seja atualizado rapidamente. Isso dá uma liberdade maior à interface.

Muito melhor que ter código repetido em todos os layouts, não?

E, com os novos posts onde o código será comentado vocês vão poder ver como integrar os designs (botões e área interna da interface) na tela.

É isso ai pessoal! Até o próximo post!

NotePad da Área de Recursos - Código Comentado - Parte 01

O aplicativo NotePad da área de recursos do Android serve para se cadastrar notas. Essas notas poderão ser incluídas digitando-se valores diretamente na tela ou poderá criar as notas usando o conteúdo presente no clipboard (área de transferência) do Honeycomb.

Como poderá ver nas telas abaixo, a aplicação não é complexa, apesar do código para se criá-la ser bastante extenso (mas não complicadíssimo de se entender, como poderão acompanhar nas diversas partes dessa análise de código).

Aplicação aberta. Percebam o ícone dele no canto superior esquerdo e as opções no canto superior direito. Na direita há o botão para se criar uma nova nota e um menu de contexto.

Ao se pressionar o menu de contexto, existe a opção de se fazer um PASTE (ou colar) um quaisquer valores que estejam no clipboard do Honeycomb.

Ao se clicar no botão para se criar uma nova nota, a tela acima aparece.

Após se inserir uma nota, ela aparece na tela inicial.

Ao se tocar na nota já existente, a tela de edição da nota aparece, com novas opções no canto superior direito: botão de salvar, de excluir e um menu de contexto para edição de título.

Por fim, a tela onde há a opção de edição do título da nota.

Os campos todos ainda se encontram em inglês. Com o passar do tempo, farei a tradução de tudo para o português para que possamos ter maior noção do que acontece na aplicação.

De qualquer forma, o download do projeto completo poderá ser feito nesse link. 

Cada vez que o código for sendo atualizado, eu vou colocando novas versões no mesmo link e dizendo por aqui.

Uma vez que o projeto tenha sido carregado no Eclipse, você terá uma imagem semelhante no Package Explorer:

AndroidManifest.xml

O primeiro arquivo a ser analizado é o AndroidManifest.xml. Abaixo, insiro-o com todos os comentários em português:

<?xml version="1.0" encoding="utf-8"?>
<!--
O arquivo de Manifesto serve para declarar os conteúdos dessa aplicação Android
O atributo de namespace traz o namespace da plataforma Android e o pacote supre um nome
único para a aplicação. Quando escrever suas próprias aplicações, o pacote deverá ser mudado de "com.example.*"
para o nome do seu domínio.
 -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.android.notepad" >
    <uses-sdk android:minSdkVersion="11" />
    <application android:icon="@drawable/app_notes"
        android:label="@string/app_name"
    >
        <provider android:name="NotePadProvider"
            android:authorities="com.google.provider.NotePad"
            android:exported="false">
            <grant-uri-permission android:pathPattern=".*" />
        </provider>
        <activity android:name="NotesList" android:label="@string/title_notes_list">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <action android:name="android.intent.action.EDIT" />
                <action android:name="android.intent.action.PICK" />
                <category android:name="android.intent.category.DEFAULT" />
                <data android:mimeType="vnd.android.cursor.dir/vnd.google.note" />
            </intent-filter>
            <intent-filter>
                <action android:name="android.intent.action.GET_CONTENT" />
                <category android:name="android.intent.category.DEFAULT" />
                <data android:mimeType="vnd.android.cursor.item/vnd.google.note" />
            </intent-filter>
        </activity>
        <activity android:name="NoteEditor"
            android:theme="@android:style/Theme.Holo.Light"
            android:screenOrientation="sensor"
            android:configChanges="keyboardHidden|orientation"
        >
        <!-- Esse filtro diz que podemos ver ou editar dados de uma nota -->
            <intent-filter android:label="@string/resolve_edit">
                <action android:name="android.intent.action.VIEW" />
                <action android:name="android.intent.action.EDIT" />
                <action android:name="com.android.notepad.action.EDIT_NOTE" />
                <category android:name="android.intent.category.DEFAULT" />
                <data android:mimeType="vnd.android.cursor.item/vnd.google.note" />
            </intent-filter>
<!-- Esse filtro diz que nós podemos criar uma nova nota dentro da pasta de notas.
A ação de INSERT cria uma nova vazia; a ação de PASTE inicializa uma nova nota a partir
do clipboard (área de transferência). Lembre-se que o aplicativo é voltado para o Honeycomb e,
como tal, tem uma área de clipboard mais elaborada. Com isso, caso o usuário tenha
copiado algum texto nessa área, ele poderá virar uma nota na aplicação.
-->
            <intent-filter>
                <action android:name="android.intent.action.INSERT" />
                <action android:name="android.intent.action.PASTE" />
                <category android:name="android.intent.category.DEFAULT" />
                <data android:mimeType="vnd.android.cursor.dir/vnd.google.note" />
            </intent-filter>
        </activity>
        <activity android:name="TitleEditor"
            android:label="@string/title_edit_title"
            android:icon="@drawable/ic_menu_edit"
            android:theme="@android:style/Theme.Holo.Dialog"
            android:windowSoftInputMode="stateVisible">
            <!-- Essa atividade implementa uma ação alternativa que pode ser realizada em novas: edição de título.
            Ela poderá ser usada como operação padrão quando o usuário chama essa ação e está disponível
            como ação alternativa para dados da nota
             -->
            <intent-filter android:label="@string/resolve_title">
            <!-- Essa é a ação que nós realizamos. É uma ação customizada que nós definimos em nossa aplicação e
            não uma ação genérica de VIEW ou EDIT já que não somos um visualizador/editor geral de notas -->
                <action android:name="com.android.notepad.action.EDIT_TITLE" />
                <!-- DEFAULT: executar se for diretamente chamada -->
                <category android:name="android.intent.category.DEFAULT" />
                <!-- ALTERNATIVE: mostrado como uma ação alternativa quando o usuário está trabalhando com esse tipo de dados -->
                <category android:name="android.intent.category.ALTERNATIVE" />
                <!--  -->
                <!-- SELECTED_ALTERNATIVE: mostrado como uma ação alternativa que o usuário pode realizar quando está selecionando esse tipo de dados -->
                <category android:name="android.intent.category.SELECTED_ALTERNATIVE" />
                <!-- Esse é o tipo de dados com os quais vamos operar -->
                <data android:mimeType="vnd.android.cursor.item/vnd.google.note" />
            </intent-filter>
        </activity>
        <activity android:name="NotesLiveFolder" android:label="@string/live_folder_name"
            android:icon="@drawable/live_folder_notes">
            <intent-filter>
                <action android:name="android.intent.action.CREATE_LIVE_FOLDER" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
    </application>
</manifest>

O ideal mesmo é abrir o arquivo no seu Eclipse.

Veja que no arquivo são descritos 4 atividades distintas:

• NotesList
• NoteEditor
• TitleEditor
• NotesLiveFolder

Strings.xml

Já o arquivo strings.xml tem todos as mensagens que serão usadas no aplicativo. Depois de traduzido, o arquivo strings.xml ficará como abaixo:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">NotePad</string>
    <string name="live_folder_name">Notas</string>


    <string name="title_edit_title">Título da Nota:</string>
    <string name="title_create">Nova Nota</string>
    <string name="title_edit">Editar: %1$s</string>
    <string name="title_notes_list">Notas</string>


    <string name="menu_add">Nova Nota</string>
    <string name="menu_save">Salvar</string>
    <string name="menu_delete">Excluir</string>
    <string name="menu_open">Abrir</string>
    <string name="menu_revert">Reverter mudanças</string>
    <string name="menu_copy">Copiar</string>
    <string name="menu_paste">Colar</string>


    <string name="button_ok">OK</string>
    <string name="text_title">Título:</string>


    <string name="resolve_edit">Editar nota</string>
    <string name="resolve_title">Editar título</string>


    <string name="error_title">Erro</string>
    <string name="error_message">Erro ao carregar nota</string>
    <string name="nothing_to_save">Não existe conteúdo a ser salvo</string>
</resources>

No próximo post abrirei cada um dos arquivos XML de layout para mostrar como ele foi criado. Após abrirmos cada um, farei posts separados para cada um dos arquivos .java de controle para a aplicação.