[Перевод] Мега-Учебник Flask Глава 11: Дизайн приложения (издание 2024)02.06.2024 20:15

Это одиннадцатая часть серии мега-учебника Flask, в которой я собираюсь рассказать вам, как заменить базовые HTML-шаблоны новым набором, основанным на платформе пользовательского интерфейса Bootstrap.

Оглавление

Вы уже некоторое время играете с моим приложением для ведения микроблогов, поэтому, я уверен, вы заметили, что я не потратил слишком много времени на то, чтобы оно выглядело хорошо, или, лучше сказать, я вообще не тратил на это времени. Шаблоны, которые я собрал, довольно простые, без какого-либо пользовательского оформления. Мне было полезно сосредоточиться на реальной логике приложения, не отвлекаясь на написание красивых HTML и CSS.

Но я уже долго сосредоточен на серверной части этого приложения. Итак, в этой главе я сделаю перерыв и потрачу некоторое время на то, чтобы показать вам, что можно сделать, чтобы приложение выглядело немного более отточенным и профессиональным.

Эта глава будет немного отличаться от предыдущих, потому что я не собираюсь так подробно, как обычно, описывать сторону Python, которая, в конце концов, является основной темой этого туториала. Создание красивых веб-страниц — обширная тема, которая в значительной степени не связана с веб-разработкой на Python, но я расскажу о некоторых основных рекомендациях и идеях о том, как подойти к этой задаче, и у вас также будет приложение с измененным дизайном, которое можно изучить и перенять опыт.

Ссылки на GitHub для этой главы:  Обзор,  Zip,  Diff.

CSS фреймворки

Хотя мы можем утверждать, что программирование — это сложно, наши усилия ничто по сравнению с усилиями веб-дизайнеров, которым приходится создавать веб-страницы, которые красиво и единообразно выглядят в списке веб-браузеров. За последние годы они стали лучше, но в некоторых браузерах все еще есть непонятные ошибки или причуды, которые сильно усложняют задачу создания веб-страниц, которые везде выглядят красиво. Это еще сложнее, если вам также нужно настроить для браузеров планшетов и смартфонов с ограниченным количеством ресурсов и экранов.

Если вы, как и я, разработчик, который просто хочет создавать прилично выглядящие веб-страницы, но у вас нет времени или интереса изучать низкоуровневые механизмы для эффективного достижения этой цели путем написания необработанного HTML и CSS, то единственным практическим решением является использование CSS фреймворка для упрощения задачи. Выбрав этот путь, вы потеряете некоторую творческую свободу, но, с другой стороны, ваши веб-страницы будут хорошо выглядеть во всех браузерах без особых усилий. Фреймворк CSS предоставляет коллекцию высокоуровневых классов CSS с готовыми стилями для распространенных типов элементов пользовательского интерфейса. Большинство этих фреймворков также предоставляют дополнения JavaScript для вещей, которые нельзя выполнить строго с помощью HTML и CSS.

Представляем Bootstrap

Одним из самых популярных CSS-фреймворков является Bootstrap. Если вы хотите увидеть, какие страницы можно создавать с помощью этого фреймворка, в документации есть несколько примеров.

Вот некоторые преимущества, которые вы получаете при использовании Bootstrap для оформления ваших веб-страниц:

• Аналогично выглядит во всех основных веб-браузерах

• Настройка размеров для экранов настольных компьютеров, планшетов и телефонов

• Настраиваемые макеты

• Красиво оформленные панели навигации, формы, кнопки, оповещения, всплывающие окна и т.д.

Самый простой способ использовать Bootstrap — это просто импортировать файл bootstrap.min.css в ваш базовый шаблон. Вы можете либо загрузить копию этого файла и добавить его в свой проект, либо импортировать его непосредственно из CDN. Затем вы можете начать использовать CSS-классы общего назначения, которые он предоставляет, согласно документации, что довольно неплохо. Возможно, вы также захотите импортировать JavaScript-код фреймворка, чтобы использовать самые продвинутые функции.

Как и большинство проектов с открытым исходным кодом, Bootstrap постоянно развивается. Оригинальная версия мега-учебника Flask была создана для Bootstrap 3. Редакция, которую вы сейчас читаете, создана для Bootstrap 5.3. Текущий подход к интеграции Bootstrap является довольно общим и может быть адаптирован к более новым версиям Bootstrap.

Использование Bootstrap

Первым шагом в интеграции Bootstrap с Microblog является добавление его файлов CSS и JavaScript в базовый шаблон. На странице быстрого запуска Bootstrap в качестве примера приведена короткая, но полная HTML-страница, которую я копирую ниже для вашего удобства:

  
    
    
    
    
  
  
    
Hello, world!
    
  

Подход, который я могу применить, чтобы объединить это с моим шаблоном base.html, заключается в том, чтобы использовать приведенный выше в качестве нового базового шаблона, заменив теги  {% else %} {% endif %}

{% with messages = get_flashed_messages() %} {% if messages %} {% for message in messages %}

{{ message }}

{% endfor %} {% endif %} {% endwith %} {% block content %}{% endblock %}

Благодаря обновленному базовому шаблону внешний вид приложения уже заметно улучшен без необходимости изменять строки кода Python. Если вы хотите убедиться в этом сами, загрузите копию base.html из репозитория GitHub по ссылкам, приведенным в начале этой главы.

