Technika Drag and Drop, czyli "przeciągnij i upuść" jest powszechnie stosowana w interfejsach graficznych w aplikacjach komputerowych. Nastomiast nie dotyczyło to aplikacji sieciowych, aż do momentu wprowadzenia przez Adobe bogatych aplikacji internetowych. Obecnie tę technikę możemy zastosować w wielu językach programowania, np. w Javie. Technika ta polega na zaznaczeniu obiektu, przeciągając go na inny obiekt i upuszczając na niego. Wszystkie komponenty Flex'a obsługują tę operację. Warto wspomnieć, że komponenty oparte na listach, posiadają odpowiednie atrybuty do obsługi Drag and Drop:
DataGrid,HorizontalList,List,PrintDataGrid,TileList,Tree.
Oznacza to łatwiejszą pracę z tymi kontrolkami, gdyż wystarczy dodać tylko jedną wartość atrybutu.
Operację przeciągania i upuszczania możemy podzielić na trzy etapy:
- Inicjalizacja - klikamy na element i przesuwamy go, trzymając wciśnięty przycisk myszki. Element jest inicjatorem przeciągania.
- Przeciąganie - trzymając wciśnięty przycisk myszki, przesuwamy jej wskaźnik po ekranie. Flex wyświetla obraz zwany obiektem zastępczym, a przypisany niewidoczny obiekt, zwany źródłem przeciągania, przechowuje dane powiązane z elementem.
- Upuszczanie - przesuwamy wkaźnik myszki nad inny komponent, do którego możemy upuścić element. W ten sposób dane zostają dołączone do nowego komponentu.
Dla przykładu skorzystamy z dwóch kontrolek
List i dostawcy danych użytych w szóstym komponencie, a także użyjemy następujące dwie właściwości:dragEnabled- określa, czy kontrolka może być inicjatorem przeciągania. Jeżeli jej wartość ustawimy na true, to możemy przeciągnąć elementy z tego komponentu.dropEnabled- określa, czy kontrolka może być celem upuszczania. Jeżeli jej wartość ustawimy na true, to możemy upuszczać elementy do tego komponentu.
Dodatkowo możemy użyć właściwości
dragMoveEnabled. Jeżeli jej wartość ustwimy na true, to przeciągane elementy z kontrolki, która jest inicjatorem, zostaną usunięte. <mx:List id="list1" dataProvider="{array1}" labelField="data"
dragEnabled="true" dragMoveEnabled="true"/>
<mx:List id="list2" dropEnabled="true" labelField="data" />
Na rysunku poniżej widzimy przeciągnięty element.
 |
| [kliknij na obrazek aby powiększyć] |
Jak wcześniej było wspomniane, podczas przeciągania zostaje utworzony obiekt zastępczy, czyli obraz podczepiony pod wskaźnik myszki. Oznacza to, że w tym miejscu nie możemy upuścić elementu. W tym samym momencie został utworzony obiekt
dragSource, w którym są przechowywane dane w formacie items.
Następnie, przesunięcie elementu nad drugą listę spowoduje, że obiektu zastępczego nie będzie, oznacza to, że w tej kontrolce mamy możliwość upuszczenia elementu.
 |
| [kliknij na obrazek aby powiększyć] |
A tak wygląda kontrolka, do której upuściliśmy element i tym samym dodaliśmy go do komponentu.
 |
| [kliknij na obrazek aby powiększyć] |
W kolejnych częściach kursu:
Brak komentarzy:
Prześlij komentarz