Wie / Womit werden Webanwendungen designt ?

[v2afrank]

Hallo zusammen,
so langsam wird es ernst. Wir wollen eine Webanwendung entwickeln die eine Delphianwendung ablöst.
Die Delphianwendung hat links ein Treeview, und je nach ausgewähltem Knoten werden auf der rechten Seite verschiedene Frames mit Informationen angezeigt.
Jetzt haben wir uns verschiedene Frameworks angeschaut und das scheint auch kein Problem zu sein. Nur wie designt man eine solche Anwendung. Muss ich das wirklich alles von Hand codieren oder gibt es IDEs? Kann mir einer eine Beispiel zeigen ? Bei dem Framework haben wir uns immer noch nicht entschieden. Ein Möglichkeit wäre ja jQuery UI.

Das einzige was ich bisher in dieser Richtung gefunden habe ist GTW mit einem Eclipse Plugin.

Auch an Webseiten / Tutorials / Bücher wo ein solcher Aufbau beschrieben wird wäre ich sehr interessiert.

[mjustin]

Zitat:

Zitat von v2afrank (Beitrag 1243417)

Das einzige was ich bisher in dieser Richtung gefunden habe ist GTW mit einem Eclipse Plugin.

GWT (Google Web Toolkit) (heise Artikel) ist ein Java-basiertes Framework (das JavaScript erzeugt).

Die gängigen Java-Frameworks wie Vaadin, Wicket, ICEFaces, etc. kann man in der Regel gut ohne Oberflächeneditor verwenden. Es gab oder gibt daneben auch Editoren, z.B. https://vaadin.com/blog/-/blogs/the-...-visual-editor. Für JavaServer Faces gibt es ein Eclipse plugin, http://help.eclipse.org/indigo/index...g_started.html

Jedoch haben die meisten WYSIWIG Editoren auch Nachteile (Bugs, Tempo, Leistungsumfang)...

[nuclearping]

Von Hand würde ich da nur das nötigste "codieren" und die Verwaltung des TreeView am besten über eine externe Datenquelle (MySQL DB zB) regeln. Mit JQuery gibt es ja gute Möglichkeiten, schnell und einfach einen Baum mit jTree und UL/LI-Elementen aufzubauen. Zum Beispiel http://www.jstree.com/

Dabei ist auch die Frage: Wollt ihr eine JAVA-Webanwendung entwickeln oder eine dynamische Webseite mit PHP/JQuery?

[Lemmy]

HI,

wenn es (auch) darum geht Businesslogik weiter zu verwenden, kann evtl. das SmartMobileStudio weiter helfen: Hier wird mit einer IDE und PAscalScript eine Anwendung erzeugt, die anschließend nach HTML5 compiliert wird. Allerdings treffen hier alle von Michael genannten Nachteile zu ;-) aber vielleicht wird es mit V2 besser....

Grüße

[jensw_2000]

Ich habe vor einigen Jahren diverse OpenSource Frameworks durchprobiert und bin nach einer relativ kurzen Findungsphase bei kommerziellen Komponenten von DevExpress gelandet (AspXperience).

http://demos.devexpress.com/MVCxTreeListDemos/
https://www.devexpress.com/Products/...P/controls.xml

Die Vorteile waren einfach nicht von der Hand zu weisen. Sehr gut dokumentiert, sehr viel Beispielcode, eine FAQ in der es zu fast allen Themen Fragen und qualifizierte Antworten gibt, hohe Investitionssicherheit, stabile+getestete Updates, gewohntes (Windows ähnliches) Verhalten aller Komponenten, Cross Browser kompatibel sowie gute Performance.

Im Zusammenspiel mit Visual Studio kommt man mit den Funktionen von DevExpress WebForms und MVC sehr schnell zurecht und kann damit in der Regel alle Kundenwünsche mit einem "Framework" abdecken.
Neue Sachen mache ich heute meistens auf Basis von ASP.Net MVC. Die WebForms sehen zwar auf den ersten Blick leichter aus, sind aber auf Grund des "komplizierteren" LiveCycle Managements unter dem Strich deutlich komplexer.

[v2afrank]

Erst einmal vielen Dank für Eure Antworten. Ich schaue mir die gleich an
Das ganze soll später auf einem Enbedded Linux laufen. Mit dem treeview habe ich jetzt nur den bisherigen Aufbau beschrieben. Auf den rechten Seiten sitzen alle möglichen Controls (Charts, Edits Slider,....).
Wie das aussehen könnte kann ich mir schon gut vorstellen, bisher habe ich aber immer bei den Tutorials nur mehr oder weniger ein Hello World gesehen. Vielleicht noch ein Eingabebox in der man einen Text eingeben konnte.
Was ich aber meistens gesehen habe ist dass die meisten händisch in den Javascriptcode eingegeben worden sind. Das kann ich mir bei komplexeren Formularen sehr mühselig vorstellene. Dass müsste doch einfacher gehen. Oder ?

