Kültürlü PenguenSeo Blog'u
Küçükken salyangoz yavaş gidiyor diye alır karşıya geçirirdim. Öyle de iyi bir insandım


JavaFX İle Örnek Kayıt Formu Ve Eventlistener Kullanımı!

138 Okunma


Bu yazımızda örnek bir kayıt formu tasarlayacağız. Tasarlayacağımız kayıt formunda VBox ve HBox’u bolca kullanacağız. Tasarladığımız girişi formunun en büyük özelliklerinden biri olan, kullanıcı giriş yaparken, girdiği veriyi gerçek zamanlı olarak kontrol etmeyi, şifre ve email deseni kullanmayı ve formda resim kullanımını göreceğiz. Şimdi FXML ile başlıyoruz.  FXML kullanmamım temel sebebi daha basit olması ve fonksiyonlarla çok uğraştırmaması. Netbeans IDE’de çalıştığımızdan 3 adet dosyamız var. Bunlar KayitFormu.fxml KayitFormu.java KayitFormuController.java .

FXML Olarak Tasarımını Yapalım

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" prefHeight="600" prefWidth="500" maxWidth="500" maxHeight="600"  xmlns:fx="http://javafx.com/fxml" fx:controller="kayitformu.KayitFormuController">
    <children>
        <HBox alignment="CENTER_LEFT" layoutX="10" fx:id="image" opacity="0.7" prefWidth="100" prefHeight="100" maxHeight="100" maxWidth="100">

        </HBox>

        <VBox spacing="10" alignment="CENTER" prefHeight="300" layoutX="90" layoutY="180" prefWidth="480" maxWidth="480" >
               <children>
                   <HBox prefWidth="380" layoutY="20" layoutX="10" prefHeight="30"> 
                        <Label fx:id="userNameLabel" layoutX="40" layoutY="25" prefWidth="155" text="Kullanıcı Adınız" prefHeight="30" />
                        <TextField fx:id="userName" layoutX="170" layoutY="20" prefWidth="200" editable="true" /> 
                   </HBox>

                   <HBox prefWidth="380" layoutY="70" layoutX="10" prefHeight="30">
                        <Label fx:id="passwordLabel" layoutX="10" layoutY="25" prefHeight="30" text="Şifreniz" prefWidth="155" />
                        <PasswordField fx:id="password" layoutX="170" layoutY="20" prefWidth="200" editable="true" /> 
                   </HBox>

                   <HBox prefWidth="380" layoutY="110" layoutX="10" prefHeight="30">
                        <Label fx:id="repPasswordLabel" layoutX="10" layoutY="25" text="Şifrenizi Doğrulayın" prefWidth="155" />
                        <PasswordField fx:id="confirmPass" layoutX="170" prefWidth="200" editable="true" layoutY="20" />    
                   </HBox>

                   <HBox prefWidth="380" layoutY="150" layoutX="10">
                        <Label fx:id="eMailLabel" layoutX="10" layoutY="25" text="E-Posta Adresiniz" prefWidth="155" />
                        <TextField fx:id="eMail" layoutX="170" layoutY="20" prefWidth="200" />
                   </HBox>

                   <HBox prefWidth="380" layoutY="190" layoutX="10">
                        <Label fx:id="confirmEmailLabel" layoutX="10" layoutY="25" text="E-Postanızı Doğrulayın" prefWidth="155" />
                        <TextField fx:id="confirmEmail" layoutX="170" layoutY="20" prefWidth="200" />
                   </HBox>

                   <HBox prefWidth="380" layoutY="260" layoutX="10">
                        <Button text="Kayıt Ol" prefHeight="40" prefWidth="100" layoutY="30" fx:id="sendData" onMouseClicked="#sendData" disable="true" />
                   </HBox>
               </children>
        </VBox>
        <Label layoutX="120" layoutY="450" prefWidth="380" prefHeight="50" fx:id="error"/>
    </children>
</AnchorPane>

 

500′e 600 ebatlarında bir pencere oluşturduktan sonra içerisine bir VBox bir Label ve bir tane HBox koyduk. İlk HBox’a resim geleceği için içini boş bıraktım. Bunun saydamlığını yüzde 70 olarak değiştirdik. Ve son olarak sol merkeze yasladık.

VBox’a baktığımızda içerisindeki elementler için 10 birim boşluk koyduk. Bu giriş değerlerinin kolay okunmasında yardımcı olacaktır. Şimdi sırasıyla içerisine HBox’lar ekleyerek TextField’lar ve PasswordField’lar koyduk. PasswordField koymamızın temel sebebi TextField şifre için maskeleme yapmaması. Yani yuvarlak şeklinde görülmesi gerektiği için koyduk.

VBox’ın içerisinde sona doğru bir düğme var. Kayıt ol düğmesi. Etkisizleştirilmiş ve tıklandığında birazdan göreceğimiz sendData void fonksiyonunu çalıştırıyor.

