Μενού με ένδειξη τρέχουσας σελίδας

Πληροφορίες σχετικές με την ASP, ASP.NET και με τις εφαρμογές που είναι γραμμένες με αυτήν.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Μενού με ένδειξη τρέχουσας σελίδας

Δημοσίευση από skeftomilos » 25 Μαρ 2005 23:47

Μία από τις πιο συχνά παραβιαζόμενες συμβουλές της Usability είναι να μην συμπεριλαμβάνουμε ένα ενεργό link από μία σελίδα προς τον εαυτό της. Δείτε για παράδειγμα το σχετικό άρθρο του Jakob Nielsen, No 10. Ο λόγος που παραβιάζεται τόσο συχνά (πάνω από 50%) είναι μάλλον γιατί θεωρείται λιγότερο σημαντική σε σχέση με τη δουλειά που χρειάζεται για να υλοποιηθεί. Επειδή όμως είναι από τις λεπτομέρειες που μετράνε, θα δούμε πως μπορεί να γίνει εύκολα και άκοπα. Μάλιστα μπορεί να γίνει με δύο τρόπους: στον server και στον browser.

Τον τρόπο που γίνεται αυτό στον browser περιγράφω σε άλλο άρθρο. Εδώ θα ασχοληθούμε με τον περισσότερο ορθόδοξο τρόπο που είναι να τρέξει το script στον server, δηλαδή σε σελίδα ASP. Η σελίδα θα έχει την παρακάτω μορφή:

Κώδικας: Επιλογή όλων

<html>
  <head>
    <title>Καλομοίρα</title>
    <script language="JScript" runat="server" src="menu.js"></script>
  </head>
  <body>
    <h2>Καλομοίρα</h2>
    <% RenderMenu %>
  </body>
</html>
Όταν η σελίδα τρέξει θα εκτελεστεί ο κώδικας ανάμεσα στα <% και %>, δηλαδή εδώ η ρουτίνα RenderMenu. Η ρουτίνα αυτή γράφει τον HTML κώδικα που εμφανίζει το μενού. Για ευκολία δεν ορίζουμε τη ρουτίνα μέσα στην ASP σελίδα αλλά σε ένα εξωτερικό αρχείο, το menu.js. Η συμπερίληψη του αρχείου γίνεται με το tag <script runat="server">. Το attribute runat είναι πολύ σημαντικό γιατί χωρίς αυτό δε θα γίνει η συμπερίληψη του αρχείου στον server αλλά στον browser. Ας σημειωθεί ότι υπάρχουν και άλλοι τρόποι συμπερίληψης, αλλά εδώ προτίμησα αυτόν γιατί μας επιτρέπει να ονομάσουμε το βοηθητικό αρχείο με την κατάληξη .js, κάτι που δηλώνει καλύτερα το ρόλο του από menu.asp ή menu.inc. Το αρχείο menu.js περιέχει καθαρό κώδικα JavaScript (JScript) χωρίς την ανάγκη για <% και %>. Ο μόνος περιορισμός αυτής της μεθόδου είναι ότι το αρχείο πρέπει να περιέχει ρουτίνες και όχι άμεσα εκτελέσιμο κώδικα, κάτι που εδώ δε μας ενοχλεί καθόλου. Προτού δούμε τον κώδικα του αρχείου menu.js, ας ρίξουμε μια ματιά στο φάκελο με τα αρχεία του παραδείγματος:


Εικόνα


Τα αρχεία hi-5.asp, kalomoira.asp και paparizou.asp είναι όλα παρόμοια αρχεία σαν το παραπάνω και διαφέρουν μόνο στον τίτλο και το <h2> tag. Ας δούμε τώρα και το αρχείο menu.js που κάνει όλη τη δουλειά.

Κώδικας: Επιλογή όλων

function Link&#40;text, url&#41; &#123;
  this.text = text
  this.url = url
  this.html = text.link&#40;url&#41;
&#125;

