L’année dernière, j’ai assisté à un événement Tech Days et j’ai découvert la facilité d’utilisation des widgets jMaki pour la création de sites Web, puis j’ai donné une discussion en Seconde vie sur le thème de la programmation web en utilisant le EDI NetBeans, y compris ce que j’avais appris lors des Tech Days. Cet article est basé sur ces discussions, montrant à quel point il est incroyablement facile de créer un site Web dans NetBeans par glisser-déposer sans écrire de code, et comment vous pouvez progressivement apprendre la programmation Java en ajoutant à votre Pages Java Server (JSP)et créer d’autres fonctionnalités ou programmes pouvant être ajoutés à votre site.

Cet article est destiné aux nouveaux développeurs et programmeurs, ainsi qu’aux nouveaux développeurs de l’IDE NetBeans. Pour suivre les exemples, vous devez avoir les logiciels suivants installés sur votre ordinateur :

Avantages de NetBeans IDE pour les développeurs de sites Web

Comme beaucoup d’entre vous le savent, les applications Web nécessitent souvent de nombreux langages de programmation différents et une manière de combiner diverses technologies. Par exemple, vous pouvez utiliser HTML et CSS pour le formatage de votre page, JavaScript pour certains boutons de survol et un servlet Java ou JSP pour traiter un formulaire. Ce dernier est un bon moyen d’apprendre la syntaxe du langage de programmation Java et constitue un excellent point d’entrée si vous êtes nouveau sur la plate-forme Java.

L’une des choses merveilleuses à propos de l’IDE NetBeans est que vous n’avez pas besoin de connaître toutes les langues ou comment combiner les technologies. NetBeans gère les langages et combine les technologies de manière transparente pour vous. De plus, l’IDE NetBeans possède de merveilleux widgets glisser-déposer à partir de diverses palettes intégrées. Par exemple, vous pouvez faire glisser et déposer des composants HTML pour créer un formulaire, des composants Swing pour créer de superbes boutons ou menus, ou déposer des composants Ajax interactifs à l’aide de widgets jMaki.

Le site Web que vous voyez ci-dessous dans la figure 1 n’est pas beau, et ce n’est pas non plus un design que je recommande. Cependant, tous ses composants ont simplement été glissés sur une page et sont entièrement fonctionnels, ne nécessitant aucun code à écrire à partir de zéro. Vous pouvez créer beaucoup de sites Web dans l’EDI NetBeans avec très peu de programmation.

Figure 1: Exemple de site Web

Remarquez l’horloge qui garde l’heure (à droite), un formulaire (à gauche) qui rassemble les données des utilisateurs avec le tout important CAPTCHA (l’image au-dessus du bouton d’envoi) pour éviter les spams, une disposition d’onglet au centre qui fait pour belle organisation, et un effet fisheye sur les photos du haut. Aucune programmation n’a été nécessaire pour aucun d’entre eux. Toutes ces fonctionnalités ont été ajoutées par glisser-déposer, ce qui prend beaucoup moins de temps que de coder ces composants vous-même.

Il existe également de nombreux services disponibles que vous pouvez simplement déposer sur une page, puis ajouter des URL ou tout ce que vous devez inclure pour extraire ce service, comme avec un mashup. Par exemple, ajouter des flux RSS à votre page est très simple.

NetBeans gère également l’écriture et l’extraction des données d’une base de données, comme décrit dans le didacticiel Utilisation de composants liés aux données pour accéder à une base de données.

Commencer

Pour commencer, démarrez l’IDE NetBeans. Sur l’écran d’accueil, il y a des liens vers des tutoriels et des exemples de projets. Pour ce que je vais vous montrer, nous allons passer à l’un des menus en haut. Suivez les étapes ci-dessous :

Journal des erreurs

Figure 2: Installer le plugin jMaki

Étape 1 : Allez dans le menu du haut et cliquez sur Outils > Plugins.

Étape 2 : Cochez la case jMaki et installez.

Étape 3 : Cliquez sur le bouton Fermer.

Plus tard, vous voudrez étudier jMaki en détail, car vous pouvez ajouter des widgets provenant de sources extérieures ou créer un widget jMaki. Pour l’instant, assurez-vous simplement que jMaki est installé comme illustré à la Figure 2, afin que vous disposiez de toutes ces merveilleuses technologies par glisser-déposer depuis la Palette.

Étape 4 : Redémarrez l’IDE NetBeans.

Étape 5 : Créez un nouveau projet, en sélectionnant Web comme catégorie et Application Web comme projet.

Étape 6 : Cliquez sur le bouton Suivant.

Étape 7 : Donnez un nom à votre projet et cliquez sur le bouton Suivant.

Étape 8 : Sélectionnez le framework jMaki, puis choisissez la mise en page avec laquelle vous souhaitez commencer. Il s’agit d’une nouvelle fonctionnalité intéressante qui crée une mise en page pour vous.

Remarque : Ce sont toutes des mises en page de base, et si vous connaissez bien CSS, vous pouvez modifier les fichiers CSS comme bon vous semble.

