webstencils demo

Demo WebScrous

Delphi 12.2 a introduit WebSticls, une façon basée sur le script de traiter le texte similaire à la technologie ASP.NET Razor. Son utilisation principale consiste à générer des HTML dynamiques à partir d'une application de serveur WebBroker, mais peut être utilisée d'une autre manière pour générer du XML, JSON ou tout type de sortie textuelle à partir d'un modèle.

Ce référentiel contient quelques applications très simples de Delphi 12.2 (exécuter en tant que programmes Windows VCL qui lancent un navigateur Web) pour comparer les modèles fabriqués avec les balises de style HTML utilisées dans les composants TPageProducer , avec les nouvelles composants "@" Symbol utilisés dans les composants TWebStencilsProcessor . Tous les fichiers Project et HTML sont dans un seul dossier et les deux projets partagent un module de données pour accéder à la base de données Chinook SQLite (non incluse).

Il y a cinq pages dans chaque application, conçues pour paraître identiques afin que vous puissiez vous concentrer sur la technologie du modèle:

1. Index (présente une page de connexion)
2. Erreur de connexion
3. Liste des clients (répertorie les clients dans un tableau)
4. Client Edit (présente une page d'édition pour le client sélectionné)
5. Une page d'erreur (pour prévenir l'accès non autorisé)

Les fichiers HTML référencés par les deux projets sont nommés pour indiquer clairement avec quel projet / technologie avec lequel ils travaillent:

Modèle traditionnel PageProducer Fichiers HTML:

• index-wbroker.html
• loginfailed-wbroker.html
• custlist-wbroker.html
• custedit-wbroker.html
• accessdenied-wbroker.html

Nouveau modèle de coiffes de websclates Fichiers HTML:

• index-wStencils.html
• login-failed-wStencils.html
• custlist-wStencils.html
• custedit-wStencils.html
• accessdenied-wStencils.html
• custlistframework1.html

Remarquez qu'il y a un fichier de plus dans la collection WebStactions, c'est un modèle de framework pour chaque page Web générée à partir des actions de coiffes Web et est combinée à partir des chaînes d'en-tête et de pied de page intégrées dans les producteurs de pages utilisés dans le projet traditionnel Web-Broker.

Construire les projets

Avant d'essayer de compiler ou d'exécuter, vous devez télécharger la base de données de Chinook Exemple. Il s'agit d'une base de données populaire utilisée pour les tutoriels et des démos et peut être trouvée dans de nombreux endroits différents. J'utilise DBEAVER, un outil de base de données gratuit, et je l'ai trouvé expédié avec cela.

Une fois que vous avez le chinook.db dans le même dossier que le projet, vous devez ouvrir le module de données (utilisé par les deux projets), udmCust et modifier le composant TFDConnection pour spécifier l'emplacement du fichier de base de données. Je suggérerais également d'utiliser un outil de base de données ou l'explorateur de données de Delphi pour afficher les tables de la base de données.

Delphi 12.2 a été utilisé pour créer et tester ces programmes (qui n'utilisent aucun composant tiers).

Courir les démos

Les deux démos sont créées en tant que programmes Windows GUI du serveur Web, ce qui signifie qu'ils s'exécutent en tant que petit programme VCL Windows qui ouvre un port pour écouter les demandes Web avec un bouton pour lancer votre navigateur Web par défaut. La version PageProducer écoute le port 8081 et la version WebScroids écoute le port 8082 afin que vous puissiez exécuter les deux simultanément si vous le souhaitez.

La première page répertoriée est une page de connexion. Une connexion valide doit être entrée avant qu'elle ne vous amène à la liste des clients. Une connexion valide est tout utilisateur dans le tableau des employés où:

• Le nom d'utilisateur est le FirstName , insensible à la cas;
• Le mot de passe est une concaténation de l' EmployeeId et du LastName , sensible à la cas.

Par exemple, la première entrée de la base de données de l'exemple que j'ai téléchargé avait le premier employé suivant:

• ID : 1
• FirstName : Andrew
• LastName : Adams

Par conséquent, pour se connecter avec cet employé:

• Nom d'utilisateur: ANDREW (cas supérieur ou inférieur ou mixte)
• Mot de passe: 1Adams (exactement)

Une fois connecté, la liste des clients est affichée. L'ID de chaque client (colonne la plus à gauche) est un lien qui vous amène à un écran "Modifier" qui répertorie tous les champs clients dans les boîtes d'édition. Le bouton Soumettre n'enregistre pas les modifications ni ne fait autre chose que de vous ramener à la liste des clients.

Noms de table

J'ai utilisé deux exemples de bases de données "Chinook" différents, l'un avait des noms de table singuliers (par exemple "Client" et "Employee") tandis que l'autre avait le pluriel (par exemple "Client S " et "Employee S "); Si celui que vous obtenez est différent de celui de ce référentiel, modifiez simplement les noms de table et les requêtes pour correspondre.

Pourquoi les tables HTML?

La liste des clients est construite à l'aide des anciennes balises de table HTML ( <table> , <tr> , <td> , etc.) parce que c'est la manière simple et par défaut que les anciennes applications de serveur WebBroker construites à l'aide des composants TDataSetTableProducer ont été effectués. La nouvelle version WebStacrs construit le même résultat HTML afin que vous puissiez comparer comment il est fait et les pages Web résultantes seront presque identiques. Les sites Web modernes construisent généralement des tables de style CSS, un avantage qui peut être réalisé en passant de produits de données de données à des cicolaires.

Bloguer

Lisez mon blog "Présentation de WebSticls" pour en savoir plus sur la technologie derrière ces programmes et pourquoi les caprids Web sont cool!