Articulo de referencia

Núcleo dinámico

[[C++]] in [[Qt (software)|Qt]] [[#Lively for Qt|variant]]"},"operating system":{"wt":"[[Cross-platform software|Cross-platform]]"},"platform":{"wt":"Apple [[Safari (web browser...

Lively Kernel es un entorno de programación web de código abierto , desarrollado por Dan Ingalls cuando trabajaba en SAP Research. Admite aplicaciones de estilo escritorio con gráficos avanzados y capacidad de manipulación directa, pero sin los problemas de instalación o actualización de las aplicaciones de escritorio convencionales. [ 1 ] [ 2 ] El desarrollo comenzó en los laboratorios de Sun Microsystems en Menlo Park, California , y posteriormente se trasladó al Instituto Hasso Plattner en Potsdam-Babelsberg, cerca de Berlín.

Descripción general

Lively Kernel es un entorno de programación integrado y de composición gráfica, escrito íntegramente en JavaScript y que utiliza gráficos estándar de navegador (W3C Canvas o SVG). Por lo tanto, es accesible desde cualquier navegador como una página web y comienza a funcionar en cuanto se carga la página. Permite editar su propio código y gráficos, y gracias a su compatibilidad con WebDAV, puede guardar los resultados o incluso clonarse en nuevas páginas web. Además de sus capacidades para el desarrollo de aplicaciones, también funciona como su propio entorno de desarrollo integrado (IDE), lo que hace que todo el sistema sea autosuficiente y no requiera más herramientas que un navegador.

Formas, widgets, ventanas, IDE, todo en una página web.

El núcleo Lively utiliza un modelo gráfico Morphic para añadir comportamiento a un grafo de escena construido a partir de gráficos del navegador. De este modo, los gráficos simples se ensamblan en widgets gráficos estándar como controles deslizantes , barras de desplazamiento , vistas de texto, listas y marcos de recorte . Un sistema de ventanas simple , construido a partir de estos widgets, ofrece inspectores de objetos, gestores de archivos (exploradores) y exploradores de código . Incluso las páginas de demostración más rudimentarias permiten editar y probar código nuevo en un explorador de código sencillo mientras el sistema está en funcionamiento.

Lively se ha utilizado para crear sitios web sencillos, incluyendo su propio tutorial, y también un sistema Wiki del lado del cliente que almacena sus páginas en un repositorio versionado. El contenido puede variar desde páginas de texto relativamente estáticas hasta modelos totalmente dinámicos que se ven y se comportan como simulaciones de Adobe Flash . El núcleo de Lively logra un comportamiento dinámico complejo sin soporte específico para animaciones (no utiliza las funciones de animación de SVG), sino mediante la simple programación de múltiples procesos de subprocesos ligeros en JavaScript.

Texto y transformaciones

El núcleo de Lively incluye su propio editor de texto multifuente escrito en JavaScript. Ofrece soporte para centrado, justificación y funciones básicas de composición de texto. Trabajar con Lively es muy similar a trabajar con un programa de diseño web, con la diferencia de que la maquetación del texto en tiempo real no se realiza en un programa de composición sin conexión, sino que se basa en el comportamiento dinámico integrado del texto en el núcleo de Lively.

La viveza de los gráficos de Lively se hace aún más evidente al manipular los controles de escala y rotación de objetos y texto. El explorador de código completo se puede usar incluso inclinado 20 grados. Dado que el editor de texto está compuesto enteramente por gráficos de Lively, funciona correctamente incluso si se rota o se escala, al igual que las barras de desplazamiento, los marcos de recorte y el resto de la interfaz de usuario .

Compatibilidad con diferentes navegadores

El núcleo Lively depende de la compatibilidad del navegador con JavaScript y gráficos SVG o Canvas, todos ellos estándares del W3C. Desde 2009, esto significa que funciona en los navegadores Safari, Firefox, Chrome y Opera.

Aunque este requisito pueda parecer menos compatible que HTML, Lively es en realidad más compatible con los navegadores en los que se ejecuta que HTML. Esto se debe a que existe mayor uniformidad entre las implementaciones de JavaScript, SVG y Canvas que entre las distintas implementaciones de HTML. Salvo un pequeño archivo inicial, el código base del núcleo de Lively no incluye ninguna comprobación sobre qué navegador cliente se está utilizando.

A partir de 2011, Lively Kernel funciona mejor en navegadores basados ​​en WebKit , como Safari para Macintosh, o Chromium o Google Chrome para Windows. Para ejecutarlo en Internet Explorer (Windows) se requiere Google Chrome Frame . Se prevé realizar pruebas en todos los navegadores populares en la próxima versión.

entorno de desarrollo integrado

Lively incluye un entorno de desarrollo integrado de gran potencia, diseñado para funcionar mediante WebDAV con un conjunto local de aproximadamente una docena de archivos JavaScript fuente, sincronizables con un repositorio versionado. Al abrir el Navegador del Sistema, todos los archivos JavaScript fuente se muestran en el panel de archivos. Al hacer clic en uno de estos archivos, se leerá, analizará (mediante un analizador JavaScript OMeta) y se mostrará de forma similar a un navegador Smalltalk , con las definiciones de funciones o clases listadas y, para cada clase, se mostrarán todos los nombres de los métodos. El usuario puede hacer clic en el nombre de un método, editar su código en el panel inferior y guardar la nueva definición. Esta se verificará sintácticamente y, si es correcta, se guardará en el archivo .JS. Además, si se encuentra en modo de evaluación (el caso habitual), el método se redefinirá en el sistema en ejecución. Esto permite realizar cambios no críticos sin necesidad de reiniciar Lively ni ninguna de las aplicaciones en desarrollo. Una vez cargados todos los archivos fuente, un escaneo rápido encontrará todas las referencias a un texto seleccionado y presentará todos los fragmentos de código coincidentes en un subnavegador independiente.

El IDE Lively incluye inspectores de objetos y paneles de estilo de transformación para controlar rellenos, bordes y estilos de texto. También ofrece herramientas para la depuración en puntos de error y la creación de perfiles para optimizar el rendimiento, pero estas funciones no se han priorizado debido a la mejora en la calidad de la compatibilidad en tiempo de ejecución en los principales navegadores.

Wiki animada

El IDE opera sobre sus archivos de código fuente en un repositorio versionado para gestionar la evolución de la base de código de Lively. El mismo enfoque se ha utilizado para empoderar a los usuarios con control sobre el contenido web activo en forma de una Wiki del lado del cliente. Dado que Lively incluye herramientas para editar el contenido en sus mundos (grafos de escena y otro contenido) y para almacenar ese contenido como páginas web, una conexión WebDAV permite a Lively almacenar nuevas versiones de su contenido de página mientras se desarrolla incrementalmente. A medida que se guarda cada nueva versión, es visible desde el resto de Internet y se pueden recuperar versiones anteriores en caso de error o cambio de opinión. Es notable que este estilo Wiki de contenido web evolutivo se extiende a todo el contenido textual, gráfico y de scripts en Lively, así como a cualquier nuevo formato que se pueda definir, sin necesidad de ningún tipo de servidor Wiki. [ 3 ] Todo lo que se requiere es un servidor que proporcione una interfaz HTTP WebDAV. Ahora se mantiene una cantidad cada vez mayor del contenido del Proyecto Lively de esta manera.

Código de ejemplo

// ClockMorph: Un reloj analógico sencilloMorph.subclase ( ClockMorph , {defaultBorderWidth : 2 , tipo : "ClockMorph" ,// Inicialización del constructor : función ( $super , posición , radio ) {$super ( position . asRectangle (). expandBy ( radius ), "ellipse" ); this . openForDragAndDrop = false ; // No manejar solicitudes de arrastrar y soltar this . makeNewFace (); // Construir la esfera del reloj return this ; },// Construye una nueva esfera de reloj makeNewFace : function () {var bnds = this.shape.bounds ( ) ; var radius = bnds.width / 3 ; var labels = [ ] ; var fontSize = Math.max ( Math.floor ( 0.04 * ( bnds.width + bnds.height ) ) , 4 ) ; var labelSize = fontSize ; // espacio para centrar con margen predeterminado// Agregar números romanos al reloj para ( var i = 0 ; i < 12 ; i ++ ) { var labelPosition = bnds . center (). addPt ( Point . polar ( radius * 0.85 , (( i - 3 ) / 12 ) * Math . PI * 2 )). addXY ( labelSize , 0 ); var label = new TextMorph ( pt ( 0 , 0 ). extent ( pt ( labelSize * 3 , labelSize )), [ 'XII' , 'I' , ' II' , 'III' , ' IV ' , ' V' , 'VI' , ' VII' , 'VIII' , 'IX' , 'X' , 'XI' ][ i ]); label . setWrapStyle ( WrapStyle . SHRINK ); label . setFontSize ( fontSize ); label . setInset ( pt ( 0 , 0 ) ) ; label.setBorderWidth ( 0 ) ; label.setFill ( null ) ; label.align ( label.bounds ( ) . center ( ) , labelPosition.addXY ( -2 , 1 ) ) ; this.addMorph ( label ) ; } // Agregar manecillas del reloj this.addMorph ( this.hourHand = Morph.makeLine ( [ pt ( 0 , 0 ) , pt( 0 , - radio * 0.5 )], 4 , Color . azul )); this . addMorph ( this . minuteHand = Morph . makeLine ([ pt ( 0 , 0 ), pt ( 0 , - radio * 0.7 )], 3 , Color . azul )); this . addMorph ( this . secondHand = Morph . makeLine ([ pt ( 0 , 0 ), pt ( 0 , - radio * 0.75 )], 2 , Color . rojo )); this . setHands (); this . changed (); }, // Establecer los ángulos de las manecillas del reloj en función de la hora actual setHands : function () {var now = new Date ( ) ; var second = now.getSeconds ( ) ; var minute = now.getMinutes ( ) + second / 60 ; var hour = now.getHours ( ) + minute / 60 ; this.hourHand.setRotation ( hour / 12 * 2 * Math.PI ) ; this.minuteHand.setRotation ( minute / 60 * 2 * Math.PI ) ; this.secondHand.setRotation ( second / 60 * 2 * Math.PI ) ; } ,// Se llamará cuando ClockMorph se coloque en un mundo startSteppingScripts : function () { this.startStepping ( 1000 , " setHands" ); // una vez por segundo } });

Animado para Qt

Lively for Qt es otra implementación de Lively Kernel en la que las partes del kernel en JavaScript se reemplazan por funciones del framework Qt en C++ . [ 4 ] [ 5 ] Lively for Qt hereda la mayor parte de la funcionalidad básica (como la implementación de widgets, la gestión del diseño, el manejo de eventos principal y la compatibilidad con JavaScript principal) de Qt. Lively for Qt conserva la naturaleza excepcionalmente interactiva (la "vitalidad") de Lively Kernel, por ejemplo, al permitir que la interfaz de usuario y el código fuente de la aplicación se editen sobre la marcha. Sin embargo, en Lively for Qt el trabajo de desarrollo se realiza utilizando las interfaces de programación de aplicaciones ( API ) familiares y bien documentadas de la plataforma Qt.

Referencias

  1. Ingalls, Daniel ; Palacz, Krzysztof; Uhler, Stephen; Taivalsaari, Antero; Mikkonen, Tommi (15 de mayo de 2008). "The Lively Kernel: un sistema autosostenible en una página web" . Sistemas autosostenibles . Lecture Notes in Computer Science. Vol.  5146. pp. 31–50 . doi : 10.1007/978-3-540-89275-5_2 . ISBN  978-3-540-89274-8.
  2. El marco de aplicación Lively Kernel
  3. Lively Wiki: Un entorno de desarrollo para crear y compartir contenido web activo , Krahn Ingalls Hirschfeld Lincke Palacz, WikiSym '09, 25-27 de octubre de 2009
  4. Mikkonen, Tommi; Taivalsaari, Antero (8 de marzo de 2009). "Creación de una plataforma de aplicaciones web móviles: las experiencias dinámicas del kernel". SAC '09: Actas del simposio ACM de 2009 sobre computación aplicada . págs. 177–184 . doi : 10.1145/1529282.1529321 . 
  5. Mikkonen, Tommi; Taivalsaari, Antero; Terho, Mikko (2–4 de septiembre de 2009). Lively for Qt: una plataforma para aplicaciones web móviles . Mobility '09: Actas de la 6.ª Conferencia Internacional sobre Tecnología, Aplicaciones y Sistemas Móviles. doi : 10.1145/1710035.1710059 .
  • Sitio web oficialEdita esto en Wikidata