CanalQb - Python (BeeWare e Toga) - Trabalhando com Widgets

---

@CanalQb que Youtube 

---

---

Python BeeWare e Toga Trabalhando com Widgets

---

---

Sempre crie uma frase de segurança única para jogos, Airdrops e qualquer outra coisa de origem desconhecida, em vez de usar sua carteira principal.

---

O Toga é um framework para desenvolvimento de aplicações móveis e de desktop com Python. Ele oferece diversos widgets que permitem a criação de interfaces gráficas. A seguir, estão listados os principais widgets disponíveis no Toga (conforme a versão mais recente, até 2023):

Prints realizado via comando "adb exec-out screencap -p > screenshot.png"

1. Button

   - Um botão que pode executar uma ação quando clicado.

   - Exemplo de uso: 

button = toga.Button('Clique Aqui', on_press=callback)

Exemplo prático 

import toga

from toga import Button, Label

from toga.style import Pack

from toga.constants import COLUMN

def on_button_click(widget):

    # Modifica o texto do label

    label.text = "Você clicou no botão!"

def build(app):

    # Criação do label (inicialmente com texto vazio)

    global label

    label = Label('Clique no botão abaixo', style=Pack(padding=20))

    # Criação do botão

    button = Button('Clique Aqui', on_press=on_button_click, style=Pack(padding=20))

    # Criação de um layout com os elementos

    box = toga.Box(children=[label, button], style=Pack(direction=COLUMN, padding=20))

    return box

def main():

    # Criando a aplicação Toga

    app = toga.App('Exemplo de Toga', 'org.exemplo.toga', startup=build)

    return app

# Se rodando diretamente, iniciar a aplicação

if __name__ == "__main__":

    main().main_loop()

Print emulado no Windows via comando briefcase run

Print emulado no Android via comando briefcase run android

2. Label

   - Exibe um texto estático na interface.

   - Exemplo de uso: 

label = toga.Label('Texto aqui')

3. TextInput

   - Um campo de texto onde o usuário pode digitar.

   - Exemplo de uso: 

 

text_input = toga.TextInput(placeholder='Digite algo')

Exemplo prático:

import toga

from toga.style import Pack

from toga.style.pack import COLUMN

class MeuApp(toga.App):

    def startup(self):

        # Criação do widget TextInput

        text_input = toga.TextInput(placeholder='Digite algo', style=Pack(padding=10))

        # Layout do aplicativo

        box = toga.Box(children=[text_input], style=Pack(direction=COLUMN, padding=20))

        

        # Criação da janela

        self.main_window = toga.MainWindow(title=self.formal_name)

        self.main_window.content = box

        self.main_window.show()

# Inicializando o aplicativo

def main():

    return MeuApp('Meu App', 'org.exemplo.meuapp')

if __name__ == '__main__':

    main().main_loop()

Print Celular

4. PasswordInput

   - Um campo de texto onde os caracteres são mascarados (útil para senhas).

   - Exemplo de uso: 

password_input = toga.PasswordInput(placeholder='Senha')

Exemplo prático:

import toga

from toga.style import Pack

from toga.style.pack import COLUMN

class MeuApp(toga.App):

    def startup(self):

        # Criação do widget PasswordInput

        password_input = toga.PasswordInput(placeholder='Senha', style=Pack(padding=10))

        # Adicionando uma caixa de texto para mostrar o valor da senha

        def on_button_click(widget):

            # Exibe o valor da senha no terminal (em um aplicativo real, você faria algo mais seguro)

            print(f"Senha inserida: {password_input.value}")

        # Criação de um botão para capturar a senha

        button = toga.Button('Mostrar Senha', on_press=on_button_click, style=Pack(padding=10))

        # Layout do aplicativo

        box = toga.Box(children=[password_input, button], style=Pack(direction=COLUMN, padding=20))

        # Criação da janela principal

        self.main_window = toga.MainWindow(title=self.formal_name)

        self.main_window.content = box

        self.main_window.show()

