% -*- mode: latex -*-
% -*- coding: latin-1 -*-

% TOPIC..: Contribuir sem codificar: formas de colaboração.
% LICENSE: GNU GPL-2
% AUTHOR.: Gustavo Sverzut Barbieri <barbieri@gmail.com>
% URL....: http://palestras.gustavobarbieri.com.br/treinamento_eagle/

% I used to like Prosper, but Beamer is much better!
% Get it at: http://latex-beamer.sourceforge.net
\documentclass[
% notes,
% notes=only,
% trans,
% handout,
% red,
% compress,
% draft,
]{beamer}

\pdfinfo
{
  /Title       (Treinamento Eagle)
  /Creator     (TeX)
  /Author      (Gustavo Sverzut Barbieri)
  /Subject     (PyConBrasil - 2006)
}
\usepackage{color}
\usepackage{listings}
\usepackage{hyperref}
\usepackage[brazil]{babel}
\usepackage[latin1]{inputenc}
\usepackage{thumbpdf}

\usepackage{pgf,pgfarrows,pgfnodes,pgfautomata,pgfheaps,pgfshade}
\usepackage{amsmath,amssymb}

\definecolor{citecolor}{rgb}{0.0,0.6,0.6}
\definecolor{filecolor}{rgb}{1.0,0.0,0.0}
\definecolor{linkcolor}{rgb}{0.0,0.0,1.0}
\definecolor{urlcolor}{rgb}{0.29,0.28,0.74} % same color as Antibes middle bar


\usetheme{FreeMobility}
%\usetheme{Antibes} % low layout overhead  (just top)
% \usetheme{Berkeley} % medium layout overhead
% \usetheme{Berlin}
% \usetheme{Bergen}
% \usetheme{Boadilla}  % very low layout overhead
% \usetheme{Copenhagen}
% \usetheme{Darmstadt}
% \usetheme{Dresden}
% \usetheme{Frankfurt}
% \usetheme{Goettingen} % great
% \usetheme{Hannover}
% \usetheme{Ilmenau}
% \usetheme{JuanLesPins}
% \usetheme{Luebeck}
% \usetheme{Madrid}
% \usetheme{Malmoe}
% \usetheme{Marburg} % great
% \usetheme{Montpellier}
% \usetheme{PaloAlto}
% \usetheme{Pittsburgh}
% \usetheme{Rochester}
% \usetheme{Singapore}
% \usetheme{Szeged}
% \usetheme{Warsaw} % great
% \usetheme{Darmstadt}


%\usefonttheme{structurebold}
\usefonttheme{professionalfonts}

% \usecolortheme{albatross} % dark blue
% \usecolortheme{beetle} % grey + blue
% \usecolortheme{crane} % yellow
% \usecolortheme{default}
% \usecolortheme{dolphin} % light purple + white
% \usecolortheme{dove} % b&w, excellent to print
% \usecolortheme{fly} % all grey
% \usecolortheme{lily} % dark blue
% \usecolortheme{orchid} % dark blue
% \usecolortheme{rose} % yet another blue
% \usecolortheme{seagull} % white and grey
% \usecolortheme{seahorse} % light purple
% \usecolortheme{whale}

\hypersetup{colorlinks,%
            citecolor=citecolor,%
            filecolor=filecolor,%
            linkcolor=linkcolor,%
            urlcolor=urlcolor,%
            pdftex}

\pgfdeclareimage[width=2cm,interpolate=true]{indt}{indt}

\title{Treinamento Eagle}
\subtitle{Eagle --- Desenvolvimento Ágil de Interfaces}
\author{Gustavo Sverzut Barbieri}
\institute{\pgfuseimage{indt}}
\date{2 de Junho de 2006}

\setbeamertemplate{blocks}[rounded][shadow=true]
\newenvironment{say}{\begin{exampleblock}{}\rmfamily\small``}{''\end{exampleblock}}


