Δημιουργήστε το MoveMe με τη χρήση του Expression Blend 4 για Windows Phone Beta

Όσοι ασχολείστε με ανάπτυξη εφαρμογών για το iPhone σίγουρα θα έχετε δει το tutorial για την κατασκευή του MoveMe (http://developer.apple.com/iphone/library/referencelibrary/GettingStarted/Creating_an_iPhone_App/index.html). Πρόκειται για μια πολύ απλή εφαρμογή, με ένα rectangle στην οθόνη, το οποίο μπορούμε να το κάνουμε drag σε όλο το μήκος και πλάτος της οθόνης του κινητού και με το που το αφήσουμε, αυτό επιστρέφει στην αρχική του θέση με ένα μικρό animation της κίνησης. Ας δούμε εδώ πως μπορούμε να το φτιάξουμε σε Silverlight για Windows Phone 7 με τη χρήση του εργαλείου Expression Blend 4 for Windows Phone Beta (hint: μπορείτε να κατεβάσετε δωρεάν όλα τα beta development tools για Windows Phone 7 από εδώ).

Αρχικά, ανοίγουμε το Expression Blend 4 for Windows Phone Beta και επιλέγουμε να δημιουργήσουμε ένα νέο Silverlight project, δίνοντας του ένα όνομα της επιλογής μας.

image

Με το που δημιουργηθεί το project, μας εμφανίζεται μια οθόνη, στην οποία μπορούμε να σχεδιάσουμε το γραφικό περιβάλλον της εφαρμογής μας. Αυτό που θα κάνουμε αρχικά είναι να δημιουργήσουμε ένα νέο rectangle στην εφαρμογή μας.

Στο μενού εργαλείων στα αριστερά κάνουμε κλικ στο rectangle.

image

 

Οπότε, μπορούμε πλέον στην οθόνη του “κινητού” να σχεδιάσουμε ένα καινούριο Rectangle, χρησιμοποιώντας το ποντίκι μας για να δώσουμε το πλάτος και το μήκος που επιθυμούμε.

image

Μπορούμε να πάμε στο μενού εργαλείων properties στα δεξιά του Blend και να μεταβάλλουμε διάφορα χαρακτηριστικά του καινούριου μας Rectangle. Στο παράδειγμά μας, πείραξαμε το Rectangle και του δώσαμε ένα ντεγκραντέ (gradient) background, με πράσινο-μπλε χρώμα.

imageimage

Το πρώτο πράγμα που θα κάνουμε θα είναι να τροποποιήσουμε το Rectangle ώστε να είναι draggable, να μπορούμε δηλαδή να το μετακινήσουμε με τα δάχτυλά μας στη συσκευή μας, ή με το ποντίκι αν δουλεύουμε με τον emulator. Αν θέλαμε να δώσουμε αυτή τη λειτουργία με κώδικα, τότε θα έπρεπε να ακολουθήσουμε τα εξής (ψευδο)βήματα

  • Να φτιάξουμε μια μεταβλητή isBeingDragged τύπου boolean
  • Να κάνουμε handle το event MouseDown (ή TouchDown κ.λ.π.), και εκεί set την isBeingDragged σε true
  • Να κάνουμε handle το event MouseMove. Εκεί, αν και μόνο αν (if συνθήκη) η isBeingDragged είναι ίση με true, να μεταβάλλουμε το x και το y (ή το margin κ.λ.π.) του rectangle, κατά ένα ποσό σχετικό με την τιμή του mouse.X και mouse.Y
  • Να κάνουμε handle το event MouseUp. Εκεί κάνουμε set την isBeingDragged σε false ώστε να μην εκτελείται ο κώδικας στην if συνθήκη της MouseMove.

(Παρέλειψα εσκεμένα να αναφερθώ στις Control.CaptureMouse() και Control.ReleaseMouseCapture() για να μην αγχώσω/μπερδέψω τον αρχάριο αναγνώστη :) )