function renderMenu&#40;&#41; &#123;
  var links = new Array&#40;&#41;
  links.push&#40;new Link&#40;"Παπαρίζου", "paparizou.asp"&#41;&#41;
  links.push&#40;new Link&#40;"Καλομοίρα", "kalomoira.asp"&#41;&#41;
  links.push&#40;new Link&#40;"Χάι Φάιβ", "hi-5.asp"&#41;&#41;

  var pageURL = Request.ServerVariables&#40;"PATH_INFO"&#41;.Item

  for &#40;var i = 0; i < links.length; i++&#41; &#123;
    var link = links&#91;i&#93;
    if &#40;i > 0&#41; Response.Write&#40;" | "&#41;
    if &#40;pageURL.indexOf&#40;link.url&#41; < 0&#41; &#123;
      Response.Write&#40;link.html&#41;
    &#125; else &#123;
      Response.Write&#40;link.text&#41;
    &#125;
  &#125;
&#125;
Όχι και πολύ μεγάλο, έτσι δεν είναι? Αυτός είναι και ο λόγος που χρησιμοποίησα JavaScript αντί για την πιο γνωστή VBScript, για τη συντομία του πράγματος. Η JavaScript είναι παροιμιώδης για την ευκολία που μας επιτρέπει να φτιάχνουμε αντικείμενα. Και έχουμε σκοπό να φτιάξουμε από ένα αντικείμενο για κάθε link του μενού. Μάλλον θα έχετε ήδη συνειδητοποιήσει ότι το παράδειγμά μας είναι multilingual. Φτιάχνουμε τη ρουτίνα renderMenu με JavaScript και την καλούμε από την asp σελίδα με VBScript. Δεν το γράφουμε πουθενά γιατί η προεπιλεγμένη γλώσσα για asp σελίδες είναι έτσι κι αλλιώς η VBScript. Επίτηδες έχω αλλάξει το case του αρχικού γράμματος R για να δείξω ότι η VBScript είναι case insensitive. Το αντίθετο ισχύει για τη JavaScript. Είναι μάλιστα πιθανό η case sensitivity της JavaScript να την καθιστά ταχύτερη στην εκτέλεση, αν και δεν το έχω ελέγξει στην πράξη. Αλλά ας εξετάσουμε λίγο τον κώδικα.

Η πρώτη ρουτίνα με το όνομα Link() είναι στην πραγματικότητα μία constructor function. Αυτό φαίνεται από τη χρήση της ειδικής λέξης this μέσα στο σώμα της ρουτίνας, που αναφέρεται στο υπό δημιουργία αντικείμενο. Τα ονόματα των constructor functions πρέπει να αρχίζουν με κεφαλαίο γράμμα για να ξεχωρίζουν.

