onlineide:integration:start
Dies ist eine alte Version des Dokuments!
Inhaltsverzeichnis
Integration der Online-IDE in eigene Webseiten
Im <head>
-Element der HTML-Seite werden die Online-IDE sowie die von ihr benutzten Bibliotheken mittels <script>
-Tags geladen:
<head> <link rel="preload" href="lib/monaco-editor/dev/vs/editor/editor.main.js" as="script"> <link rel="preload" href="lib/monaco-editor/dev/vs/editor/editor.main.nls.de.js" as="script"> <script src="lib/pixijs/pixi.js"></script> <link rel='stylesheet' type='text/css' media='screen' href='js.webpack/javaOnlineEmbedded.css'> <script src="lib/jquery/jquery-3.3.1.js"></script> <script src="lib/markdownit/markdownit.min.js"></script> <script src="lib/monaco-editor/dev/vs/loader.js"></script> <script src="js/runtimelibrary/graphics/SpriteLibrary.js"></script> <script src="lib/howler/howler.core.min.js"></script> <script type="module" src="js.webpack/javaOnline-embedded.js"></script> </head>
Die Datei Spritelibrary.js
finden Sie im Git-Repository unter src/client/runtimelibrary/graphics/Spritelibrary.js
.
Nach dem vollständigen Aufbau der Seite sucht die Online-IDE alle DIV-Tags mit der Klasse "java-online" und baut sie zu Online-IDEs um. Beispiel:
<div class="java-online" style="width: 80%; height: 400px; margin-left: 5px" data-java-online="{ 'id': 'Vererbung_Beispiel_1', 'withBottomPanel': true, 'withFileList': true, 'withPCode': true, 'withConsole': true, 'withErrorList': true }"> <script type="text/plain" title="Test1.java"> World w = new World(); new Quadrat(40, 20, 300); </script> <script type="text/plain" title="Test2.java"> class Quadrat extends Rectangle { public Quadrat(double left, double top, double width){ super(left, top, width, width); } } </script> <script type="text/plain" title="Tipp" data-type="hint"> ## Tipp: Tipps werden in einer einfachen Markdown-Syntax verfasst, die **Fettschrift** u.ä. ermöglicht, aber auch Syntax-Highlighting im Fließtext (``class Quadrat extends Rectangle { }``) und in ganzen Absätzen: ``` double v = Math.random()*8 + 2; // Betrag der Geschwindigkeit zwischen 2 und 10 double w = Math.random()*2*Math.PI; // Winkel zwischen 0 und 2*PI vx = v * Math.cos(w); vy = v * Math.sin(w); ``` </script> </div>
Bedeutung der Konfigurationsparameter
Das div
-Element, das zur Online-IDE umgebaut werden soll, kann durch durch ein Attribut data-java-online
konfiguriert werden. Die darin enthaltenen Einstellungen bedeuten:
Einstellung mit Beispielwert | Bedeutung |
---|---|
'id': 'Beispiel_1' | Eindeutige id innerhalb der Seite. Sie wird benutzt, um Änderungen des Schülers am Quelltext in der Datenbank des Browsers zu speichern, so dass sie beim nächsten Seitenaufruf am selben Browser wieder vorhanden sind. |
'withBottomPanel': true | Blendet den Fensterteil unterhalb des Programmtextes ein/aus |
'withFileList': true | Falls withBottomPanel den Wert true hat, kann hiermit die Dateiliste (linker Teil des bottom panels) ein- oder ausgeblendet werden. |
'withPCode': true | Falls withBottomPanel den Wert true hat, kann hiermit das PCode-Panel ein- oder ausgeblendet werden. |
'withConsole': true | Falls withBottomPanel den Wert true hat, kann hiermit das Console-Panel ein- oder ausgeblendet werden. |
'withErrorList': true | Falls withBottomPanel den Wert true hat, kann hiermit das Fehler-Panel ein- oder ausgeblendet werden. |
Einfachste Variante:
<HTML> <div class="java-online" style="width: 80%; height: 200px; margin-left: 5px" data-java-online="{ 'id': 'Vererbung_Beispiel_2', 'withBottomPanel': false }"> <script type="text/plain" title="Test2.java"> for(int i = 0; i < 10; i++){ println("Das ist Zeile " + (i + 1)); } </script> </div> </HTML>
onlineide/integration/start.1619432662.txt.gz · Zuletzt geändert: 2021/12/29 11:29 (Externe Bearbeitung)