sam.py

from flexx import flx, event
import json


class Server_entry(flx.Widget):
    address = flx.StringProp(settable=True)
    username = flx.StringProp(settable=True)
    password = flx.StringProp(settable=True)

    def init(self):
        super().init()
        with flx.HBox():
            self.address_edit = flx.LineEdit(
                placeholder_text='Server name or IP address', flex=1, text=self.address)
            self.username_edit = flx.LineEdit(
                placeholder_text='server username, example: root', flex=1, text=self.username)
            self.password_edit = flx.LineEdit(
                placeholder_text='server password', flex=1, text=self.password)
            self.delete_me_btn = flx.Button(text='🗑️', flex=1)

    @flx.reaction('delete_me_btn.pointer_click')
    def delete_server(self, *events):
        self.dispose()


class UI(flx.Widget):  # Using Widget as this should hold the UI!

    def init(self):
        super().init()
        flx.Label(flex=2)  # Spacer!
        with flx.HBox():
            self.add_server_btn = flx.Button(text="Add Server")
            self.save_servers_btn = flx.Button(text="Save Servers")
        self.UI_servers_list = flx.VBox()

    @flx.reaction('add_server_btn.pointer_click')
    def add_server(self, *events):
        Server_entry(parent=self.UI_servers_list)

    @event.reaction('!servers_changed')
    def on_servers_changed(self, *events):
        print("Triggered on_servers_changed")
        for s in self.root.servers:
            print("In Js processing server: %s", s)
            Server_entry(address=s['address'],
                         username=s['username'],
                         password=s['password'],
                         parent=self)

class Samourai_app(flx.PyComponent):
    servers = flx.ListProp()

    def _load_servers(self):
        servers_json = json.load(open("servers.txt"))
        self._mutate_servers(servers_json, 'insert', len(self.servers))
        self.emit('servers_changed')
        print(self.servers)

    def init(self):
        super().init()
        with flx.HBox():
            flx.Label(flex=2)  # Spacer!
            self.UI = UI(flex=2)
            flx.Label(flex=2)  # Spacer!
        # self.UI.load_servers(servers)
        self._load_servers()

    @flx.action
    def write(self, fname, fcontent):
        with open(fname, 'w') as f:
            f.write(fcontent)
            print("WROTE!!!")


if __name__ == '__main__':
    a = flx.App(Samourai_app)
    a.serve()
    flx.start()

servers.txt

[{"address":"one","username":"two","password":"ViGoooo"},{"address":"four","username":"five","password":"Tronic"}]