Verwenden Sie "JavaFX", um eine Skyticket-Desktop-App zu erstellen: Computer :. Das heißt, die Bildschirmanzeige ist eine Webansicht ... Glitter sieht aus wie: star :: star :: star:

2. Umwelt

1. OpenJDK 11 Ich werde "Java 11" verwenden, das im September 2018 veröffentlicht wurde. https://jdk.java.net/11/

openjdk version "11.0.1" 2018-10-16
OpenJDK Runtime Environment 18.9 (build 11.0.1+13)
OpenJDK 64-Bit Server VM 18.9 (build 11.0.1+13, mixed mode)

2. OpenJFX 11 Da Java 11 nicht mehr in OpenJDK (auch in Oracle JDK) enthalten ist, werden wir es separat vorbereiten: Computer:

https://openjfx.io/openjfx-docs/ ↑ Umgebungseinstellungen und Ausführungsverfahren sind einfach zu schreiben. Es gibt auch ein Verfahren mit Maven`` Gradle: entspannt:

javafx.version=11.0.1
javafx.runtime.version=11.0.1+1
javafx.runtime.build=1

3. Scene Builder 11 Verwenden Sie "Gluon". XML-Handschrift ist schwer: senior_man_tone1: Da die RC-Version für "Java 11" veröffentlicht wurde, werde ich diese verwenden. https://gluonhq.com/products/scene-builder/

Version 11.0.0

4. IDE Verwenden Sie "Eclipse". https://www.eclipse.org/downloads/

Eclipse IDE for Java Developers
Version: 2018-09 (4.9.0)
Build id: 20180917-1800

• Fügen Sie auch das Eclipse-Plug-In hinzu. Es ist einfach, weil es eine Vorlage für das JavaFX-Projekt erstellt: ok_woman_tone1:

e(fx)clipse 3.4.1

3. Ich habe es geschafft

1. JavaFX-Projekterstellung

Erstellen Sie ein JavaFX-Projekt mit "Eclipse".

-Konfiguration von Verzeichnissen und Dateien nach dem Erstellen eines JavaFX-Projekts

application
│  .classpath
│  .project
│  build.fxbuild
│
├─.settings
│      org.eclipse.jdt.core.prefs
│
├─bin
│  └─jp
│      └─skyticket
│              Main.class
│              SkyticketController.class
│              Skyticket.fxml
│              application.css
│
└─src
    └─jp
        └─skyticket
                Main.java                  
                SkyticketController.java   
                Skyticket.fxml             
                application.css            

2. FXML-Änderung

Wir werden das Layout von Skyticket.fxml mit Scene Builder (GUI) ändern. Stellen Sie außerdem "fx: id" (entsprechend den Feldern) und "On Action" (entsprechend den Methoden) ein, um auf dem Controller zu arbeiten. ↓ Die angestrebte Layoutstruktur ist wie folgt.

· Endgültige FXML

Skyticket.fxml

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.web.WebView?>

<AnchorPane fx:id="ap" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="812.0" prefWidth="375.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="jp.skyticket.SkyticketController">
   <children>
      <WebView fx:id="webView" layoutX="0" layoutY="34.0" prefHeight="802.0" prefWidth="365.0" AnchorPane.bottomAnchor="5.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" AnchorPane.topAnchor="5.0" />
      <Button text="Reservierung" fx:id="btnToppage" onAction="#toppage" layoutX="0" layoutY="712.0" prefHeight="100.0" prefWidth="125.0" mnemonicParsing="false" />
      <Button text="Meine Seite" fx:id="btnMypage" onAction="#mypage" layoutX="125.0" layoutY="712.0" prefHeight="100.0" prefWidth="125.0" mnemonicParsing="false"  />
      <Button text="Nicht schieben" fx:id="btnSetting" onAction="#setting" layoutX="250.0" layoutY="712.0" prefHeight="100.0" prefWidth="125.0" mnemonicParsing="false"  />
   </children>
</AnchorPane>

Dies ist die Layouterstellung.

3. CSS-Fix

Ändern Sie dann das CSS.

application.css

/*Normaler Stil*/
.button {
  -fx-border-color: white;
  -fx-background-color: #0896ff;
}
/*Weihnachtsstil*/
.button.christmas {
  -fx-background-color: #b79e00;
  -fx-font-family: 'Fuuji'
}

Erstellen Sie außerdem eine neue skyticket.css zur Dekoration der Webansicht.

4. Änderungen der Haupt- und Controller-Klasse

Ändern Sie dann die Java-Dateien (hauptsächlich den Controller).

Zuallererst die Hauptklasse. Es ist ein JavaFX-Einstiegspunkt. Ich habe gerade die Standardeinstellungen verlassen und die Größe der Szene geändert und den Titel festgelegt.

Main.java

