Hi Guys,
Today, I’ll explain a relatively new GUI framework with which you can create native mobile applications across all the different platforms. Note that this framework is still in the preview phase on many fronts. And you also can contribute here in many ways.
Let’s jump into making a chat application using this. It is relatively easy to build.
You need to install the following framework –
pip install beeware==0.3.0.dev3
As I’ve told you that this package is in the preview stage. So, you need to wait for few more days to get this package available for production use.
However, the following diagram presented in Pycon explains that all –

Let’s jump into our objective.
To create the project, the following are steps that need to perform –
Functions that you need to use –
briefcase new
This will lead to several options that you need to fill as shown in the next couple of slides –


Note that, this one I’ve created in the Windows environment. So, you need to provide all these details before creating the app.
This will create a template of code as shown below –
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
""" Chat with my friends """ import toga from toga.style import Pack from toga.style.pack import COLUMN, ROW class SDApp(toga.App): def startup(self): """ Construct and show the Toga application. Usually, you would add your application to a main content box. We then create a main window (with a name matching the app), and show the main window. """ main_box = toga.Box() self.main_window = toga.MainWindow(title=self.formal_name) self.main_window.content = main_box self.main_window.show() def main(): return SDApp() |
And, you can run this template to see the default template output by using the following command –
briefcase dev

Now, I want to take this & add some lines of codes to create a chat-based application in MAC & see how it behaves.
But, before that, the directory structure will look like this –

As you can see, SDChat is my application name. And, based on that, the following directories.
And, inside the final SDChat directory, the following files are created –
__init__.py
__main__.py
app.py
Let’s take this & modify it for MAC. To do that, we need to change app.py script & layout our all the essential GUI ingredients.
Note that I’m not going to discuss the custom bot that I created. Only, I’ll be referring to it.
1. app.py (This script contains all the GUI details & it will invoke the custom bot.)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
############################################## #### Written By: SATYAKI DE #### #### Written On: 17-Feb-2020 #### #### Modified On 17-Feb-2020 #### #### #### #### Objective: Main calling scripts. #### ############################################## """ This is a Chat Application with custom made bot """ import toga from toga.style import Pack from toga.style.pack import COLUMN, ROW # My Custom Built Bot from SDChatbots import clsTalk2Bot as e #-- New class SDChat(toga.App): def startup(self): """ Construct and show the Toga application. Usually, you would add your application to a main content box. We then create a main window (with a name matching the app), and show the main window. """ self.chat = toga.DetailedList(data=[], style=Pack(flex=1)) self.chat.data.append(icon = toga.Icon('resources/brutus.png'), title='SDChat', subtitle='Hi! How are you doing today?') self.text_input = toga.TextInput(style=Pack(flex=1)) #send_button = toga.Button('Send') send_button = toga.Button( 'Send', on_press=self.greet, style=Pack(padding_right=5) ) input_box = toga.Box( children=[self.text_input, send_button], style=Pack(direction=ROW, alignment='center', padding=5) ) main_box = toga.Box(children=[self.chat, input_box], style=Pack(direction=COLUMN)) # main_box.add(send_button) self.main_window = toga.MainWindow(title=self.formal_name) self.main_window.content = main_box self.main_window.show() def greet(self, widget): print('Value: ', self.text_input.value) input_text = self.text_input.value self.chat.data.append(icon=toga.Icon('resources/user.png'), title='You', subtitle = input_text) # Chatbot y = e.clsTalk2Bot() ret_val = y.TalkNow(input_text) self.chat.data.append(icon=toga.Icon('resources/brutus.png'), title='SDChat', subtitle=ret_val) self.text_input.value = '' self.chat.scroll_to_bottom() def main(): return SDChat() |
Let’s discuss a couple of essential lines from the above snippet –
self.chat = toga.DetailedList(data=[], style=Pack(flex=1)) self.chat.data.append(icon = toga.Icon('resources/brutus.png'), title='SDChat', subtitle='Hi! How are you doing today?')
This is the main display box, where you can see all the chat details. And, also, by default, it will prompt the initial conversion starter.
self.text_input = toga.TextInput(style=Pack(flex=1))
This is the place where you will be typing your text.
send_button = toga.Button( 'Send', on_press=self.greet, style=Pack(padding_right=5) )
Here is the button that you are creating. As you can see, almost all the places I’ve provided the “Style,” which is key to your object alignment inside your mobile app.
main_box = toga.Box(children=[self.chat, input_box], style=Pack(direction=COLUMN)) self.main_window = toga.MainWindow(title=self.formal_name) self.main_window.content = main_box self.main_window.show()
Finally, you need to bind all the components & you will show the page.
Now, let’s discuss the function that I’ve created for my button –
def greet(self, widget): input_text = self.text_input.value self.chat.data.append(icon=toga.Icon('resources/user.png'), title='You', subtitle = input_text) # Chatbot y = e.clsTalk2Bot() ret_val = y.TalkNow(input_text) self.chat.data.append(icon=toga.Icon('resources/brutus.png'), title='SDChat', subtitle=ret_val) self.text_input.value = '' self.chat.scroll_to_bottom()
As you can see, here, our application will capture the user input & based on that, our program will pass the input text to our chatbot. Also, you can see once that communication & response achieved, the input box will be cleared & the control will move down to the end of the chat screen. This is required. Otherwise, the user won’t be able to view the latest communication.

So, as you can see that, this extremely easy to create & you can enhance it as per your need.
For more information on this framework, please go through the following link ->
https://pypi.org/project/beeware/0.3.0.dev3/
https://docs.beeware.org/en/latest/
https://beeware.org/project/about/
For more details, view the main page ->
I’ll be posting another new post in the coming days. Till then, Happy Avenging! 😀
Note: All the data posted here are representational data & available over the internet & for educational purpose only.
You must be logged in to post a comment.