\begin{document}


  \lstset{
    frame=single,
    showstringspaces=false,
    extendedchars=true,
    language=Python,
    backgroundcolor=\color[rgb]{0.95,0.95,0.95},
    rulecolor=\color[rgb]{0.3,0.3,0.3},
    basicstyle=\color[rgb]{0,0,0}\footnotesize\upshape\ttfamily,
    commentstyle=\color[rgb]{0.5,0.0,0.0}\rmfamily\itshape,
    keywordstyle=\color[rgb]{0.7,0.0,0.8}\bfseries,
    stringstyle=\color[rgb]{0.6,0.4,0.4},
    identifierstyle=\color[rgb]{0.2,0.2,0.8}
 }

\frame{\titlepage}

\section<presentation>*{Tópicos}
\begin{frame}
  \tableofcontents[hideallsubsections]
\end{frame}



\newcommand{\agenda}{\frame<handout:0>
  {\frametitle{Agenda}
    \tableofcontents[subsectionstyle=show/shaded/hide,sectionstyle=show/hide]
  }}


\section{Introdução}
\subsection{O que é o Eagle}

\begin{frame}
  \frametitle{O que é o Eagle}
  Camada de \textbf<2>{abstração} em cima de \textbf<3>{Toolkits Gráficos}

  \begin{itemize}
  \item<2> \textbf{Abstração:} manter o usuário longe das complexidades
  \item<3> \textbf{Toolkits Gráficos:} atualmente GTK e GTK/Maemo, QT a
    caminho
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{O que o Eagle não é}
  \begin{itemize}
  \item\onslide+<1-> Não é concorrente de GTK, QT ou MFC
  \item\onslide+<2-> Não é a solução para todos os problemas!
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{Objetivos principais}
  \begin{itemize}
  \item Agilizar o desenvolvimento de GUI simples
  \item Expor componentes em altíssimo nível
  \item Manter a consistência
  \item Ajudar na ``usabilidade''
  \end{itemize}
\end{frame}

\begin{frame}
  \frametitle{Meios para atingir os objetivos}
  \begin{itemize}
  \item\onslide+<1-> Focar no casos mais usados
  \item\onslide+<1-> Expor a interface para o programador mais simples
    possível
  \item\onslide+<1-> Limites...
  \item\onslide+<2-> Limites!
  \item\onslide+<3-> Limites!
  \end{itemize}
\end{frame}

\section{Entendendo o Eagle}
\subsection{Organização}

\frame[containsverbatim]{
  \frametitle{Procedural ou Orientado a Objetos?}
  \begin{itemize}
  \item Como o Python, é \textbf{feito} usando OO
  \item Porém existe API procedural
  \end{itemize}

  \begin{minipage}{0.46\linewidth}
    \begin{lstlisting}[basicstyle=\tiny\upshape\ttfamily,commentstyle=\tiny\rmfamily\itshape,keywordstyle=\tiny\bfseries]
app = App( title="bla",
           center=Label( id="label" ))

wid = get_widget_by_id( "label", app )
set_inactive( wid )
    \end{lstlisting}
    \begin{center}
      \textbf{\footnotesize Procedural}
    \end{center}
  \end{minipage}
~
  \begin{minipage}{0.46\linewidth}
    \begin{lstlisting}[basicstyle=\tiny\upshape\ttfamily,commentstyle=\tiny\rmfamily\itshape,keywordstyle=\tiny\bfseries]
app = App( title="bla",
           center=Label( id="label" ))

wid = app.get_widget_by_id( "label" )
wid.set_inactive()
    \end{lstlisting}
    \begin{center}
      \textbf{\footnotesize Orientado a Objetos}
    \end{center}
  \end{minipage}
}

\begin{frame}
  \frametitle{Sistema de Execução}
  \begin{itemize}
  \item Laço principal tratador de eventos
  \item Despacho baseado em chamadas de funções cadastradas
    (\textit{``callbacks''})
  \item Eventos do usuário: clique de botão
  \item Eventos do sistema: tempo expirado
  \end{itemize}
\end{frame}

