Laden...

Konzept für HTML-Code Generierung

Erstellt von Trekki1990 vor 14 Jahren Letzter Beitrag vor 14 Jahren 2.103 Views
Trekki1990 Themenstarter:in
503 Beiträge seit 2008
vor 14 Jahren
Konzept für HTML-Code Generierung

Hallo liebe Community!

Ich schreibe derzeit an einem Tool, das mir HTML Code generieren kann.
In dem Tool gibt es verschiedene Generatoren.

Zurzeit arbeite ich an einem, dass mir Listen in HTML generiert.
Habe gestern den ganzen Abend damit verbracht verschiedene Sachen
auszuprobieren. Bin aber nicht so wirklich von meinen Lösungsansätzen
überzeugt.

Mit dem Listengenerator muss folgendes getan werden können:

  • Hauptpunkte und Unterpunkte einfügen
  • Style und Listenart muss gewählt werden können
  • die einzelnen Listenelemente formatierbar

An sich ist das kein Problem, nur ich weiß nicht wie ich am besten dynamisch
einen String zusammenbau, der dann den Code der "zusammengeklickten" Liste
enthält.

Mein erster Ansatz war ein TreeView, wo ich zur Laufzeit Nodes eingefügt, bzw.
entfernt habe.
Diese Aktionen dann in einen anständigen String zu verpacken fällt mir
eben schwer.

Zweiter Ansatz:

  • 2 Listen (1. für Hauptpunkte, 2. für Unterpunkte)

In der ersten Liste wird ein Hauptpunkt eingetragen in der Zweiten kann man
dann mehrere Unterpunkte eintragen oder auch nicht.
Ich weiß nun nicht so richtig ob es das gelbe vom Ei ist.

Wenn jemand eine Idee zur konzeptionellen Umsetzung hat, dann
bitte immer her damit!
Ich danke schonmal im Voraus, für die Verbrennung grauer Zellen!

Gruß Trekki

5.941 Beiträge seit 2005
vor 14 Jahren

Hallo Trekki1990

Für eine konzeptionelle Umsetzung - wie du schreibst - bräuchtest du ja zuerst mal ein Konzept 😉.

Wo ist den das Problem, wenn du ein TreeView nutzt?
Damit hast du doch die besten Voraussetzungen.

Gruss Peter

--
Microsoft MVP - Visual Developer ASP / ASP.NET, Switzerland 2007 - 2011

5.657 Beiträge seit 2006
vor 14 Jahren

Da du nicht im Forum Web-Technologien gepostet hast, nehme ich an, daß es sich um ein normales Windows-Programm mit einem Treeview-Control handelt?

Es sollen lediglich die Inhalte des Treeviews in eine HTML-Liste ("<ul>") umgewandelt und die HTML-Ausgabe in einem String gespeichert werden?

Wenn ich damit richtig liege, ist das Problem das Bearbeiten der TreeView-Items oder die Umwandlung in HTML? Rück mal ein paar mehr Infos raus, damit wir uns ein Bild davon machen können, was du schon hast, und woran es bis jetzt scheitert...
Christian

Weeks of programming can save you hours of planning

Trekki1990 Themenstarter:in
503 Beiträge seit 2008
vor 14 Jahren

Das TreeView war wie gesagt mein erster Ansatz.

Also das editieren des TreeViews ist kein Problem. Nodes hinzufügen,
entfernen bekomm ich hin.

Zuerst wählt man was für eine Liste erstellt werden soll, ob Aufzählung,
nummerierte usw und den Style, ob Kreis, Scheibe, Viereck usw.

Zusätzlich sollte man dann auch die Eigenschaften eines Listenpunktes
editieren können, also ob fett, kursiv, blau oder grün usw.

Hat man alle seine Eingaben gemacht, klickt man auf OK und schwupps
hat man seine schöne Liste im HTML Format vorliegen.

So und jetzt aus den ganzen Eigenschaften und dem TreeView einen String
zusammenzubauen ist der schwierige Teil für mich.

Habe es mit simpler Fallunterscheidung probiert, habe aber ziemlich schnell den
Überblick verloren.

Ich hoffe ich habe mein Problem näher erklären können.

Danke für eure Hilfe!

5.657 Beiträge seit 2006
vor 14 Jahren

Die prinzipielle Vorgehensweise ist dabei sehr einfach: Die Items des Treeviews rekursiv durchgehen und dann per StringBuilder die Listen-Einträge hinzufügen. Die Formatierung kannst du entweder per Fallunterscheidung (if/switch) hinzufügen, oder viel eleganter per CSS. Wenn du den Überblick verlierst, können wir dir kaum dabei helfen.

Weeks of programming can save you hours of planning

Trekki1990 Themenstarter:in
503 Beiträge seit 2008
vor 14 Jahren

Danke MrSparkle.

Werde ich mal diese Woche probieren, komme nicht oft dazu an meinen Projekten
zu arbeiten.

5.941 Beiträge seit 2005
vor 14 Jahren

Hallo Trekki1990

Hier mal eine exemplarische Lösung, die auch Einrückungen und Zeilenumbrüche berücksichtigt.
Es ist ja noch nicht die komplette Lösung, darum denke ich, das es legitim ist, dir das so zu zeigen 😉


using System;
using System.Text;
using System.Windows.Forms;

namespace TreeViewHtmlGeneratorTest
{
  public partial class TestForm : Form
  {
    private const int IndentSpaceCount = 4;

