Building a Web App User Interface with Python
source link: https://dev.to/britnellryan/building-a-web-app-user-interface-with-python-5668
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Building a Web App User Interface with Python
Sep 1 Originally published at anvil.works
・3 min read
How to build a web UI with Python
Anvil lets you build your app’s front-end entirely in Python - no HTML, CSS or Javascript required. You can build your UI by dragging and dropping components in Anvil's visual designer or by adding components using Python code:
Dragging and dropping a Button componentLet's look at how you can use the Anvil editor to create a user interface by turning this app into a "hello world" app that says hello to your users.
In the middle of the Anvil IDE is the Form Editor which is split into the Design View and the Code View. On the right of the Anvil editor you will find the Toolbox.
A quick tour of the Anvil EditorYou can drag and drop components, like Labels, from the toolbox to build your user interface. This hello world app will also need a TextBox for users to enter their name:
Dragging in a Label and a TextBoxTo configure components, you can edit their properties on the right hand side in the Properties Panel. This includes both the information the component displays and its styling:
Changing the properties of the Label and Button componentsEvery component is a Python object, so you can also set the component's properties in the Form Editor's Code View:
Changing component properties in codeAll components have events they can raise. For example, when a user of your app clicks a Button component it raises a click event. We can create a Python method in the Code View to be called when this happens. In your Button's click method, you can call Anvil's alert
function to display an alert that says hello to your users:
Now you can click run to test your app and it's interface. Your users can now enter their name and clicking the say hi
button displays the alert:
Using the drag and drop designer isn't your only option for building user interfaces in Anvil. You can also create and add components to your user interface directly in code:
Adding a component to the UI in codeAnvil comes with all the usual UI components - buttons, text boxes, drop-downs, tables, and so on. And if that’s not enough, you can create your own custom components and share them with other applications.
That was user interfaces with nothing but Python. To learn more about creating user interfaces with Anvil, why not get started with Anvil's 10 minute Feedback Form Tutorial?
Recommend
-
129
Graphical User Interface Timeline Location:
-
72
JSF is a component oriented MVC (Model View Controller) framework that's a part of Java EE. It comes with a small set of basic components (widgets), a templating engine, and facilities for converting and validating input. JSF strongly builds on...
-
6
Fixing Doogie's user interface issue I had a friend who used to watch Doogie Howser, M.D. back when it was still on the air. He seemed to like the show just fine, but he would always get bent out of shape by the "diary" sessions....
-
10
This sign indicates a bad user interface Writing Software, technology, sysadmin war stories, and more. Saturday, November 24, 2012 This sign indicates a...
-
10
User Interface Design for Programmers Tuesday, June 24, 2003 CFOOP points out this chapter on UI design for programmers, appropriately titled:
-
13
Harmony OS will use a new User Interface (UI) – Huawei confirms
-
4
On Building a Fluid User Interface By Rishi ModyMay 13, 2021 In late 2019 we
-
7
@anvilworksAnvilBuild seriously powerful web apps with all the flexibility of Python. No web development experience required.
-
5
How to design a user-friendly app interface January 26, 2023 | Heather Stugen Designing a user-friendly app interface is crucial for the success of any mobile application. A well-designed i...
-
2
What is Voice User Interface in Web Design?Published in
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK