Erstellen Sie mit JavaFX ein Diashow-Tool

Überblick

Im November 2016 dachte ich: "Wenn Sie eine JavaFX-Sitzung durchführen möchten, erstellen wir ein Diashow-Tool mit JavaFX." Also habe ich es einfach gemacht und beschlossen, es im Artikel zu belassen.

Diashow ist eine Kombination aus Diashow und Show und scheint ein Wort zu sein. [Artikel in der japanischen Wikipedia-Version](https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E3%82% Es wurde geschrieben in B7% E3% 83% A7% E3% 83% BC).

Erfolge der Vorfahren

Es gibt viele Implementierungsbeispiele für Diashow- (Präsentations-) Tools, die JavaFX verwenden, einschließlich Herrn Sakuraba von Java Champion.

• Präsentationstool mit JavaFX
• Tool zum Erstellen von Folien mit Markdown mit JavaFX
• twasyl/SlideshowFX
• [Ankündigungsmaterial für JJUG CCC 2017 Spring](http://www.torutk.com/projects/swe/wiki/%E7%99%BA%E8%A1%A8%E3%83%8D%E3%82% BF_JJUG_CCC_2017_Spring% E5% 90% 91% E3% 81% 91 #% E3% 82% B9% E3% 83% A9% E3% 82% A4% E3% 83% 89)

Warum haben Sie es selbst gemacht, ohne die vorhandenen zu verwenden?

Ich wollte es nur auf eine Weise implementieren, die für mich einfach zu bedienen war.

Für Diashow-Tools erforderliche Funktionen

――Charaktere und Bilder können im Vollbildmodus angezeigt werden …… Fenster mit Beschriftung in Szene setzen und im Vollbildmodus anzeigen?

• Mehrere Folien können umgeschaltet und angezeigt werden
• Sie können den Inhalt der Folie mit einer Art Markup beschreiben ... Markdown?
• Folien können in PDF konvertiert werden .... Screenshots in eine Datei machen?

Wie zu implementieren?

Ich denke, es gibt verschiedene Möglichkeiten, dies zu tun.

• Erstellen Sie Inhalte mit disclose.js oder Remark.js und zeigen Sie sie in WebView an …… Damit sieht es gut aus und es ist einfach zu arrangieren und in PDF zu konvertieren
• PDF-Inhalt anzeigen --Konvertieren Sie Inhalte zur Anzeige in den JavaFX-Bereich

Ich habe bereits 1 gemacht, also habe ich beschlossen, diesmal alles in JavaFX zu machen.

Ausführungsumgebung

Implementierung

Der gesamte Quellcode wurde im GitHub-Repository unten abgelegt.

• slide_show(GitHub)

Die Punkte werden unten vorgestellt.

Inhaltsbeschreibung

Erlaubt Entwicklern, Inhalte in Markdown zu schreiben, mit denen sie auf Qiita und GitHub vertraut sind. Der Freiheitsgrad ist niedrig, aber Sie können den Inhalt einfach wie unten gezeigt vorbereiten.

# Title
toastkidjp

##Informationen zu dieser Folie 1234567890123456789012345678901234567890
Neulich Java mit Schwung.io.Ich habe den Code, der Datei verwendet hat, durch Pfad und Dateien ersetzt, daher werde ich ihn aus der Perspektive des Umschreibens des vorhandenen Codes einführen. Wenn Sie bereits mit NIO2 vertraut sind, werden Sie nach dem Lesen dieses Artikels wahrscheinlich nichts bemerken.

Die neue dateibezogene API von JDK7 ist übrigens NIO2(New I/O 2)Es scheint, dass es heißt, unmarkiert ist 1.Es scheint sich auf Kanäle und Zeichensätze zu beziehen, die in der 4. Ära hinzugefügt wurden.

##Code kann auch platziert werden

` ``java
(1..100)
  .collect{it % 15 == 0 
           ? "FizzBuzz" 
           :  it % 3 ==0 
               ? "Fizz" 
               : it % 5 == 0
                   ? "Buzz" 
                   : it
                   }
  .forEach{print it + ", "}
` ``

#das ist alles
Vielen Dank.

Beachten Sie, dass ich JavaCC nicht verwenden kann. Parser ist also eine kindische Implementierung, die den Text der Markdown-Datei Zeile für Zeile liest ...

Folienimplementierung

Um die Bildlaufleiste anzuzeigen, wenn die Höhe des Inhalts die Höhe der Anzeige überschreitet, haben wir ScrollPane geerbt und einen Bereich implementiert, der Knoten sammelt, die Zeichenfolgen und Bilder im Inhalt anzeigen.

Alle Folien in Liste einfügen, Eins Draw on StackPane und nur aktuelle Wird angezeigt und die anderen werden ausgeblendet.

Beschriftungszeichen werden abgeschnitten

Wenn Sie das Standard-Label-Objekt verwenden, werden Zeichenfolgen, die den Anzeigebereich überschreiten, nicht angezeigt und abgeschnitten.

Die folgenden Einstellungen wurden für das Label-Objekt vorgenommen.

Einstellung, um zu verhindern, dass die Zeichenfolge abgeschnitten wird

label.setWrapText(true);
label.setMinHeight(Region.USE_PREF_SIZE);

Das Problem, dass die Höhe des Inhalts die Höhe der Anzeige überschreitet

In Bezug auf die Qiita-Folienmethode ist ein vertikales Scrollen möglich, wenn die Folie die Anzeigehöhe überschreitet. Insbesondere erbt die Slide-Klasse ScrollPane und nimmt die folgenden Einstellungen im Konstruktor vor. Auf diese Weise können Sie das horizontale Scrollen deaktivieren und die vertikale Bildlaufleiste nur dann aufrufen, wenn Sie sie benötigen.

Deaktivieren Sie das horizontale Scrollen und rufen Sie die vertikale Bildlaufleiste nur bei Bedarf auf

this.setHbarPolicy(ScrollBarPolicy.NEVER);
this.setVbarPolicy(ScrollBarPolicy.AS_NEEDED);

Außerdem denke ich, dass dies daran liegt, dass ich viele Folienobjekte gestapelt habe, aber die Bildlaufleiste nicht mit der Maus verschieben konnte. Daher versuche ich, sie zu verschieben, indem ich die folgende Methode mit einer Tastenkombination aufrufe.

Hochscrollen

setVvalue(getVvalue() - 0.20d);

Runterscrollen

setVvalue(getVvalue() + 0.20d);

Untermenü und Hauptklasse verbinden

In Anbetracht der einfachen Bedienung haben wir die folgenden Untermenüs vorbereitet.

Das Untermenü Controller und die Main-Klasse, die bestimmte Funktionen implementieren, sind separate Klassen. Das im Untermenü empfangene Ereignis muss zur Verarbeitung an die Hauptklasse übergeben werden. Es gibt verschiedene Möglichkeiten, diesmal mit einer Bibliothek namens Reactor.

Vorbereitung der Nachrichtenklasse

Bereiten Sie verschiedene Nachrichtenklassen vor, um zu vermitteln, was die Hauptklasse verarbeiten soll. Erstellen Sie jede Klasse als Implementierung der Nachrichtenschnittstelle.

Akzeptieren Sie UI-Ereignisse von Benutzern und senden Sie eine Nachricht an Main

Erstellen Sie ein Ereignisobjekt mit der mit Annotationen versehenen Methode @FXML und übergeben Sie es mit TopicProcessor an die Main-Klasse. TopicProcessor erstellt eine Instanz, wenn die Untermenüklasse initialisiert wird, übergibt das Objekt über Getter an die Hauptklasse, abonniert die Hauptklasse und verzweigt entsprechend dem Implementierungstyp des Ereignisses in subscribe zur Verarbeitung.

Diese Implementierung basiert auf einem Mechanismus namens EventBus, der bei der Entwicklung von Android-Apps verwendet wird.

wichtiger Punkt

Da der Ausführungsthread der von TopicProcessor aufgerufenen Methode nicht der JavaFX-Anwendungsthread ist, müssen Sie Platform.runLater verwenden, um eine zeichnungsbezogene Verarbeitung durchzuführen.

Der Nachteil der Übernahme dieses Mechanismus besteht darin, dass die Hauptklasse einfach wächst. Diesmal mache ich Kompromisse.

PDF-Datei der Diashow

In den meisten Fällen müssen Sie die Diashow-PDF als Ressource verteilen. In Vorbereitung auf einen solchen Fall führen wir auch eine PDF-Konvertierungsfunktion durch.

Konvertieren Sie alle Folien mit PDFBox in PDF

try (final PDDocument doc = new PDDocument()) {
    final int width  = (int) stage.getWidth();
    final int height = (int) stage.getHeight();
    Interval.oneTo(slides.size()).each(i ->{
        moveTo(i);
        final long istart = System.currentTimeMillis();
        final PDPage page = new PDPage(new PDRectangle(width, height));
        try (final PDPageContentStream content = new PDPageContentStream(doc, page)) {
            content.drawImage(LosslessFactory.createFromImage(
                    doc, slides.get(current.get() - 1).generateImage(width, height)), 0, 0);
        } catch(final IOException ie) {
            LOGGER.error("Occurred Error!", ie);
        }
        doc.addPage(page);
        LOGGER.info("Ended page {}. {}[ms]", i, System.currentTimeMillis() - istart);
    });
    doc.save(new File(DEFAULT_PDF_FILE_NAME));
} catch(final IOException ie) {
    LOGGER.error("Occurred Error!", ie);
}

Ich blättere nacheinander durch die Folien, nehme aufgenommene Bilder von jeder Folie auf und kombiniere diese Bilder mithilfe einer Bibliothek namens PDFBox zu einer einzigen PDF-Datei.

Als ich es ausprobierte, dauerte es 1 Sekunde, um 4 Folien in PDF zu konvertieren.

2017-02-16 23:32:30  INFO Main Ended page 1. 334[ms]
2017-02-16 23:32:31  INFO Main Ended page 2. 269[ms]
2017-02-16 23:32:31  INFO Main Ended page 3. 181[ms]
2017-02-16 23:32:31  INFO Main Ended page 4. 169[ms]
2017-02-16 23:32:31  INFO Main Ended generating PDF. 1032[ms]

Intervall ist übrigens [Eclipse Collections](https: // www) .eclipse.org / collection / ja /) Klasse.

Die für die eigentliche Präsentation vorbereitete PDF-Datei wurde auf Speaker Deck hochgeladen. https://speakerdeck.com/toastkidjp/jjug-ccc-2016-fall-number-ccc-l5

Beispielcode-Anzeige

Es scheint, dass der Quellcode häufig in der Präsentation des Entwicklers angezeigt wird. Es ist schwierig, den Code so zu sehen, wie er in Label ist. Daher habe ich eine Bibliothek (CodeArea) namens RichTextFX verwendet, die eine Implementierung von TextArea ist, die hervorgehoben werden kann.

Als Beispiel kann Groovys FizzBuzz mit Syntaxhervorhebung angezeigt werden, wie unten gezeigt.

Aufgabe

JVM stürzt ab, wenn die Anwendung direkt vom Vollbildmodus beendet wird

Die Ursache ist nicht gut verstanden ... Übrigens wird im Fall von "gradle run" eine ähnliche Fehlermeldung angezeigt, die jedoch normal endet.

Konsolennachricht

#
# A fatal error has been detected by the Java Runtime Environment:
#
#  EXCEPTION_ACCESS_VIOLATION (0xc0000005) at pc=0x00000000737b584a, pid=15116, tid=0x000000000000246c
#
# JRE version: Java(TM) SE Runtime Environment (8.0_102-b14) (build 1.8.0_102-b14)
# Java VM: Java HotSpot(TM) 64-Bit Server VM (25.102-b14 mixed mode windows-amd64 compressed oops)
# Problematic frame:
# C  [glass.dll+0x2584a]
#
# Failed to write core dump. Minidumps are not enabled by default on client versions of Windows
#
# An error report file with more information is saved as:
# /path/to/slide_show/hs_err_pid15116.log
#
# If you would like to submit a bug report, please visit:
#   http://bugreport.java.com/bugreport/crash.jsp
#

Voller Text

https://gist.github.com/toastkidjp/1d216a9ad98a65dd0bc42552dfe99791

Anzeige reduzieren, wenn sich die Anzeigegröße ändert

Ich denke, das liegt daran, dass der Anzeigebereich variabel ist, aber ... Die vorhandenen Tools, die in diesem Bereich gut funktionieren, sind wunderbar. Ich frage mich, ob ich die Methode anwenden kann, um die von Herrn Takahashi im Herbst 2016 im JJUG CCC verwendete Anzeigegröße zu ermitteln und die Schriftgröße dynamisch zu ändern, aber ich habe sie noch nicht ausprobiert.

Als ich dieses Tool zuvor verwendet habe, hatte ich eine 30-minütige Pause, daher habe ich sorgfältig geprüft, ob die Anzeige zusammenfällt.

Zusammenfassung

Bisher habe ich eine der Möglichkeiten vorgestellt, eine Diashow mit JavaFX zu erstellen. Nun, es ist einfacher, sicherer und leistungsfähiger, PowerPoint oder LibreOffice normal zu verwenden. Wenn es sich um eine Qiita-Folie handelt, können Sie sie so wie sie ist als Artikel veröffentlichen und sie ist einfach zu teilen. Zu diesem Zeitpunkt fehlt es an Funktionalität, und die Selbstzufriedenheit macht einen wesentlichen Teil des Grundes für die Verwendung aus.

Es scheint jedoch, dass JavaFX nicht nur für Java verwendet werden kann, sondern auch für Sprachen, die unter JVM ausgeführt werden. Ich hoffe, dass dieser Artikel für diejenigen nützlich ist, die eine etwas andere Präsentation geben möchten.

Verknüpfung

Bibliothek verwendet

• Reactor
• PDFBox
• RichTextFX
• Eclipse Collections

Referenzierte Bibliothek

• EventBus

Repository

• slide_show(GitHub)