# Inicializando o aplicativo

def main():

    return MeuApp('Meu App', 'org.exemplo.meuapp')

if __name__ == '__main__':

    main().main_loop()

Print celular

5. Box

   - Um container para organizar outros widgets em uma linha ou coluna.

   - Exemplo de uso: 

box = toga.Box(children=[widget1, widget2])

Aqui está um exemplo prático de como usar o toga.Box para organizar dois widgets dentro de uma caixa, em um aplicativo simples, onde temos um campo de texto (TextInput) e um botão (Button). O botão exibirá o texto inserido no campo de texto na tela quando pressionado.

python

Copiar código

import toga

from toga.style import Pack

from toga.style.pack import COLUMN, ROW

class MeuApp(toga.App):

    def startup(self):

        # Criação do widget TextInput

        text_input = toga.TextInput(placeholder='Digite algo', style=Pack(padding=10))

        # Função para capturar o texto do campo e exibir no Label

        def on_button_click(widget):

            label.text = f"Você digitou: {text_input.value}"

        # Criação do widget Button

        button = toga.Button('Mostrar Texto', on_press=on_button_click, style=Pack(padding=10))

        # Criação do widget Label para mostrar o texto digitado

        label = toga.Label('Texto aparecerá aqui', style=Pack(padding=10))

        # Organizando os widgets em uma box

        box = toga.Box(children=[text_input, button, label], style=Pack(direction=COLUMN, padding=20))

        # Criação da janela principal

        self.main_window = toga.MainWindow(title=self.formal_name)

        self.main_window.content = box

        self.main_window.show()

# Inicializando o aplicativo

def main():

    return MeuApp('Meu App', 'org.exemplo.meuapp')

if __name__ == '__main__':

    main().main_loop()

Explicação do código: 

TextInput: Um campo de texto onde o usuário pode digitar algo. O placeholder='Digite algo' serve como uma dica visual enquanto o campo estiver vazio.

Button: Um botão com o texto "Mostrar Texto". Quando pressionado, ele executa a função on_button_click, que captura o texto inserido no TextInput e o exibe no Label.

Label: Um rótulo que inicialmente exibe a mensagem "Texto aparecerá aqui". Quando o botão é pressionado, ele é atualizado com o texto inserido no TextInput.

O Box é usado para organizar os widgets na interface. No caso, estamos utilizando a direção COLUMN, o que faz com que os widgets sejam empilhados verticalmente. A opção padding=20 adiciona um espaçamento interno em torno da caixa para dar uma aparência mais agradável.

Dentro do Box, adicionamos os widgets em uma lista: [text_input, button, label]. O Box gerencia a disposição deles de acordo com a direção definida (COLUMN).

Exibição na tela:

Quando o usuário clica no botão, o texto inserido no campo de entrada é exibido no Label, substituindo o texto inicial "Texto aparecerá aqui".

Como funciona:

• O aplicativo cria uma janela com três widgets:
• Um campo de entrada de texto onde o usuário pode digitar.
• Um botão para "Mostrar Texto".
• Um rótulo que inicialmente exibe uma mensagem padrão.
• Quando o botão é pressionado, o texto do campo de entrada (TextInput) é capturado e mostrado no Label.

Esse exemplo usa o Box para organizar os widgets de forma simples e limpa em um layout vertical, mas o Box também pode ser usado para layouts horizontais (ROW) ou mistos, dependendo da necessidade.

Print Android

6. ImageView

   - Exibe uma imagem na interface.

   - Exemplo de uso: 

image_view = toga.ImageView(image_path='imagem.jpg')

Exemplo prático:

import toga

from toga.style import Pack

from toga.style.pack import CENTER