Η βασική ρουτίνα είναι η renderMenu() που ακολουθεί αμέσως μετά, και αρχίζει με τη δημιουργία ενός αντικειμένου Array. Στο Array αυτό βάζουμε τα αντικείμενα Link που φτιάχνουμε στις παρακάτω τρεις γραμμές. Βλέπετε πόσο εύκολο είναι. Για κάθε Link αρκεί μία γραμμή, και μπορούμε να προσθέσουμε όσα links θέλουμε. Η επόμενη εντολή που ξεχωρίζει, μεταφέρει τη server variable PATH_INFO σε μία τοπική μεταβλητή με όνομα pageURL. Στο παράδειγμά μας η τιμή της server variable αυτής είναι /Menu-Links/kalomoira.asp. Μετά από αυτό ακολουθεί ο βρόγχος που σε κάθε πέρασμα γράφει από ένα link στη σελίδα μας. Αυτό που θέλουμε να πετύχουμε είναι να εντοπίσουμε το Link που δείχνει στην τρέχουσα σελίδα και να το εκτυπώσουμε σε μορφή απλού κειμένου αντί για link. Για να το καταφέρουμε συγκρίνουμε το url του κάθε Link με τη μεταβλητή pageURL που ορίσαμε προηγουμένως. Όταν δεν έχουν ομοιότητες (πρώτη περίπτωση) σημαίνει ότι πρόκειται για άλλη σελίδα και πρέπει να γράψουμε τον πλήρη HTML κώδικα (<a href="...). Όταν όμως πέσουμε πάνω στο link της σελίδας μας τότε απλά γράφουμε το text του Link.

Αξίζει εδώ να ασχοληθούμε με την ιδιότητα html του αντικειμένου Link που παραλείψαμε πρωτύτερα. Η ιδιότητα αυτή αποκτά την τιμή της κατά τη δημιουργία του αντικειμένου Link, και χρησιμοποίησα γι αυτό την ενσωματωμένη μέθοδο link() που διαθέτουν τα αντικείμενα String. Μάλλον σας μπέρδεψα. Έχουμε τα links της σελίδας, τα αντικείμενα Link που φτιάξαμε για να τα αναπαριστούν, έχουμε τώρα από πάνω και μέθοδο link() του String? Ok, είναι λίγο μπέρδεμα, αλλά αυτή η μέθοδος είναι απλά μιά διευκόλυνση που μας παρέχει η JavaScript. Αν προτιμάμε μπορούμε να αντικαταστήσουμε τη γραμμή this.html = text.link(url) με την εξής:

Κώδικας: Επιλογή όλων

this.html = '<a href="' + url + '">' + text + '</a>'
Διαλέγουμε και παίρνουμε. Ας δούμε τώρα το δημιούργημά μας στην πράξη:


Εικόνα


Με τον τρόπο αυτό μπορούμε πλέον άκοπα να εξασφαλίζουμε ότι δε θα βραχυκυκλώνουμε το site μας με links που δείχνουν τον εαυτό τους, χωρίς να χρειάζεται να κάνουμε τη σκληρή δουλειά που απαιτείται με το χέρι. Αρκεί να φτιάξουμε μια και καλή το αρχείο menu.js με τα στοιχεία των links και να προσθέσουμε σε κάθε μας σελίδα την εντολή <% RenderMenu %>.

Τα πλεονεκτήματα του asp script σε σχέση με τη δουλειά στο χέρι είναι προφανή. Τα πλεονεκτήματα όμως σε σχέση με ανάλογο script στον browser είναι δυσδιάκριτα. Το μόνο καθαρό πλεονέκτημα είναι η εξασφάλιση ότι η σελίδα μας θα εμφανιστεί το ίδιο και στους χρήστες χωρίς JavaScript. Από την άλλη επιβαρύνουμε τον server με επιπλέον δουλειά, και για ένα δημοφιλές site αυτό μπορεί να είναι πρόβλημα. Επιπλέον αν θέλουμε να βελτιώσουμε προϋπάρχουσες σελίδες, θα είναι πρόβλημα να τους αλλάξουμε την κατάληξη από .htm σε .asp. Αν όμως ελέγχουμε τον server μπορούμε να τον ρυθμίσουμε να περνάει και τις .htm σελίδες από την ASP engine (asp.dll).
Τελευταία επεξεργασία από το μέλος skeftomilos την 01 Απρ 2005 02:13, έχει επεξεργασθεί 2 φορές συνολικά.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
Rapid-eraser
WebDev Moderator
Δημοσιεύσεις: 6851
Εγγραφή: 05 Απρ 2003 17:50
Τοποθεσία: Πειραιάς
Επικοινωνία:

Μενού με ένδειξη τρέχουσας σελίδας

Δημοσίευση από Rapid-eraser » 26 Μαρ 2005 10:36

ego pali giati to brisko poli boliko va exei link pros tov eafto tis ... poles fores xriazete otav 8es va to petakseis se veo tab to link gia opoiodipote logo n poli apla gia va kaveis reload tiv idia tiv selida xoris va xrisimopiiseis tov browser .
fisika dev milaw gia oles tis selides alla gia tis kiries aftes pou orizouve .

Pavtos 8a rikso mia matia sto ar8ro pou para8eses fevete arketa evdiaferov :)
Cu, Rapid-eraser, Tα αγαθά copies κτώνται.
Love is like oxygen, You get too much you get too high
Not enough and you're gonna die, Love gets you high

Απάντηση

Επιστροφή στο “ASP, ASP.NET”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης