Developing Vista Sidebar gadgets - Μέρος 2ο
Αφού είδαμε λοιπόν κάποια γενικά πράγματα περί gadget στο προηγούμενο μέρος, καιρός να ξεκινήσουμε τη δημιουργία του δικού μας!
Για να γράψουμε τον κώδικα αρκεί ένας επεξεργαστής κειμένου όπως το notepad, το notepad++ ή οποιοσδήποτε άλλος. Προσωπικά, χρησιμοποιώ το Expression Web της Microsoft ή το Visual Studio λόγω του JavaScript editor που διαθέτει (και μάλιστα με ικανοποιητικό IntelliSense).
Στο τέλος του 2ου μέρους, το gadgetάκι μας πρέπει να είναι κάπως έτσι:
Κατασκευή του gadget.html
Ας δημιουργήσουμε έναν καινούργιο φάκελο και ας τον ονομάσουμε «Demo.gadget».
Μέσα σε αυτόν, αρχικά, θα κατασκευάσουμε το βασικό HTML αρχείο που πρέπει να περιέχει κάθε gadget. Μπορούμε να το ονομάσουμε όπως θέλουμε, αλλά για τυπικούς λόγους θα το πούμε gadget.htm. Προκειμένου να είμαστε σύμφωνοι με τα πρότυπα του W3C ορίζουμε το DOCTYPE, ένα tag το οποίο διευκρινίζει τον τύπο HTML ή XHTML που θα χρησιμοποιήσουμε.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Η δομή της σελίδας μας δεν διαφέρει σε τίποτα από μια συνηθισμένη web σελίδα. Στο τμήμα <head> τοποθετείται ο τίτλος (ορατός στον browser - μη ορατός στο gadget), ο τύπος της κωδικοποίησης (εν προκειμένω utf-8) καθώς και τα paths των αρχείων CSS και JavaScript που θα χρειαστούμε:
<head>
<title>Demo Gadget</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/gadget.css" />
<script type="text/javascript" src="js/gadget.js"></script>
</head>
Σημείωση για όσους δεν έχουν ασχοληθεί στο παρελθόν με HTML: Όπως έγραψα στο προηγούμενο ποστ, υπάρχουν κάποιοι σταθεροί κανόνες, οπότε μπορείτε να αντιγράψετε τον παραπάνω κώδικα, αφού δεν επηρεάζει τη μορφή ή τη λειτουργία του gadget, αλλάζοντας μόνο τα css & JavaScript paths εάν διαφέρουν.
Το κυρίως τμήμα του κώδικα, ονόματι body, περιλαμβάνει το ορατό τμήμα του gadget πάνω στη Sidebar. Επειδή θέλουμε να πραγματοποιούνται κάποιες συγκεκριμένες λειτουργίες κατά το φόρτωμα του gadget, πρέπει να εκτελεστεί συγκεκριμένος κώδικας JavaScript (=λογική) εκείνη τη στιγμή. Γι’ αυτό το λόγο καλούμε τη συνάρτηση loadGadget από το αρχείο JavaScript (το οποίο θα δημιουργήσουμε αργότερα) μέσω της ιδιότητας onload:
<body onload="loadGadget()">
Εν συνεχεία, μέσα στο body ορίζουμε μια περιοχή (με το tag div) στην οποία θα γράψουμε κείμενο. Ας την ονομάσουμε main:
<div id="main">
<p>This is my first Vista Sidebar Gadget!!!</p>
</div>
Η φράση «This is my first Vista Sidebar Gadget!!!» αποτελεί τμήμα παραγράφου (<p>) και θα εμφανιστεί ως κείμενο στην οθόνη.
Για το παράδειγμά μας, μπορούμε να κλείσουμε τα tags και να αποθηκεύσουμε το αρχείο:
<!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</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/gadget.css" />
<script type="text/javascript" src="js/gadget.js"></script>
</head>
<body onload="loadGadget()">
<div id="main">
<p>This is my first Vista Sidebar Gadget!!!</p>
</div>
</body>
</html>
Κατασκευή του gadget.css
Αφού τελειώσαμε με το βασικό μας αρχείο, μπορούμε τώρα να δώσουμε λίγο στυλ στο gadget μας. Μέσα στο φάκελο “Demo.gadget” δημιουργούμε έναν νέο φάκελο ονόματι css και μέσα του φτιάχνουμε ένα αρχείο ονόματι “gadget.css”.
Τα CSS παίρνουν τα στοιχεία (elements) της HTML σελίδας μας και εφαρμόζουν πάνω τους κάποιες ιδιότητες. Στο στοιχείο body θα δώσουμε τις ιδιότητες:
body
{
margin: 0px;
padding: 0px;
position: absolute;
border: none;
font-family: "Trebuchet MS", "Calibri", "Tahoma", "Arial";
font-size: small;
color: white;
}
Αν δεν έχετε ξαναδεί CSS μην τρομάζετε! Τα ονόματα των ιδιοτήτων περιγράφουν και τη λειτουργία τους:
- Η ιδιότητα margin ορίζει την ελάχιστη απόσταση του στοιχείου από τα εξωτερικά στοιχεία του
- Η ιδιότητα padding ορίζει την ελάχιστη απόσταση του στοιχείου από τα εσωτερικά στοιχεία του
- Η ιδιότητα position ορίζει την θέση του στοιχείου
- Η ιδιότητα border καθορίζει το περίγραμμα του στοιχείου
- Η ιδιότητες font-family και font-size καθορίζουν το είδος και το μέγεθος της γραμματοσειράς, ενώ το color είναι προφανώς το χρώμα των γραμμάτων
Στο στοιχείο main θα δώσουμε τις ιδιότητες:
#main
{
margin-top: 40px;
margin-left: 10px;
margin-right: 10px;
text-align: center;
font-weight: bold;
}
Επειδή το main βρίσκεται μέσα στο body, θέλουμε να απέχει 40 pixel από πάνω (margin-top) και 10 pixel από αριστερά και από δεξιά (margin-left & margin-right). Επίσης, θέλουμε τα γράμματα να είναι κεντραρισμένα (text-align: center) και έντονα (font-weight: bold).
Κατασκευή του gadget.js
Αφού τελειώσαμε με τη δομή της σελίδας μας, πάμε τώρα να της δώσουμε λίγη λογική. Για αυτό το σκοπό, μέσα στον φάκελο “Demo.gadget” θα δημιουργήσουμε τον φάκελο “js”και μέσα του θα φτιάξουμε ένα αρχείο JavaScript με όνομα “gadget.js”.
Για το παράδειγμά μας, ο κώδικας JavaScript περιέχει μόνο μία συνάρτηση. Είναι η συνάρτηση που είδαμε προηγουμένως και εκτελείται κάθε φορά που φορτώνεται ή επαναφορτώνεται το gadget:
function loadGadget()
{
document.body.style.width = "130px";
document.body.style.height = "130px";
System.Gadget.background = "url(../images/background.png)";
}
Στις πρώτες δύο γραμμές δίνουμε στυλ στο στοιχείο body του εγγράφου μας (document). Θέτουμε το πλάτος του ίσο με 130 pixel και το ύψος του πάλι ίσο με 130 pixel.
Στην τρίτη γραμμή ορίζουμε μια εικόνα την οποία θα βάλουμε ως φόντο στο gadget μας. Καλό είναι να δημιουργήσουμε μέσα στον φάκελο “Demo.gadget” έναν νέο φάκελο ονόματι “images” εντός του οποίου θα τοποθετούμε τις εικόνες μας.
Η εντολή System.Gadget.background = “url(../images/background.png)” τοποθετεί ως φόντο την εικόνα με όνομα background.png που βρίσκεται στον φάκελο images ο οποίος είναι τοποθετημένος ένα επίπεδο πάνω από το αρχείο js (αυτό υποδηλώνει το «../»).
Σημείωση: Φυσικά, όλα τα παραπάνω μπορούν να μπουν ως χαρακτηριστικά του στοιχείου body στο css αρχείο μας. Κάνοντάς το όμως με JavaScript, έχουμε τη δυνατότητα να διαχειριστούμε προγραμματιστικά τις διάφορες ιδιότητες. Θα μπορούσαμε παραδείγματος χάριν να βάλουμε διαφορετικό background image ανάλογα με κάποια συνθήκη (πχ αν ο χρήστης είναι συνδεδεμένος στο Ίντερνετ να εμφανίζεται ένα μεγάλο γαλάζιο φόντο, αλλιώς να εμφανίζεται ένα μικρό κόκκινο φόντο με μήνυμα λάθους).
Και μετά;
Το πρώτο απλό gadget μας έχει σχεδόν ολοκληρωθεί! Προκειμένου η Sidebar να το εντοπίσει και να το συμπεριλάβει στη λίστα της, πρέπει να κάνουμε 2 πράγματα ακόμα:
- Να δημιουργήσουμε το αρχείο gadget.xml, όπως δείξαμε στο προηγούμενο ποστ
- Να τοποθετήσουμε το φάκελο “Demo.gadget” με όλα τα περιεχόμενά του στο path C:\Users\<Username>\AppData\Local\Microsoft\Windows Sidebar\Gadgets\
Αν όλα έχουν πάει καλά, θα πρέπει τώρα να υπάρχει το gadget μας στη λίστα της Sidebar!
Επισυνάπτω το φάκελο “Demo.gadget” μαζί με δύο εικόνες που δημιούργησα, μία για το φόντο και μία για το logo που εμφανίζεται στο μενού. Για οποιαδήποτε απορία μπορείτε να αφήσετε κάποιο σχόλιο ή να επικοινωνήσετε μαζί μου. Προκειμένου αυτό το ποστ να μην γίνει ακόμα πιο τεράστιο
, αποφάσισα να αφήσω τη δημιουργία flyout για το επόμενο. Υπομονή
Κατεβάστε το Demo από εδώ.
Όσοι ενδιαφέρονται για εκμάθηση html, css και JavaScript από το μηδέν μπορούν να συμβουλευτούν τα tutorials του W3Schools.