Developing Vista Sidebar gadgets - Μέρος 3ο
Το τρίτο μέρος του μικρού μας tutorial βασίζεται στον κώδικα του 2ου μέρους. Ουσιαστικά, αυτό που θα κάνουμε είναι να επεκτείνουμε τη λειτουργία του gadget που δημιουργήσαμε προηγουμένως.
Αφού λοιπόν φτιάξαμε ένα απλό gadget, ήρθε η στιγμή να του προσθέσουμε flyout!
Το αρχείο flyout.htm
Το flyout δεν είναι παρά μια σελίδα HTML που προβάλλεται στα αριστερά του gadget μας όταν επιλέξουμε να εμφανιστεί! Επομένως, ας δημιουργήσουμε ένα νέο αρχείο html και ας το τοποθετήσουμε στον φάκελο Demo.gadget. Θα το ονομάσουμε flyout.htm, αλλά μπορεί να έχει οποιοδήποτε άλλο όνομα. Όπως και με το gadget.htm, ο κώδικάς του δεν είναι κάτι ιδιαίτερο:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo Gadget Flyout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel=”stylesheet” type=”text/css” href=”css/flyout.css” />
<script type="text/javascript" src="js/flyout.js"></script>
</head>
<body onload="loadFlyout()">
<div id="flyout_main">
<p>This is my gadget’s flyout!</p>
</div>
</body>
</html>
Στο τμήμα head προσθέσαμε ένα path για το αρχείο css που θα περιλαμβάνει τα στυλιστικά χαρακτηριστικά του flyout και ένα path για το αρχείο JavaScript που θα περιέχει την λογική του flyout. Στο body καλούμε αρχικά τη συνάρτηση loadFlyout την οποία θα υλοποιήσουμε στο αρχείο JavaScript και εν συνεχεία ορίζουμε μια περιοχή (div) ονόματι flyout_main για να τοποθετήσουμε την παράγραφο (p) με κείμενο “This is my gadget’s flyout”. Όπως βλέπουμε, δεν υπάρχει ακόμα καμία ουσιαστική διαφορά σε σχέση με το gadget.htm.
Το αρχείο flyout.css
Ούτε όμως και το αρχείο css έχει κάτι ιδιαίτερο. Στον φάκελο css δημιουργούμε το flyout.css και δίνουμε τις ιδιότητες:
body
{
margin: 0px;
padding: 0px;
position: absolute;
border: none;
font-family: "Trebuchet MS", "Calibri", "Tahoma", "Arial";
font-size: small;
}
#flyout_main
{
margin: 10px;
text-align: center;
}
Στο body αντιγράψαμε τις ιδιότητες του gadget.css και στο flyout_main ορίσαμε την απόστασή του από τα άκρα (margin) ίση με 10 pixel. Οι υπόλοιπες ιδιότητες είναι ίδιες με τις ιδιότητες που ορίστηκαν στο gadget.css και εξηγήθηκαν στο 2ο μέρος του tutorial.
Το αρχείο flyout.js
Αντίστοιχα, το αρχείο flyout.js θα δημιουργηθεί μέσα στο φάκελο js και θα περιέχει την υλοποίηση της συνάρτησης loadFlyout, αντίστοιχη της loadGadget:
function loadFlyout()
{
document.body.style.width = "200px";
document.body.style.height = "400px";
}
Το μόνο που κάνουμε είναι να ορίσουμε τις διαστάσεις του flyout. Θέτουμε το πλάτος ίσο με 200 pixel και το μήκος ίσο με 400 pixel.
Σημείωση σχετικά με τις διαστάσεις: Τυπικά, δεν υπάρχει κανένας περιορισμός ως προς τις ελάχιστες και μέγιστες διαστάσεις. Όμως, για λόγους αισθητικής και λειτουργικότητας, η Microsoft προτείνει ως μέγιστο πλάτος τα 130 pixel για gadget πάνω στη Sidebar και 400 επί 400 pixel τις μέγιστες διαστάσεις για το flyout. Φυσικά, αν η εφαρμογή σας απαιτεί κάτι ιδιαίτερο, μπορείτε κάλλιστα να παραβείτε αυτούς τους κανόνες
.
Έτσι λοιπόν, το flyout τελείωσε! Είναι στη διακριτική ευχέρεια του developer η προσθήκη επιπλέον λειτουργικότητας μέσω html και JavaScript!
Εμφάνιση του flyout
Πότε και πώς όμως θα εμφανίζεται το flyout; Προφανώς, θα πρέπει ο χρήστης να κάνει κλικ σε μια περιοχή του βασικού gadget ώστε να ξεπετάγεται το flyout. Επομένως, ας ανοίξουμε το αρχείο gadget.htm που κατασκευάσαμε στο προηγούμενο μέρος και ας τροποποιήσουμε τον κώδικα ως εξής:
<div id="main">
<p><a onclick="display_flyout()">Click me!</a></p>
</div>
Αυτό που κάναμε είναι πολύ απλό: Στη θέση του προϋπάρχοντος κειμένου γράψαμε τη φράση “Click me” και την τοποθετήσαμε σε ένα a tag. Μέσα στο a tag ορίσαμε πως όταν ο χρήστης κάνει κλικ στη φράση “Click me” θα καλείται η συνάρτηση display_flyout (από το όνομά της μάς προϊδεάζει για τη λειτουργία της 
).
Το μόνο που έμεινε είναι να προσθέσουμε τη συνάρτηση display_flyout στο αρχείο gadget.js που δημιουργήσαμε στο προηγούμενο μέρος. Ανοίγουμε λοιπόν το gadget.js και προσθέτουμε:
function display_flyout()
{
System.Gadget.Flyout.file = "../flyout.htm";
System.Gadget.Flyout.show = true;
}
Η εντολή System.Gadget.Flyout.file = “../flyout.htm” λέει στη Sidebar ότι ως flyout θα χρησιμοποιηθεί το αρχείο με όνομα flyout.htm το οποίο βρίσκεται ένα επίπεδο πάνω από το gadget.js (θυμηθείτε ότι αυτό υποδηλώνει το ../). Ουσιαστικά, στο System.Gadget.Flyout.file εκχωρείται το path του flyout.
Τέλος, η εντολή System.Gadget.Flyout.show = true καλεί το flyout να εμφανιστεί!
Αν όλα έχουν πάει καλά, το νέο μας gadget θα πρέπει να είναι κάπως έτσι:
Στο τέταρτο και τελευταίο μέρος θα δούμε πώς πακετάρουμε ένα gadget για εγκατάσταση, καθώς και κάποιες χρήσιμες εντολές για λειτουργίες όπως προσθήκη καρτέλας ρυθμίσεων (settings), docking, undocking, κ.ά.
Επισυνάπτω τον κώδικα του ανανεωμένου gadget εδώ.
Φυσικά, μπορείτε πάντα να αφήνετε τυχόν απορίες σας εδώ πέρα ή στο e-mail μου, pinelies [παπάκι] gmail [τελεία] com.