Pencerenin Java Dosyasını Yazıyoruz

Bu dosyamızda çok önemli bir şey yok sayılır. Pencerenin görünmes için yapılan ayarlar ve başlık ayarlaması gibi şeylere yer veriliyor.

package kayitformu;

import javafx.application.Application;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

/**
 *
 * @author kulturlupenguen
 */
public class KayitFormu extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("KayitFormu.fxml"));

        Scene scene = new Scene(root);

        stage.setScene(scene);
        stage.setTitle("Sisteme Kayıt Olun");
        stage.centerOnScreen(); // Ekranın ortasında açılmasını sağlar.
        // Bu fonksiyon gerçekten çok kolaylık sağlıyor.
        stage.show();
    }

    /**
     * The main() method is ignored in correctly deployed JavaFX application.
     * main() serves only as fallback in case the application can not be
     * launched through deployment artifacts, e.g., in IDEs with limited FX
     * support. NetBeans ignores main().
     *
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }
}

 

Şimdi burada en çok sevdiğim void fonksiyonlardan birisi olan centerOnScreen() fonksiyonu var. Açıkçası bu fonksiyon o kadar kolaylık sağlıyor ki, form tasarmına hiçbir şey yapmanıza gerek kalmıyor.

Kontrol Mekanizmasını Yapıyoruz

Asıl bomba burada patlıyor. KayitFormuController.java dosyasına baktığımızda birkaç şey dikkatimizi çekiyor. Bunlardan birisi formdaki element isimlerini şöyle almamız.

<pre class="brush: javafx; gutter: false">@FXML
public PasswordField password;

@FXML
public Label error;</pre>
Bu şekilde almanın ilk zamanlarda beni baya meraka soktuğunu söylemem yalan olmaz herhalde.
<pre class="brush: javafx; gutter: false">package kayitformu;

import java.net.URL;
import java.util.ResourceBundle;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;

/**
 *
 * @author kulturlupenguen
 */
public class KayitFormuController implements Initializable {

    @FXML
    public HBox image;

    @FXML
    public TextField userName,eMail,confirmEmail;

    @FXML
    public PasswordField password,confirmPass;

    @FXML
    public Button sendData;

    @FXML
    public Label error;

    @FXML
    public void sendData() {

        if(userName.getCharacters().length() > 1
                & eMail.getCharacters().length() > 1 
                & password.getCharacters().length() > 1 
                & confirmPass.getCharacters().length() > 1 
                & confirmEmail.getCharacters().length() > 1)

            error.setText("Kayıt başarılı ");

    }
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        Image img = new Image("http://icons.iconarchive.com/icons/iconshock/cms/256/user-login-icon.png");
        // Resim kaynağını oluşturduk.
        ImageView image = new ImageView(img);
        // Formda görünmesi için ImageView oluşturduk.
        image.setFitHeight(200); // Yüksekliği 200 piksele ayarlar.
        image.setFitWidth(200); // Genişliği 200 piksele ayarlar.

        this.image.getChildren().add(image); // Forma ekle.
    }
}

 

Şu anlık en çok işi Override olan initialize fonksiyonunda yaptık. Resmi belirlenen adresten yükledik ve bir resim ImageView oluşturduk. HBox’a eklemek için çocuklarına eklememiz gerekiyor. Yani içerisine eklemek için son satırı kullanıyoruz.

EventListeners ve Kullanıcı Giriş Kontrolünü Gerçek Zamanda Yapma

EventListenerlar, belirtilen olayı gerçek zamanlı olarak kontrol ederler. Örnek vermek gerekirse bir adet kaydırılabilen ayarlama düşünün, aynı Photoshop’taki opaklık değeri gibi, o kaydırabilir ayarlamanın konumuna göre saydamlık artıp azalıyor değil mi, aynı şekilde burada da EventListener kullanacağız. Örnek olarak şu uygulamayı indirip inceleyebilirsiniz.

İncelediyseniz eventListener’ın ne olduğunu daha iyi anlayabileceksiniz. Şimdi bir eventListener’ın genel yapısına bakalım.

<pre class="brush: javafx; gutter: false">userName.textProperty().addListener(new ChangeListener<String>(){ // String için ChangeListener oluşturduk. Çünkü içeriği bir string.

        @Override
            public void changed(ObservableValue<? extends String> observableValue, String s, String s2)
            {
                int size = userName.getText().length(); // TextField'daki yazının uzunluğunu aldık.

                error.setText(""); // Daha önce hata bastırılıdıysa sildik.
                sendData.setDisable(true);
                if(size > 12)
                {
                    error.setText("Kullanıcı adınız 12 karakterden uzun olamaz!");

                }else{
                    error.setText("");
                    sendData.setDisable(false);
                }

                // System.out.println(s); // Önceki veriyi yazdırır.
                // System.out.println(s2); // Şimdiki yani değişmiş veriyi yazdırır.
                // System.out.println(observableValue.toString()); // Şuna benzer bir çıktı alırsınız: StringProperty [bean: TextField[id=userName, styleClass=text-input text-field], name: text, value: kulturlupenguen]
            }
        });

 