    public TestForm()
    {
      InitializeComponent();
      ProcessTree();
    }

    private void ProcessTree()
    {
      TreeNodeCollection nodes = treeView1.Nodes;
      StringBuilder result = new StringBuilder();

      const int startIndent = 0;

      foreach (TreeNode node in nodes)
      {
        ProcessNodesRecursive(startIndent, result, node);
      }

      textBox1.Text = result.ToString();
    }

    private void ProcessNodesRecursive(int indent, StringBuilder result, TreeNode root)
    {
      AppendListStart(result, indent);

      indent++;
      foreach (TreeNode node in root.Nodes)
      {
        AppendNodeStart(indent, result, node);

        if (node.Nodes.Count > 0)
        {
          indent++;
          ProcessNodesRecursive(indent, result, node);
        }

        AppendNodeEnd(indent, result, node);
      }
      indent--;

      AppendListEnd(result, indent);
    }

    private void AppendListStart(StringBuilder result, int indent)
    {
      result.AppendFormat("{0}<ul>", GetIndentCalculated(indent));
      result.Append(Environment.NewLine);
    }

    private void AppendListEnd(StringBuilder result, int indent)
    {
      result.AppendFormat("{0}</ul>", GetIndentCalculated(indent));
      result.Append(Environment.NewLine);
    }

    private void AppendNodeStart(int indent, StringBuilder result, TreeNode currentNode)
    {
      result.AppendFormat("{0}<li>", GetIndentCalculated(indent));
      result.Append(Environment.NewLine);

      indent++;

      result.AppendFormat("{0}{1}", GetIndentCalculated(indent), currentNode.Text);
      result.Append(Environment.NewLine);
    }

    private void AppendNodeEnd(int indent, StringBuilder result, TreeNode currentNode)
    {
      result.AppendFormat("{0}</li>", GetIndentCalculated(indent));
      result.Append(Environment.NewLine);
    }

    private string GetIndentCalculated(int indent)
    {
      return new String(' ', indent * IndentSpaceCount);
    }
  }
}

Gruss Peter

Stichwort: 44 Worte

--
Microsoft MVP - Visual Developer ASP / ASP.NET, Switzerland 2007 - 2011

6.862 Beiträge seit 2003
vor 14 Jahren

Hallo,

Also ich würde nen anderen Ansatz gehen. Zwar auch ne baumartige Struktur der Elemente für die HTML Code generiert werden soll, aber ich würde die Daten sicherlich nicht in der TreeView halten. Das ist ja ne Todsünde.

Wie gesagt, selber nen Objektbaum aufbauen, mit von mir aus ner Wurzel die die Liste als solches darstellt und dann mit Childobjekten die dann die einzelnen, zu generierenden Elemente darstellt. Die Childobjekte sollten dann auch die entsprechenden Eigenschaften haben die du beim generieren beeinflussen möchtest und dann brauchen diese Childobjekte nur ne Generierungsfunktion die einfach die abfragt wie die Eigenschaften des jewieligen Objektes gesetzt sind und für das Objekte dann das HTML erzeugt. So brauchst du auch nur den Objektbaum dann einmal durchgehen, jedem Objekt sagen er soll sein HTML generieren und dann fügst das nur noch zusammen und du hast dein HTML Text für die gesamte Liste.

Den ganzen Objektbaum einfach per Databinding an die TreeView (kann die Windows Forms TreeView ordentlich Databinding?) rangebastelt und schon siehts auch in der GUI ordentlich aus. Sämtliche Bearbeitungsfunktionen sollten dann nicht auf die TreeView zugreifen sondern auf dne Objektbaum und die Treeview zeigt nur den aktuellen Objektbaum an. Das hat den Riesenvorteil das deine Logik von der GUI getrennt ist. Nur ne kleine Änderung in deinem Aufbau der TreeView und du hättest bei dem Ansatz wo die Daten in der TreeView sind wieder zig Änderungen an dem Code der das HTML generiert.

Baka wa shinanakya naoranai.

Mein XING Profil.

4.931 Beiträge seit 2008
vor 14 Jahren

Hallo talla, leider unterstützt der TreeView ebenso wie der ListView KEIN Databinding.

Und hallo Trekki, wie hast du denn die Eingabe der Eigenschaften für die einzelnen Listenpunkte gedacht? Jeweils ein Subform öffnen, und dann den TreeView-Item Text entsprechend (selber) zeichnen?
Evtl. such mal nach AdvTreeView (Kombi aus Tree- und ListView), dann könntest du die Eigenschaften als einzelne Felder direkt editieren.

C
401 Beiträge seit 2007
vor 14 Jahren

Also ich würde mir einfach ein paar serialisierbare Klassen bauen. Dann brauchst du nicht den ganzen Kram mit Stringbuilder usw... erspart dir ne Menge arbeit.

691 Beiträge seit 2007
vor 14 Jahren

In der ersten Liste wird ein Hauptpunkt eingetragen in der Zweiten kann man
dann mehrere Unterpunkte eintragen oder auch nicht.
Ich weiß nun nicht so richtig ob es das gelbe vom Ei ist.

Bedenke, das du <ul> und <li> auch mehr als einmal ineinander verpacken kannst.

mit freundlichen Grüßen,
Tomot

Projekte: www.gesellschaftsspieler-gesucht.de