Java lernen durch Ausprobieren!

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== Integration der Online-IDE in eigene Webseiten =====

===== A. Mittels iframe-Tag =====
Die Integration mittels ''iframe''-Tag ist sehr einfach. Alle Dateien, die Sie dazu auf Ihrem Server hosten müssen, [[https://www.embed.learnj.de/createwrapper.html|finden Sie hier zum Download]]. 
  - Laden Sie die Dateien auf Ihren Server in ein Verzeichnis ''include'' hoch, das dann z.B. unter https://www.meineseite.de/include erreichbar ist.
  - Das ''iframe''-Tag zum Einfügen auf Ihrer Seite können Sie einfach mit dem [[https://www.embed.learnj.de/createwrapper.html|Wrapper-Generator von Christoph Gräßl]] erstellen.
  - Ersetzen Sie die Adresse ''https://embed.learnj.de'' im generierten Tag durch die Adresse Ihres Servers, z.B. ''https://www.meineseite.de''.

<WRAP center round tip 60%>
Wenn das ''iframe''-Tag auf einer anderen Domain integriert wird als der, auf der die include-Dateien liegen (z.B. in einem Mebis-Kurs) wird i.d.R. das Laden der eingebundenen Schriftarten vom Server, auf dem die include-Dateien liegen, blockiert. Das beeinträchtigt die IDE kaum. Falls Sie eine perfekte Lösung anstreben können Sie das Nachladen der Schriften erlauben, indem Sie Ihren Server so konfigurieren, dass er einen entsprechenden Access-Control-Origin-Header liefert. Im Falle eines Apache-Webservers lautet die entsprechende Konfigurationszeile für ''iframe''-Tags in Mebis beispielsweise:
<code>
   Header Set Access-Control-Allow-Origin "https://lernplattform.mebis.bayern.de"
</code>
</WRAP>



===== B. Ohne iframe-Tag =====
[[.embedded-ide_1.0:start|Anleitung für die Versionen 1.x]] \\ \\ 
Die folgende Dokumentation gilt ab Version 2.0:
<WRAP center round info 80%>
Alle Dateien, die Sie für Ihren Webserver benötigen, finden Sie [[https://embed1.learnj.de/online-IDE-embedded.zip|in diesem zip-Archiv]]. Die oberste Verzeichnisebene innerhalb des Archivs sieht so aus:
{{ :onlineide:integration:pasted:20241207-205709.png }}
Auf jeder Html-Seite, in der Sie die embedded-Version der Online-IDE nutzen möchten, müssen Sie im Header die Dateien ''online-ide-embedded.css'' und ''online-ide-embedded.js'' laden:
<code html>
<head>
   <link rel='stylesheet' type='text/css' media='screen' href='./online-ide-embedded.css'>
   <script type="module" crossorigin src="./online-ide-embedded.js"></script>
</head>
</code>

Alle weiteren benötigten Dateien werden dann automatisch aus dem Verzeichnis ''assets'' nachgeladen. Das Verzeichnis ''js'' benötigen Sie nur dann, wenn Sie die Online-IDE auch mittels ''<iframe>''-tags einbinden möchten (s.o.). Ansonsten können Sie es einfach löschen.

</WRAP>





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:
<code html>
<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>
</code>

<HTML>
<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>
</HTML>

===== 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.|
|'speed': 2000 | Ausführungsgeschwindigkeit des Programms in Steps/s. Als Wert kann auch 'max' angegeben werden. |


===== Einfachste Variante: =====
<code html>
<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>
</code>


<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>


===== Einbinden eines eigenen Spritesheets: =====
<code html>
<div class="java-online" style="width: 100%; height: 200px; margin-left: 5px" data-java-online="{
    'id': 'Vererbung_Beispiel_2',
    'withBottomPanel': false,
    'spritesheetURL': 'javaonline/assets/test-spritesheets/Campfire.zip'
}">
<script type="text/plain" title="Test2.java">
for(int i = 0; i < 4; i++){
   Sprite s = new Sprite(50 + 80*i, 300, SpriteLibrary.JavaKara, i);
   s.scale(2);
}
</script>
</div>

</code>


<HTML>
<div class="java-online" style="width: 100%; height: 200px; margin-left: 5px" data-java-online="{
    'id': 'Vererbung_Beispiel_2',
    'withBottomPanel': false,
    'spritesheetURL': 'javaonline/assets/test-spritesheets/Campfire.zip'
}">
<script type="text/plain" title="Test2.java">
Sprite campfire = new Sprite(400, 300, SpriteLibrary.Campfire, 0);
campfire.scale(2);
campfire.playAnimation(0, 4, RepeatType.loop, 15);</script>
</div>
</HTML>

====== Zugriff auf die Quelltexte von anderen Skripten aus ======
Wird die Online-IDE **nicht** mittels ''<iframe>''-Tag eingebunden, so können andere Skripte auf der Webseite lesend auf die Java-Quelltexte zugreifen. Das entsprechende API dazu [[.onlineIDEFileAccess:start| ist hier dokumentiert.]] 

====== Offline-Version ======
Die Embedded-Version kann auch offline aus dem Dateisystem heraus betrieben werden, wenn ein kleiner Webserver mitgeliefert wird. Hier ein Beispielarchiv mit Startdateien für Windows und Mac OS X:
{{ :onlineide:integration:offlinetest.zip |}} (Version vom 20.09.2022) \\ \\ 
[[.offline:opensource:start|Von der Offline-Version verwendete Software]]