Drag and Drop v JavaFX – krok za krokom návod pre začiatočníkov

Už si sa niekedy zamýšľal, ako sa Drag a Drop realizuje v grafickom rozhraní? Tento koncept nie je len rozšírený v moderných aplikáciách, ale je aj veľmi dôležitý pre používateľskú skúsenosť. V tejto príručke ti ukážem, ako implementovať Drag a Drop v JavaFX vytvorením dvoch štvorecov, ktoré môžeš presúvať. Bude to krok-za-krokom návod, takže všetky potrebné kroky môžeš ľahko sledovať.

Hlavné poznatky

• Drag a Drop umožňuje používateľom jednoducho presúvať objekty.
• Implementácia Drag a Drop v JavaFX je jednoduchá pomocou obsluhy udalostí a lambda výrazov.
• Detekcia kolízií je nevyhnutná na zistenie, či bol objekt umiestnený v určitom priestore.

Krok-za-krokom návod

1. Nastavenie projektu

Najprv si vytvor nové JavaFX projekt vo svojej vývojovej prostredí. Uisti sa, že všetky potrebné knižnice sú integrované. Začneme základným nastavením tvojej aplikácie vytvorením hlavnej triedy.

2. Vytvor používateľské rozhranie

Pre náš príklad vytvoríme dva štvorece: jeden malý, ktorý chceme presúvať a jeden veľký, ktorý bude slúžiť ako cieľ. Kód na to vyzerá takto:

Rectangle recToMove = new Rectangle(50, 50, 50, 50); // malý štvorec
Rectangle recTarget = new Rectangle(150, 150, 100, 100); // veľký štvorec

Pri vytváraní štvorcov definuješ ich pozíciu a veľkosť.

3. Nastavenie pozície a scény

Potom potrebuješ premenné na uloženie pozície tvojich objektov. Definuj X a Y súradnice scény. Tieto sa neskôr použijú na sledovanie pohybu počas procesu Drag-and-Drop.

double mainX, mainY; 

4. Pridaj obsluhy udalostí

Ďalším krokom je pridanie obsluhy udalostí, ktoré umožnia funkčnosť Drag-and-Drop. Začneme s obsluhou pre stlačenie myšou.

recToMove.setOnMousePressed(event -> { mainX = event.getSceneX(); mainY = event.getSceneY();
});

Tu ukladáš aktuálnu pozíciu myši, keď je myš stlačená.

5. Implementuj obsluhu Dragging

Pre fázu Dragging používame ďalšiu obsluhu udalostí, ktorá ti umožní presúvať štvorec, zatiaľ čo držíš stlačenú myš.

Pri tom aktualizuješ pozíciu štvorca na základe aktuálneho pohybu myši.

6. Pustenie myšou

Aby si zohľadnil pustenie myši, pridaj ďalší handler. Ten zmení farbu štvorca a skontroluje, či bol umiestnený na určitej cieľovej pozícii.

recToMove.setOnMouseReleased(event -> { // Obnov farbu recToMove.setFill(Color.BLACK); checkBounce(recToMove);
});

7. Detekcia kolízií

Aby si skontroloval, či bol presunutý štvorec umiestnený do cieľového štvrca, implementuj metódu nazvanú checkBounce.

Tu zistíš, či sa oba štvorec prekrývajú a zmeníš farbu cieľového štvorca podľa toho.

8. Pridanie objektov do scény

Na záver pridáš vytvorené štvorce do tvojej scény a nastavíš scénu na javisko.

Zhrnutie - Drag a Drop s JavaFX

V tejto príručke si sa naučil, ako implementovať jednoduchý systém Drag-and-Drop v JavaFX. Zoznámil si sa so základmi detekcie kolízií ako aj s obsluhou událostí myši. Funkcionalita Drag-and-Drop je kľúčová pre použiteľnosť tvojich aplikácií.