[EXAMPLE] Conver Flet Todo App in Jac (Without Data Spatial Programming)

todo/Dockerfile.txt

@@ -0,0 +1,12 @@
+FROM python:3-alpine
+
+WORKDIR /app
+
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 8080
+
+CMD ["python", "./todo.py"]

todo/fly.toml

@@ -0,0 +1,40 @@
+app = "flet-todo"
+
+kill_signal = "SIGINT"
+kill_timeout = 5
+processes = []
+
+[env]
+  FLET_SERVER_PORT = "8080"
+  FLET_FORCE_WEB_VIEW = "true"
+
+[experimental]
+  allowed_public_ports = []
+  auto_rollback = true
+
+[[services]]
+  http_checks = []
+  internal_port = 8080
+  processes = ["app"]
+  protocol = "tcp"
+  script_checks = []
+
+  [services.concurrency]
+    hard_limit = 25
+    soft_limit = 20
+    type = "connections"
+
+  [[services.ports]]
+    force_https = true
+    handlers = ["http"]
+    port = 80
+
+  [[services.ports]]
+    handlers = ["tls", "http"]
+    port = 443
+
+  [[services.tcp_checks]]
+    grace_period = "1s"
+    interval = "15s"
+    restart_limit = 0
+    timeout = "2s"

todo/requirements.txt

@@ -0,0 +1 @@
+flet==0.22.1

todo/todo_1.jac

@@ -0,0 +1,18 @@
+import:py flet as ft ;
+
+can main(page: ft.page){
+    can add_clicked(e:flet_core.control_event.ControlEvent){
+        page.add(ft.Checkbox(label=new_task.value));
+        new_task.value = "";
+        page.update();
+    }
+
+    new_task = ft.TextField(hint_text="What's needs to be done?");
+
+    page.add(new_task, ft.FloatingActionButton(icon=ft.icons.ADD, on_click=add_clicked));
+}
+
+with entry{
+    ft.app(main);
+}
+

todo/todo_1.py

@@ -0,0 +1,14 @@
+import flet as ft
+
+def main(page: ft.Page):
+    def add_clicked(e):
+        print(type(e))
+        page.add(ft.Checkbox(label=new_task.value))
+        new_task.value = ""
+        page.update()
+
+    new_task = ft.TextField(hint_text="What's needs to be done?")
+
+    page.add(new_task, ft.FloatingActionButton(icon=ft.icons.ADD, on_click=add_clicked))
+
+ft.app(main)

todo/todo_2.jac

@@ -0,0 +1,33 @@
+import:py flet as ft ;
+
+can main(page: ft.page){
+    can add_clicked(e:flet_core.control_event.ControlEvent){
+        tasks_view.controls.append(ft.Checkbox(label=new_task.value));
+        new_task.value = "";
+        view.update();
+    }
+
+    new_task = ft.TextField(hint_text="What's needs to be done?", expand=True);
+    tasks_view = ft.Column();
+
+    view=ft.Column(
+        width=600,
+        controls=[
+            ft.Row(
+                controls=[
+                    new_task,
+                    ft.FloatingActionButton(icon=ft.icons.ADD, on_click=add_clicked)
+                ]
+            ),
+            tasks_view
+        ]
+    );
+
+    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER;
+    page.add(view);
+}
+
+with entry{
+    ft.app(main);
+}
+

todo/todo_2.py

@@ -0,0 +1,28 @@
+import flet as ft
+
+
+def main(page: ft.Page):
+    def add_clicked(e):
+        tasks_view.controls.append(ft.Checkbox(label=new_task.value))
+        new_task.value = ""
+        view.update()
+
+    new_task = ft.TextField(hint_text="What needs to be done?", expand=True)
+    tasks_view = ft.Column()
+    view=ft.Column(
+        width=600,
+        controls=[
+            ft.Row(
+                controls=[
+                    new_task,
+                    ft.FloatingActionButton(icon=ft.icons.ADD, on_click=add_clicked),
+                ],
+            ),
+            tasks_view,
+        ],
+    )
+
+    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
+    page.add(view)
+
+ft.app(main)

todo/todo_3.jac

@@ -0,0 +1,41 @@
+import:py flet as ft ;
+
+obj TodoApp :ft.Column: {
+    can init(){
+        super.init();
+        self.new_task = ft.TextField(hint_text="What needs to be done?", expand=True);
+        self.tasks_view = ft.Column();
+        self.width = 600;
+        self.controls = [
+            ft.Row(
+                controls=[
+                    self.new_task,
+                    ft.FloatingActionButton(
+                        icon=ft.icons.ADD, on_click=self.add_clicked
+                    )
+                ]
+            ),
+            self.tasks_view
+        ];
+    }
+
+    can add_clicked(e:flet_core.control_event.ControlEvent){
+        self.tasks_view.controls.append(ft.Checkbox(label=self.new_task.value));
+        self.new_task.value = "";
+        self.update();
+    }
+}
+
+can main(page: ft.page){
+    page.title = "To-Do App";
+    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER;
+    page.update();
+
+    app_1 = TodoApp();
+
+    page.add(app_1);
+}
+
+with entry{
+    ft.app(main);
+}

