Blog



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:
  • ifnotexist
    Gibt Punkte in der Defaultsprache aus, wenn er in der aktuellen nicht existiert

  • all
    Blättert das komplette Menü auf, nicht nur den Pfad zum aktuellen Punkt

  • pathactive
    Stellt alle Punkte zum aktuellen als Aktiv dar
Beispiel für die Benutzung: {execmacro="tree" param="template=mainmenu;all;"}

Die Vorlagen enthalten dann schlicht den HTML-Code mit ein paar Platzhaltern, die Schleifen darstellen. Hier einfach 3 Beispiele:
Beispiel 1:
<ul>
{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>
Gibt beim Aufruf mit Parameter all den kompletten Baum in einer HTML-UL-Liste aus.

Beispiel 2:
{loop_level_1}
  {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}
Gibt ein Untermenü ab Ebene 2 aus. Darstellung recht einfach als Links.

Beispiel 3:
{[8]if="{[9]level}#0"}
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}
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.

Neben den Platzhaltern, die man in den Beispielen sieht, gibt es noch diese:
  • Zwischen {ifnotactitem_level_X} und {/ifnotactitem_level_X} bleibt nur etwas übrig, wenn der aktuelle Punkt NICHT aktiv ist.
  • Was zwischen {ifnotlast_level_X}  und {\ifnotlast_level_X}steht wird nur ausgegeben, wenn der aktuelle Punkt nicht der letzte ist.
Ansonsten sind die gleichen Platzhalter für die eigentlichen Punkte möglich, wie beim menu.prg. Also:
  • {name}
  • {date}
  • {description}
  • {keywords}
  • {title}
  • {link}
{counter} zählt dann noch die Schleife mit. Damit kann man dann sehr spezielle Lösungen machen, z.B. besondere Trennlinien zwischen Menü-Hälften, andere Farben für jeden Punkt usw..

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:
  • {systemname}
  • {systemurl}
  • {systemadminname}
  • {systemadminmail}
  • {systemsendermail}
Die jeweils einfach den Wert ausgeben, der in der eforia.ini entsprechend hinterlegt ist.  Der Sinn des Ganzen ist, nur an einer Stelle die URL des Systems, den Namen und solche Angaben ändern zu müssen. Das ist bei der Ersteinrichtung eine Hilfe. Diese Platzhalter können auch in allen Mailvorlagen benutzt werden.

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 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:
eforia ist das beste Web Content Management System 8-) eforia ist das beste Web Content Management System 8-) eforia ist das beste Web Content Management System 8-)

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:

Hover mich

Startseite
Blog
Download


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:

Datum Name Download
08.08.2005 ewm_box.zip Download
08.05.2003 ewm_logo.zip Download
17.11.2005 halloween Download
21.03.2006 ostern Download
08.08.2005 screenshots.zip Download
17.11.2005 xmas Download


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.

Gewinnspiel: Startup-Checklisten

Es ist Weihnachten. Da kommt es gerade richtig, ein kleines Geschenk zu verlosen. eforia hat im Sack eine Lizenz der Startup-Checklisten von Tobias Knoof. Dabei handelt es sich um eine Informationssammlung rund ums Info-Marketing-Business. 

Info Marketing?

Einfach ausgedrückt erstellen Info-Marketer elektronische Bücher und verkaufen diese im Internet.

Die Startup-Checklisten enthalten nun viel Grundlagenwissen, was man genau dafür benötigt. Aber auch wer nicht unbedingt dieses Geschäftsmodell verfolgt, findet wertvolle Informationen. Gerade was das Online-Marketing angeht, habe ich den Eindruck, die Info-Marketer sind dem Rest der Branche immer eine Nasenlänge voraus. Wer sich also ernsthaft mit Online-Marketing befasst, der kommt an dieser "Szene" kaum vorbei. Für Werbe- und Web-Agenturen ergibt sich dadurch ein echter Vorsprung.

Die Startup-Checklisten sind ein hervorragender Einstieg. Ich muss Tobias Knoof neidlos zugestehen, dass seine Startup-Checklisten viele Informationen enthalten, die auch für mich neu waren. Besonders in den Linksammlungen habe ich manchen Schatz entdeckt. Die professionelle Aufmachung tut ein übriges.

Gewinnspiel

Weil ich eine Lizenz übrig habe, verlose ich diese. Zur Teilnahme einfach einen beliebigen Kommentar auf diesen Beitrag schreiben. Der Rechtsweg ist ausgeschlossen. Unter allen Teilnehmern bis zum Jahresende (31.12. 23:59 Uhr) verlose ich die Lizenz.

PS: Hier klicken für nähere Informationen zu den Startup-Checklisten.

Fröhliche Weihnachten und viel Glück wünschen eforia und Horst Klier




Dieser Artikel wurde veröffentlicht am 23.12.2009 um 13:13 Uhr. 3 Kommentare.

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.
Zeige 11 - 20 von 104
Anfang Zurück Vorwärts Ende


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-Feed
abonnieren


Übersicht über alle Beiträge



eforia® ist ein eingetragenes Markenzeichen.
Alle anderen Marken und Markenzeichen gehören Ihren jeweiligen Besitzern.
Letzte Aktualisierung dieser Seite: 11.12.2018 / 16:31:59
Suche  
Login / Userdaten
Impressum/Datenschutz