tutorial semantic react gui user-interface scripting open-source declarative

user-interface - gui - semantic ui react



"Frameworks" de programación de GUI muy simples, sencillos y fáciles de usar (10)

XUL (es bastante fácil de usar y potente; gran parte de Firefox se implementa utilizando XUL para la estructura de la GUI, + JavaScript para el manejo de la lógica)

El tutorial de XUL tiene algunos buenos ejemplos. Aquí hay uno para tabboxes . El de la parte inferior de la página tiene pestañas, botones, cuadros de edición y cuadros de grupo intercambiables, y es bastante simple (sin Javascript / CSS / XBL / enlaces de teclas / etc). A continuación, agregan progresivamente más elementos más tarde, que es una gran cantidad de funcionalidad para la longitud del archivo que lo especifica. (al menos hasta que comiences a agregar javascript para manejar la lógica en cuestión) Si tuviera que hacer algo como esto en Win32, sería un verdadero dolor.

Indique las bibliotecas de programación de GUI, los kits de herramientas y los marcos que permiten escribir aplicaciones de GUI rápidamente . Quiero decir de tal manera, que

  • La GUI se describe por completo en un archivo de texto sin formato legible por humanos (y escritura humana) (código)
  • el código es conciso (1 o 2 líneas de código por widget / par de eventos), adecuado para la creación de scripts
  • La estructura y el funcionamiento de la GUI son evidentes a partir del código (anidación de widgets y flujo de eventos)
  • detalles sobre cómo construir la GUI están ocultos (cosas como mainloop, adjuntar oyentes de eventos, etc.)
  • auto-layouts son compatibles (vboxes, hboxes, etc.)

Como sugieren las respuestas, esto puede definirse como una programación declarativa de GUI, pero no es necesariamente así. Cualquier enfoque está bien si funciona, es fácil de usar y breve.

Hay algunas bibliotecas de GUI / toolkits como esta. Se enumeran a continuación. Extiende la lista si ves que falta un kit de herramientas calificado. Indique si el proyecto es crossplatform, maduro, activo y, si es posible, dé un ejemplo.

Utilice esta wiki para analizar solo proyectos de código abierto.

Esta es la lista hasta el momento (en orden alfabético):

Fudgets

Fudgets es una biblioteca de Haskell. Plataforma: Unix. Estado: Experimental, pero aún mantenido. Un ejemplo:

import Fudgets main = fudlogue (shellF "Hello" (labelF "Hello, world!" >+< quitButtonF))

Captura de pantalla de ejemplo de Fudgets http://www.picamatic.com/show/2009/01/28/02/40/1883597_93x80.gif

GNUstep Renaissance

Renaissance permite describir GUI en XML simple. Plataformas: OSX / GNUstep. Estado: parte de GNUstep. Un ejemplo a continuación:

<window title="Example"> <vbox> <label font="big"> Click the button below to quit the application </label> <button title="Quit" action="terminate:"/> </vbox> </window>

Captura de pantalla de ejemplo de Renaissance http://www.picamatic.com/show/2009/01/28/03/19/1884098_289x80.png

HTML

GUI basada en HTML (HTML + JS). Crossplatform, maduro. Puede ser utilizado completamente en el lado del cliente.

Buscando un buen ejemplo de "helloworld".

Ejemplo de GUI HTML http://www.picamatic.com/show/2009/01/28/02/44/1883635_264x60.png

JavaFX

JavaFX se puede usar tanto para aplicaciones independientes (de escritorio) como para aplicaciones web. No completamente crossplatform, aún no completamente de código abierto. Estado: 1.0 lanzamiento. Un ejemplo:

Frame { content: Button { text: "Press Me" action: operation() { System.out.println("You pressed me"); } } visible: true }

Captura de pantalla es necesaria.

Phooey

Phooey es otra biblioteca de Haskell. Crossplatform (wxWidgets), HTML + JS backend planificado. Maduro y activo. Un ejemplo (un poco más que un helloworld):

ui1 :: UI () ui1 = title "Shopping List" $ do a <- title "apples" $ islider (0,10) 3 b <- title "bananas" $ islider (0,10) 7 title "total" $ showDisplay (liftA2 (+) a b)

Captura de pantalla de ejemplo de Phooey http://www.picamatic.com/show/2009/01/28/02/33/1883543_236x187.png

PythonCard

PythonCard describe la GUI en un diccionario de Python. Crossplatform (wxWidgets). Algunas aplicaciones lo usan, pero el proyecto parece estancado. Hay un tenedor activo

Me salteo el ejemplo de PythonCard porque es demasiado detallado para el concurso.

Captura de pantalla de ejemplo de PythonCard http://www.picamatic.com/show/2009/01/28/02/46/1883646_199x99.gif

Zapatos

Zapatos para Ruby. Plataformas: Win / OSX / GTK +. Estado: Joven pero activo. Una aplicación mínima se ve así:

Shoes.app { @push = button "Push me" @note = para "Nothing pushed so far" @push.click { @note.replace "Aha! Click!" } }

Ejemplo de captura de zapatos http://www.picamatic.com/show/2009/01/28/03/14/1884011_227x71.png

Tcl / Tk

Tcl / Tk . Crossplatform (su propio conjunto de artilugios). Maduro (probablemente incluso anticuado) y activo. Un ejemplo:

#!/usr/bin/env wish button .hello -text "Hello, World!" -command { exit } pack .hello tkwait window .

