Die Online-IDE von Martin Pabst ist eine komplett im Browser ausgeführte Entwicklungsumgebung für eine Untermenge der Programmiersprache Java.
Die IDE eignet sich besonders für das Erlernen von Java und für interaktive Java-Beispiele - mit LearnJ existiert ein interaktiver Java-Kurs, der in Bayern bereits an Gymnasien eingesetzt wird.
Eine etwas abgespeckte Variante der Online-IDE kann als Embedded-IDE in eigene Web-Seiten integriert werden.
Möchte man auf Basis der “Embedded-IDE” eigene Beispiele oder gar einen eigenen Kurs auf GitHub veröffentlichen, stößt man jedoch bald auf ein grundsätzliches Problem: eine Reihe von HTML-Tags (wie z.B. <script>
oder <iframe>
) werden in Markdown-Dateien (wie z.B. README.md) nicht unterstützt und stattdessen wie normaler Text behandelt.
Die “offizielle” (und damit vermutlich dauerhaft verfügbare) Abhilfe ist der Umstieg auf GitHub Pages. Zwar werden derartige Seiten ebenfalls aus Markdown-Dateien gespeist, allerdings findet zunächst eine Konvertierung nach HTML statt, die u.a. auch <iframe>
-Elemente zulässt - und genau auf solche <iframe>
-Elemente stützt sich das hier vorgestellte Verfahren.
Noch ein kleiner Hinweis: falls Sie diesen Beitrag mögen und selbst einsetzen, überlegen Sie doch, ob Sie ihn mit einem “Stern” versehen wollen (Sie finden die entsprechende Schaltfläche rechts oben auf der Seite mit dem GitHub Repository - allerdings nicht auf der zugehörigen “GitHub Page”). Auf diese Weise kann ich erkennen, welche meiner Beiträge am häufigsten zum Einsatz kommen und dementsprechend mit höherer Priorität gepflegt werden sollten.
Hier können Sie sehen, wie das Ergebnis am Ende aussieht:
Sollten Sie sich gerade die README-Datei in desem Repository ansehen, werden Sie nur einen Text der Form
<iframe src="Hello_World.html" style="width:600px; height:400px; overflow:hidden"></iframe>
vorfinden - in diesem Fall wechseln Sie bitte auf die zugehörige GitHub Page, dort werden Sie die tatsächliche “Embedded-IDE” sehen und auch mit ihr arbeiten können.
Eine “Embedded-IDE” kann von vorneherein mit einer oder mehreren Java-Dateien ausgestattet werden - zum Beispiel, um ein (nahezu) fertiges Beispiel zu präsentieren und dem Benutzer unnötige Tipparbeit zu ersparen. Es sind aber auch leere IDEs zulässig.
Nota bene: bitte beachten Sie, daß Änderungen an Markdown-Dateien im GitHub Repository erst nach einigen Minuten auf der zugehörigen “GitHub Page” erscheinen! Änderungen an den HTML-Dateien für die IDE-Instanzen können Sie jedoch sofort überprüfen, sofern Sie vor einem erneuten Laden der “GitHub Page” für diese Seite die “Entwicklertools” Ihres Browsers öffnen (häufig kann dies mithilfe der Tastenkombination Alt-Windows-I bzw. Alt-Cmd-I geschehen)
“Leere” IDEs eignen sich besonders gut als “Spielwiese” für eigene Experimente oder um auf die Schnelle eine Idee auszuprobieren - ähnlich den REPLs in anderen Programmiersprachen.
Und so bauen Sie eine leere IDE in Ihre GitHub Page ein:
id
im Attribut data-java-online
sollte auf einen Wert gesetzt werden, der ggfs. sogar dateiübergreifend (nämlich über Ihre gesamte GitHub-“Domäne” hinweg) eineindeutig ist, damit evtl. im Browser gespeicherte Quelltexte nicht mit denen auf anderen GitHub Pages kollidierendata-java-online
an Ihre Bedürfnisse anpassen (eine Anleitung dafür finden Sie im GitHub Repository der Online-IDE selbst)<iframe src="empty_Workspace.html" style="width:600px; height:400px; overflow:hidden"></iframe>
<iframe>
können Sie ändern - der Inhalt passt sich entsprechend an.Das Ergebnis kann dann z.B. wie folgt aussehen:
Auch hier gilt wieder: Sie müssen sich auf der GitHub Page zu diesem Repo befinden, um die IDE wirklich sehen zu können.
Wie zuvor schon erwähnt, kann eine “embedded IDE” jedoch auch mit bereits vorgefertigten Dateien ausgestattet werden, damit Benutzer nicht immer bei Null anfangen müssen. Der predefined_Workspace ist ein Beispiel dafür und kann wie folgt in eine GitHub Page integriert werden:
id
im Attribut data-java-online
sollte auf einen Wert gesetzt werden, der ggfs. sogar dateiübergreifend (nämlich über Ihre gesamte GitHub-“Domäne” hinweg) eineindeutig ist, damit evtl. im Browser gespeicherte Quelltexte nicht mit denen auf anderen GitHub Pages kollidieren<script>
-Elemente innerhalb der IDE anlegen - die Dokumentation zur Online-IDE enthält Beispiele hierfürdata-java-online
an Ihre Bedürfnisse anpassen (eine Anleitung dafür finden Sie im GitHub Repository der Online-IDE selbst)<iframe src="predefined_Workspace.html" style="width:600px; height:400px; overflow:hidden"></iframe>
<iframe>
können Sie ändern - der Inhalt passt sich entsprechend an.Das Ergebnis kann dann z.B. wie folgt aussehen:
Wie üblich gilt auch hier: Sie müssen sich auf der GitHub Page zu diesem Repo befinden, um die IDE tatsächlich sehen zu können.
Dieser Beitrag steht unter MIT Lizenz