LoxBerry HTML Template System

Einklappen
X
 
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
  • Christian Fenzl
    Lebende Foren Legende
    • 31.08.2015
    • 11249

    #16
    Hab noch weiter gelesen - HTML-encode, URL-encode, JS-encode ist alles dabei. Das Loopen dürfte da auch recht cool sein. Man muss nicht so wilde Konstruktionen wie da oben bauen.
    Wir müssen halt selbst ein paar gute Copy-Paste Beispiele haben.
    Hilfe für die Menschen der Ukraine: https://www.loxforum.com/forum/proje...Cr-die-ukraine

    Kommentar

    • Prof.Mobilux
      Supermoderator
      • 25.08.2015
      • 4988

      #17
      Ich hatte an soetwas gedacht:

      Perl:
      Code:
      $template->param(EMPLOYEE_INFO => [{name => 'Sam', id => '1'}, {name => 'Steve', id => '2'}]);
      $template->param(SELECTED => "1")
      print $template->output();
      Template:
      Code:
      <TMPL_LOOP NAME=EMPLOYEE_INFO>
            <option value="<TMPL_VAR NAME=ID>" <TMPL_IF SELECTED=ID>selected=selected</TMPL_IF>><TMPL_VAR NAME=NAME></option>
      </TMPL_LOOP>
      Das würde ich gar nicht so kompliziert finden - zumindest einfacher als ich das heute mit <!--$selected1-->, <!--$selected2-->, <!--$selected3--> usw. mache. Ich bin mir nur nicht sicher ob das so funktioniert. In der Doku steht nicht explizit, dass man bei TMPL_IF auch gegen eine andere TMPL-Variable vergleichen kann. Dort wird immer nur gegen einen fixen String verglichen. Müsste man mal ausprobieren.

      Der Vorteil wäre, dass ich beim Zusammenbauen der <option>-Blöcke die HTML-Syntax selbst festlegen kann. Wenn ich das in einem Modul zusammenbaue, muss ich die Systax nehmen, die das Modul ausspuckt. Da bin ich mir nicht sicher, ob das immer so passen wird. Insbesondere auch, weil wir ja JQUERY Mobile verwenden und es da schon einige Möglichkeiten gibt die Listen anzupassen.

      Auch das Erstellen von Tabellen wird erheblich einfacher - da nutze ich heute 3 Templates: Start, Row, End. Das geht viel einfacher und es scheint nach einem Tutorial auch noch zusätzliche Variablen in Loop (First, Last, Inner, Odd) zugeben:

      Code:
      <table>
      <TMPL_LOOP NAME=ROWS>
         <tr>
         <TMPL_IF NAME="__FIRST__">
            <th>the first is usually a header</th>
         </TMPL_IF>
         <TMPL_IF NAME="__ODD__">
            <td style="background: red">odd rows are red</td>
         <TMPL_ELSE>
            <td style="background: blue">even rows are blue</td>
         </TMPL_IF>
         <TMPL_IF NAME="__LAST__">
            <TD>you have no chance to survive so choose</td>
         </TMPL_IF>
         </tr>
      </TMPL_LOOP>
      </table>
      Zuletzt geändert von Prof.Mobilux; 02.02.2017, 05:06.
      🇺🇦 Hilfe für die Menschen der Ukraine: https://www.loxforum.com/forum/proje...Cr-die-ukraine


      LoxBerry - Beyond the Limits

      Kommentar

      • Prof.Mobilux
        Supermoderator
        • 25.08.2015
        • 4988

        #18
        Habe nochmal etwas gegoogelt. Wie es auf jeden Fall gehen sollte ist so (aber nicht ganz so elegant wie ich finde):

        Perl:
        Code:
        $template->param(EMPLOYEE_INFO => [{name => 'Sam', id => '1', , selected => '1'}, {name => 'Steve', id => '2', selected => '0'}]);
        $template->param(SELECTED => "1")
        print $template->output();
        Den selected-Key müsste man in irgendeiner Schleife setzen, aber den Hash wird man ja sowieso per Schleife zusammenbauen. Somit sollte das kein Problem sein.

        Template:
        Code:
        <TMPL_LOOP NAME=EMPLOYEE_INFO>
              <option value="<TMPL_VAR NAME=ID>" <TMPL_IF SELECTED>selected=selected</TMPL_IF>><TMPL_VAR NAME=NAME></option>
        </TMPL_LOOP>
        Finde es aber immer noch besser als das, was wir haben :-)
        🇺🇦 Hilfe für die Menschen der Ukraine: https://www.loxforum.com/forum/proje...Cr-die-ukraine


        LoxBerry - Beyond the Limits

        Kommentar


        • svethi
          svethi kommentierte
          Kommentar bearbeiten
          Ja, es müsste in jede Arrayzeile auch selected mit rein und dann das if. Wie in Deinem 2. Vorschlag.
          Ich weiß nur nicht wieso Du das so kompliziert mit selected1 selected2 etc machst. Wie machst Du dass, wenn Du gar nicht weißt wie viel options es gibt? Deshalb baue ich mir die komplette "optionsliste" ja komplett in eine Variable zusammen und brauch im Template nur eine Variable einsetzen. Egal wieviele Options es gibt.

        • Christian Fenzl
          Christian Fenzl kommentierte
          Kommentar bearbeiten
          Es geht halt viel Sinn von einem Templatesystem verloren, wenn ganze HTML-Strukturen (z.B. Tabelle) im Code erzeugt werden.
          Ich mach das derzeit auch, aber es ist einfach grauslich, das HTML mit Variablen zusammenzuflicken.

        • svethi
          svethi kommentierte
          Kommentar bearbeiten
          Ja, da ist die Trennung nicht mehr so gegeben, doch es ging ja eher darum die Hemmschwelle anderer zu senken und mal ehrlich, wenn ich mir das ansehe, dass da jetzt im Template eine Schleife eingebaut werden muss mit wieder anderem Syntax und per IF Konstrukten auch noch Entscheidungen eingebaut werden müssen und dann zusätzlich auch noch wieder im Code weitere Schleifen sein müssen, die die Arrays zusammenbauen und dann an das Template überbegen werden müssen, dann sieht das für mich eher nach einer höheren Hemmschwelle aus.
          Das müsste man dann in eigenen Modulen/Funktionen kapseln, damit der User da gar nichts zu tun hat.
      • Christian Fenzl
        Lebende Foren Legende
        • 31.08.2015
        • 11249

        #19
        Da hab ich grad noch was gesehen:
        http://search.cpan.org/~tinita/HTML-...te/Compiled.pm
        und
        http://search.cpan.org/~tinita/HTML-...n/HTML_Tags.pm

        Das Compiled ist eine Erweiterung von HTML::Template.
        Was mir daran gefällt sind die lesbareren Tags:
        HTML-Code:
           <%IF blah%>  <%= VARIABLE%>  <%/IF%>
        und HTML_Tags macht eigentlich genau das, was wir suchen:
        HTML-Code:
        <select name="foo">
          [%html_option_loop arrayref%]
             <option value="[%= value%]" [%= selected%] >[%= label %]</option>
          [%/html_option_loop%]
        </select>
        
        $htc->param(
           arrayref => [ 'opt_2',
          ['opt_1', 'option 1'], # or use simple scalars if values and labals are equal
          ['opt_2', 'option 2'],         ],     );
        Die erste Option (oder Liste wenn multiple) sind die Selected-Einträge, direkt mit dem Namen (den man normalerweise vom Formular auch hereinbekommt).

        HTML-Code:
          Output:
        <select name="foo">
            <option value="opt_1" >option 1</option>
            <option value="opt_2" selected="selected">option 2</option>
        </select>
        Das kann auch mit Checkboxen (HTML_BOX_LOOP) und sogar eine ganze Tabelle (HTML_TABLE) zusammenbauen.
        Zuletzt geändert von Christian Fenzl; 02.02.2017, 07:04.
        Hilfe für die Menschen der Ukraine: https://www.loxforum.com/forum/proje...Cr-die-ukraine

        Kommentar

        • Christian Fenzl
          Lebende Foren Legende
          • 31.08.2015
          • 11249

          #20
          PS: Bei HTML::Template::Compiled gibt's wieder associate (das Vorbefüllen aus param-Variablen) nicht. Mannomann...
          Hilfe für die Menschen der Ukraine: https://www.loxforum.com/forum/proje...Cr-die-ukraine

          Kommentar

          • Prof.Mobilux
            Supermoderator
            • 25.08.2015
            • 4988

            #21
            Bzgl. svethi Kommentar oben, dass alles noch komplizierter wird: Ich finde er hat schon recht Wir müssen aufpassen, dass wir uns nicht verrennen... Nichts desto trotz ist das für mich ja alles kein MUSS. Es kann jeder auch ein anderes Templatesystem verwenden oder sich sein eigenes bauen oder oder oder. Für mich geht es eher darum eine Empfehlung auszusprechen, wie es möglichst einfach geht.

            Aber ehrlich gesagt: Ja, bei meinem Beispiel ist eine kleine Schleife im Template, aber das ist ein 3-Zeiler! Und er ist identisch,. ob ich nun PHP nehme oder Perl! Und in Kombination mit einem Modul-Aufruf wird es in meinen Augen richtig einfach - und das bei voller Felxibilität was den HTML-Code angeht. Und nochmal: Man kann es doch mit HTML::Template auch genauso machen, wie svethi es im Moment macht.

            Wenn ich mein Beispiel von oben bzgl. des Modul-Aufrufs erweitere, dann sieht das so aus:

            Perl:
            Code:
            # Aus dem Formular
            my $sel_ms = param("miniserverid");
            
            # Der Aufruf gibt die Liste analog http://www.loxwiki.eu/pages/viewpage.action?pageId=13307076 zurück, plus eine letzte Zeile: selected mit 1 oder 0
            my %miniservers = LoxBerry::System::get_miniservers("$sel_ms");
            
            # Jetzt das Template bauen
            $template->param(MINISERVER_INFO => \@miniservers;
            print $template->output();
            Das Template als 3-Zeiler:

            Code:
            <TMPL_LOOP NAME=MINISERVER_INFO>
                  <option value="<TMPL_VAR NAME=NUMBER>" <TMPL_IF SELECTED>selected=selected</TMPL_IF>><TMPL_VAR NAME=NAME></option>
            </TMPL_LOOP>
            Und wenn man das nicht will/kapiert, dann baut man es eben so wie svethi :

            Perl:
            Code:
            # Aus dem Formular
            my $sel_ms = param("miniserverid");
            
            # Der Aufruf gibt die Liste analog http://www.loxwiki.eu/pages/viewpage.action?pageId=13307076 zurück, plus eine letzte Zeile: selected mit 1 oder 0
            my %miniservers = LoxBerry::System::get_miniservers("$sel_ms");
            
            # Jetzt das Template bauen
            foreach (@miniservers) {
            # Und hier baue ich mir die options-Liste selbst zusammen. Mit if $sel_ms eq $id then "selected=selected" oder so ähnlich.
            # Alles in eine Variable mit $optionslist
            }
            $template->param(OPTIONSLIST => $optionslist);
            print $template->output();
            Template:
            Code:
            <TMPL_VAR NAME=OPTIONSLIST>
            Zuletzt geändert von Prof.Mobilux; 02.02.2017, 18:11.
            🇺🇦 Hilfe für die Menschen der Ukraine: https://www.loxforum.com/forum/proje...Cr-die-ukraine


            LoxBerry - Beyond the Limits

            Kommentar

            • Christian Fenzl
              Lebende Foren Legende
              • 31.08.2015
              • 11249

              #22
              Das "option selected Problem" habe ich gerade bei einer Erweiterung des Squeezelite-Plugins höchst trivial gelöst. Dass wir da nicht früher draufgekommen sind:

              HTML-Code:
              <select name="gpiolevel" id="gpiolevel">
                     <option value="1">High</option>
                     <option value="2">Low</option>
              </select>
              <script>
              $( "#gpiolevel").val( "' . $valuestring. '" );
              </script>
              $valuestring ist dabei "High" oder "Low". Das setzt die Selection auf die Zeile mit dem Wert. Geht auch für Checkboxen und Auswahllisten, auch Mehrfachauswahl. In den Scriptteil brauche ich aus der Variable nur den Wert hineinparsen, der gesetzt werden soll.
              Zuletzt geändert von Christian Fenzl; 08.02.2017, 00:05.
              Hilfe für die Menschen der Ukraine: https://www.loxforum.com/forum/proje...Cr-die-ukraine

              Kommentar

              • Prof.Mobilux
                Supermoderator
                • 25.08.2015
                • 4988

                #23
                Hallo Christian Fenzl !

                Genial einfach! Wie cooooool!!!

                Bei mir geht es allerdings nur, wenn ich value angebe, also nicht "High" oder "Low", sondern "0" oder "1".

                Code:
                <select name="gpiolevel" id="gpiolevel">
                       <option value="1">High</option>
                       <option value="2">Low</option>
                </select>
                <script>
                $( "#gpiolevel").val( "1" );
                </script>
                Zuletzt geändert von Prof.Mobilux; 19.02.2017, 12:50.
                🇺🇦 Hilfe für die Menschen der Ukraine: https://www.loxforum.com/forum/proje...Cr-die-ukraine


                LoxBerry - Beyond the Limits

                Kommentar


                • svethi
                  svethi kommentierte
                  Kommentar bearbeiten
                  Das geht aber nur beim Laden der Seite so einfach. Ist die Seite geladen, musst Du bei den meisten Änderungen das Control refreshen, damit das dann auch angezeigt wird. Habe da in meinen Plugins auch einiges mit jquery/AJAX/JavaScript gemacht. Sonst mal reinsehen. Das Meiste wohl im Fritz.Lox

                • Christian Fenzl
                  Christian Fenzl kommentierte
                  Kommentar bearbeiten
                  Prof.Mobilux Du hast Recht - wahrscheinlich funktioniert beides? mit dem value ist es es noch schöner.

                • Prof.Mobilux
                  Prof.Mobilux kommentierte
                  Kommentar bearbeiten
                  Christian Fenzl Bei mir ging nicht beides!
              • Christian Fenzl
                Lebende Foren Legende
                • 31.08.2015
                • 11249

                #24
                Das Template-System in LoxBerry 0.3.x:


                Und als Proof-of-Concept habe ich das Network-UI Modul damit ver-templatet (https://github.com/mschlenstedt/Loxb...aa0a24bbc70460)

                Könnt ihr da mal einen Blick drüber werfen, ob das (z.B. auch von der Verzeichnisstruktur) so annehmbar ist.

                im Prinzip:
                Alle Languages kommen in lang
                Alle Hilfefiles kommen in help
                Alles andere kommt ins root (von Plugin oder System-Modul)

                lg, Christian
                Hilfe für die Menschen der Ukraine: https://www.loxforum.com/forum/proje...Cr-die-ukraine

                Kommentar

                • svethi
                  Lebende Foren Legende
                  • 25.08.2015
                  • 6342

                  #25
                  Ihr seid so aktiv. Zur Zeit komme ich echt zu nichts und würde aber auch gern mal wieder basteln.
                  Miniserver; KNX; Vitogate; EnOcean (EnOceanPi); Loxone Air; Caldav-Kalenderanbindung; RaspberryPi und für keine Frickellösung zu schade :-)

                  Kommentar

                  • Christian Fenzl
                    Lebende Foren Legende
                    • 31.08.2015
                    • 11249

                    #26
                    Es ist doch Winter? Die Heizungen, die du noch nicht fertig hast, da isses eh schon zu spät *gg*
                    Hilfe für die Menschen der Ukraine: https://www.loxforum.com/forum/proje...Cr-die-ukraine

                    Kommentar


                    • svethi
                      svethi kommentierte
                      Kommentar bearbeiten
                      :-)
                  • Christian Fenzl
                    Lebende Foren Legende
                    • 31.08.2015
                    • 11249

                    #27
                    svethi Du bist eh Bash- und Regex-Spezialist, wennst was Schnelles zum Grübeln brauchst:

                    Code:
                    LBHOMEDIR=/opt/loxberry
                    sed -i "/PERL5LIB SetEnv/s/.*/PERL5LIB SetEnv $LBHOMEDIR/libs/perllib/" 000-default.conf
                    sed: -e expression #1, char 42: unknown option to `s'
                    000-default.conf ist das da https://github.com/mschlenstedt/Loxb...0-default.conf

                    Das soll nach PERL5LIB SetEnv suchen und durch PERL5LIB SetEnv $LBHOMEDIR/libs/perllib ersetzt werden und funktioniert dann, wenn keine Leerzeichen in den Strings, und keine Slashes in den Pfaden sind. $LBHOMEDIR soll im Command aufgelöst werden.
                    Ich hab keine Geduld mehr und Regex war nie mein Freund :-)

                    lg, Christian
                    Hilfe für die Menschen der Ukraine: https://www.loxforum.com/forum/proje...Cr-die-ukraine

                    Kommentar


                    • svethi
                      svethi kommentierte
                      Kommentar bearbeiten
                      Regex rules ;-)
                      CalDav4Lox wäre viel mehr Code ohne Regex ;-)

                    • svethi
                      svethi kommentierte
                      Kommentar bearbeiten
                      Bist Du sicher, dass das PERL5LIB SetEnv heißt und nicht SetEnv PERL5LIB?

                    • Christian Fenzl
                      Christian Fenzl kommentierte
                      Kommentar bearbeiten
                      Logisch, das ist verkehrt rum! Im Originalcode ist’s richtig.
                  • Christian Fenzl
                    Lebende Foren Legende
                    • 31.08.2015
                    • 11249

                    #28
                    Prof.Mobilux Hattest du Gelegenheit, mal auf das network_LB30.cgi einen Blick zu werfen?
                    Ist das etwa so, wie du dir das vorgestellt hast?

                    Wenn das in etwa hinkommt, würde ich das noch so - wie schon vorgeschlagen - umbauen, dass der HTML-Head, die jQuery Pages und der Footer extra ausgegeben werden (müssen), sodass man in einem Template mehrere Pages verwenden kann.
                    Bei der Hilfe würde ich noch eine Kleinigkeit ändern, nämlich dass die Hilfe-Übersetzungen (die heißen derzeit lang/network.ini) nachher lang/help_network.ini) heißen, damit man die Hilfe-Übersetzung leichter von der normalen Übersetzung unterscheiden kann.

                    Und was dann wirklich für alle Plugin-Entwickler cool werden wird: Ich werde loxberry_web.php bauen mit einem cachenden Perl-Template-Wrapper, sodass die gleichen HTML::Template Files in PHP eingebunden werden können. Ich glaube, dann sollten alle PHP-Entwickler happy sein, weil die kommenden Features mit Menüband, Pages usw. direkt auch in PHP verwendet werden können.

                    Für LB 0.2.3 Plugins bleibt weiterhin alles gleich, da muss nichts geändert werden.
                    Hilfe für die Menschen der Ukraine: https://www.loxforum.com/forum/proje...Cr-die-ukraine

                    Kommentar

                    • svethi
                      Lebende Foren Legende
                      • 25.08.2015
                      • 6342

                      #29
                      Christian Fenzl ich sehe mir gleich mal Dein Problem näher an. Das ist ja eigentlich noch nicht mal regex. Wie machst Du das eigentlich? Pushst Du Deine Sachen immer gleich zu git hoch? Sollte ich also immer wenn ich was dran machen will erst einmal pullen?
                      Miniserver; KNX; Vitogate; EnOcean (EnOceanPi); Loxone Air; Caldav-Kalenderanbindung; RaspberryPi und für keine Frickellösung zu schade :-)

                      Kommentar

                      • Christian Fenzl
                        Lebende Foren Legende
                        • 31.08.2015
                        • 11249

                        #30
                        Jep, vorher pullen wäre gut. Derzeit ändert sich täglich was.

                        Ich arbeite auf meinem Dev-LB und teste alles aus, und kopiere die geänderten Sachen dann in meinen Clone, den in direkt (ohne Fork) pushe.
                        Ich schaue, dass ich meine Commits möglichst themenbezogen und klein halte (soweit das geht), damit sich eine Änderung leichter nachvollziehen (und schlimmstenfalls wieder rurückrollen) lässt.

                        Bei jedem Commit beschreibe ich so gut wie's geht, wo sich was geändert hat, oder was neu ist.
                        Wenn sich was an der Imageerstellung ändert, kommt es direkt in den Image 0.3-Artikel.
                        Wenn es eine Änderung ist, die Plugin-Entwickler und/oder Benutzer betrifft, kommt es direkt in den What's New Artikel.

                        Es gäbe da schon ein paar Sachen, wo wir Profis wie dich bräuchten!
                        Hilfe für die Menschen der Ukraine: https://www.loxforum.com/forum/proje...Cr-die-ukraine

                        Kommentar

                        Lädt...