[Meflin]

Schau dir mal ExtJS an. Das ist zwar relativ komplex, kann aber glaube ich alles das, was du haben willst ;) Dafür gibt es auch einen "WYSYWYG"-Editor von Sencha. Ob man den braucht, sei mal dahingestellt.

[Phoenix]

Schau Dir mal AngularJS an.
Das ist (u.a.) ein komplettes clientseitiges MVC-Framework für Webanwendungen.
Hier kannst Du im Browser die komplette Businesslogik abbilden und durch den MVC-Ansatz kannst Du das sogar inkl. GUI entsprechend automatisiert testen.

Die Kommunikation mit der eigentlichen Anwendung passiert dann über Webservices (am einfachsten REST / JSON over HTTP).

[mquadrat]

Angular hätte ich jetz auch vorgeschlagen. Oder Ember. Allgemein gibt es JS-GUI-Frameworks wie Sand am Meer. Einige stammen von Rails-Entwicklern, andere von jQuery-Mitgliedern und Angular z.B. von Google wenn ich nicht irre.

Diverse Tutorials gibt es bei http://net.tutsplus.com/ oder auch bei http://www.smashingmagazine.com

[HiWieGehts]

Hallo,
dieses Thema interessiert mich auch. Ich habe zwar nicht vor, eine Delphi Anwendung abzulösen, möchte aber in die Webprogrammierung einsteigen. In den letzten rd. 30 Jahren habe ich mich (fast) nur mit Turbo Pascal und Delphi auseinandergesetzt.
Mir ist aufgefallen, dass in diesem Beitrag niemand den HTML5 Builder erwähnt hat. Sollte doch auch die oben erwähnte Anforderung erfüllen oder liege ich da falsch?

Ich weiß bisher nicht, womit ich anfangen soll - für den HTML5 Builder habe ich jedenfalls mal eine Lizenz (wie auch schon für seine Vorgänger).

[v2afrank]

EinProblem ist für mich auch die schiere Menge an Frameworks. Da wird man ja schierlich von erschlagen. Ich habe mir auch das aktuelle Sonderheft der IX "Javascript Heute" geholt, aber da werden auch nur verschiedene Frameworks vorgestellt. Auf der englischen Wikipedia gibt es eine Tabelle, mit unterschiedlichen Frameworks.

Für mich ist als Delphi C# Winforms Entwickler ist wie schon oben geschrieben das Design ein noch größeres Rätsel. Bisher in allen Tutorials habe ich nur gesehen wie einige Textboxen / Grids von Hand angelegt und befüllt werden.
Jetzt kommen ja so Kommentare wie " Dafür gibt es auch einen "WYSYWYG"-Editor von Sencha. Ob man den braucht, sei mal dahingestellt". Was ist denn der Nachteil wenn ich das mit einem solchen Editor mache ? Meine Delphi Anwendung wird ja auch so erstellt ? Bzw. was ist der Vorteil wenn ich alles von Hand erstelle ?


Angularjs. Gibt es auch einiges drüber zu lesen und klingt auch ganz interessant. Aber wie erstelle ich denn damit eine Seite mit verschiedenen Controls (Radiobuttons, Checkbox, Edits) ? Da fehlt bei mir noch der Klick. In Delphi kann ich ja wenn ich möchte ein Formular einfach zusammen klicken. Wenn ich so an meine Vergangenheit denke, fallen mir genügend Fälle ein, wo jemand ankam und sagte da muss noch ein Knopf hin, der folgendes bewirkt. Vielleicht sehe ich noch nicht de großen Vorteil, darum bitte ich um Erklärung

Für mich ist immer ein schönes Beispiel die Fritzbox. Die hat ja viele verschiedene Einstellmöglichkeiten, die grafisch ansprechend (für mich) dargestellt wird. Wie haben die Entwickler von AVM so etwas erstellt ? (Ich weiß dass zumindest teile in LUA geschrieben worden sind)

[himitsu]

Von Codegear/Emba gibt es auch "Delphi for PHP" bzw. RadPHP und HTML5 Builder.



Ganz "billig" geht auch TidHTTPServer.