package jp.skyticket;
	
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.fxml.FXMLLoader;


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
        	AnchorPane root = FXMLLoader.load(getClass().getResource("Skyticket.fxml"));
            Scene scene = new Scene(root, 375, 812); //Größe korrigieren
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            primaryStage.setTitle("Merry Christmas!!"); //Titeleinstellungen hinzugefügt
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Dann die Controller-Klasse. Beschreiben Sie Felder (Bildschirmkomponenten) und Methoden (Ereignisse). Durch Hinzufügen der Annotation @FXML </ font> wird diese mit FXML in Verbindung gebracht und kann auf der Controllerseite betrieben werden. (Aber ich frage mich, ob die Controller-Quelle automatisch aus FXML generiert werden kann: santa_tone2:

SkyticketController.java

package jp.skyticket;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;

public class SkyticketController  {
        //Bildschirmkomponenten
        @FXML private AnchorPane ap;
        @FXML private WebView webView;
        @FXML private Button btnMypage;
        @FXML private Button btnToppage;
        @FXML private Button btnSetting;

        private WebEngine webEngine;

        /**
         *Initialisieren
         *- Stellen Sie die UA ein und zeichnen Sie den oberen Bildschirm.
         * 
         * @param event
         */
	    @FXML
	    private void initialize() {   
	    	this.webEngine = this.webView.getEngine();
	    	//Ich möchte die Seite für Smartphones anzeigen, also UA-Einstellungen
	    	this.webEngine.setUserAgent("Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) CriOS/61.0.3163.73 Mobile/15A372 Safari/602.1");
	    	this.webEngine.load("https://skyticket.jp");
	    }
        /**
         *Ereignishandler, wenn btnMypage gedrückt wird
         *-Zeichne meine Seite.
         * 
         * @param event
         */
	    @FXML
	    private void mypage(ActionEvent event) {
	    	this.webEngine.load("https://skyticket.jp/user/");
	    }
        /**
         *Ereignishandler, wenn btnToppage gedrückt wird
         *-Zeichnen Sie den oberen Bildschirm.
         * 
         * @param event
         */
	    @FXML
	    private void toppage(ActionEvent event) {
	    	this.webEngine.load("https://skyticket.jp");
	    }
        /**
         *Ereignishandler, wenn btnSetting gedrückt wird
         *- Fügen Sie dem Button eine Dekorationsklasse hinzu.
         *- Wenden Sie CSS für Weihnachten an.
         *-Zeichnen Sie den oberen Bildschirm.
         * 
         * @param event
         */
	    @FXML
	    private void setting(ActionEvent event) {
	    	//Stellen Sie Klassen für den Weihnachtsdekorationsstil auf verschiedenen Knöpfen ein
	    	this.btnMypage.getStyleClass().add("christmas");
	    	this.btnToppage.getStyleClass().add("christmas");
	    	this.btnSetting.getStyleClass().add("christmas");

	    	//Webview CSS-Anwendung für Weihnachten
	    	this.webEngine.setUserStyleSheetLocation(getClass().getResource("skyticket.css").toString());
	    	
	    	this.webEngine.load("https://skyticket.jp");
	    }
}

Damit ist die Erstellung abgeschlossen.

4. Ich habe versucht mich zu bewegen

Zunächst die Erstanzeige. Die Webansicht funktioniert normal.

Die unteren Schaltflächen "Yoyaku" und "Meine Seite" sind ebenfalls schön. Sie können Tickets auch normalerweise beantragen: Flugzeug:

Zum Schluss die Taste "Nicht drücken"

Überhaupt ...

Nicht schieben ... 　 　 　 Mit dem Weihnachtsmann

Oyakusoku 　 　 　 Überhaupt ...

: no_good: Schieben Sie es hier überhaupt nicht: no_good_tone3:

　 :christmas_tree::christmas_tree::christmas_tree:Merry Christmas:christmas_tree::christmas_tree::christmas_tree:

Der Darsteller ist Advens "Harutan", Regisseur Haruki. Onkel Love: heart_eyes :: heart_eyes :: heart_eyes:

Dann habt alle ein schönes Weihnachtsfest ~: christus_tree :: santa_tone2 :: christus_tree:

das ist alles! 　

　

Recommended Posts

Frohe Weihnachten mit JavaFX !!

HelloFX mit JavaFX

Weihnachten mit Verarbeitung

[Hinweis] Szenenübergang mit JavaFX

Ausgabezeichen wie Konversation mit JavaFX

Erstellen Sie mit JavaFX ein Diashow-Tool

Hallo Welt mit Kotlin und JavaFX

Ziehen Sie Dateien mit JavaFX per Drag & Drop

Machen wir eine Weihnachtskarte mit Verarbeitung!

Vergrößern / verkleinern und parallel zu JavaFX Canvas verschieben (Revenge Edition)

JavaFX & Tool Creation mit in sich geschlossenem Paket (Distribution)

Schreiben Sie Tests für JavaFX-Anwendungen mit TestFX

Erstellen von Tools mit JavaFX und eigenständigen Paketen (JavaFX Edition)