\subsection{Componentes Gráficos}
\begin{frame}
  \frametitle{Janelas}

  \begin{minipage}{0.6\linewidth}
    \begin{itemize}
    \item Trata cada janela como uma aplicação
    \item 6 áreas para componentes filhos:
      \begin{itemize}
      \item Topo (organização horizontal)
      \item Baixo (organização horizontal)
      \item Esquerda
      \item Centro
      \item Direita
      \item Preferências (em separado)
      \end{itemize}
    \item Chama-se \lstinline|App|
    \item Acesso aos filhos pelo nome: \lstinline|app["lab1"]| ou
      \lstinline|app.get_widget_by_id("lab1")|
    \end{itemize}
  \end{minipage}
  \begin{minipage}{0.38\linewidth}
    \pgfimage[height=4.4cm]{app}
  \end{minipage}

\end{frame}

\begin{frame}
  \frametitle{Componentes com Dados}
  \begin{minipage}{0.7\linewidth}
    \begin{itemize}
    \item Podem ser persistidos
    \item Têm métodos \lstinline|set_value()| e \lstinline|get_value()|
    \item Se acessados via \lstinline|app["name"]|, já acessa o conteúdo
      \begin{itemize}
      \item evita uso de ``set'' e ``get''
      \item acesso ao elemento ainda pode ser obtido com
        \lstinline|app.get_widget_by_id()|
      \end{itemize}
    \item Avisa quando dados foram modificados
    \item Componentes: \lstinline|CheckBox|, \lstinline|Label| e outros...
    \end{itemize}
  \end{minipage}
  \begin{minipage}{0.28\linewidth}
    \pgfimage[interpolate=true,width=1.6cm]{checkbox}
  \end{minipage}
\end{frame}

\begin{frame}
  \frametitle{Componentes com Dados e Rótulo}
  \begin{minipage}{0.7\linewidth}
    \begin{itemize}
    \item Estendem os ``Componentes de Dados'', adicionando um rótulo
    \item Agiliza o desenvolvimento
    \item Melhora a usabilidade
    \item Rótulo à esquerda em organizações verticais, em cima em
      organizações horizontais
    \item Componentes: \lstinline|Entry|, \lstinline|Password|,
      \lstinline|Spin|, \lstinline|IntSpin|, \lstinline|UIntSpin|,
      \lstinline|Color|, \lstinline|Font|, \lstinline|Selection|,
      \lstinline|Progress|
    \end{itemize}
  \end{minipage}
  \begin{minipage}{0.28\linewidth}
    \pgfimage[interpolate=true,width=3.0cm]{labelentry}
  \end{minipage}
\end{frame}

\begin{frame}
  \frametitle{Outros Componentes}
  \begin{itemize}
  \item \textbf{Agrupamento:} \lstinline|Group|
  \item \textbf{Botão:} \lstinline|Button| e especializações como
    \lstinline|PreferencesButton|
  \item \textbf{Separadores:} \lstinline|HSeparator| e
    \lstinline|VSeparator|
  \item \textbf{Diálogos:} \lstinline|information()|,
    \lstinline|yesno()|, \lstinline|warning()|, \lstinline|error()|,
    \lstinline|confirm()|
  \end{itemize}
\end{frame}

\subsection{Componentes Gráficos Avançados}
\begin{frame}
  \frametitle{Superfície de Desenho}

  \begin{minipage}{0.7\linewidth}
    \begin{itemize}
    \item Funções básicas de desenho
    \item Funcionamento simplificado
    \item Facilidade para salvar imagens
    \item Avisa quando posição do mouse mudou
    \item Avisa quando botões do mouse foram pressionados
    \item Integração com tipo ``imagem'' do Eagle (\lstinline|Image|)
    \item Chama-se \lstinline|Canvas|
    \end{itemize}
  \end{minipage}
  \begin{minipage}{0.28\linewidth}
    \pgfimage[interpolate=true,width=3.0cm]{canvas}
  \end{minipage}
\end{frame}


\begin{frame}
  \frametitle{Tabelas}

  \begin{minipage}{0.7\linewidth}
    \begin{itemize}
    \item Apresentação de dados em formato de tabela
    \item Compatível com Python-API para listas!
    \item Formatação simplificada por meio de função cadastrada
    \item Funcionalidade para edição
    \item Funcionalidade para remanejo de ítens
    \item Avisa quando dados foram modificados
    \item Chama-se \lstinline|Table|
    \end{itemize}
  \end{minipage}
  \begin{minipage}{0.28\linewidth}
    \pgfimage[interpolate=true,width=3.0cm]{table}
  \end{minipage}