class MeuApp(toga.App):

    def startup(self):

        # Defina o caminho da imagem

        image_path = 'resources/canalqb.png'  # Substitua pelo caminho correto da sua imagem

        # Criação do objeto Image

        image = toga.Image(image_path)  # Aqui, criamos um objeto toga.Image

        # Criação do widget ImageView

        image_view = toga.ImageView(image=image, style=Pack(width=300, height=300, padding=10))

        # Layout com a imagem centralizada

        box = toga.Box(children=[image_view], style=Pack(direction='column', alignment=CENTER, padding=20))

        # Criação da janela principal

        self.main_window = toga.MainWindow(title=self.formal_name)

        self.main_window.content = box

        self.main_window.show()

# Inicializando o aplicativo

def main():

    return MeuApp('Meu App', 'org.exemplo.meuapp')

if __name__ == '__main__':

    main().main_loop()

 

7. Slider

   - Um controle deslizante (slider) para selecionar um valor numérico.

   - Exemplo de uso: 

slider = toga.Slider(min=0, max=100, value=50)

Exemplo prático

import toga

from toga.style import Pack

from toga.style.pack import CENTER

class MeuApp(toga.App):

    def startup(self):

        # Criar um label para mostrar o valor do slider

        self.label = toga.Label("Valor do Slider: 50", style=Pack(padding=10, font_size=18))

        # Função para atualizar o label com o valor do slider

        def slider_changed(widget):

            self.label.text = f"Valor do Slider: {int(widget.value)}"

        # Criar o slider (de 0 a 100, com valor inicial 50)

        slider = toga.Slider(min=0, max=100, value=50, on_change=slider_changed, style=Pack(padding=10))

        # Criar um box para organizar os widgets

        box = toga.Box(children=[self.label, slider], style=Pack(direction='column', alignment=CENTER, padding=20))

        # Criar a janela principal

        self.main_window = toga.MainWindow(title=self.formal_name)

        self.main_window.content = box

        self.main_window.show()

# Inicializando o aplicativo

def main():

    return MeuApp('Meu App', 'org.exemplo.meuapp')

if __name__ == '__main__':

    main().main_loop()

Print Android

8. Switch

   - Um controle de alternância (on/off), semelhante a um botão de ligar/desligar.

   - Exemplo de uso: 

switch = toga.Switch(label='Ativar')

Exemplo pratico:

import toga

from toga.style import Pack

from toga.style.pack import CENTER

class MeuApp(toga.App):

    def startup(self):

        # Criar um label para exibir o estado do switch

        self.label = toga.Label("Estado: Desativado", style=Pack(padding=10, font_size=18))

        # Função que será chamada quando o switch mudar de estado

        def switch_changed(widget):

            if widget.value:

                self.label.text = "Estado: Ativado"

            else:

                self.label.text = "Estado: Desativado"

        # Criar o switch, passando o parâmetro 'text' necessário

        switch = toga.Switch(text="Ativar", on_change=switch_changed, style=Pack(padding=10))

        # Layout com os widgets

        box = toga.Box(children=[self.label, switch], style=Pack(direction='column', alignment=CENTER, padding=20))

        # Criar a janela principal

        self.main_window = toga.MainWindow(title=self.formal_name)

        self.main_window.content = box

        self.main_window.show()

# Inicializando o aplicativo

def main():

    return MeuApp('Meu App', 'org.exemplo.meuapp')

if __name__ == '__main__':

    main().main_loop()

Print Android

9. ProgressBar

   - Exibe o progresso de uma tarefa, normalmente com uma barra de progresso.

   - Exemplo de uso: 

progress_bar = toga.ProgressBar(max=100)

Exemplo prático:

import toga

from toga.style import Pack

from toga.style.pack import CENTER

import asyncio