todo/todo_3.py

@@ -0,0 +1,39 @@
+import flet as ft
+
+class TodoApp(ft.Column):
+    # application's root control is a Column containing all other controls
+    def __init__(self):
+        super().__init__()
+        self.new_task = ft.TextField(hint_text="What needs to be done?", expand=True)
+        self.tasks_view = ft.Column()
+        self.width = 600
+        self.controls = [
+            ft.Row(
+                controls=[
+                    self.new_task,
+                    ft.FloatingActionButton(
+                        icon=ft.icons.ADD, on_click=self.add_clicked
+                    ),
+                ],
+            ),
+            self.tasks_view,
+        ]
+
+    def add_clicked(self, e):
+        self.tasks_view.controls.append(ft.Checkbox(label=self.new_task.value))
+        self.new_task.value = ""
+        self.update()
+
+
+def main(page: ft.Page):
+    page.title = "To-Do App"
+    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
+    page.update()
+
+    # create application instance
+    todo = TodoApp()
+
+    # add application's root control to the page
+    page.add(todo)
+
+ft.app(main)

todo/todo_4.jac

@@ -0,0 +1,115 @@
+import:py flet as ft ;
+
+obj TodoApp :ft.Column: {
+    can init(){
+        super.init();
+        self.new_task = ft.TextField(hint_text="What needs to be done?", expand=True);
+        self.tasks = ft.Column();
+        self.width = 600;
+        self.controls = [
+            ft.Row(
+                controls=[
+                    self.new_task,
+                    ft.FloatingActionButton(
+                        icon=ft.icons.ADD, on_click=self.add_clicked
+                    )
+                ]
+            ),
+            self.tasks
+        ];
+    }
+
+    can add_clicked(e:flet_core.control_event.ControlEvent){
+        task = Task(self.new_task.value, self.task_delete);
+        self.tasks.controls.append(task);
+        self.new_task.value = "";
+        self.update();
+    }
+
+    can task_delete(task:Task){
+        self.tasks.controls.remove(task);
+        self.update();
+    }
+}
+
+obj Task :ft.Column: {
+    can init(task_name:str , task_delete:Any){
+        super.init();
+        self.task_name = task_name;
+        self.task_delete = task_delete;
+        self.display_task = ft.Checkbox(value=False, label=self.task_name);
+        self.edit_name = ft.TextField(expand=1);
+
+        self.display_view = ft.Row(
+            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
+            vertical_alignment=ft.CrossAxisAlignment.CENTER,
+            controls=[
+                self.display_task,
+                ft.Row(
+                    spacing=0,
+                    controls=[
+                        ft.IconButton(
+                            icon=ft.icons.CREATE_OUTLINED,
+                            tooltip="Edit To-Do",
+                            on_click=self.edit_clicked
+                        ),
+                        ft.IconButton(
+                            ft.icons.DELETE_OUTLINE,
+                            tooltip="Delete To-Do",
+                            on_click=self.delete_clicked
+                        )
+                    ]
+                )
+            ]
+        );
+
+        self.edit_view = ft.Row(
+            visible=False,
+            alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
+            vertical_alignment=ft.CrossAxisAlignment.CENTER,
+            controls=[
+                self.edit_name,
+                ft.IconButton(
+                    icon=ft.icons.DONE_OUTLINE_OUTLINED,
+                    icon_color=ft.colors.GREEN,
+                    tooltip="Update To-Do",
+                    on_click=self.save_clicked
+                )
+            ]
+        );
+
+        self.controls = [self.display_view, self.edit_view];
+    }
+
+    can edit_clicked(e:flet_core.control_event.ControlEvent){
+        self.edit_name.value = self.display_task.label;
+        self.display_view.visible = False;
+        self.edit_view.visible = True;
+        self.update();
+    }
+
+    can save_clicked(e:flet_core.control_event.ControlEvent){
+        self.display_task.label = self.edit_name.value;
+        self.display_view.visible = True;
+        self.edit_view.visible = False;
+        self.update();
+    }
+
+    can delete_clicked(e:flet_core.control_event.ControlEvent){
+        self.task_delete(self);
+    }
+}
+
+can main(page: ft.page){
+    page.title = "To-Do App";
+    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER;
+    page.update();
+
+    app_1 = TodoApp();
+
+    page.add(app_1);
+}
+
+with entry{
+    ft.app(main);
+}