/live_flask_repo

Primary LanguagePython

LiveFlask

LiveFlask is a comprehensive framework for Flask that simplifies the creation of dynamic interfaces, all within the familiar environment of Flask.

Install LiveFlask

pip install liveflask

Include the Javascript (on every page that will be using LiveFlask)

...
<head>
    {{ liveflask_scripts() }}
</head>
<body
        ...
</body>
</html>

Create a component

In your flask application's template/liveflask directory create a new python file with the name of your component. e.g Counter.py in that file, create a class with the same name as the file, and decorate it with the @component decorator.

@component
class Counter:
    def render(self):
        return render_template("counter.html")

Create a new file in the same directory with the name of the component's template. e.g counter.html

<div>
    <h1>Hello World!</h1>
</div>

Include the component in your template

    ...
<head>
    {{ liveflask_scripts() }}
</head>
<body
    {{ live('Counter') }}
</body>
</html>

View it in the browser

Load the page you included the component in, and you should see the component rendered in the browser. In our example, it should display a simple Hello World! message.

Add "counter" functionality

Replace the generated content of the counter component class and view with the following:

templates/liveflask/CounterComponent.py 

@component
class CounterComponent:
    count: int = 0

    def increment(self):
        self.count += 1

    def decrement(self):
        self.count -= 1

    def render(self):
        return render_template("counter.html", count=self.count)

templates/liveflask/counter.html 

<div style="text-align: center">
    <button liveflask-action="increment">+</button>
    <h1>{{ count }}</h1>
    <button liveflask-action="decrement">-</button>
</div>

View it in the browser

Now reload the page and you should see a counter that increments and decrements when you click the buttons.

Sure, let's take a look at some code.

templates/liveflask/SearchUsersComponent.html 

@component
class SimpleUsersComponent:
    search: str = ""

    def render(self):
        users = User.where("username", "like", f"%{self.search}%").get()
        return render_template("users.html", users=users)

templates/users.html 

<div>
    <input liveflask-model="search" type="text" placeholder="Search users..."/>

    <ul>
        {% for user in users %}
        <li>{{ user.username }}</li>
        {% endfor %}
    </ul>
</div>


You can include this component anywhere in your app like so.

templates/index.html 

<body>
{{ live('SimpleUsers') }}
</body>