Étape 9 : Cliquez sur Terminer.

espace de travail

Figure 3: Interface NetBeans

Vous obtenez maintenant l’espace de travail et toutes les merveilleuses palettes ! Remarquez sur le côté droit de la diapositive tous les widgets qui sont à votre disposition. Vous pouvez voir ceux de jMaki qui fournissent de nombreux types de fonctionnalités Ajax pour votre site. De plus, vous pouvez également faire glisser et déposer des composants HTML, tels que des formulaires, qui sont toujours pénibles à écrire à la main. En bas à droite se trouvent les fonctionnalités de glisser-déposer JSP, JSF et Database qui sont inestimables pour les applications Web et facilitent grandement la programmation.

Sur le côté gauche de la page, vous pouvez regarder les fichiers de votre projet et comment NetBeans organise vos fichiers. Notez que les pages JSP sont enregistrées dans le répertoire Web et qu’un dossier CSS se trouve sous les ressources.

L’ajout de pages est facile et NetBeans enregistre la page dans le répertoire approprié. Vous pouvez ajouter des pages supplémentaires à votre site via ce volet, bien qu’il existe également d’autres moyens. Vous en verrez un exemple plus loin dans cet article.

Ajout de composants Web par glisser-déposer

La zone centrale est l’espace de travail et les débuts de votre projet Web. L’EDI NetBeans crée automatiquement une page JSP pour vous lorsque vous créez un projet Web, et il insère le code HTML de base pour la mise en page que vous avez choisie précédemment. Bien sûr, vous n’êtes pas coincé avec cette mise en page et pouvez modifier la page comme vous le souhaitez si vous connaissez le HTML et le CSS. De plus, vous n’êtes pas coincé avec les pages JSP. Vous pouvez, si vous le souhaitez, développer en PHP à la place. Pour cet article, cependant, nous nous en tiendrons aux pages JSP.

Vous pouvez voir quel texte modifier en regardant l’impression noire. Si vous connaissez le HTML, bien sûr, vous pouvez ajouter du code supplémentaire, ou plus simplement vous pouvez faire glisser et déposer des composants HTML de la palette de droite, directement sur l’espace de travail.

Les commentaires qui ont été insérés pour indiquer où vous placez votre contenu pour chaque section ou colonne de la page sont illustrés dans la figure 3 ci-dessous.

Insérer du texte

Illustration 4 : Insérer du texte sur du texte noir

Pour placer les volets à onglets dans votre site dans la section centrale, recherchez simplement le widget Affichage à onglets répertorié sous jMaki Dojo dans la Palette à droite. Maintenez le bouton de la souris enfoncé pendant que vous faites glisser le composant sur la page. Le code de ce widget apparaît soudainement dans cette zone et vous pouvez facilement changer les noms des onglets en ce que vous voulez. De plus, vous pouvez définir l’onglet sur un lien ou insérer du contenu sur la page à onglet en créant une page distincte qui est incluse. Cette dernière méthode est celle que j’ai utilisée pour le deuxième onglet.

Créez une page distincte à inclure dans un volet à onglets en procédant comme suit :

Étape 1 : Dans le volet Fichiers, cliquez avec le bouton droit sur le nom du projet et sélectionnez Nouveau > JSP.

Étape 2 : Entrez un nom pour la page.

Étape 3 : Vous pouvez enregistrer la page dans un dossier de votre choix en cliquant sur Parcourir et en choisissant un dossier, ou vous pouvez le laisser vide. Par défaut, l’IDE NetBeans enregistre les pages dans le dossier web. C’est ce que j’ai fait pour cet exemple de site Web.

Étape 4 : Modifiez la page JSP que vous venez de créer dans le volet central (l’éditeur de code).

L’EDI NetBeans crée automatiquement vos pages Web en tant que pages JSP, à moins que vous ne lui disiez de faire autrement. Vous pouvez également utiliser cet IDE avec d’autres langages de programmation, tels que Ruby on Rails ou PHP. Une fois la page créée et que vous avez ajouté le contenu souhaité, incluez-le dans la page à onglets en modifiant le code de la vue à onglets comme suit :

Code du volet à onglets

Illustration 5 : Code du volet à onglets

Avis après le mot include : le nom du fichier à inclure est listé : test.jsp Lorsque vous lancez l’application, le test.jsp la page est automatiquement incluse dans cet onglet. Cela facilite l’organisation d’un site Web et les onglets sont populaires.

Bien sûr, il existe de nombreuses autres façons, alors expérimentez avec tous les widgets à votre disposition. Maintenant, faites glisser et déposez les autres composants sur la page dans leurs colonnes correctes. Les autres composants ne nécessitent aucune modification de code, à l’exception du formulaire, où vous devez lui indiquer où se trouve un script pour traiter le formulaire. S’il n’y en a pas, laissez ce champ vide pour l’instant.