HTML-Datei ausgeben und dann entsprechend die GET/POST-Daten auswerten.



z.B.: Ein billiger File-Server, welcher eine HTML-Webseite und Zusatzdateien ausliefert.

Das hatte ich mir implementiert:
- OnCommandGet (GET)
- OnException
- OnListenException

geht auch:
- OnCommandOther (POST?)
- und dazu dann noch eine Authentifizierungs- und Session-Behandlung (für ein Login der Benutzer)


So wie bei

Delphi-Quellcode:

HTMLPath = 'info'

kann man auf bestimmte URLs aka "Befehle" reagieren und dort entsprechende Webseiten ausliefern.
Und ansonsten werden die Dateien in einem bestimmten Verzeichnis (Path_Help) ausgeliefert. (Bilder, CSS, JS, hartcodierte HTML-Seiten usw.)
In die HTML-Dateien kommen dann noch ein paar Formulare, welche z.B. via POST ihre Daten übertragen (an einen entsprechende URL/Befehl)
Das HTML kann im Programm dynamisch zusammengesetzt werden, wofür es auch entsprechende Frameworks gibt, oder es kommt aus externen Dateien/Resourcen und da werden per StringReplace eventuell noch ein paar Platzhalter aufgefüllt.

Delphi-Quellcode:

procedure TMyService.HTTPServer1CommandGet(AContext: TIdContext; ARequestInfo: TIdHTTPRequestInfo; AResponseInfo: TIdHTTPResponseInfo);
const
  // http://de.selfhtml.org/diverses/mimetypen.htm
  FileExt:     array[0..7] of string = ('', '.txt', '.html', '.css', '.js', '.gif', '.jpeg', '.png');
  ContentType: array[0..7] of string = ('application/octet-stream', 'text/plain', 'text/html', 'text/css', 'text/js', 'image/gif', 'image/jpeg', 'image/png');
var
  HTMLPath: string;