Captura de pantalla de ejemplo de Tcl / Tk http://www.picamatic.com/show/2009/01/28/02/51/1883672_111x58.png

tekUI

tekUI para Lua (y C). Plataformas: X11, DirectFB. Estado: Alfa (utilizable, pero la API aún evoluciona). Un ejemplo:

#/usr/bin/env lua ui = require "tek.ui" ui.Application:new { Children = { ui.Window:new { Title = "Hello", Children = { ui.Text:new { Text = "_Hello, World!", Style = "button", Mode = "button", }, }, }, }, }:run()

tekUI helloworld captura de pantalla http://www.picamatic.com/show/2009/01/28/03/01/1883821_290x55.png

Treethon

Treethon para Python. Describe la GUI en un archivo YAML ( Python en un árbol YAML ). Plataforma: GTK +. Estado: trabajo en progreso. Una aplicación simple se ve así:

_import: gtk view: gtk.Window() add: - view: gtk.Button(''Hello World'') on clicked: print view.get_label()

Captura de pantalla de Treethon helloworld http://treethon.googlecode.com/svn/trunk/treethon_gtk_tutorial/base.png

Sin embargo, la biblioteca de Python sin nombre de Richard Jones:

Este no se ha lanzado aún. La idea es usar administradores de contexto de Python ( with palabra clave) para estructurar el código GUI. Ver el blog de Richard Jones para más detalles.

with gui.vertical: text = gui.label(''hello!'') items = gui.selection([''one'', ''two'', ''three'']) with gui.button(''click me!''): def on_click(): text.value = items.value text.foreground = red

XUL

XUL + Javascript se puede usar para crear aplicaciones de escritorio independientes con XULRunner y extensiones de Mozilla. Maduro, código abierto, plataforma cruzada.

<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <caption label="Hello World"/> </window>

XUL helloworld example http://www.picamatic.com/show/2009/01/28/03/27/1884209_228x108.png

¡Gracias por las contribuciones!


TCL / TK es un lenguaje de script utilizado para compilar GUI de forma interactiva. Está disponible en varias plataformas, incluidas Unix, Windows y Mac OS X.


Lo que estás describiendo es, a excepción de los zapatos, la nueva noción de programación declarativa. Describiría más los zapatos como un lenguaje específico de dominio de GUI. Bueno, digo new-fangled: las formas de Visual Basic, si mirabas detrás del diseñador de IDE, eran declarativas. Entonces, retrocediendo aún más, estaban los Formularios SQL * de Oracle, aunque ensamblarlos con un editor de texto era un proceso que solo podían realizar los más valientes.

Para agregar otro a la lista, Microsoft tiene XAML que, entre otras cosas, describe las GUI construidas para WPF .

Aunque algunos de los esquemas mencionados son bastante simples, las GUI definidas de manera declarativa pueden ser tan complejas como cualquier cosa definida en el código, son simplemente más fáciles y terser: dicen "qué" quieres que suceda y lo dejan en el marco subyacente para manejarlo el como".


Deberías echarle un vistazo a XAML si estás en la plataforma .NET


No para niños, pero HTML.

Es multiplataforma, y ​​resume el gui-layout en un archivo de texto simple. Definitivamente es maduro, bien entendido y bien documentado.

Hay varias maneras de crear plantillas de archivos HTML para contenido dinámico y otras formas de convertir sintaxis personalizadas en HTML si no le gustan los corchetes angulares.

El scripting del lado del cliente con Javascript, el scripting del lado del servidor con PHP / Ruby / Python / Perl.

No es adecuado para todos los propósitos, pero para muchos es suficiente. No hay razón para que tenga que ser servido tampoco; puede distribuir un archivo HTML a sus clientes si lo desea; consulte TiddlyWiki para ver un buen ejemplo de dónde puede ir eso.


wxLua es un contenedor de la biblioteca wxWidgets para Lua. Utiliza un método Connect para adjuntar eventos de widgets gui a funciones (las funciones son de primera clase como en JS).


GTK-server es extremadamente simple de usar y se puede utilizar en más de 30 idiomas, incluidos Bash y Visual Basic.


Pijamas - http://pyjs.org - es un conjunto de widgets de escritorio, disfrazado como un conjunto de widgets web 2.0 basados ​​en AJAX. NO es como un conjunto de widgets web que realmente lo porté al escritorio - http://pyjd.org - usando webkit (el mismo motor en adobe AIR, google chrome, safari, etc.)

esto es "hola mundo":

from pyjamas.ui.RootPanel import RootPanel from pyjamas.ui.Button import Button from pyjamas import Window def greet(fred): Window.alert("Hello, AJAX!") if __name__ == ''__main__'': b = Button("Click me", greet) RootPanel().add(b)

que responde inmediatamente a los primeros cuatro de cinco requisitos. el requisito 5 se cumple con esto:

from pyjamas.ui.RootPanel import RootPanel from pyjamas.ui.HorizontalPanel import HorizontalPanel from pyjamas.ui.HTML import HTML p = HorizontalPanel() p.add(HTML("<b>Hello</b>")) p.add(HTML("World")) RootPanel().add(p)

no podría ser más simple.



SDL / Swing es extremadamente lacónico, legible, discreto (283k lib sin dependencias) y fácil de usar. Ejemplo:

menus { "File" { "Open" do="open" // calls "open()" in the controller "---" "Exit" do="exit" } }

Es de código abierto pero cuenta con el respaldo comercial de Ikayzo.com. Los puertos para .NET e iOS están en marcha.