segunda-feira, 14 de julho de 2014

Click com botão direito e menu de contexto no Silverlight

Quando o Silverlight 4 foi lançado um dos recursos mais aguardados era o clique do botão direito, até então não era possível incluir nada nessa funcionalidade. Hoje contamos com o "Context Menu control", sendo ele quem iremos mostrar ao clicar com o botão direito.
Já apresentamos aqui um exemplo de como realizar isso, hoje mostraremos com mais detalhes.

Novo projeto
Vamos iniciar o Visual Studio 2010 e criar uma nova aplicação Silverlight (Silverlight Application Project), com o nome ContextMenuSample:image1.gif

Em seguida vamos adicionar as referencias para o "Toolkit", que ira nos permitir trabalhar com "ContextMenu" e "MenuItem":
image2.gif

Agora vamos incluir um "TextBox". O click direito apresentará o "context menu", nele teremos dois menus, sendo eles "Grow Font" e "Shrink Font", ao selecionar uma das opções o tamanho da fonte será alterado.
Dando continuidade, adicionaremos dois eventos importantes, "MouseRightButtonDown" e "MouseRightButtonUp". Esses dois eventos serão responsáveis pela apresentação do menu:

image3.gif

No evento "MouseRightButtonDown" precisaremos desabilitar o comportaamento padrão do Silverlight:

image4.gif

Agora que o evento padrão não será mais apresentado codificaremos o "MouseRightButtonUp", onde iremos criar o "ContextMenu":

image5.gif

Como podemos perceber, no codigo acima criamos dois itens de menu e associamos ambos ao um unico evento de click. Por fim setamos a propriedade "IsOpen" para "true", conseguindo assim presentar o "Context menu".
A posição do "ContextMenu" será relativa em relação ao "LayoutRoot", por isso iremos definir "HorizontalOffset" e  "VerticalOffset" reformar relativa as coordendas "X" e "Y" do "LayoutRoot".
No evento de Click do "MenuItem" codificaremos o objetivo de nosso menu, aumentar ou diminuir a fonte:

image6.gif

Testando:
image7.gif

image8.gif

Fonte:
http://www.microsoft.com
http://www.c-sharpcorner.com/
http://msdn.microsoft.com
http://msdn.microsoft.com/pt-br/silverlight/default.aspx

segunda-feira, 27 de janeiro de 2014

TableLayout (Android)

Em nosso ultimo post sobre Android falamos sobre como utilizar o LinearLayout, hoje mostraremos uma outra forma de agrupar os componentes com o uso do TableLayout.

Como o próprio nome sugere o TableLayout nos permite organizar os componentes na tela de forma tabular (linhasxcolunas), além de ser uma forma bem rápida de organizar componentes sem que tenhamos que nos preocupar com alinhamentos e margens.

O que usaremos:

  1. JDK 1.6
  2. Android Developer Tools (Eclipse)
Criando um novo projeto

Vamos abrir o Eclipse em seguida File - New - Project - Android - Android Application Project:

Na próxima tela iremos especificar o nome da aplicação, o nome do projeto e o nome do pacote:

image
Na próxima tela nos certificaremos da criação de uma atividade, selecionando a opção “Create activity”:

image

Vamos manter o ícone padrão:

image

Em seguida vamos escolher uma atividade em branco selecionando “BlankActivity”:

Por fim seremos questionados quanto a alguns detalhes de nossa atividade, aqui também manteremos o padrão:

Exemplo

Vamos abrir o arquivo : res/layout/activity_main.xml:

image

E colar o seguinte código:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:shrinkColumns="*"
android:stretchColumns="*" >
<!-- 2 columns -->

<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >

<TextView
android:id="@+id/textView1"
android:text="Col 1"
android:textAppearance="?android:attr/textAppearanceLarge" />

<Button
android:id="@+id/button1"
android:text="Col 2" />
</TableRow>

<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >

<EditText
android:id="@+id/editText1"
android:layout_span="2"
android:text="Col 1 &amp; 2" />
</TableRow>
<!-- red line -->

<View
android:layout_height="4dip"
android:background="#FF00" />
<!-- 4 columns -->

<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >

<TextView
android:id="@+id/textView2"
android:text="Col 1" />

<Button
android:id="@+id/button2"
android:text="Col 2" />

<Button
android:id="@+id/button3"
android:text="Col 3" />

<Button
android:id="@+id/button5"
android:text="Col 4" />
</TableRow>

<TableRow
android:id="@+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >

<Button
android:id="@+id/button4"
android:layout_column="2"
android:text="Col 3" />
</TableRow>

<TableRow
android:id="@+id/tableRow5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip" >

<Button
android:id="@+id/button6"
android:layout_column="1"
android:text="Col 2" />
</TableRow>

</TableLayout>




Como é possível perceber, não precisamos definir o numero de colunas ou linhas da tabela, simplesmente adicionamos o item de nova linha quando desejamos uma nova, para em seguida incluir os componentes, automaticamente serão formadas as colunas, uma para cada componente incluído. É possível incluir um componente em uma coluna em especifico usando a propriedade  android:layout_column. Vale destacar que mesmo tabelas com apenas três colunas, por exemplo, podem receber um componente com a propriedade  android:layout_column="3" (lembrando que as colunas são base zero), com isso automaticamente a quarta coluna será criada. Outra propriedade interessante é android:layout_span="2", nesse exemplo estamos dizendo ao layout que o componente com essa propriedade ocupara duas colunas consecutivas. Vejamos como nosso layout ficou:



image



Quando trabalhamos com o TableLayout e estamos no modo xml, existe uma visão muito útil que nos permite ter uma dimensão mais precisa de como nosso layout esta, essa visão é a Outline:


image


Fonte:

Android Developer

Java Code Geeks

Vogella