# HTMX Examples ## PharmData Design System - Telas Completas com HTMX + Flask > **Objetivo**: Exemplos práticos de telas completas usando HTMX para interatividade sem JavaScript --- ## Índice 1. [Setup HTMX + Flask](#setup-htmx--flask) 2. [Lista de Substâncias com Filtros](#lista-de-substâncias-com-filtros) 3. [Visualização de Substância (Read-only)](#visualização-de-substância-read-only) 4. [Formulário de Curadoria](#formulário-de-curadoria) 5. [Enriquecimento Assistido](#enriquecimento-assistido) 6. [Modal com HTMX](#modal-com-htmx) --- ## Setup HTMX + Flask ### Base Template **`app/templates/base.html`**: ```html {% block title %}PharmData{% endblock %} {% block extra_head %}{% endblock %}

Pharmdata

Curadoria de Dados

{% block content %}{% endblock %}
{% block extra_scripts %}{% endblock %} ``` ### Flask Routes **`app/routes/substances.py`**: ```python from flask import Blueprint, render_template, request, jsonify from app.models import Substance bp = Blueprint('substances', __name__, url_prefix='/substances') @bp.route('/') def list(): """Lista de substâncias""" return render_template('substances/list.html') @bp.route('/search') def search(): """Busca com HTMX - retorna apenas linhas da tabela""" query = request.args.get('q', '') status = request.args.get('status', '') quality = request.args.get('quality', '') substances = Substance.query if query: substances = substances.filter(Substance.name.ilike(f'%{query}%')) if status: substances = substances.filter_by(status=status) if quality: substances = substances.filter_by(quality=quality) substances = substances.limit(50).all() return render_template('substances/_table_rows.html', substances=substances) @bp.route('/') def view(substance_id): """Visualização read-only de substância""" substance = Substance.query.get_or_404(substance_id) return render_template('substances/view.html', substance=substance) @bp.route('//edit') def edit(substance_id): """Formulário de edição""" substance = Substance.query.get_or_404(substance_id) return render_template('substances/edit.html', substance=substance) @bp.route('//enrich', methods=['POST']) def enrich(substance_id): """Enriquecimento assistido""" substance = Substance.query.get_or_404(substance_id) field_name = request.form.get('field') source = request.form.get('source', 'SPOR') # Simula busca em API externa suggestion = fetch_external_data(substance, field_name, source) return render_template('substances/_enrichment_suggestion.html', substance=substance, field=field_name, suggestion=suggestion) ``` --- ## Lista de Substâncias com Filtros ### Template Principal **`app/templates/substances/list.html`**: ```html {% extends "base.html" %} {% block title %}Substâncias - PharmData{% endblock %} {% block content %}

Substâncias Ativas

Curadoria de dados farmacêuticos

Nova Substância

Status

Qualidade

Buscando...
{% include 'substances/_table_rows.html' %}
ID Nome Fórmula Status Qualidade Ações
{% endblock %} ``` ### Partial - Table Rows **`app/templates/substances/_table_rows.html`**: ```html {% for substance in substances %} {{ substance.business_key }}

{{ substance.name }}

{% if substance.synonyms %}

{{ substance.synonyms[0] }}

{% endif %}
{{ substance.formula or '-' }} {{ substance.status | title }}
{{ substance.quality | title }}
{{ substance.completeness }}%
{% else %}

Nenhuma substância encontrada

{% endfor %} ``` --- ## Visualização de Substância (Read-only) **`app/templates/substances/view.html`**: ```html {% extends "base.html" %} {% block title %}{{ substance.name }} - PharmData{% endblock %} {% block content %}

{{ substance.name }}

{{ substance.status | title }} {{ substance.quality | title }}

{{ substance.business_key }}

Editar

Estrutura Molecular

{% if substance.smiles %} {% else %}

Estrutura não disponível

{% endif %}

Fórmula Molecular

{{ substance.formula_html | safe }}

Identificação

CAS Number {{ substance.cas or '-' }}
UNII (FDA) {{ substance.unii or '-' }}
ChEMBL ID {% if substance.chembl_id %} {{ substance.chembl_id }} {% else %} - {% endif %}
PubChem CID {% if substance.pubchem_cid %} {{ substance.pubchem_cid }} {% else %} - {% endif %}

Propriedades Físico-Químicas

Massa Molecular {{ substance.molecular_weight }} g/mol
LogP {{ substance.logp or '-' }}
Ponto de Fusão {{ substance.melting_point or '-' }}
Solubilidade {{ substance.solubility or '-' }}

Classificações

ATC Code

{% for atc in substance.atc_codes %} {{ atc }} {% endfor %}

SNOMED CT

{% for snomed in substance.snomed_codes %} {{ snomed }} {% endfor %}

Rastreabilidade

Fonte Principal {{ substance.source }}
Última Atualização {{ substance.updated_at | format_datetime }}
Curado por {{ substance.curator.name }}
{% endblock %} {% block extra_scripts %} {% if substance.smiles %} {% endif %} {% endblock %} ``` --- ## Formulário de Curadoria Ver próximo arquivo para formulários com Progressive Disclosure e HTMX. --- ## Enriquecimento Assistido **Partial para sugestão de enriquecimento**: **`app/templates/substances/_enrichment_suggestion.html`**: ```html

Sugestão de {{ source }}

Confiança: {{ suggestion.confidence }}%

Valor Atual

{{ substance[field] or '(vazio)' }}

Valor Sugerido

{{ suggestion.value }}

``` --- ## Modal com HTMX **Componente Modal Genérico**: ```html ``` --- **Próximo**: Flask Integration completa e Compliance Map.