Erste Schritte mit Java und Erstellen eines Ascii Doc-Editors mit JavaFX
Ich habe einen AsciiDoc-Editor erstellt
Klicken Sie hier für das fertige Produkt
AsciidocEditor
Neben der Live-Vorschau können einige Einstellungen von ASCII Doctor und Ace Editor über die GUI manipuliert werden. Das Standard-CSS von ASCII Doctor und das CSS des Quell-Textmarkers CodeRay werden lokal übernommen. Wenn Sie stark in CSS sind, können Sie Ihr Lieblingsdesign verwenden.
Motivation
Ich bin normalerweise ein Student. Ich begann zu programmieren, nachdem ich an die Universität gekommen war, und bis dahin hatte ich noch nicht einmal einen Computer berührt. Das einzige, was ich seit meinem Schuleintritt in der Praxis gemacht habe, ist das Erlernen von Algorithmen und das Schreiben in C-Sprache. Ich denke, es ist wichtig und interessant, den Algorithmus zu lernen und zu implementieren. Ich habe jedoch das Gefühl, dass es nicht genug ist. Also habe ich beschlossen, eine GUI-Anwendung zu machen.
Ablauf bis zur Fertigstellung
Erstes Semester (Lernen)
* Fähigkeiten vor dem Beginn zu machen
- C-Sprache (Implementierung des Lehrbuchalgorithmus)
- Python (Bildverarbeitung mit OpenCV)
Ich bin an die C-Sprache gewöhnt, habe aber nicht viel über Python gelernt, da es eine Vorlage enthält.
Erste Schritte mit Java
Das Fakultätsmitglied sagte etwas wie "Mindestens ein prozeduraler Typ und ein objektorientierter Typ sollten berührt werden", daher bin ich mit Programmiersprachen nicht sehr vertraut. Wenn es also um objektorientiert geht, ist das Geheimnis von Java !! Vor diesem Hintergrund habe ich beschlossen, mit Java zu beginnen.
- [Einführung in Java, das aktualisiert wird](https://www.amazon.co.jp/%E3%82%B9%E3%83%83%E3%82%AD%E3%83%AA%E3%82%8F % E3% 81% 8B% E3% 82% 8BJava% E5% 85% A5% E9% 96% 80-% E7% AC% AC2% E7% 89% 88-% E3% 82% B9% E3% 83% 83 % E3% 82% AD% E3% 83% AA% E3% 82% B7% E3% 83% AA% E3% 83% BC% E3% 82% BA-% E4% B8% AD% E5% B1% B1- % E6% B8% 85% E5% 96% AC / dp / 484433638X)
Ich habe es gekauft, weil es an verschiedenen Orten empfohlen wurde. Es war leicht zu lesen und nach seinem Ruf zu organisieren, und ich konnte mir eine Objektorientierung vorstellen.
Vorläufige Nachforschung
Nachdem ich das obige Einführungsbuch gelesen hatte, hatte ich Lust, loszulegen, und überprüfte die Java-GUI-Bibliothek. Was wir in dieser Phase gelernt haben, ist wie folgt.
- Java GUI ist Swing oder JavaFX
- JavaFX ist nicht mehr im JDK enthalten
- Das Release-Modell von JDK wurde geändert
- Es gibt ein Build-Tool, das dem Programmierer helfen kann
Mittelfristig (mittelfristig)
Als Ergebnis der vorläufigen Recherche dachte ich, ich hätte eine schwierige Sprachauswahl getroffen. Ich dachte, es wäre schwierig, Informationen zu sammeln, da JavaFX nicht im JDK enthalten wäre.
Spät (Implementierung)
Da ich mit viel Mühe angefangen habe, werde ich es mir noch einmal überlegen.
Was zu machen
Jemand hat den Markdown-Editor während der vorläufigen Recherche einfach implementiert, daher habe ich darüber nachgedacht, das ursprüngliche Element zu etwas Ähnlichem hinzuzufügen. Als ich verschiedene Dinge recherchierte, erfuhr ich von der Existenz von AsciiDoc. Lassen Sie uns einen Ascii Doc-Editor erstellen! Und hier ist die Funktion des stärksten Ascii Doc-Editors, an den ich gedacht habe
- Grundfunktionen des Editors (Laden, Speichern)
- Live Vorschau
- Ausgabe in HTML-Datei
Wenn Sie dies machen, ist es nur eine! !!
... das war nicht der Fall. : unschuldig: AsciidocFX Ich denke, es gibt noch andere großartige Dinge, aber ich wollte den oben genannten Funktionen Funktionen hinzufügen, die Asciidoc FX nicht bietet. AsciidocFX kann den Editorrahmen füllen, nicht jedoch den Vorschaubildschirm. Dies zeigt, dass selbst wenn Sie "toc: left" und die Position der Tabelle angeben, diese in der Vorschau nicht angezeigt werden. (Vielleicht kann es gemacht werden ...)
Daher sind die endgültigen Spezifikationen wie folgt.
- Grundfunktionen des Editors (Laden, Speichern)
- Live Vorschau
- Ausgabe in HTML-Datei
- Vollbildvorschau
Ich werde den Teil vorstellen, in dem sich die Entwicklung aufgrund eines leichten Fangs verzögert hat.
Grundfunktionen des Editors
Verwenden Sie die FileChooser -Klasse, um Dateien in JavaFX zu lesen und zu speichern.
FileChooser fileChooser = new FileChooser();
File file = fileChooser.showOpenDialog(null);
Das Problem war, dass die Null an das Argument in der zweiten Zeile übergeben wurde. Als ich die App im Vollbildmodus anzeigte, reagierte sie nicht mehr und ich musste sie beenden. Übergeben Sie stattdessen die Hauptbühne als Argument. Ein Beispiel, das die allgemeine Anwendungsklasse erbt
public class Sample1 extends Application {
public static void main(String[] args) {
launch(args);
}
public void start(Stage primaryStage) throws Exception {
FXMLLoader fxmlLoader = new FXMLLoader();
Parent root = fxmlLoader.load(getClass().getResourceAsStream("/sample1.fxml"));
primaryStage.setTitle("sample 1");
primaryStage.setScene(new Scene(root, 900, 600));
primaryStage.show();
}
}
Aber dieses
public class Sample2 extends Application {
static Stage stage;
public static void main(String[] args) {
launch(args);
}
public void start(Stage primaryStage) throws Exception {
FXMLLoader fxmlLoader = new FXMLLoader();
stage = primaryStage;
Parent root = fxmlLoader.load(getClass().getResourceAsStream("/sample2.fxml"));
stage.setTitle("sample 2");
stage.setScene(new Scene(root, 900, 600));
stage.show();
}
}
Übergeben an FileChooser als
FileChooser fileChooser = new FileChooser();
File file = fileChooser.showOpenDialog(Sample2.stage);
Auf diese Weise wird das Fenster "Dateiauswahl" angehängt, auch wenn Sie das Hauptfenster verschieben. Für die "Dialog" -Klasse
Dialog<ButtonType> dialog = new Dialog<>();
dialog.initOwner(Sample2.stage);
Sie können das gleiche mit tun.
Live-Vorschau (AsciiDoc-> HTML)
Bibliothek verwendet
- asciidoctorj
- asciidoctorj-diagram
- jsoup
asciidoctorj stellt die Ruby-Bibliothek asciidoctor in Java zur Verfügung. Die daraus generierte Zeichenfolge wird in JavaFXs "WebView" eingefügt. Ich habe nicht viele Beispiele für die Verwendung von Asciidoctorj-Diagrammen gefunden, daher schreibe ich es als Referenz.
Asciidoctor asciidoctor = org.asciidoctor.Asciidoctor.Factory.create();
Nach dem Erstellen einer Instanz mit
asciidoctor.requireLibrary("asciidoctor-diagram");
Dann können Sie Funktionen wie plantuml verwenden.
Problem 1: Das lokale Bild wird nicht angezeigt
JavaFX "WebView" kann mit der Methode "load" oder der Methode "loadContent" von "WebEngine" geladen und angezeigt werden. Dieses Mal laden wir den unformatierten HTML-Code als "String" anstelle der URL, sodass wir die Methode "loadContent" verwenden. Wenn ich HTML mit dieser Methode lade, wird das lokale Bild jedoch nicht im Pfad des src-Attributs angezeigt. Ich brauchte nur das Dateiprotokoll file: // im Auge zu haben. Ich habe jsoup verwendet, um dieses Problem zu lösen.
ArrayList<Element> src = document.getElementsByAttribute("src");
for (Element e : src) {
String attributeValue = e.attr("src");
if (!attributeValue.contains("data:") &&
!attributeValue.contains("https:") &&
!attributeValue.contains("file:")
) {
attributeValue = Paths.get(attributeValue).toUri().toString();
e.attr("src", attributeValue);
}
}
Das Dateiprotokoll wird mit der Methode "toUri" angehängt.
Problem 2: Linkbezogenes Problem
Wenn ich auf den Link klicke, der in der "WebView" von JavaFX angezeigt wird, wird diese von dieser "WebView" geladen, sodass ich die Vorschau von AsciiDoc, die ich ursprünglich angesehen habe, nicht sehen kann, wenn auch nur vorübergehend. Um dies zu lösen, habe ich es im Standardbrowser geöffnet.
//Viewer ist die fxml-Komponente von WebView für die Vorschau
viewer.getEngine().getLoadWorker().stateProperty().addListener((observable, oldValue, newValue) -> {
if (newValue == Worker.State.SCHEDULED) {
String urlLocation = viewer.getEngine().getLocation();
if (urlLocation.contains("http:") || urlLocation.contains("https:")) {
viewer.getEngine().getLoadWorker().cancel();
try {
Desktop.getDesktop().browse(new URI(urlLocation));
} catch (URISyntaxException | IOException e) {
e.printStackTrace();
}
}
}
});
Ein weiteres Problem war die Unfähigkeit, innerhalb der Seite für das a-Tag zu springen. Diesmal
viewer.getEngine().setJavaScriptEnabled(true);
Auf diese Weise habe ich JavaScript ausführbar gemacht, ein Skript-Tag mit jsoup hinzugefügt und das Skript für den Ankerlink geladen.
String anchorLinkScript =
"function anchorlink(id_name) {" +
"obj = document.getElementById(id_name);" +
"obj.scrollIntoView(true);" +
"}";
Element body = document.body();
body.appendElement("script").append(anchorLinkScript);
ArrayList<Element> elements = document.getElementsByTag("a");
for (Element e : elements) {
if (!(
e.attr("href").contains("http:") ||
e.attr("href").contains("https:")
)) {
String idName = e.attr("href").substring(1);
e.attr("onclick", "anchorlink(\'" + idName + "\')");
}
}
* Japanische IM für Ace und Mac (bereits im vorherigen Artikel vorgestellt)
Ich konnte einige Funktionen wie diese implementieren.
Dinge, die noch nicht erledigt wurden
Funktionsaspekt
Dieses Mal wird es jedes Mal konvertiert, wenn Sie ein Zeichen eingeben. Wenn Sie also die Asciidoctor-Diagrammfunktion verwenden, wird bei jeder Eingabe eines Zeichens eine PNG-Datei generiert. Außerdem habe ich versucht, einen Dateinamen anzugeben, um dies zu verhindern
[plantuml, "sample"]
----
Bob->Alice: Hello
----
Wenn Sie die Reihenfolge von oben eingeben, ändert sich sample.png selbst bei jeder Eingabe fest, aber WebView zeigt nur die erste generierte sample.png an (Re-App Es wird angezeigt, wenn Sie es starten, und der exportierte HTML-Code wird problemlos geladen. Ich mache mir Sorgen, weil ich keine Ahnung davon habe.
Eine weitere Funktion, die ich in die PDF-Ausgabe aufnehmen wollte.
Verteilungsseite
Grundsätzlich hatte ich ein starkes Bild davon, dass Apps durch Doppelklicken auf das Symbol gestartet werden können, also habe ich auch darauf abgezielt. Insbesondere wollte ich plattformübergreifende Apps verteilen, indem ich jlink, install4j und badass-runtime-plugin vollständig nutzte. Ich hatte jedoch das Gefühl, dass ich die Ergebnisse niemals öffentlich veröffentlichen könnte, wenn ich sie nicht so veröffentlichen würde, wie sie sind. Deshalb gab ich sie auf und gab sie frei. Ab Java 13 gibt es möglicherweise jpackage, also freue ich mich darauf!
Zurückblicken
Es ist schwer, es selbst zu machen
Ich habe das selbst gemacht, ohne es jemandem zu sagen, aber am Ende habe ich vier Monate gebraucht, um es zu veröffentlichen, nachdem ich das Repository auf GitHub erstellt habe. Ich habe das Repository erstellt, nachdem ich überlegt hatte, den AsciiDoc-Editor zu erstellen. Es ist also ungefähr 8 Monate her, seit ich Java gestartet habe. Möglicher Grund ist
- Mangel an Wissen
- Aufrechterhaltung der Motivation
ist. Ich habe immer gedacht, dass das Codieren lange dauern würde, bis ich das gemacht habe, aber ich habe mehrmals länger gebraucht, um nach etwas zu suchen, das ich nicht verstanden habe, und es zu schlucken. Es war auch schmerzhaft, dass mir niemand sagen konnte, wie das Codieren in Java üblich war, wie es Spaghetti waren oder etwas, das ich nicht bemerkte. Natürlich ist es sehr wichtig, die Motivation aufrechtzuerhalten. Diesmal gab es eine Zeit der Schlaffheit, und ich ging nicht so, wie ich es erwartet hatte, aber ich stellte fest, dass mich selbst kleine Dinge motivieren können. Ich war jedes Mal glücklich, wenn ich an kleine Funktionen dachte, die AsciidocFX nicht hatte, und da es meine erste GUI war, funktionierte jede wie erwartet.
Es ist wichtig, die offizielle Referenz zu lesen
Irgendwie hatte ich die Angewohnheit, zuerst nach Qiita zu kommen, wenn ich immer programmierbezogene Suchen durchführte. Qiita ist einfach, weil Sie schnell die Informationen erhalten, die Sie wissen möchten. Wenn Sie jedoch etwas von Grund auf neu erstellen möchten, ist es möglicherweise wichtig, zuerst die offizielle Dokumentation zu lesen. Da JavaFX 11 nicht mehr im JDK enthalten ist, wusste ich zunächst, dass es dafür ein Dokument Erste Schritte mit JavaFX 11 gibt. nicht. Es war sehr leicht zu verstehen (kleines Durchschnittsgefühl). Wenn ich die Größe der offiziellen Referenz etwas früher erkannt hätte, hätte ich die Entwicklungszeit verkürzen können. Nachdem ich es bemerkt hatte, versuchte ich, die API-Dokumentation der von mir verwendeten Bibliotheken, einschließlich Java, zu lesen. Wenn Sie Dutzende von Firefox-Registerkarten nur in der offiziellen API-Dokumentation geöffnet haben, programmieren Sie! !! Ich war aufgeregt, das zu fühlen. Ich denke, das hat auch dazu beigetragen, die Motivation aufrechtzuerhalten.
Zusammenfassung
Ich habe die erste GUI in der Sprache herausgefordert, die ich zum ersten Mal berührt habe. Ich schrieb, dass es schwierig ist, alleine zu sein, aber es gibt ein gutes Erfolgserlebnis (ich denke, wenn Sie nicht alleine sind, können Sie das Erfolgserlebnis teilen, also weiß ich nicht, welches).
Wenn Sie gerade mit dem Programmieren beginnen, wie ich, der dies liest, empfehle ich Ihnen, einige vorläufige Nachforschungen anzustellen, bevor Sie mit Programmiersprachen beginnen (was offensichtlich sein kann ...). Ich denke, dass Sie von Beginn der Implementierung an während der Recherche codieren werden, aber es wird sicherlich Spaß machen, da Sie feststellen werden, dass die Technologie viel besser ist als das Lesen des Einführungsbuchs und das Schreiben von Beispielen. Beseitigen Sie den Widerstand gegen Englisch und lesen Sie die offizielle Dokumentation, Stackoverflow usw. (weil es in Stackoverflow manchmal starke Leute gibt, die wie Mist sind).
Und für den erfahrenen Programmierer, der es bis zum Ende gesehen hat, habe ich vielleicht nichts geschrieben, was hilfreich wäre. Wenn Sie nett sind, würde ich es begrüßen, wenn Sie einen Blick auf GitHub werfen und mich ermutigen könnten, zu sagen: "Dieser Quellcode ist Akan !!" Auch eine solche Sprache und Bibliothek sind interessant! Oder ich wünschte, ich hätte dies vor Beginn der Entwicklung gelesen ... Ich hoffe, Sie können mir einen solchen Artikel (Bettler) erzählen.
Wenn ich es zurücklese, sieht es aus wie "Welche Zahl Abkochung und Nen", aber danke, dass Sie bis zum Ende gelesen haben.
Recommended Posts