Θέματα navigation στο DotNetNuke ή πώς να γίνετε καλός μεταμεσονύκτιος προγραμματιστής :)
Χαρούμενος όπως πάντα (στην αρχή τουλάχιστον) έστησα το DotNetNuke 4.3.0 για να αρχίσω να προσαρμόζω το portal ενός πελάτη. Το κακό βέβαια ήταν οτι ο πελάτης είχε εκ των προτέρων δημιουργημένα σε HTML τα templates των σελίδων που ήθελε, και εγώ είχα το δύσκολο έργο να τα προσαρμόσω στα skins και τα containers του DNN.
Εκεί λοιπόν έπεσα πάνω σε ένα ενδιαφέρον πρόβλημα. Ακούστε:
Ο πελάτης έχει μια μορφή sitemap δύο επιπέδων (τριών, αν λάβουμε υπόψη τη home page). Δηλαδή κάπως έτσι:
Home
---Κατηγορία 1
------Υποκατηγορία 1
------Υποκατηγορία 2
---Κατηγορία 2
------Υποκατηγορία 1
και ούτω καθ'εξής. Ηθελε λοιπόν το εξής:
Είτε βρίσκεται στην Κατηγορία 1 είτε σε κάποια από τις υποκατηγορίες της, στο μενού που θα "έπεφτε" στο left pane, να εμφανίζεται ΠΑΝΤΑ η Κατηγορία 1 και από κάτω οι υποκατηγορίες της.
Εκτός αυτού, το μενού για κάθε "Κατηγορία" θα έπρεπε να έχει διαφορετικά styles.
Ανακάλυψα με τρόμο οτι το SolPartMenu δεν μπορεί να κάνει αυτή τη δουλειά. (Η τουλάχιστον δεν βρήκα άμεσα τρόπο, για να είμαι ακριβής). Απελπισία. Ο,τι side menu navigation module είχα δοκιμάσει (συμπεριλαμβανομένου και του πολύ καλού κατά τα άλλα Inventua Side Menu) δεν φαινοταν να καλύπτει ούτε καν την πρώτη προϋπόθεση. Ακούγεται περίεργο, αλλά είναι αληθινό. Με το Inventua το πλησιέστερο που κατάφερα να φτάσω ήταν στο να έχω το υποδέντρο δυο επιπέδων όταν έκανα κλικ σε κάποια από τις κατηγορίες, (καθε "Κατηγορία" είχε ανατεθεί ως root σελίδα, με αποτέλεσμα να έχω πολλές root - δεν μπόρεσα να το αποφύγω), αλλά στο styling...χαμός. Δεν έβγαινε άκρη.
Για να μην τα πολυλογώ, ανακάλυψα ένα πολύ απλό και δωρεάν module στη sixxac.com, ονόματι Sixxac Menu. Απλό και εύκολο. Του λες ποιό επίπεδο θέλεις να εμφανίζει και κάτω και το δείχνει. Τα styles του είναι απλά και γίνονται εύκολα override.
Τωρα ειχα δύο προβλήματα να λύσω:
1. Πώς θα εμφάνιζα ΚΑΙ την σελίδα π.χ. "Κατηγορία χ", αδιάφορα με το αν βρισκόμουν σε κατηγορία ή υποκατηγορία; Το Sixxac καταλάβαινε μόνο επίπεδα. Του έλεγες "επίπεδο 2", εδειχνε ότι βρισκόταν στο επίπεδο 2 (ευτυχώς από εκεί που βρισκόσουν, υπολογίζοντας το υπο-δέντρο από το root). Δεν ηθελα να σηκώνω Visual Studio, ήθελα μια απλή και κομψή λύση.
2. Πώς θα άλλαζα τα χρώματα ανάλογα με το σε ποιό υποδέντρο βρισκόμουν; (ΑΡΓΚ!)
Ξεκίνησα λοιπόν να λύσω το όλο puzzle φτιάχνοντας ένα δικο μου container για το όλο μενού και παίζοντας. Ψαχνοντας λοιπον, ανακαλυπτω αυτή την ωραία κλήση η οποία μπορεί να γίνει inline μέσα από τον container μια και καλεί public static method του Container class: (περισσότερα για αυτό μπορείτε να βρειτε κάνοντας κλικ εδώ)
<%
=CType(DotNetNuke.UI.Containers.Container.GetPortalModuleBase(dnnACTIONS).PortalSettings.ActiveTab.BreadCrumbs(0), DotNetNuke.Entities.Tabs.TabInfo).Title%>
Χαχα! Μπορείς να πάρεις reference στα modules της σελίδας, αρκεί να περάσεις ένα user control που υπάρχει ήδη στον container σου (οπως το dnnACTIONS). Εμμέσως πλην σαφώς, από εκεί έχεις πρόσβαση στο ActiveTab!
Παίζοντας μετά ανακάλυψα οτι τo πρώτο element του Breadcrumbs collection μου δίνει την Parent σελίδα (ή την τρέχουσα, αν δεν υπάρχει parent)! Αρα λοιπον νατος ο τίτλος της parent! Οπου και να βρισκόμουν, είχα πάντα στα χέρια μου τον τίτλο "Κατηγορία χ", οπου χ το υποδέντρο που βρισκομουν.
Αρα λύθηκε το πρώτο πρόβλημα. Το δεύτερο όμως; Επρεπε να χρησιμοποιώ διαφορετικά styles για κάθε υποδέντρο, που σημαίνει οτι έπρεπε να βάζω με το χεράκι το navigation module σε κάθε σελίδα που φτιάχνω και το μόνο έξυπνο που θα μπορούσα να κάνω θα ήταν να φτιάξω μια ομάδα από containers (όσα και τα υποδέντρα μου) που ο καθένας να χρησιμοποιεί διαφορετικό stylesheet. ΑΡΓΚ!
Ε, οχι λοιπον! Μεσα στον ωραίο μου container έβαλα αυτό:
<
link rel="stylesheet" href="<%=DotNetNuke.UI.Containers.Container.GetPortalModuleBase(dnnACTIONS).PortalSettings.ActiveTab.ContainerPath%><%=CType(DotNetNuke.UI.Containers.Container.GetPortalModuleBase(dnnACTIONS).PortalSettings.ActiveTab.BreadCrumbs(0), DotNetNuke.Entities.Tabs.TabInfo).TabID.Tostring%>.css" />
Τι λεει αυτό το μακρυνάρι;
Το πρώτο κομμάτι μου δίνει το path του container μου.
Το δεύτερο κομμάτι, όπως έκανα και πριν, μου δίνει το Breadcrumbs collection από το activeTab. Τι παίρνω όμως τώρα; Το ID του parent tab (θυμηθείτε οτι το BreadCrumbs(0) είναι για κάποιο λόγο το parent tab πάντα - εκτος αν δεν έχω parent).
Τι έκανα λοιπον συνολικά; Δυναμικά ορίζω ΠΟΙΟ stylesheet θα χρησιμοποιήσω (της μορφής 59.css, 34.css κλπ) για κάθε PARENT CATEGORY. Είχα 6 στη συγκεκριμένη περίπτωση.
Ετσι λοιπον χωρίς να ανοίξω Visual Studio και χωρίς να γράψω πάνω από 1-2 γραμμούλες κώδικα πέτυχα να:
- Εχω ένα module σε όλες τις σελίδες μου που να προσαρμόζεται δείχνοντας πάντα ένα υποδέντρο 2 επιπέδων και μαλιστα το ίδιο υποδέντρο ανεξαρτήτως αν βρίσκομαι στο πρώτο ή στο δεύτερο επίπεδο.
- Εχω διαφορετικό "styling" για κάθε υποδέντρο με χρήση απλά και μόνο ενός stylesheet που σαν file name έχει το tab ID του πρώτου επιπέδου του υποδέντρου.
Ξερω οτι παραείναι εξεζητημένο, αλλά αν κάποιος ασχολείται με DNN και βοηθηθεί από αυτό κάπως, ας μου στείλει ένα μήνυμα. Αν θέλει περισσότερες λεπτομέρειες, επίσης με χαρά δεκτό. (Μια και τώρα τα ανέλυσα ελαφρώς χοντροκομμένα). Επίσης θα ήθελα να ακούσω, αν έχετε πάθει τα ίδια, απόψεις για το πώς αλλιώς θα μπορούσε να γίνει αυτή η δουλειά.