Pour créer des scripts qui envoient des données au serveur et renvoient quelque chose, comme avec des formulaires, vous devez comprendre les pages JavaServer ou les technologies de servlet. À l’aide de l’IDE NetBeans, vous pouvez créer un contrôleur frontal avec un servlet, ajouter des méthodes pour les demandes de cookies et utiliser JavaServer Pages Standard Tag Library (JSTL) pour l’internationalisation ainsi que des tâches structurelles courantes telles que l’itération et les conditions, les balises pour manipuler XML documents, balises d’internationalisation et balises SQL. Tous ces sujets seront abordés dans les prochains articles.

L’IDE NetBeans fournit également un cadre pour l’intégration de balises personnalisées existantes avec des balises JSTL. À l’avenir, nous couvrirons bon nombre de ces sujets afin que vous puissiez apprendre la programmation Java en créant des applications pour les sites Web. Consultez également les liens répertoriés dans Pour plus d’informations ci-dessous.

Compiler et exécuter votre site

Une fois vos composants en place, vous devez créer et exécuter votre projet. Vous n’aurez besoin de le faire qu’une seule fois pour chaque session NetBeans. Après avoir fait une construction, vous pouvez ajouter plus de composants, puis simplement actualiser ou recharger la page du navigateur. Pour compiler et exécuter votre projet, procédez comme suit :

Étape 1 : Accédez à Construire dans le menu principal.

Étape 2 : Sélectionnez Construire le projet principal (si vous obtenez une fenêtre contextuelle indiquant « Le projet principal n’a pas été défini », assurez-vous que votre projet est sélectionné dans cette fenêtre, puis cliquez sur OK.)

Dans la fenêtre Sortie en bas de l’écran, vous pouvez voir l’IDE créer des fichiers .jar, compiler les pages JSP, puis vous dire si la construction a réussi. En supposant que ce soit le cas, exécutez votre projet en suivant les deux étapes suivantes :

Étape 1 : Accédez à Exécuter dans le menu principal.

Étape 2 : Sélectionnez Exécuter le projet principal.

Encore une fois dans la fenêtre Sortie, vous voyez que NetBeans démarre le serveur d’applications et toutes les bases de données dont vous avez besoin, puis lance le navigateur. Enfin, vous devriez voir le site Web que vous avez créé dans la fenêtre de votre navigateur. Si vous revenez à l’IDE NetBeans, faites glisser et déposez un autre composant dans votre site et enregistrez-le, vous pouvez revenir à la fenêtre du navigateur et voir vos modifications en cliquant sur Actualiser ou Recharger. C’est aussi simple que ça.

Si vous aviez des erreurs dans votre construction, l’EDI NetBeans vous en informe dans la fenêtre Sortie en listant les erreurs. Si vous avez suivi cet article, toutes les erreurs que vous rencontrerez seront probablement dues au changement de code que vous avez effectué pour le volet à onglets. Vérifiez cette zone pour les zones de syntaxe, puis exécutez à nouveau Build. Pour les projets plus complexes, l’IDE NetBeans dispose d’un débogueur très utile, dont vous pouvez en savoir plus dans le FAQ sur le débogage.

Ajout d’autres composants

Ajout de composants

Illustration 6 : Utilisation des frameworks JavaServer Faces

Si vous souhaitez jouer avec un design plus complexe, vous disposez également de Visual JavaServer Faces, simplement en cochant la case lorsque vous ouvrez un nouveau projet. Cela fournit une vaste sélection de composants que vous pouvez faire glisser et déposer sur l’espace de travail. Cela permet d’économiser une quantité incroyable de temps de codage et de raccourcir considérablement la courbe d’apprentissage.

Lorsque vous choisissez JavaServer Faces, vous obtenez une palette sur la droite similaire aux palettes jMaki que vous avez vues auparavant, vous donnant accès à des composants que vous auriez régulièrement à créer normalement avec beaucoup de code HTML et CSS. De plus, la palette fournit des composants plus avancés, tels que les fournisseurs de données et les fournisseurs de données avancés.

Ajout d’autres composants

L’IDE NetBeans a une quantité incroyable de fonctionnalités en plus de celles dont nous venons de parler. Au fur et à mesure que vous créez, vous découvrirez que vous obtenez la complétion de code dans n’importe quel langage dans lequel vous travaillez. Il existe également d’autres fonctionnalités, telles que la modélisation UML que vous pouvez utiliser, un accès facile aux services Web et vous pouvez coder, tester, et débogage pour les applications de mobilité.

NetBeans vous fait gagner beaucoup de temps et écrit une grande partie de votre code pour vous. C’est idéal pour les nouveaux programmeurs comme pour les développeurs avancés. En tant que nouveau développeur ou novice sur la plate-forme Java, vous pouvez apprendre le langage de programmation Java petit à petit en créant de petites applications Web et en passant progressivement à des applications d’entreprise complexes.

Au fur et à mesure que vous avancez dans Java EE, vous devrez en savoir plus sur la programmation Java. Dans le prochain article, vous apprendrez à créer des programmes pour votre site à l’aide de pages JSP et de servlets. C’est un excellent point d’entrée pour apprendre la syntaxe de programmation Java et certaines des classes de l’API.

Pour plus d’informations

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.