Add support for MVC and fix pylint errors

Author: laffra

examples/__init__.py

@@ -3,9 +3,10 @@
 from examples import app
 from examples import canvas
 from examples import custom
-from examples import editor
 from examples import dom
+from examples import editor
 from examples import inputs
+from examples import mvc
 from examples import pitch
 from examples import pizza
 from examples import splits
@@ -14,9 +15,9 @@
 from examples import svg
 from examples import table
 from examples import tictactoe
-from examples import tutorial
 
 items = [
+    ("examples/mvc.py", mvc.create()),
     ("examples/styling.py", styling.create()),
     ("examples/dom.py", dom.create()),
     ("examples/inputs.py", inputs.create()),
@@ -31,5 +32,4 @@
     ("examples/canvas.py", canvas.create()),
     ("examples/pizza.py", pizza.create()),
     ("examples/splits.py", splits.create()),
-    ("examples/tutorial.py", tutorial.create()),
 ]

examples/dom.py

@@ -11,35 +11,34 @@ def get_color():
         return color
 
     def new_text():
-        return ltk.Text(f"Text created at {ltk.get_time()}s", {
-            "color": "white",
-            "background-color": get_color(),
-        })
+        return ltk.Text(f"Text created at {ltk.get_time()}s") \
+            .css("color", "white") \
+            .css("background-color", get_color())
 
     def append(event):
         # the base class for LTK Widgets sends all methods it does not
         # understand to its jQuery element. This also happens to the "append"
         # call below. As jQuery does not know anything about LTK, it expects 
         # a list of other jQuery elements to be passed to it. Therefore, we 
         # append the widget's element, not the widget itself.
-        ltk.find("#dom-texts").append(new_text().element)
+        ltk.find("#dom-texts").append(new_text())
 
     def append_to(event):
         new_text().appendTo(ltk.find("#dom-texts"))
 
     def prepend(event):
-        ltk.find("#dom-texts").prepend(new_text().element)
+        ltk.find("#dom-texts").prepend(new_text())
 
     def after(event):
-        ltk.find("#dom-texts .ltk-text").eq(0).after(new_text().element)
+        ltk.find("#dom-texts .ltk-text").eq(0).after(new_text())
 
     def before(event):
-        ltk.find("#dom-texts .ltk-text").eq(1).before(new_text().element)
+        ltk.find("#dom-texts .ltk-text").eq(1).before(new_text())
 
     def append_two(event):
         ltk.find("#dom-texts").append(
-            new_text().element,
-            new_text().element,
+            new_text(),
+            new_text(),
         )
 
     def append_html(event):

examples/inputs.py

@@ -35,18 +35,18 @@ def loveit(event):
 
     @ltk.callback
     def change(event):
-        element = ltk.jQuery(event.target)
+        element = ltk.find(event.target)
         kind = element.prop("type")
         feedback(f"Changed {kind}: {element.val()}")
 
     @ltk.callback
     def switched(event):
-        element = ltk.jQuery(event.target)
+        element = ltk.find(event.target)
         feedback(f"Changed switch: {element.prop('checked')}")
 
     @ltk.callback
     def set_runtime(event):
-        chosen = ltk.jQuery(event.target).attr("value")
+        chosen = ltk.find(event.target).attr("value")
         if chosen != runtime:
             window.setSearchParameter("runtime", chosen)
 

examples/mvc.py

@@ -0,0 +1,37 @@
+# LTK - Copyright 2023 - All Rights Reserved - chrislaffra.com - See LICENSE 
+
+import ltk
+
+class Product(ltk.Model):
+    """ This is a model with two fields """
+    name: str = ""
+    price: float = 0.0
+
+product = Product()
+
+def clear(event):
+    product.name = ""
+
+def create():
+    return (
+        ltk.VBox(
+            ltk.Heading2("LTK Model-View Demo"),
+
+            ltk.Label("Product Name (as ltk.Input):"),
+            ltk.Input(product.name)
+                .attr("placeholder", "Please enter a name")
+                .css("border", "2px solid red"),
+
+            ltk.Break(),
+
+            ltk.Label("Product Name (as ltk.Text):"),
+            ltk.Text(product.name)
+                .css("border", "2px solid green")
+                .css("height", 34),
+
+            ltk.Break(),
+            ltk.Button("Clear product.name", ltk.proxy(clear)),
+        )
+        .css("font-size", 24)
+        .attr("name", "MVC")
+    )

examples/tictactoe.py

@@ -14,8 +14,8 @@ def choose(event):
     @ltk.callback
     def enter(event):
         ltk.find(".tictactoe-inside").removeClass("tictactoe-inside")
-        if not ltk.jQuery(event.target).text():
-            ltk.jQuery(event.target).addClass("tictactoe-inside")
+        if not ltk.find(event.target).text():
+            ltk.find(event.target).addClass("tictactoe-inside")
 
     return (
         ltk.VBox(

examples/tutorial.py

@@ -30,6 +30,4 @@ function startTime() {
 }
 
 setupRuntime()
-setupToggle()
-
-pyodide.setDebug(true)
+setupToggle()

kitchensink.js

@@ -23,5 +23,5 @@ files = [
     "examples/pubsub.py",
     "examples/table.py",
     "examples/svg.py",
-    "examples/tutorial.py",
+    "examples/mvc.py",
 ]

kitchensink.toml

@@ -1,13 +1,17 @@
-# LTK - Copyright 2023 - All Rights Reserved - chrislaffra.com - See LICENSE 
+"""
+Copyright 2023 - All Rights Reserved - chrislaffra.com - See LICENSE
+
+LTK (Little Toolkit) is a library for building client-side web applications using Python and CSS.
+"""
 
 from ltk.jquery import *
 from ltk.widgets import *
 from ltk.pubsub import *
 from ltk.logger import *
 
 (
-    ltk.Link("https://github.com/laffra/ltk", "built with LTK")
+    ltk.Link("https://github.com/pyscript/ltk", "built with LTK")
         .addClass("ltk-built-with")
         .attr("target", "_blank")
-        .appendTo(jQuery(window.document.body))
-)
+        .appendTo(window.jQuery(window.document.body))
+)