Değişkenin hangi özelliğinde olacağını yazıyoruz, ardından changed Override void fonksiyonunu yazıyoruz. Ardından ona göre işlem yapıyoruz. ObservableValue değişken ve değişen özellik hakkında bilgi verir. s1 değişkeni önceki, s2 sonraki veriyi yazdırır.

Kayıt Formumuza Ekleyelim

Bu eventListener kodlarını initialize fonksiyonuna eklemeniz gerekiyor. İsterseniz başlangıcına isterseniz sonuna, fark etmez.

<pre class="brush: javafx; gutter: false">        @Override
            public void changed(ObservableValue<? extends String> observableValue, String s, String s2)
            {
                int size = userName.getText().length(); // TextField'daki yazının uzunluğunu aldık.

                error.setText(""); // Daha önce hata bastırılıdıysa sildik.
                sendData.setDisable(true);
                if(size > 12)
                {
                    error.setText("Kullanıcı adınız 12 karakterden uzun olamaz!");

                }else{
                    error.setText("");
                    sendData.setDisable(false);
                }

                // System.out.println(s); // Önceki veriyi yazdırır.
                // System.out.println(s2); // Şimdiki yani değişmiş veriyi yazdırır.
                // System.out.println(observableValue.toString()); // Şuna benzer bir çıktı alırsınız: StringProperty [bean: TextField[id=userName, styleClass=text-input text-field], name: text, value: kulturlupenguen]
            }
        });

        eMail.textProperty().addListener(new ChangeListener<String>(){ 

        @Override
            public void changed(ObservableValue<? extends String> observableValue, String s, String s2)
            {
                String text = eMail.getText();

                error.setText(""); 
                sendData.setDisable(false);
                String expression = "^[\\w\\-]([\\.\\w])+[\\w]+@([\\w\\-]+\\.)+[A-Z]{2,4}$";

                Pattern pattern = Pattern.compile(expression, Pattern.CASE_INSENSITIVE);
                Matcher matcher = pattern.matcher(text);

                if(!matcher.matches())
                {
                    error.setText("Girdiğiniz e-posta adresi geçersizdir.");
                }else{
                    error.setText("");
                    sendData.setDisable(false);
                }
            }
        });

        password.textProperty().addListener(new ChangeListener<String>(){

        @Override
            public void changed(ObservableValue<? extends String> observableValue, String s, String s2)
            {
                String pass = password.getText();

                error.setText("");
                sendData.setDisable(true);
                String exp = "^.*(?=.{4,12})(?=.*\\d)(?=.*[a-zA-Z]).*$";

                Pattern pattern = Pattern.compile(exp, Pattern.CASE_INSENSITIVE);
                Matcher matches = pattern.matcher(pass);

                if(!matches.matches())
                {
                    error.setText("Şifreniz en az 4, en fazla 12 karakter olabilir ve \n içerisinde 1 rakam ve 1 küçük karakter içermelidir.");
                } else {
                    error.setText("");
                    sendData.setDisable(false);
                }
            }

        });

        confirmPass.textProperty().addListener(new ChangeListener<String>(){

            @Override
                public void changed(ObservableValue<? extends String> observableValue, String s1, String s2)
                {
                    String önceki = password.getText();
                    String şimdiki = s2;

                    error.setText("");
                    sendData.setDisable(true);

                    if(önceki.equals(şimdiki))
                    {
                        error.setText("");
                        sendData.setDisable(false);
                    } else {
                        error.setText("Şifreler birbirine uymuyor.");
                    }
                }

        });

        confirmEmail.textProperty().addListener(new ChangeListener<String>(){

            @Override
                public void changed(ObservableValue<? extends String> observableValue, String s1, String s2)
                {

                    String önceki = eMail.getText();
                    String şimdiki = s2;
                    error.setText("");
                    sendData.setDisable(true);

                    String expression = "^[\\w\\-]([\\.\\w])+[\\w]+@([\\w\\-]+\\.)+[A-Z]{2,4}$";

                    Pattern pattern = Pattern.compile(expression, Pattern.CASE_INSENSITIVE);
                    Matcher matcher = pattern.matcher(önceki);

                    if(önceki.equals(şimdiki) && matcher.matches())
                    {
                        error.setText("");
                        sendData.setDisable(false);
                    } else {
                        error.setText("E-postalar birbirine uymuyor.");
                    }
                }

        });

 


avatarresmi

Ulan şu zenginler gibi kafamız bozulduğunda son model arabamızı alıp deniz kenarında efkarlanamadık be varsa yoksa kapıyı çarp yatağa atla

- Twitter - Facebook


Cevap Yaz

Görüşlerinizi bizimle paylaşmanız bizi çok mutlu edecektir. Bir yorum da siz bırakın.
Blogların beslenme şekli yorumlardır.