Μπορείτε να δείτε ότι η λογική είναι αρκετά straightforward, αλλά παρόλα αυτά απαιτεί από εμάς να γράψουμε αρκετό κώδικα. Το Blend με τις διευκολύνσεις που προσφέρει μας γλιτώνει από αυτό τον κόπο. Αυτές οι διευκολύνσεις λέγονται behaviors, και μας παρέχουν ενσωματωμένη λειτουργικότητα την οποία μπορούμε να δώσουμε στα αντικείμενά μας. Πηγαίνουμε λοιπόν στο παράθυρο εργαλείων Assets και επιλέγουμε το μενού Behaviors.

image

Κάνοντας κλικ στο behaviors, βλέπουμε διάφορες επιλογές. Η επιλογή (το behavior) που μας ενδιαφέρει (όπως ίσως μαντέψατε!) είναι η MouseDragElementBehavior.

image

Κάνουμε κλικ σε αυτό το behavior και το μεταφέρουμε στο μίνι παράθυρο Objects and Timeline, ακριβώς πάνω στο Rectangle που έχουμε δημιουργήσει (μπορούμε εναλλακτικά να το μεταφέρουμε επάνω στο rectangle που βρίσκεται στην οθόνη εργασίας μας, το αποτέλεσμα θα είναι ακριβώς το ίδιο).

image

Ας τρέξουμε τώρα την εφαρμογή μας για να δούμε τι κατασκευάσαμε μέχρι στιγμής. Για να την εκτελέσουμε, μπορούμε είτε να πατήσουμε το πλήκτρο F5, είτε να πατήσουμε στο μενού πάνω την επιλογή Project –> Run Project. Αφού περιμένουμε λιγάκι, θα εμφανιστεί ο emulator ενός Windows Phone 7 κινητού, και μετά από λίγο και η εφαρμογή μας.

image

Δοκιμάστε να κάνετε κλικ πάνω στο rectangle και να το σύρετε πάνω στην οθόνη. Θα δείτε ότι το rectangle ακολουθεί το δείκτη του ποντικιού (όσο φυσικά κρατάτε το αριστερό κουμπί του ποντικιού κρατημένο!). Παρόμοια θα ήταν η συμπεριφορά της εφαρμογής αν την εκτελούσατε σε μια συσκευή, θα μπορούσατε να κουνήσετε το rectangle χρησιμοποιώντας το δάκτυλό σας. Παρατηρούμε ότι το rectangle, μετά την μετακίνησή του παραμένει στη θέση που το αφήσαμε.

Ας περάσουμε τώρα στο πιο tricky κομμάτι της εφαρμογής. Θέλουμε ο χρήστης να κάνει κλικ στο rectangle, να το μετακινεί και όταν αφήνει το πλήκτρο του ποντικιού το rectangle να επιστρέφει στην αρχική του θέση, με ένα animation κατά τη διάρκεια της μετακίνησης. Για να το πετύχουμε αυτό, θα δημιουργήσουμε πρώτα το animation όπου το rectangle επιστρέφει στην αρχική του θέση.

Για να το πετύχουμε αυτό, καλό θα ήταν να “γυρίσουμε” το Blend σε Animation Workspace, από το Design Workspace που είναι το default και είμαστε τώρα. Για να το κάνουμε αυτό, είτε πατάμε το πλήκτρο F6, είτε επιλέγουμε από το πάνω μενού Windows –> Workplaces –> Animation. Αφού το κάνουμε αυτό, θα επιλέξουμε να δημιουργήσουμε ένα καινούριο Storyboard (ένα Storyboard μπορεί να περιέχει ένα ή περισσότερα animations). Για να δημιουργήσουμε ένα καινούριο animation, επιλέγουμε το κουμπί +, στο μίνι παράθυρο “Objects and timeline”.

image

Αφού πατήσουμε το +, το Blend μας δίνει την επιλογή να δώσουμε στο καινούριο Storyboard μας ένα όνομα της επιλογής μας.

image

Αφού δώσουμε όνομα στο Storyboard, το Blend δημιουργεί ένα κόκκινο περίγραμμα γύρω από την επιφάνεια σχεδίασης, πράγμα που σημαίνει ότι καταγράφει οποιαδήποτε αλλαγή κάνουμε στις ιδιότητες των αντικειμένων (χρώμα background, margins, size, περιστροφή, και ό,τι άλλο μπορείτε να φανταστείτε). Για να κατασκευάσουμε το animation μας, πρέπει να σκεφτούμε δύο πράγματα

  • το τι θα κάνουμε animate
  • το πόσο χρόνο θα διαρκεί