\end{frame}

\begin{frame}
  \frametitle{Texto Formatado}
  \begin{minipage}{0.7\linewidth}
    \begin{itemize}
    \item Apresentação de texto formatado com subconjunto de HTML
    \item Avisa quando um ``\textit{link}'' foi pressionado
    \item Possibilidade de inclusão de imagens do tipo \lstinline|Image|
      em memória no Eagle
    \item Possibilidade de inclusão de imagens em qualquer outro
      protocolo, usando função cadastrada para obtê-las
    \item Chama-se \lstinline|RichText|
    \end{itemize}
  \end{minipage}
  \begin{minipage}{0.28\linewidth}
    \pgfimage[interpolate=true,width=3.4cm]{richtext}
  \end{minipage}
\end{frame}

\section{Mãos à Obra!}
\subsection{Obtendo e Configurando}

\frame[containsverbatim]{
  \frametitle{Obtenha a cópia do SVN}
  Usaremos a versão em desenvolvimento (SVN):
  \begin{lstlisting}[language=csh,basicstyle=\scriptsize\upshape\ttfamily,identifierstyle=\scriptsize\upshape\ttfamily]
svn co http://code.gustavobarbieri.com.br/eagle/

export PYTHONPATH=$PYTHONPATH:$PWD/eagle/gtk/
\end{lstlisting}
}


\subsection{Hello World!}

\frame[containsverbatim]{
  \frametitle{Aplicativo 1: \textit{Hello World!}}
  \lstinputlisting{code/helloworld.py}
}

\frame[containsverbatim]{
  \frametitle{Aplicativo 1.1: \textit{Hello World!} Revisto}
  \lstinputlisting{code/helloworld2.py}
}

\subsection{Music Player}
\begin{frame}
  \frametitle{Aplicativo 2: Music Player}
  Obtenha o código de \texttt{player.py} e implemente uma interface
  gráfica para a classe \lstinline|Player|.

  \begin{center}
    \pgfimage[interpolate=true,height=3.0cm]{player}
  \end{center}
\end{frame}

\subsection{Chat}
\begin{frame}
  \frametitle{Aplicativo 3: Chat}
  Obtenha o código de \texttt{chat.py} e implemente uma interface
  gráfica para a classe \lstinline|Chat|.

  \begin{center}
    \pgfimage[interpolate=true,height=4.5cm]{chat}
  \end{center}
\end{frame}



\section{Referências e Materiais de Apoio}
\subsection{Referências}

\begin{frame}
  \frametitle{Referências}
  \begin{itemize}
    \item Eagle: \url{http://www.gustavobarbieri.com.br/eagle/}
    \item Docs: \url{http://www.gustavobarbieri.com.br/eagle/docs/}
    \item API: \url{http://www.gustavobarbieri.com.br/eagle/docs/api/}
    \item Downloads: \url{http://www.gustavobarbieri.com.br/eagle/packages/}
  \end{itemize}
\end{frame}

\section{Agradecimento}

\begin{frame}
  \begin{center}
    Obrigado \textbf{INdT} por ter ajudado com a participação na \\ \textbf{PyConBrasil 2006}!
  \end{center}
\end{frame}


\subsection{Contato}

\begin{frame}
  \frametitle{Contato}

  \begin{center}
    {\huge\bfseries Gustavo Sverzut Barbieri}

    \vspace{2em}

    \begin{tabular}{rl}
      Email:& \href{mailto:gustavo.barbieri@indt.org.br}{gustavo.barbieri@indt.org.br}\\
      Website:& \url{http://www.gustavobarbieri.com.br}\\
      ICQ:& 17249123\\
      MSN, Jabber:& barbieri@gmail.com\\
    \end{tabular}
  \end{center}

    \vspace{2em}
    {\footnotesize
    Obtenha esta palestra em:\\
    \url{http://palestras.gustavobarbieri.com.br/treinamento_eagle/}
  }
\end{frame}



\end{document}
