Browser Embebido: SettingUp! - segonzal/jEdit-CC4401 GitHub Wiki

Subgrupo:

Gestión del subproyecto:

Colaboradores:

  •   noneYet

Coordinador global del proyecto:

Otras partes del subproyecto

Bosquejo

Notar:

  • Botón archivo W, para crear proyecto.
  • Botones de pestaña bajo el editor.
  • Botones Refresh y Lock.

Bosquejo del Browser

Requisitos de Usuario

  • Una división de la pantalla muestra un navegador web, la otra división hay código, está separado en tres pestañas: CSS, Javascript, HTML.
  • En el navegador se muestra una preview del código escrito en la página de edición.
  • El browser debe actualizar su contenido cuando algo fuere cambiado en el código.
  • Se debe poder cambiar el tamaño de la ventana de preview.
  • En la ventana de código hay syntax highlighting, para cada tipo de código.

Opciones:

  • El botón para abrir el código en un navegador independiente instalado en la máquina.
  • Botón "nuevo proyecto web" genera tres archivos: <nombre>.css, <nombre>.js, <nombre>.html. El archivo HTML trae la estructura básica:
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="<nombre>.css">
    <script src="<nombre>.js"></script>
</head>
<body>
</body>
</html>

Cada archivo está abierto en una pestaña de edición.

Requisitos de Sistema

Sobre la disposición de elementos:

  • Crear una división del 50% del workspace inicial, la zona derecha no debe ser editable y contendrá el visualizador web.
  • el visualizador tiene los botones actualizar y lock.
  • La zona izquierda, de ahora en adelante editor, tendrá tres botones etiquetados HTML, CSS y Javascript.
  • La separación entre editor y visualizador es móvil, y las zonas se reescalarán.

Sobre las funciones del plugin:

  • Las pestañas cambiarán el contenido del editor mostrando el archivo CSS, HTML o JS según corresponda, y usando el highlighting del lenguaje.
  • El visualizador se actualizará, mostrando la última versión del código escrito, cuando:
    • El usuario haga click en el botón actualizar.
    • El usuario cambie de pestañas.
    • El usuario no escriba código por 2 segundos y el código es válido.
  • El visualizador No se actualizará mientras el botón LOCK este presionado.
    • Presionar actualizar estando activo el lock actualiza el visualizador y desbloquea el lock.

código válido:

  • Una etiqueta que está abierta tiene su par que cierra.
  • La etiquetas existen dentro de lo que soporta el estándar HTML.

Concept Location

Utilizaremos como base el Plugin HtmlViewer. Tras el Concept Location las clases afectadas son:

  • HelpHtmlViewer.java
  • HtmlViewer.java
  • actions.xml
Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️