|
Tree ersetzt Menu Ich habe intern Kritik erhalten wegen dem Menu.prg. Langsam gibt es zu viele Optionen und das macht die Bedienung nicht gerade einfach. Also habe ich zusammen mit einem kleinen Team nach einer neuen Möglichkeit gesucht, wie man die Navigation einfach und trotzdem flexibel realisieren kann. Herausgekommen ist tree.prg. Als Parameter erhält es die Vorlage, die benutzt werden soll (es gibt nur eine). Weiterhin stehen 3 Schalter zur Verfügung:
Die Vorlagen enthalten dann schlicht den HTML-Code mit ein paar Platzhaltern, die Schleifen darstellen. Hier einfach 3 Beispiele: Beispiel 1: <ul> Gibt beim Aufruf mit Parameter all den kompletten Baum in einer HTML-UL-Liste aus.{loop_level_1} <li><a {ifactitem_level_1}class="act" {/ifactitem_level_1}href="{link}">{title}</a> {level_2} <ul> {loop_level_2} <li><a {ifactitem_level_2}class="act" {/ifactitem_level_2}href="{link}">{title}</a> {level_3} <ul> {loop_level_3} <li><a {ifactitem_level_3}class="act" {/ifactitem_level_3}href="{link}">{title}</a> {level_4} <ul> {loop_level_4} <li><a {ifactitem_level_4}class="act" {/ifactitem_level_4}href="{link}">{title}</a></li> {/loop_level_4} </ul> {/level_4} </li> {/loop_level_3} </ul> {/level_3} </li> {/loop_level_2} </ul> {/level_2} </li> {/loop_level_1} </ul> Beispiel 2: {loop_level_1} Gibt ein Untermenü ab Ebene 2 aus. Darstellung recht einfach als Links.{level_2} {loop_level_2} <a {ifactitem_level_2}class="act" {/ifactitem_level_2}href="{link}">{title}</a> {level_3} {loop_level_3} <a class="menl3{ifactitem_level_3} act{/ifactitem_level_3}" href="{link}">{title}</a> {/loop_level_3} {/level_3} {/loop_level_2} {/level_2} {/loop_level_1} Beispiel 3: {[8]if="{[9]level}#0"} Eine Brotkrummennavigation. Dazu ist der Parameter pathactive notwendig, da nur aktive Punkte ausgegeben werden. Die If-Abfrage Außenrum sorgt übrigens dafür, dass auf der Startseite nichts angezeigt wird. Macht da ja keinen Sinn. Der Platzhalter {level} dazu ist auch neu.Sie sind hier: {loop_level_1} {ifactitem_level_1}<a href="{link}">{title}</a>{/ifactitem_level_1} {level_2} {loop_level_2} {ifactitem_level_2} - <a href="{link}">{title}</a>{/ifactitem_level_2} {level_3} {loop_level_3} {ifactitem_level_3} - <a href="{link}">{title}</a>{/ifactitem_level_3} {level_4} {loop_level_4} {ifactitem_level_4} - <a href="{link}">{title}</a>{/ifactitem_level_4} {/loop_level_4} {/level_4} {/loop_level_3} {/level_3} {/loop_level_2} {/level_2} {/loop_level_1} {end} Neben den Platzhaltern, die man in den Beispielen sieht, gibt es noch diese:
Weil Dinge wie eben eine Brotkrumennavigation oder eine Sitemap möglich sind, nennt sich dieses Modul nun eben Tree und nicht mehr Menu. Wenn man ein neues HTML-Design macht und darin ein Beispiel-Menü enthalten ist, kann man dieses nun einfach mit den "level-Tags" versehen und hat im Handumdrehen ein funktionierendes Menü. Übrigens: Neu sind neben dem Platzhalter {level} auch noch:
Außerdem können {title}, {name}, {lfd}, {id}, {poscount} und {position} nun mit einem Prefix aufgerufen werden. Als Prefix ist parent, prev und next erlaubt. Beispielsweise gibt {parent.id} die ID der Elternseite aus. Das kann man benutzen, um Vorlagen in Abhängigkeit des Überpunktes verschieden reagieren zu lassen. Als eindeutiges Kriterium ist die ID sowieso nicht schlecht. Sie kann leichter eindeutig gehalten werden wie der Name und ist doch änderbarer als die Lfd. Wenn man z.B. mit Entwürfen arbeitet oder verschiedenen Sprachversionen ist die Lfd als Ziel eher weniger geeignet. Die ID bleibt auch gleich, wenn eine Seite verschoben wird, im Gegensatz zum Namen. Deshalb ist das Feld für die ID nun etwas größer und auch alphanumerische Angaben möglich. Michael [Link entfernt, weil Linkziel leider nicht mehr verfügbar] wollte schon seit Langem, dass die ID etwas mehr genutzt wird. Dieser Artikel wurde veröffentlicht am 22.05.2010 um 16:56 Uhr. Noch kein Kommentar. Tester für menu.prg gesucht Das neue Design für die ewm5 Standardvorlage habe ich ja bereits vorgestellt. Nun musste ich beim Umsetzen das Menu-Modul etwas anpassen. Das obere Menü ist nämlich im HTML-Code eine <ul>, die den kompletten Baum abbildet. Per CSS wird dann die Darstellung geregelt. Um aber die Baumstruktur abzubilden, musste ich festlegen können, wie das Menü-Modul die Zwischen-Templates einfügt, wenn weitere Kindelemente kommen. Also vereinfacht gesagt, es muss ein Unter-<ul> geöffnet werden, bevor das vorhergehende mit </li> beendet wird. Bisher konnte man das nicht bestimmen, jetzt gibt es eine Option afterchild. Außerdem wollte ich, dass zusätzlich ein Untermenü links erscheint, aber nur wenn es gebraucht wird. Weil es schöner aussieht, wenn ein wenig "Eye-Candy" herum ist, das aber auch nur angezeigt werden soll, wenn auch ein Menü kommt (eine leere Box ist einfach unschön), habe ich die Vorlagen before und after eingeführt. Also komplett z.B. menu/before_1. Gerade bei der aftter-Vorlage spielt dann auch wieder das afterchild eine Rolle. Weil ich nun einerseits das Hauptmenü habe, dann das Untermenü und beide mit verschiedenen Vorlagen auskommen sollen, habe ich gleich noch den Parameter template=xxx eingefügt, mit dem dann die Vorlagen bestimmt werden. Also wird z.B. statt menu/button_1 dann menu/xxx/button_1 genommen. Und zu guter Letzt habe ich auch noch die Parameter ifnotexist, all und switch in die Parameterliste genommen. Bisher mussten die in der menu.ini angegeben werden, jetzt geht es auch einfach als Parameter. Die Konfiguration in den Tools habe ich dafür entfernt. Ich glaube so wirklich benutzt hat das doch niemand, oder? Ich bin generell am Aufräumen und versuche unnötige Dinge zu entfernen. Beispielsweise wird das News-Modul nicht mehr dabei sein. Das kann man mit anderen Mitteln besser lösen. Keine Angst, wer etwas einsetzt, kann das schon weiter machen. Ich nutze es ja selbst auch in vielen Projekten. Aber wer neu beginnt, sollte es dann eben gleich mit Bordmitteln lösen. Das wird im "Auslieferungszustand" auch gleich eingerichtet sein. Langer Rede, kurzer Sinn: Das menu.prg hat doch einige Änderungen erfahren. Ich bräuchte mutige Tester, die einfach mal die bestehende menu.prg im custprg-Verzeichnis gegen die neue ersetzten und mir sagen, falls das Menü dann nicht mehr funktioniert wie es sollte. Die alte menu.prg bitte als Kopie behalten, damit diese bei Problemen sofort wieder eingesetzt werden kann. Download menu.prg als ZIP hier. PS: Es sieht derzeit ganz gut aus, dass ich den Quellcode komplett und kompilierfähig veröffentlichen kann. Also auch die Teile, bei denen die Rechte bei der tdb GmbH liegen sollen wieder unter GPL veröffentlicht werden (war bis 16.8.08 schon mal unter GPL). Ich bin mir noch nicht ganz sicher, wie ich das machen soll (ZIP, SVN, GIT). Vielleicht hat ja jemand Vorschläge oder Wünsche? Dieser Artikel wurde veröffentlicht am 18.05.2010 um 21:08 Uhr. Ein Kommentar. Design für ewm5 Hier eine kleine Vorschau für das Standard-Design, das in Zukunft eforia web manager 5 direkt nach der Installation haben wird.  Neben der Farbe Blau gibt es 4 weitere Farbvarianten.     Dieser Artikel wurde veröffentlicht am 11.05.2010 um 10:52 Uhr. 2 Kommentare. Javascript Scrolltext Meine kleinen Javascript-Tipps scheinen gut anzukommen. Deswegen mache ich gleich weiter. Heute ein simpler Scrolltext. Als eforia Vorlage ist dieser einfach zu benutzen. Wir brauchen dazu eine Vorlage, die so aussehen könnte: scrolltext <div onclick="window.location.href='{param2}';" class="zweispaltig" style="width:450px;cursor:pointer;padding:0;font-size:24px;font-weight:bold;height:32px;color:#52668C;padding-top:7px;background-color:#CF6C3A;overflow:hidden;"> <span id="scroller" style="position:relative;left:450px;"><nobr>{param1} {param1} {param1} </nobr></span> </div> <script> var x=0; var nwidth=0; nwidth=document.getElementById("scroller").offsetWidth; nwidth=nwidth/3; function movescroller(){ x--; document.getElementById("scroller").style.left=x+'px'; if(x<=(-1*nwidth)){ x=0; } }; window.setInterval('movescroller()', 10); </script> Benutzt wird diese dann, einfach so: {template="scrolltext" param1="eforia ist das beste Web Content Management System 8-)" param2="http://www.eforia.de"} Aussehen tut das dann so: Die Breite ist dabei leicht anpassbar, ebenso die Gestaltung. Das ist einfach im Div-Container. Wer keinen anklickbaren Link benötigt, kann das onclick-Event weg lassen. Damit es gut aussieht, sollte der enthaltene Text länger sein, als der Container breit ist. Das <nobr> ist nicht wirklich schön und dient eher der Sicherheit. Man weiß ja nie, was die verschiedenen Browser so darstellen. Ich gebe zu, meine langjährigen Erfahrungen als Demo-Programmierer sind ganz hilfreich für solche Hacks. 8-) Ich würde mich über Feedback freuen. Wenn es gefällt, kann ich gerne öfter kleine Tipps geben. Beispielsweise hätte ich eine Lösung hier, wie man ganz einfach ein wenig Twitter über deren API anzapft. Das geht verblüffend einfach. Dieser Artikel wurde veröffentlicht am 09.03.2010 um 10:36 Uhr. Noch kein Kommentar. DropDown-Menü mit Javascript supereinfach Nachdem der Praxistipp von letzter Woche so gut angekommen ist, hier gleich nochmal etwas aus der Praxis. Diesmal aber vollkommen unabhängig von eforia. Es handelt sich schlicht um ein minimalistisches DropDown-Menü. Minimalistisch bezieht sich dabei auf die verwendete Technik. Es sind nämlich nur 2 Inline-Javascript-Funktionen, die notwendig sind. Beispiel: Es wird einfach ein Div dargestellt, dessen Höhe beschnitten ist. Erst ein onmouseover macht den verdeckten Teil sichtbar. Ultrasimpel und effektiv. Durch Verwendung von Hintergrundgrafiken im Div kann man auch leicht einen grafischen Button erzeugen. Besonders wenn man etwas schöner gestaltet und ein Padding nutzt, ist das oft einfacher als eine Grafik im Inhalt. In der obigen Variante verschiebt sich der folgende Inhalt nach hinten. Das kann man leicht ändern, indem man dem div ein position:relative verpasst. Ebenso könnte man die Höhe so groß setzen, dass sofort alles sichtbar ist und erst mit einer zusätzlichen Script-Anweisung die Höhe beschränken. Dann wäre der Inhalt auch bei abgeschalteten Javascript verfügbar. Hier der Code für das Beispiel: <div onmouseover="document.getElementById('easydropdown').style.height='80px';" onmouseout="document.getElementById('easydropdown').style.height='30px';" id="easydropdown" style="height:30px;width:120px;background:url(/gfx/eforia-revolution-cup-33x30.jpg) no-repeat;background-position:top left;padding:0;overflow:hidden;border:1px dashed #cccccc;"> <img src="../sysimg/spacer.gif" width="40" height="30" align="left">Hover mich<br /><br /> <a href="{link="/eforia® web manager"}">Startseite</a><br /> <a href="{link="/eforia® web manager/Blog"}">Blog</a><br /> <a href="{link="/eforia® web manager/Download"}">Download</a><br /> </div> Mir ist bekannt, dass man sowas viel toller und besser machen kann. Auch mit vielen Javascript-Frameworks. Aber es geht eben auch ganz einfach. Und einfach finde ich immer besser. Ich habe nämlich wenig Lust, bei jeder Neuerscheinung eines Browsers alle alten Projekte nochmal anpassen zu müssen. Ich will hier keine Namen nennen, aber mit einigen Javascript-Frameworks ist (bzw. wäre) das notwendig. Dieser Artikel wurde veröffentlicht am 22.02.2010 um 10:58 Uhr. Noch kein Kommentar. Dateien tabellarisch ausgeben Am Freitag habe ich versprochen, ich verrate, wozu man das neue Tag table nutzen kann. Wozu braucht man die interne Tabellennummer einer Datenbank? Zum Zugriff auf diese natürlich. Nun muss ich zugeben, dass man das durchaus auch mit Bordmitteln hätte lösen können, aber wenn man auf eine Tabelle zugreifen möchte, von der man nicht weiß, ob sie bereits geöffnet ist, ist das etwas Aufwand. Das table-Tag macht das schlicht einfacher. Ein Beispiel: Angenommen ich habe bei eforia einige Dateien, die ich direkt als Tabelle zum Download anbieten möchte. Mit einem kleinen Script ist das schnell erledigt. Dieses Beispiel greift hier auf die Echtdaten zu. Ich gebe alle Dateien aus, die in eforia mit "presse/" gespeichert sind. Das Resultat sieht so aus:
Und der Code dafür ist: <table width="100%"> <tr> <td><b>Datum</b></td> <td><b>Name</b></td> <td><b>Download</b></td> </tr> {execprog} var fhAusgabe,nEL,nEL2 : integer var db,nRec : integer var cELFiles : string[99999,1] var cTemp : string setpara('ec 0') fhAusgabe:=Rewrite('ramtext:out',0) db:={[9]table:cms_files} Access(db,'cms_files.id') nEL:=0 nRec:=FindRec(db,'presse/','cms_files.id') While nRec>0 Do ReadRec(db,nRec) If GetField(db,'Name') like 'presse/*' then cELFiles[nEL,0]:=GetField(db,'Name') cELFiles[nEL,1]:=GetField(db,'Dateidatum') nEL++ nRec:=NextRec(db) Else nRec:=0 End End StrSort(cELFiles,nEL-1,0,'0') nEL2:=0 while nEL2<nEL do writeln(fhAusgabe,'<tr>') writeln(fhAusgabe,'<td>'+cELFiles[nEL2,1]+'</td>') cTemp:=cELFiles[nEL2,0] cTemp:=cTemp[length('presse/')+1,255] writeln(fhAusgabe,'<td>'+tohtml(cTemp)+'</td>') writeln(fhAusgabe,'<td><a href="{[4]file="'+cELFiles[nEL2,0]+'"}" target="_blank">Download</a></td>') writeln(fhAusgabe,'</tr>') nEL2++ end setpara('ec 1') close(fhAusgabe) {/execprog} </table> Wie man sieht, öffne ich die Tabelle noch ganz einfach in Standard-HTML-Code. Nur die Zeilen werden dann per Execprog-Script eingefügt. Die Datenbank wird mit {table:cms_files} abgefragt. Die Ermittlung der Datensätze und die Ausgabe sind 2 Schleifen. Das hat einfach den Sinn, dass man dazwischen noch beliebig sortieren kann. Selbstverständlich könnte man dafür auch ein eigenes Modul machen. In der Praxis ist aber jede Ausgabe immer wieder ein wenig anders. Da ist es schön einfach das kleine Code-Schnippsel schnell und direkt anpassen zu können. Dieser Artikel wurde veröffentlicht am 15.02.2010 um 09:52 Uhr. Noch kein Kommentar. Update Nachtrag Heute gab es noch einen kleinen Nachschlag zum gestrigen Update. Ein neuer Mailman nutzt die Änderungen, die auch schon im Newsletter gemacht wurden. Außerdem wurde der Linkchecker leicht geändert. Dieser nutzt bei Https-Verbindungen wget als Fallback. Dafür ist nun ein geringerer Timeout angegeben und die Anzahl Wiederholungen heruntergeregelt. Bisher konnte es in Einzelfällen einfach ganz schön lange dauern, bis die Nichtereichbarkeit einer Adresse festgestellt wurde. Dieser Artikel wurde veröffentlicht am 13.02.2010 um 15:32 Uhr. Noch kein Kommentar. Update Newsletter Es gibt wieder mal ein kleines Update für ewm5. Die Änderungen sind eher intern. Die Routine, welche den Newsletter codiert wurde ganz leicht geändert um ein Spam-Signal zu umgehen. D.h. die Wahrscheinlichkeit, dass ein verschickter Newsletter als Spam eingestuft wird, ist einfach etwas geringer. Wer es genauer wissen will, darf mich gerne fragen. Außerdem gibt es einen neuen Tag {table:tabellenname}. Dieser fügt schlicht die Tabellennummer der angegebenen Datenbank-Tabelle ein. Wozu das gut sein soll, verrate ich am Montag. 8-) Dieser Artikel wurde veröffentlicht am 12.02.2010 um 13:49 Uhr. Noch kein Kommentar. Neuer Scheduler Ich habe soeben ein kleines Update abgestellt, was nur einen neuen Scheduler enthält. Dieser hat auch nur eine kleine neue Funktion. Falls er gestartet wird, prüft er, wann der letzte Lauf beendet wurde. Ist das weniger als 5 Sekunden her, bricht er sofort wieder ab. Was für einen Sinn hat das? Angenommen der Scheduler wird per Cron jede Minute aufgerufen. Ein Lauf benötigt aber mehr als eine Minute. Cron queued nun die Aufrufe, was zu einer endlosen Schlange heranwachsen kann und die Serverlast unnötig erhöht. Mit der 5 Sekunden Zwangspause kann das nicht mehr auftreten. Ein Problem dürfte das nur in den wenigsten Fällen sein. Aber die neueste Funktion zum automatischen prüfen von ausgehenden Links muss beispielsweise immer auf Antwort vom anderen Server warten. Da kann sich die Laufzeit schon mal erhöhen. Deswegen das kleine Sicherheitsfeature, damit der Server nicht unnötig belastet wird. Dieser Artikel wurde veröffentlicht am 30.11.2009 um 16:09 Uhr. Noch kein Kommentar. Kleines Update Wieder mal gibt es ein Mini-Update für die 5er Version.
Dieser Artikel wurde veröffentlicht am 27.11.2009 um 10:10 Uhr. Noch kein Kommentar. Zeige 11 - 20 von 102
|
 |
Hier bloggt Horst Klier mit und über eforia web manager und was dazugehört (HTML, Javascript, Internet, Webdesign, Such- maschinenoptimierung, usw.).
>> Zur Blog Startseite  RSS-Feedabonnieren Übersicht über alle Beiträge |
|||||||||||||||||||||||||
| eforia® ist ein eingetragenes Markenzeichen. Alle anderen Marken und Markenzeichen gehören Ihren jeweiligen Besitzern. Letzte Aktualisierung dieser Seite: 20.04.2024 / 09:20:26 | |||||||||||||||||||||||||||
Blog
Hover mich