Рендеринг загрузочных форм

Область, в которой Bootstrap проделывает фантастическую работу, заключается в рендеринге полей формы, которые выглядят намного приятнее и чище, чем поля по умолчанию, предоставляемые браузером. В документации по Bootstrap также есть раздел о формах. В начале этого раздела приведен пример формы входа в систему, который показывает базовую структуру HTML.

HTML-код, необходимый для каждого поля, довольно длинный. Ниже вы можете увидеть одно из текстовых полей из примера формы в документации:

  

    Password
    
  

Но это слишком просто для нужд Microblog, который включает проверку полей и, возможно, потребуется показывать пользователю ошибки проверки. На странице документации есть раздел о проверке на стороне сервера, в котором показано, как оформить поля с сообщением об ошибке. Вот пример.:

  

    Zip
    
    

      Please provide a valid zip.
    
  

К сожалению, о необходимости вводить такое количество шаблонов для каждого поля в каждой форме не может быть и речи. Это заняло бы слишком много времени и чревато ошибками. Одним из решений является использование макросов Jinja, которые позволяют вам определять повторно используемые фрагменты HTML, а затем вызывать их из ваших шаблонов, как если бы они были функциями.

Например, макрос Jinja для текстового поля, подобного показанному выше, будет иметь вид:

{% macro form_field(field) %}
  

    {{ field.label(class='form-label') }}
    {{ field(class='form-control' + (' is-invalid' if field.errors else '')) }}
    {%- for error in field.errors %}
    
{{ error }}
    {%- endfor %}
  
{% endmacro %}

Обратите внимание, как используются условные обозначения для выборочного добавления стиля ошибки, если поле содержит одно или несколько сообщений об ошибках.

Поскольку макрос определен в файле с именем bootstrap_wtf.html, который расположен в каталоге templates, он может быть вызван, когда потребуется отобразить поле. Например:

{% import "bootstrap_wtf.html" as wtf %}
...
{{ wtf.form_field(form.username) }}

Макрос отображения полей можно расширить, чтобы он также поддерживал отображение флажков, раскрывающихся списков выбора, кнопок отправки и других типов полей. Он также может принимать второй аргумент с логическим значением, указывающим, следует ли автоматически переводить поле в фокус страницы, что должно быть сделано для первого поля формы. Для еще большего удобства можно создать другой макрос для рендеринга всей формы, просто перебрав поля формы и вызвав form_field() макрос для каждого из них.

Полный bootstrap_wtf.html файл доступен в репозитории GitHub, ссылка на который приведена в начале этой главы. Он включает в себя более полную версию макроса form_field(), показанного выше, и второй макрос с именем quick_form(), который принимает объект формы и отображает все его поля с помощью первого макроса.

Как это выглядит, когда реализовано в реальной форме?  Ниже вы можете увидеть переработанный шаблон register.html в качестве примера:

app/templates/register.html: Шаблон регистрации пользователя.

{% extends "base.html" %}
{% import 'bootstrap_wtf.html' as wtf %}

{% block content %}
    
Register
    {{ wtf.quick_form(form) }}
{% endblock %}

Разве это не здорово?  Оператор import вверху работает аналогично импорту Python на стороне шаблона. Который добавляет макрос wtf.quick_form(), который в одной строке кода отображает полную форму, включая ошибки проверки, и все оформлено в соответствии с фреймворком Bootstrap.

Еще раз, я не собираюсь показывать вам все изменения, которые я сделал для других форм в приложении, но все эти изменения внесены в шаблоны, которые вы можете загрузить или просмотреть на GitHub.

Рендеринг записей в блоге

Логика представления, которая отображает отдельные записи в блоге, была абстрагирована в подшаблон под названием _post.html. Все, что мне нужно сделать с этим шаблоном, это внести некоторые незначительные корректировки, чтобы он хорошо выглядел в Bootstrap.

app/templates/_post.html: Переработанный подшаблон публикации.

    

        

            

                
                    
                
            
            

                
                    {{ post.author.username }}
                
                says:
                

                {{ post.body }}
            
        
    

Рендеринг ссылок для разбивки на страницы

Ссылки на страницы — это еще одна область, в которой Bootstrap предоставляет поддержку. Для этого я просто еще раз обратился к документации Bootstrap и адаптировал один из их примеров. Вот как это выглядит на странице index.html:

app/templates/index.html: Переработаны ссылки на страницы.

    ...
    

Обратите внимание, что в этой реализации вместо скрытия следующей или предыдущей ссылки, когда в этом направлении больше нет содержимого, я применяю отключенное состояние, из-за которого ссылка будет отображаться серым цветом.

Я не собираюсь показывать это здесь, но аналогичное изменение необходимо применить к шаблону user.html. Пакет для загрузки этой главы включает эти изменения.

До и после

Чтобы внести в ваше приложение эти изменения, пожалуйста, загрузите zip-файл для этой главы и соответствующим образом обновите свои шаблоны.

Ниже вы можете увидеть несколько фотографий до и после, чтобы увидеть трансформацию. Имейте в виду, что это изменение было достигнуто не затрагивая ни одной строки кода приложения!

Следующая глава =>

© Habrahabr.ru