New post "Diseñando formularios con Python y Kivy"

diff --git a/images/form.jpg b/images/form.jpg
new file mode 100644 (file)
index 0000000..f77f6ec
Binary files /dev/null and b/images/form.jpg differ

diff --git a/posts/20180802-kivyforms.html b/posts/20180802-kivyforms.html
new file mode 100644 (file)
index 0000000..62a9aa6
--- /dev/null
+++ b/posts/20180802-kivyforms.html
@@ -0,0 +1,95 @@
+title: Diseñando formularios con Python y Kivy
+date: 2018-08-02 13:40
+tags: formulario, python, kivy, kivyforms
+---
+<div>
+  <a href="images/form.jpg"><img src="images/form.jpg" alt="form" width="300" height="200" class="image-right" /></a>
+
+  <p>Existen muchas librerías para crear interfaces gráficas con Python. Por poner algún ejemplo, he probado con <a href="https://wxpython.org/">wxPython</a>, <a href="https://riverbankcomputing.com/software/pyqt/">PyQt</a> y <a href="https://kivy.org/">Kivy</a>. Esta última es la que más me ha gustado por una serie de razones:</p>
+
+  <ul>
+    <li>Es multiplataforma y funciona en GNU/Linux, Windows, OS X, Anfroid, iOS y Raspberry Pi. Solo he probado las dos primeras pero sí que he podido comprobar que está pensada para usar con teclado y ratón o con pantallas táctiles.</li>
+    <li>No se basa en los widgets nativos de las plataformas sino que tiene los suyos propios, por lo que las aplicaciones se ven igual en todas las plataformas.</li>
+    <li>Es rápida; el motor gráfico funciona sobre OpenGL ES 2 y muchas partes están escritas en Cython.</li>
+    <li>Puedes diseñar las interfaces directamente desde Python o usando el lenguaje Kv.</li>
+    <li>Es un proyecto relativamente nuevo y con un buen mantenimiento.</li>
+    <li>Buena documentación y con muchos ejemplos.</li>
+  </ul>
+
+  <p>Estoy trabajando en un framework de desarrollo de aplicaciones, por lo que necesito que los desarrolladores puedan diseñar formularios rápidamente, al estilo WYSIWYG, y que además puedan incluir sus propios temas, colores, etc. El hecho de que exista el <a href="https://kivy.org/docs/guide/lang.html">lenguaje Kv</a> me facilita mucho la tarea. Es algo parecido al QML que tiene Qt y que permite guardar tus composiciones en ficheros de texto que pueden ser cargados despues por la aplicación sin tener que tocar nada de código.</p>
+
+  <p>Por ejemplo, el <i>Hello World</i> de <a href="https://kivy.org/">Kivy</a> se podría escribir así:</p>
+
+  <pre>
+    # main.py file
+    from kivy.app import App
+
+    class TestApp(App):
+        pass
+
+    TestApp().run()
+
+    # test.kv file
+    Button:
+        text: 'Hello World'
+  </pre>
+
+  <p>Para diseñar los formularios he creado un widget que proporciona un canvas en el que es posible añadir botones, etiquetas, campos de texto y cosas por el estilo. El proyecto se llama <a href="https://gitlab.com/jsancho/kivyforms">KivyForms</a> y de momento es beta. También podeis ver un <a href="https://www.youtube.com/watch?v=512Jfl2CUdY">vídeo con ejemplo de uso de KivyForms</a>. La idea es que el widget tenga una API potente para poder ser integrado en cualquier aplicación que necesite composición de formularios.</p>
+
+  <p>Mirad lo que contiene el widget:</p>
+
+  <pre>
+    class FormCanvas(BoxLayout):
+        def __init__(self, *args, **kwargs):
+            super(FormCanvas, self).__init__(*args, **kwargs)
+
+            self._canvas = StackLayout(
+                orientation='lr-tb',
+                padding=[10, 10, 10, 10],
+                spacing=[10, 10]
+            )
+            super(FormCanvas, self).add_widget(self._canvas)
+  </pre>
+
+  <p>El FormCanvas se basa en un BoxLayout de Kivy e internamente tiene un StackLayout que es donde realmente se añadirán los widgets del formulario. El StackLayout permite que los demás widgets se vayan apilando sin ocupar todo el tamaño de la pantalla.</p>
+
+  <pre>
+    def add_widget(self, widget):
+        g = Grabbable(
+            height=self.widgets_height,
+            size_hint=self.widgets_size_hint
+        )
+        g.add_widget(widget)
+        self._canvas.add_widget(g)
+  </pre>
+
+  <p>Cada vez que añadimos un widget se instancia un elemento <b>Grabbable</b> que contendrá al widget que queremos añadir. Es este elemento <b>Grabbable</b> el que realmente añadimos al canvas. Esto nos permitirá seleccionar el widget y moverlo por el formulario para diseñar la composición.</p>
+
+  <p>Existe un elemento <b>Destination</b> que sirve para indicar dónde caera el widget al finalizar la operación de arrastrar.</p>
+  
+  <pre>
+    class Destination(Label):
+        def __init__(self, **kwargs):
+            super(Destination, self).__init__(**kwargs)
+            self.text = 'Widget goes here'
+            self.color = [1, 1, 0, 1]
+            with self.canvas.after:
+                Color(1, 1, 0, 1)
+                self.box = Line(dash_length=8, dash_offset=4)
+
+        def update_box(self):
+            self.box.points = [
+                self.x, self.y,
+                self.x, self.y + self.height,
+                self.x + self.width, self.y + self.height,
+                self.x + self.width, self.y,
+                self.x, self.y
+            ]
+  </pre>
+
+  <p>Este elemento, que es una simple etiqueta con el borde punteado, es muy útil para que el desarrollador pueda ubicar los widgets en el lugar adecuado.</p>
+
+  <p>Por último, es posible exportar la composición a lenguaje Kv. KivyForms se encarga de eliminar los elementos <b>Grabbable</b> y todo el resto de la configuración necesaria para el diseño del formulario, de forma que es posible guardar la composición directamente a un fichero, lista para ser usada en nuestros programas.</p>
+
+  <p><a href="https://gitlab.com/jsancho/kivyforms">KivyForms</a> se distribuye bajo <a href="https://opensource.org/licenses/MIT">licencia MIT</a>. Aunque prefiero las licencias GPL, en este caso he decidido usar, por coherencia, la misma licencia que Kivy, así que estais invitados a colaborar en el proyecto.</p>
+</div>