fab-coreui-theme 0.5.0

CoreUI theme for FlaskAppbuilder

FAB CoreUI Theme

CoreUI theme for FlaskAppbuilder

This theme is still very much a WIP. If you’d like to use it take a look at the fab_coreui_theme/templates/coreui/init.html and start overriding the blocks to make it your own.

Usage

This theme is meant to be with used with FlaskAppbuilder. Here is an example app.

Bootstrap the Flask App

Make sure the FlaskAppbuilder is used. If you used the fab cli to initialize the project it should be in there somewhere.

import logging

from flask import Flask
from flask_appbuilder import AppBuilder, SQLA
from flask_appbuilder.menu import Menu


logging.basicConfig(format="%(asctime)s:%(levelname)s:%(name)s:%(message)s")
logging.getLogger().setLevel(logging.DEBUG)

app = Flask(__name__)
app.config.from_object("config")
db = SQLA(app)

appbuilder = AppBuilder(
        app,
        db.session,
        menu=Menu(reverse=False),
)

from . import views  # noqa

This registers the CoreUI Flask Blueprint. (Shown here for reference)

# This is only shown for reference.
TEMPLATE_FOLDER = os.path.join(os.path.dirname(__file__), 'templates')
STATIC_FOLDER = os.path.join(os.path.dirname(__file__), 'static')
STATIC_URL_PATH = '/static/coreui'

# Use the Flask Blueprint to create an appized app and setup our routing
# https://flask.palletsprojects.com/en/2.0.x/blueprints/#templates

coreui_bp = Blueprint(
        'coreui_theme', __name__,
        template_folder=TEMPLATE_FOLDER,
        static_folder=STATIC_FOLDER,
        static_url_path=STATIC_URL_PATH
)

Then in your HTML templates you can bring in the static files relative to static/coreui -

{{url_for('coreui_theme.static',filename='coreui/node_modules/@coreui/coreui/dist/js/coreui.bundle.min.js')}}

Example Base View

from flask_appbuilder.models.sqla.interface import SQLAInterface
from fab_coreui_theme.theme import CoreUIBaseView, CoreUIModelView, CoreUISimpleFormView, coreui_bp

# Create a base view that inherits from CoreUIBaseView
class MyView(CoreUIBaseView):

        default_view = 'blank'
        @expose('/blank')

        @has_access
        def blank(self):
                return self.render_template(
                        'coreui/init.html'
                )

# Register the view with AppBuilder
appbuilder.add_view(MyView, "My View", category='My View')

Example Form View

from flask_appbuilder.fieldwidgets import BS3TextFieldWidget
from flask_appbuilder.forms import DynamicForm
from flask_babel import lazy_gettext
from wtforms import StringField
from wtforms.validators import DataRequired
from fab_coreui_theme.theme import CoreUIBaseView, CoreUIModelView, CoreUISimpleFormView, coreui_bp


# Declare the Form
class TestForm(DynamicForm):
    TestFieldOne = StringField(
                lazy_gettext("Test Field One"),
                validators=[DataRequired()],
                widget=BS3TextFieldWidget(),
    )
    TestFieldTwo = StringField(
                lazy_gettext("Test Field One"),
                validators=[DataRequired()],
                widget=BS3TextFieldWidget(),
    )


# Create the Form View and inherit from the CoreUISimpleFormView
class TestFormView(CoreUISimpleFormView):
    form = TestForm
    form_title = "This is my Test Form"
    default_view = "this_form_get"
    message = "My form submitted"

    def form_post(self, form):
                # process form
                flash(as_unicode(self.message), "info")

# Register the view
appbuilder.add_view(TestFormView, "My form View",
                                        icon="fa-group", label="My Test form")

Example Model View

from flask_appbuilder.models.sqla.interface import SQLAInterface
from fab_coreui_theme.theme import CoreUIModelView


class ProductModelView(CoreUIModelView):
    datamodel = SQLAInterface(ProductModel)

appbuilder.add_view(ProductModelView, "Products",
                                        icon="fa-group", label="Products")

Extending

In your app create a templates/mytheme/index.html file.

Override a block entirely -

{% extends "coreui/init.html" %}

{% block content %}
        <h1>My content!</h1>
{% endblock %}

Extend a block -

{% extends "coreui/init.html" %}

{% block content %}
        {{ super() }}
        <h1>My content!</h1>
{% endblock %}

See the fab_coreui_theme/templates/coreui/init.html for the menus, breadcrumbs, and sidebars.

Menus

Please note that menus are not implemented the way they are in FlaskAppbuilder. I wanted more control over the menu.

Further Customization

See the Flask AppBuilder docs on Customization to customize the theme.

Front End Development

Install the javascript node_modules.

# Clone or fork the repo and clone it locally
cd fab_coreui_theme/coreui_theme/static
npm install

# or use the MakeFile - make npm-install

If this command gives you trouble try removing the package-lock.json file.

Then you can reference the js and css files as:

  <script src="{{url_for('coreui_theme.static',filename='coreui/node_modules/thing.js')}}"></script>
  <link
  href="{{url_for('coreui_theme.static',filename='coreui/node_modules/thing.css')}}"
  rel="stylesheet"
/>

Licenses

• Free software: MIT license

• Documentation: https://fab-coreui-theme.readthedocs.io.

Features

• CoreUI Theme - Flask Blueprint

• CoreUI Theme - Flask AppBuilder BaseView

• CoreUI Theme - Flask AppBuilder ModelView

• CoreUI Theme - Flask AppBuilder SimpleFormView

Credits

This package was created with Cookiecutter and the audreyr/cookiecutter-pypackage project template.

History

0.1.0 (2021-08-28)

• First release on PyPI.