Συγκεκριμένα, τόσο στο Silverlight (web, phone) όσο και στο WPF, ένα animation σημαίνει μετατροπή μιας ιδιότητας από μία τιμή σε κάποια άλλη, για ένα πεπερασμένο χρονικό διάστημα. Στην περίπτωσή μας θέλουμε μια χρονική διάρκεια έστω δύο δευτερολέπτων, και μετατροπή της τοποθεσίας του rectangle από την οποιαδήποτε στην αρχική. Το οποιαδήποτε υποδηλώνει την τοποθεσία που θα το αφήσει ο χρήστης μετά το drag. Οπότε, αρχικά, μετακινούμε τον δείκτη χρόνου του storyboard στα δύο δευτερόλεπτα.

image

Στη συνέχεια, επιλέγουμε το rectangle χρησιμοποιώντας το selection tool από τα tools στα αριστερά του blend (μπορείτε να χρησιμοποιήσετε και το keyboard shortcut V για να επιλέξετε το selection tool). Αυτό που θέλουμε να επιτύχουμε είναι να κάνουμε record τα ανάλογα properties του rectangle, έτσι ώστε το animation να ξέρει πού θα μεταφέρει το rectangle στο χρονικό διάστημα των δύο δευτερολέπτων. Τα properties αυτά είναι το TranslateX και το TranslateY και τα βρίσκουμε στο υπομενού Transform του μίνι παραθύρου Properties. Κάνοντας κλικ στο δεξί τετραγωνάκι που βρίσκεται δεξιά τους μπορούμε να επιλέξουμε την επιλογή Record Current Value. Αμέσως θα δούμε το τετραγωνάκι να αλλάζει από σκούρο γκρι χρώμα σε άσπρο, πράγμα που σημαίνει ότι έχουν “κλειδώσει” οι τρέχουσες τιμές.

image

Μπορούμε να το επιβεβαιώσουμε και από το objects and timeline panel, κάνοντας expand τα περιεχόμενα στοιχεία του rectangle.

image

Αφού τελειώσαμε με τη δημιουργία του animation, μπορούμε να πατήσουμε το F6 ώστε να ξαναγυρίσουμε στο Designer Workspace. Επίσης, μπορούμε να επιλέξουμε να σταματήσει το “recording” για τη δημιουργία του storyboard, κάνοντας κλικ στο κόκκινο κουμπάκι που δείχνει η παρακάτω εικόνα.

image

Για να τελειώσουμε την εφαρμογή μας, πρέπει να επιλέξουμε να ενεργοποιείται το animation μόλις ο χρήστης αφήσει το rectangle. Αυτό μπορούμε πολύ απλά να το επιτύχουμε με ένα ακόμα behavior. Αν πλοηγηθούμε στα behaviors, θα δούμε ένα με όνομα ControlStoryBoardAction.

image

Το παίρνουμε και το κάνουμε drag drop πάνω στο rectangle, στο objects and timeline μίνι παράθυρο.

image

Εν συνεχεία, ενώ το ControlStoryboardAction που δημιουργήσαμε παραμένει επιλεγμένο, μπορούμε να πειράξουμε τα properties του.

image

Σκεφθείτε, πότε θέλουμε να εκτελείται το animation; Όταν αφήνουμε το rectangle. Το ανάλογο event για την περίπτωσή μας είναι το MouseLeftButtonUp. Τι θέλουμε να γίνεται όταν γίνει raise το event; Να ξεκινάει το Storyboard μας. Οπότε αφήνουμε το Play. Ποιο Storyboard θέλουμε να εκτελείται; Φυσικά, το Storyboard που δημιουργήσαμε πριν λίγο.

image

Και ναι, μόλις τελειώσαμε! Μπορείτε να πατήσετε το F5 ή το Project –> Run Project για να δείτε την εφαρμογή σας εν δράσει!

Μπορείτε να κατεβάσετε τον κώδικα για την παρούσα εφαρμογή από εδώ. Stay tuned για περισσότερα tutorials για Windows Phone 7!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s