Приложение Python с EEL (3 серии деталей)
В этом посте мы будем использовать библиотеку, которая позволит нам создавать выдающиеся графические пользовательские интерфейсы (GUI) для наших повседневных сценариев Python.
У нас есть куча вариантов для создания GUI на Python, Tkinter, Wxpython, Pysimplegui, среди прочего. Tkinter действительно надежный и позволит нам иметь перекрестные приложения, однако, GUI на основе Tkinter не так красиво, как то, что мы можем, как правило, находить с веб-приложениями, а также другие прохладные приложения на основе электрона.
EEL – это библиотека, которая позволяет нам воспользоваться веб-технологиями, такими как HTML, CSS, JS и, конечно, все куча веб-каркасов там, как бутстрап, jQuery, прохладные библиотеки построения в качестве зарубежья и т. Д.
Библиотека EEL Позвольте нам легко использовать HTML, CSS и JS для создания нашего пользовательского интерфейса, не теряя всех наших мощных возможностей Python. EEL полагается на кучу библиотек Python, он просто создает локальный веб-сервер и открывает браузер (по умолчанию Chrome), браузер отображает HTML, CSS и JS, а Python контролирует большую часть логики.
Прохладная вещь с EEL, это позволяет нам запустить функции Python от JavaScript и ViceVersa, таким образом, мы можем обменять информацию и иметь лучшие из обоих миров (Python и JS).
Чтобы установить библиотеку EEL, вы можете сделать это из Pypi AS:
pip install eel
Настоятельно рекомендуется создать виртуальную среду сначала.
Мы должны сначала создать структуру нашей папки, наша корневая папка будет «приложением». Внутри мы создадим наш сценарий Python, который я решил позвонить App.py.
Чтобы улучшить структуру нашего кода, мы создали подпапку с именем «Web», который содержит файл index.html и две подпапки для наших файлов CSS и JS.
application
│ app.py
│
└───web
│ index.html
│
├───css
│ main.css
│
└───js
main.js
Для этого поста мы построим верхнее меню, напоминающее меню файлов для настольных приложений, используя предварительно построенный код из W3Schools Отказ Во-первых, мы должны редактировать свой HTML-файл:
Как видите, вы сможете создать весь ваш графический интерфейс, используя HTML, мы просто должны добавить Этот скрипт позволит нам вызвать наши открытые функции Python.
Для CSS-файла:
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
/* .topnav a.active {
background-color: #4CAF50;
color: white;
} */
И, наконец, для файла JS, мы просто добавляем слушателей событий на четыре кнопки на Navbar. Как видите, все они называют некоторые функции, но начинаются с EEL, например. ELL.GET_RANDOM_NAME (), это функция Python, таким образом, когда мы нажимаем кнопку, она позвонит функции Python. Кроме того, у нас есть функция js под названием inmapt_alerts, и у него есть декоратор eel.expose, это позволяет нам запустить эту функцию JS из Python:
document.getElementById("button-name").addEventListener("click", ()=>{eel.get_random_name()}, false);
document.getElementById("button-number").addEventListener("click", ()=>{eel.get_random_number()}, false);
document.getElementById("button-date").addEventListener("click", ()=>{eel.get_date()}, false);
document.getElementById("button-ip").addEventListener("click", ()=>{eel.get_ip()}, false);
eel.expose(prompt_alerts);
function prompt_alerts(description) {
alert(description);
}
Теперь мы завершили наш графический интерфейс пользователя, теперь мы должны создать наш файл Python. Мы должны импортировать библиотеку EEL, а все остальные библиотеки, которые вам нужны для вашего проекта, в данном случае, случайное и дате времени.
import eel
import random
from datetime import datetime
eel.init('web')
@eel.expose
def get_random_name():
eel.prompt_alerts('Random name')
@eel.expose
def get_random_number():
eel.prompt_alerts(random.randint(1, 100))
@eel.expose
def get_date():
eel.prompt_alerts(datetime.now().strftime("%d/%m/%Y %H:%M:%S"))
@eel.expose
def get_ip():
eel.prompt_alerts('127.0.0.1')
eel.start('index.html')
Затем мы должны добавить нашу линию EEL.init, это инициализируйте библиотеку EEL, к определенной папке. Затем мы создаем наши четыре функции, которые мы хотим позвонить из JS, поэтому мы добавили декоратор @ Eel.expose Отказ Как вы можете видеть, каждый звонит нашу функцию JS Prompt_Alerts и прохождение строкового аргумента.
eel.start Запустит приложение, в этом примере есть много аргументов, которые можно пропустить, в этом примере мы используем минимальные аргументы, мы просто устанавливаем файл HTML для отображения (относительно веб-папки).
Теперь, когда мы завершили наш код, мы можем начать наше приложение:
Python App.py.
Должно появиться новое окно, как показано на следующем рисунке:
Если вы нажмете на любую из четырех четырех кнопок, должен быть показан предупреждение, например.:
Теперь вы можете создать выдающуюся GUI для вас Python, в нашей следующей серии мы создадим сложный пример и рассмотрим другие аргументы, которые могут быть переданы в EEL.Start.
Приложение Python с EEL (3 серии деталей)
Оригинал: “https://dev.to/kodark/creating-a-modern-gui-for-your-python-application-2mlp”