class MeuApp(toga.App):

    def startup(self):

        # Criar uma progress bar com o valor máximo de 100

        self.progress_bar = toga.ProgressBar(max=100, style=Pack(padding=10, width=300))

        # Criar um botão para iniciar o progresso

        self.button = toga.Button("Iniciar Progresso", on_press=self.start_progress, style=Pack(padding=10))

        # Layout com os widgets (barra de progresso e botão)

        box = toga.Box(children=[self.progress_bar, self.button], style=Pack(direction='column', alignment=CENTER, padding=20))

        # Criar a janela principal

        self.main_window = toga.MainWindow(title=self.formal_name)

        self.main_window.content = box

        self.main_window.show()

    async def update_progress(self):

        """Função assíncrona para simular um processo e atualizar a barra de progresso"""

        for i in range(101):

            self.progress_bar.value = i  # Atualiza a barra de progresso

            await asyncio.sleep(0.05)  # Simula um tempo de execução

    def start_progress(self, widget):

        """Inicia o processo de atualização da barra de progresso"""

        # Chama a função assíncrona para atualizar a barra de progresso

        asyncio.create_task(self.update_progress())

# Inicializando o aplicativo

def main():

    return MeuApp('Meu App com Progresso', 'org.exemplo.progresso')

if __name__ == '__main__':

    main().main_loop()

Print Android

10. Select

   - Um menu suspenso (combo box) onde o usuário pode escolher uma opção.

   - Exemplo de uso: 

self.selection = toga.Selection(items=["title", "message", "sound"], on_change=self.func1 ) 

Exemplo prático:

import warnings

warnings.filterwarnings("ignore", category=DeprecationWarning, message=".*on_select.*")

import toga

from toga.style import Pack

from toga.style.pack import COLUMN, ROW 

class HelloWorld(toga.App):

    def startup(self):

        # Use 'on_change' instead of 'on_select'

        self.selection = toga.Selection(style=Pack(font_size=30), items=["title", "message", "sound"], on_change=self.func1 )

        main_box = toga.Box(style=Pack(direction=COLUMN))

        main_box.add(self.selection)

        self.main_window = toga.MainWindow(title=self.formal_name)

        self.main_window.content = main_box

    def func1(self, widget):

        print(self.selection.value)

        return  

        

def main():

    return HelloWorld()

 

11. MultilineTextInput

   - Um campo de texto multilinha onde o usuário pode digitar várias linhas de texto.

   - Exemplo de uso: 

multiline_text_input = toga.MultilineTextInput()

12. Table

   - Exibe uma tabela de dados, com suporte a múltiplas colunas e linhas.

   - Exemplo de uso: 

table = toga.Table(headers=['Coluna 1', 'Coluna 2'], data=[('Item 1', 'Valor 1'), ('Item 2', 'Valor 2')])

13. DatePicker

   - Um widget para selecionar uma data.

   - Exemplo de uso: 

date_picker = toga.DatePicker()

14. TimePicker

   - Um widget para selecionar uma hora.

   - Exemplo de uso:

time_picker = toga.TimePicker()

15. WebView

   - Um widget que permite embutir conteúdo web dentro da aplicação.

   - Exemplo de uso: 

webview = toga.WebView(url='https://www.exemplo.com')

16. NavigationView

   - Fornece uma estrutura de navegação com menus e barras de navegação.

   - Exemplo de uso: 

nav_view = toga.NavigationView()

17. Dialog

   - Uma janela de diálogo que pode ser usada para interagir com o usuário (como exibir mensagens, solicitar entradas ou confirmar ações).

   - Exemplo de uso: 

toga.MainWindow().info_dialog('Título', 'Mensagem')

18. Tree

   - Um widget de árvore, que permite exibir dados hierárquicos.

   - Exemplo de uso: 

tree = toga.Tree(root=some_tree_data)

19. ScrollContainer

   - Um container que permite rolar o conteúdo, útil para exibir grandes quantidades de dados ou widgets.

   - Exemplo de uso: 

scroll_container = toga.ScrollContainer(content=some_widget)

20. Action

   - Um objeto que pode ser associado a ações específicas dentro de menus ou botões.

   - Exemplo de uso: 

action = toga.Action('Ação', handler=callback)

21. Font

   - Para definir e customizar fontes em widgets que suportam texto.

   - Exemplo de uso: 

font = toga.Font(family='Arial', size=12)

22. TextView

   - Exibe texto em uma área com formatação. Pode ser utilizado para textos mais complexos, com várias opções de estilo.

   - Exemplo de uso: 

text_view = toga.TextView(text='Texto com formatação')

Sim, além dos widgets que você mencionou, o Toga oferece outros componentes e funcionalidades que podem ser úteis para criar aplicações mais complexas. Aqui estão mais alguns que você pode explorar:

23. Menu

- Permite criar menus contextuais ou menus principais para a aplicação.

- Exemplo de uso:

menu = toga.Menu(items=[toga.MenuItem('Abrir', handler=abrir), toga.MenuItem('Sair', handler=sair)])

24. Window

- Representa uma janela da aplicação. A maioria dos widgets é adicionada a uma janela para ser exibida na tela.

- Exemplo de uso:

window = toga.MainWindow('Minha Aplicação')

window.content = box  # Onde box é um layout que contém os widgets

window.show()

25. Popup

- Similar a uma janela, mas geralmente usada para mostrar informações rápidas ou interações simples, como confirmações ou notificações.

- Exemplo de uso:

popup = toga.Popup('Informação', message='Aqui está a mensagem.')

popup.show()

26. MenuBar

- Permite a criação de uma barra de menu na parte superior da janela (semelhante à interface de desktop tradicional).

- Exemplo de uso:

menubar = toga.MenuBar(items=[toga.Menu('Arquivo', items=[toga.MenuItem('Abrir', handler=abrir)])])

window = toga.MainWindow()

window.menu = menubar

27. Spacer

- Um widget que atua como um espaçador para organizar a interface, ajudando a criar layouts mais flexíveis.

- Exemplo de uso:

spacer = toga.Spacer()

28. Color

- Define uma cor que pode ser utilizada para widgets que aceitam personalização de cores, como `Button`, `Label`, etc.

- Exemplo de uso:

color = toga.Color('#FF5733')  # Cor em hexadecimal

button.style.background_color = color

29. CheckBox

- Um controle de caixa de seleção (checkbox), útil para opções que podem ser ativadas ou desativadas.

- Exemplo de uso:

checkbox = toga.Switch(label='Aceito os termos', on_toggle=toggle_handler)

30. FontIcon

- Permite o uso de ícones de fontes (como FontAwesome) nos widgets.

- Exemplo de uso:

icon = toga.FontIcon('fa-check')

button = toga.Button('Concluir', icon=icon)

31. ActionGroup

- Agrupa ações para serem utilizadas em menus ou barras de ferramentas, como um conjunto de ações relacionadas.

- Exemplo de uso:

action_group = toga.ActionGroup('Grupo de Ações', actions=[action1, action2])

32. FontFamily

- Define uma família de fontes para ser usada em widgets de texto, como 'Label', 'Button', 'TextView', etc.

- Exemplo de uso:

font_family = toga.FontFamily('Roboto')

label.style.font = font_family

33. ContextMenu

- Permite criar menus contextuais, que são exibidos quando o usuário clica com o botão direito em um widget.

- Exemplo de uso: 

def on_right_click(widget):

context_menu = toga.Menu(items=[toga.MenuItem('Opção 1', handler=opcao1)])

context_menu.show()

widget.on_right_click = on_right_click 

Esses são alguns dos componentes e funcionalidades adicionais que o Toga oferece. Com esses widgets, é possível criar interfaces ricas e dinâmicas para suas aplicações.

---

Esses widgets são a base para construir interfaces gráficas usando Toga. Além desses, o framework oferece suporte a funcionalidades adicionais como eventos, temas personalizados, integração com o sistema operacional e mais.

Se precisar de exemplos de código ou de mais detalhes sobre algum widget específico, posso fornecer também!