begin
  try
    HTMLPath := ARequestInfo.Document;
    while (HTMLPath <> '') and CharInSet(HTMLPath[1], ['/', '\', '.', ':']) do
      Delete(HTMLPath, 1, 1);
    if HTMLPath = 'info' then begin
      LogEvent('WebServer-Get 200: ' + ARequestInfo.URI + ' => ' + ARequestInfo.From);
      AResponseInfo.ContentType  := 'text/plain';
      AResponseInfo.ResponseNo   := 200;
      AResponseInfo.ResponseText := 'OK';
      AResponseInfo.ContentText  := 'ServiceName: ' + DataServer1.ServiceName + #10
                                  + 'ServicePath: ' + ParamStr(0) + #10
                                  + 'ServerName:  ' + TDSServerMethods(nil).ServerComputerName + #10  // geht, da ServerComputerName auf nichts einer TDSServerMethods-Instanz zugreift
                                  + #10
                                  + 'HelpName:    ' + HTTPServer1.ServerSoftware + #10
                                  + 'HelpPort:    ' + IntToStr(HTTPServer1.DefaultPort) + #10
                                  + 'HelpPath:    ' + Path_Help + #10;
    end else if (Trim(HTMLPath) = '') or (TPath.GetExtendedPrefix(HTMLPath) <> TPathPrefixType.pptNoPrefix) or not TPath.HasValidFileNameChars(HTMLPath, False) then begin
      LogEvent('WebServer-Get 403: ' + ARequestInfo.URI + ' => ' + ARequestInfo.From);
      AResponseInfo.ContentType  := 'text/plain';
      AResponseInfo.ResponseNo   := 403;
      AResponseInfo.ResponseText := 'Forbidden';
      AResponseInfo.ContentText  := '403 Forbidden'#10#10 + HTMLPath;
    end else if not FileExists(Path_Help + HTMLPath) then begin
      LogEvent('WebServer-Get 404: ' + ARequestInfo.URI + ' => ' + ARequestInfo.From);
      AResponseInfo.ContentType  := 'text/plain';
      AResponseInfo.ResponseNo   := 404;
      AResponseInfo.ResponseText := 'Not Found';
      AResponseInfo.ContentText  := '404 Not Found'#10#10 + HTMLPath;
    end else begin
      LogEvent('WebServer-Get: ' + ARequestInfo.URI + ' => ' + ARequestInfo.From);
      AResponseInfo.ContentType     := ContentType[Max(IndexText(ExtractFileExt(HTMLPath), FileExt), 0)];
      AResponseInfo.ResponseNo      := 200;
      AResponseInfo.ResponseText    := 'OK';
      AResponseInfo.ContentStream   := TFileStream.Create(Path_Help + HTMLPath, fmOpenRead or fmShareDenyWrite);  // Daten
      AResponseInfo.ContentLength   := AResponseInfo.ContentStream.Size;                                          // Datenmenge
      AResponseInfo.CacheControl    := 'public';                                                                  // Browsercache verwenden
      AResponseInfo.Date            := TFile.GetLastWriteTime(Path_Help + HTMLPath);                              // Änderungsdatum
      AResponseInfo.ETag            := Format('%d_%.5f', [AResponseInfo.ContentLength, AResponseInfo.Date]);      // (billiger) Hash
    end;
  except
    on E: Exception do begin
      LogEvent('WebServer-Get-Error: ' + ARequestInfo.URI + ' => ' + ARequestInfo.From + sLineBreak + E.ClassName + ': ' + E.Message);
      AResponseInfo.ContentType     := 'text/plain';
      AResponseInfo.ResponseNo      := 500;
      AResponseInfo.ResponseText    := 'Internal Error';
      AResponseInfo.ContentStream.Free;
      AResponseInfo.ContentStream   := nil;
      AResponseInfo.ContentLength   := 0;
      AResponseInfo.ContentText     := '500 Internal Error'#10#10 + E.ClassName + ': ' + E.Message + #10#10 + HTMLPath;
      AResponseInfo.CacheControl    := '';
      AResponseInfo.Date            := 0;
      AResponseInfo.ETag            := '';
    end;
  end;
end;

[Bentissimo]

Vielleicht wäre auch uniGUI etwas für Dich? :roll:

[Meflin]

Zitat:

Zitat von v2afrank (Beitrag 1243629)

Jetzt kommen ja so Kommentare wie " Dafür gibt es auch einen "WYSYWYG"-Editor von Sencha. Ob man den braucht, sei mal dahingestellt". Was ist denn der Nachteil wenn ich das mit einem solchen Editor mache ? Meine Delphi Anwendung wird ja auch so erstellt ? Bzw. was ist der Vorteil wenn ich alles von Hand erstelle ?

Der "Vorteil" ist, dass du dir die 900€ oder was das Ding kostet sparen kannst ;)

ExtJS folgt einem MVC(S) Pattern. Das heißt du definierst deine Models als Javascript-Code. Views kannst du dir dann - ebenfalls mit purem Javascript - aus den Komponenten zusammenbauen, die das Framework bereitstellt (und da ist ja alles dabei, was du so angedeutet hast). HTML schreibst du außer einer Index-Seite in die das ganze eingebettet wird quasi garnicht. Wo sich das Framework etwas vom Rest abhebt ist der S-Teil in MVC(S). S steht für Store und heißt dass du zu deinen Models jeweils noch definieren kannst, wie sie auf dem Server zu speichern und von diesem zu laden sind (üblicherweise REST/JSON-Serialisierung an ein Backend, das du implementieren kannst, womit immer du willst). Schau dir doch einfach die Demos an, es gibt reichlich davon.

[vagtler]

Zitat:

Zitat von Meflin (Beitrag 1243650)

[...] Der "Vorteil" ist, dass du dir die 900€ oder was das Ding kostet sparen kannst ;) [...]

Naja, etwas weniger als die Hälfte ist es dann doch schon.

[erich.wanker]

..also ich bin mit UniGui sehr sehr zufrieden!

Delphi Xe4
Firebird 2.5
Zeos Lib
UniGui
XAMPP


Einzige "Schwachstelle" ist m.M.n. - wenn man mehrere UNIDBGrids auf einem Fenster hat - dann wirds a bisserl langsam .. um Datenbankinhalte "schneller" darzustellen, nutze ich einen TUniHTMLFrame und füttere diesen mit:

Delphi-Quellcode:

            while not unimainmodule.ZEINMAL.Eof do
            begin
               s:= unimainmodule.ZEINMAL.fieldbyname('OBJECT_NAME').AsString;
               wo_01.HTML.Append('<p class="hoverpanel myUnselectable" onclick="ajaxRequest(data.UniMemo1,''Panelclick'' , [ ''Parameter01=03'' , ''Parameter02=03'' ])";>'+s+'');
               wo_01.HTML.Append('<input class="hoverbutton myUnselectable" type="button" value="Eintrag löschen" onclick="ajaxRequest(data.UniMemo1,''delete Record'' , [ ''Parameter01=93'' , ''Parameter02=93'' ])"; />');
               wo_01.HTML.Append('</p>');
               unimainmodule.ZEINMAL.Next;
            end;