Utilisez HTML CSS Javascript pour créer votre propre tutoriel graphique RIA page 1/2

Entrez RIADemo comme nom de projet.

Sélectionnez le serveur à exécuter et le standard Java ee.

Choisissez tomcat5.0, j2ee1.4 ici. Cet article présente des exemples et ne dépend pas du serveur, car html&css&javascript lui-même est statique et ce sera un fichier html une fois terminé. Au sens strict, un programme web doit être exécuté par un serveur, et Netbeans adopte toujours ce concept de gestion.
A cette étape, vous pouvez cliquer sur Terminer pour construire le projet. L'étape suivante consiste à sélectionner un framework Ici, par souci de simplicité et de pureté, aucun framework n'est sélectionné.
Une fois le projet établi, la structure du projet de l'espace de travail du projet est la suivante :

Parce qu'il est statique, vous n'avez pas besoin de prêter attention à quoi que ce soit en dehors du répertoire des pages Web.
Afin de faciliter la gestion, deux nouveaux répertoires doivent être créés sous le répertoire des pages Web, inc et images. C'est assez simple et ne sera pas décrit en détail ici.
Le premier exemple, attendez que la page soit demandée, l'effet est le suivant :

Cet exemple consiste à effectuer une opération sur la page en cours, à figer la page et à afficher une boîte d'attente avant de quitter ou de renvoyer les résultats de l'opération. La fonction consiste à informer l'utilisateur que la page est en cours de chargement. Surtout pour certaines demandes de données volumineuses, cette interface utilisateur peut atténuer la gêne des clients causée par les longues attentes.
Une brève analyse montre que cet exemple se compose de 2 points principaux.
1. Éléments statiques
2. Quand la boîte apparaît-elle et quand disparaît-elle ? L'interface utilisateur dans cet effet est une boîte de chargement sur un fond sombre.
Pour les éléments statiques, quelle que soit leur apparence, leur essence est toujours HTML, CSS et JavaScript, sauf bien sûr les contrôles intégrés, tels que Flash. En fait, les contrôles intégrés ne relèvent plus du champ d'application des éléments statiques tels que HTML.
Dans cet exemple, la boîte de chargement n'est en fait qu'un div contenant une image avec un effet de défilement et du texte ordinaire. Cependant, le div est embelli avec CSS, puis combiné avec les caractéristiques de la page Web, JavaScript est utilisé pour contrôler le. affichage du div. et disparaître.
Alors, comment créer un tel effet ? Afin d'expliquer clairement l'ensemble du processus de production, indépendamment de JavaScript pour le moment, créez d'abord le div.
Dans le répertoire des pages Web, faites un clic droit sur Nouveau -->html

Sélectionnez HTML et nommez le fichier index
Une fois la page créée, le seul matériel nécessaire est l'image chargement.gif avec effet de défilement. Copiez l'image dans le dossier images.
Ensuite, créez un nouveau fichier CSS, cliquez avec le bouton droit sur le dossier inc, choisissez Nouveau --> Autre et sélectionnez Feuilles de style en cascade dans d'autres répertoires, comme indiqué dans la figure :

Nommez le style, cliquez sur Terminer et générez le fichier CSS. Le CSS nouvellement créé à travers cette étape génère automatiquement une racine de style. Déplacez le curseur vers la plage de la feuille de style racine. Netbeans affichera une fenêtre de générateur de style pour CSS, et également là. est une fenêtre d'aperçu des effets, comme indiqué ci-dessous :

La fenêtre du générateur sur le côté droit de l'éditeur fournit les paramètres de l'interface graphique pour de nombreux attributs et génère automatiquement le code correspondant. Sous l'éditeur se trouve un aperçu du style. Par exemple, dans le panneau de police, l'auteur sélectionne l'italique pour le style et l'épaisseur. . Sélectionnez gras, puis sélectionnez souligner et sélectionnez #ff0099 (un type de rouge) pour la couleur. Lors de la sélection d'une couleur, un sélecteur de couleur apparaîtra. Sélectionnez la couleur correspondante et l'effet d'aperçu sera le suivant :

L'éditeur génère automatiquement le code et la zone d'aperçu affiche également l'effet après l'application. Netbeans le fait très bien.
Il convient de noter que même si le code généré par l’outil est simple, il n’est certainement pas aussi flexible et facile à contrôler que l’écriture manuscrite.
Ici, définissez le style de la boîte d'attente dont nous avons besoin
.chargement
{
border:2px solid #a3bad9;/* Le style de la bordure de l'objet de style appliqué*/
color:#003366; /* La couleur du contenu dans l'objet de style appliqué*/
padding:10px; /* La distance entre le contenu de l'objet de style appliqué et la bordure de style (haut, bas, gauche, droite) */
margin:0; /* La distance entre l'objet de style appliqué et ses éléments environnants (haut, bas, gauche, droite) */
z-index:2000; /* La valeur de la coordonnée z de l'objet de style appliqué dans la page Web*/
width:205px; /* Largeur de l'objet de style appliqué*/
text-align:center /* Centre le contenu dans l'objet de style appliqué*/
position:absolute; /* La position de l'objet de style appliqué dans la page est affichée */
font-weight: bold; /* Le style de la police dans l'objet de style appliqué*/
font-size: 13px; /* La taille de la police dans l'objet de style appliqué*/
}
Si les lecteurs sont intéressés par la signification spécifique de chaque attribut, ils peuvent rechercher des informations pour une compréhension plus approfondie. Je n'entrerai pas dans les détails ici.
Après avoir créé le CSS, ajoutez le code suivant au fichier index.html que vous venez de créer pour importer le style CSS.

Rejoindre la zone

Enregistrez le fichier, faites un clic droit sur le fichier index.html et sélectionnez Exécuter le fichier

Le navigateur apparaîtra automatiquement et l'effet d'affichage est le suivant :

Une boîte apparaît. Les lecteurs attentifs peuvent constater que l'interface utilisateur est légèrement différente de celle présentée au début si vous ajoutez le code suivant au style de chargement que vous venez de définir :
background:white url(../images/block-bg.gif) repeat-x; /* L'arrière-plan de l'objet de style appliqué et configuré pour se répéter horizontalement*/
Bien sûr, vous devez également ajouter l'image d'arrière-plan block-bg.gif. Après avoir ajouté l'image d'arrière-plan, l'effet est le suivant :

À ce stade, l'interface utilisateur est terminée.
Ensuite, expliquez comment rendre la page Web sombre et non cliquable.
Le moyen le plus simple d'assombrir une page Web est de changer la couleur d'arrière-plan de la page Web en une couleur sombre, mais cela n'a évidemment aucun sens, car après l'avoir changée en couleur sombre, les éléments de la page peuvent toujours être cliqués.
Alors comment assombrir l’arrière-plan et rendre impossible le clic ?
En analysant à nouveau le principe des pages Web statiques, l'assombrissement doit être obtenu en ajustant la couleur. Pour obtenir une non-cliquabilité, il peut être obtenu en remplaçant l'objet cliqué, c'est-à-dire que sur l'objet sur lequel cliquer, un objet est généré, et cet objet est Transparent, alors lorsque l'utilisateur clique, ce qu'il clique est en réalité un objet transparent bloquant l'objet sous-jacent, ce qui donne à l'utilisateur l'illusion que le clic n'est pas valide, comme indiqué ci-dessous :

Si l'objet B est transparent et à côté de l'objet A, si un tiers tente de contacter l'objet A et ne rencontre que l'objet B, alors tous les contacts contre A seront invalides.
À ce stade de l'analyse, ce que nous devons faire est de créer un div avec cet effet spécial. En dernière analyse, il s'agit toujours d'une production et d'une application CSS.
L'effet de transparence sombre peut être obtenu grâce à l'attribut filter de CSS et redéfinir un nouveau style bgdiv
.bgdiv
{
arrière-plan :#ccc /* couleur d'arrière-plan*/
opacité:.3; /* transparence*/
filtre : alpha(opacité=30); /* filtre transparent*/
position:absolute; /* La position de l'objet de style appliqué dans la page est affichée */
z-index:1000; /* La valeur de la coordonnée z de l'objet de style appliqué dans la page Web*/
width:500px; /* Largeur de l'objet de style appliqué*/
height:500px; /*Hauteur de l'objet de style appliqué*/
top: 0px; /* La distance entre l'objet de style appliqué et le haut de la page*/
left: 0px; /* La distance entre l'objet de style appliqué et l'extrémité gauche de la page*/
}

Dans la zone du corps, ajoutez :
, exécutez le fichier, l'effet est le suivant :

À ce stade, la conception de l'interface utilisateur est terminée, mais la taille du div que nous voyons est de 500*500, ce qui ne remplit pas toute la page, et la zone d'attente n'est pas centrée, et l'effet est déjà visible depuis le début. cela ne peut évidemment pas être fait directement. Lors de son utilisation réelle, nous avons besoin que l'arrière-plan remplisse toute la page, la boîte d'attente doit être affichée au centre et nous devons pouvoir contrôler quand l'effet apparaît et quand il disparaît.
Ensuite, ces tâches doivent être effectuées par JavaScript.
JavaScript peut contrôler presque tous les éléments statiques de la page, et les effets ci-dessus sont officiellement obtenus en contrôlant le div en arrière-plan et la boîte d'attente.
En JavaScript, le moyen le plus simple d'obtenir un élément sur la page est d'attribuer une valeur à l'attribut ID de l'objet cible, puis de l'obtenir via getElementbyId de JavaScript.
Ici, attribuez d'abord une valeur à l'attribut ID de bgdiv, telle que :

Résolvons d'abord le premier problème, qui consiste à définir la taille du calque pour remplir la page entière via javascript.
fonction showbg()
{
var bgdiv=document.getElementById("bgdiv"); // Récupère l'objet bgdiv
bgdiv.style.width=document.body.clientWidth; //Définit la largeur de l'objet bgdiv sur la largeur de la zone visible de la page Web
if (document.body.clientHeight>document.body.scrollHeight) //Définit la hauteur de l'objet bgdiv à la hauteur de la zone visible de la page Web
bgdiv.style.height=document.body.clientHeight;
autre
bgdiv.style.height=document.body.scrollHeight;
}
Ce qu'il faut expliquer ici, c'est que clientWidh et scrollWidth représentent tous deux la largeur de la zone visuelle. La différence est que s'il y a des barres de défilement dans la page Web, alors scollWidth est supérieur à clientWidth, car scollWidth inclut la barre de défilement vers ?? ??????? partie, alors que clientWidth ne le fait pas, juste la partie visible.
Dans la fonction ci-dessus, clientWidth est utilisé comme largeur, car selon les principes de base de la conception Web, il est assez peu convivial de concevoir une page Web contenant une barre de défilement horizontale, car la souris ne peut faire défiler que de haut en bas, mais pas à gauche. à droite, donc ici, prendre clientWidth directement signifie s'assurer qu'aucune barre de défilement horizontale n'apparaîtra dans l'ensemble du projet.
Le réglage de la hauteur ci-dessous prend en compte la compatibilité avec et sans barres de défilement verticales.
La fonction ci-dessus peut garantir que le bgdiv appelé peut remplir tout l'écran.

Dans le dossier inc, créez un nouveau fichier javascript, copiez-y la fonction ci-dessus et ajoutez le code suivant à la page pour introduire la fonction

Afin de faciliter l'affichage, ajoutez onload="showbg();" dans la balise body. Une fois la page chargée, vous pouvez voir que le bgdiv ajusté a rempli toute la page.
Le principe de réglage de la position d'affichage de la boîte d'attente est similaire. La fonction est la suivante :
fonction showwait()
{
showbg(); // affiche bgdiv
var chargement=document.getElementById("loaddiv");//Obtenir l'objet de chargement
chargement.style.top=document.body.clientHeight/2+document.body.scrollTop-50;//Définir la distance de chargement à partir du haut
chargement.style.left=document.body.clientWidth/2-110;//Définir la distance entre le chargement et l'extrémité gauche
}
Appelez showwait dans l'événement onload pour afficher la boîte d'attente sur un fond transparent foncé.

Ce qu'il faut souligner ici, c'est l'attribut position de l'attribut CSS. Cet attribut doit être défini sur absolu pour que le code ci-dessus soit efficace, car la position du code ci-dessus est définie en fonction de la position absolue.

L'effet ci-dessus s'affiche dès l'ouverture de la page. Si vous souhaitez contrôler son affichage, vous devez utiliser l'attribut CSS display. Lorsque la valeur est block, elle sera affichée, et lorsqu'elle n'est pas affichée, elle sera affichée. ne sera pas affiché.

Nous avons ajouté display: none aux attributs CSS ci-dessus ; l'effet ne sera alors pas affiché à l'ouverture de la page.

Ajoutez ensuite bgdiv.style.display="block" dans la fonction showbg ;

Ajoutez chargement.style.display="none" à la fonction showwait ;

Ajoutez l'affichage à la zone du corps de la page et exécutez la page. Seul le lien d'affichage est visible. Après avoir cliqué sur le lien d'affichage, l'effet dont nous avons besoin sera affiché, comme le montre la figure :

Les effets qui apparaissent ne disparaîtront pas. Dans mon travail d'étude quotidien, l'auteur a également découvert un phénomène en cliquant sur un lien sur la page (c'est-à-dire en envoyant une requête au serveur), lorsque le serveur n'a pas terminé le traitement et n'a pas renvoyé la page au client. La page elle-même ne sera pas là. Les changements, et la vitesse dite lente du réseau est également comme ça. Lorsque le serveur termine le traitement, il renvoie le code HTML à l'utilisateur et la page commence à changer. Ensuite, si l'événement showwait est déclenché lorsque vous cliquez sur le lien, l'effet apparaîtra jusqu'à ce que le serveur ait fini de traiter la demande et que la page soit redirigée et disparaisse.

Par exemple, si nous modifions le code affiché pour afficher, puis exécutons la page, puis cliquons sur Afficher, nous pouvons voir que la boîte d'attente apparaît et lorsque la page disparaît, la page d'accueil de Sun apparaît.
Regardons en arrière. En fait, cet exemple n'a rien de spécial. C'est juste que les exigences en matière de HTML, CSS et javascript sont très élevées. Ce n'est que si vous êtes familier avec ces trois éléments statiques que vous pourrez bien le comprendre. Et ici, il y a aussi certaines exigences pour les artistes. Il convient de noter que les images de défilement et les images d'arrière-plan d'attente ne sont pas réalisées par l'auteur. Ce sont des images du cadre ext. Le style CSS de la boîte d'attente est également basé sur. poste.
Il convient de mentionner que l'éditeur de Netbeans 6.1 dispose d'une riche prise en charge des invites pour JavaScript, non seulement de la prise en charge des mots clés, mais également des invites pour les navigateurs compatibles, et fournit même quelques exemples simples.

Cet article consacre beaucoup d'espace à expliquer un exemple simple. Le but est de donner aux lecteurs une analyse approfondie de la manière de développer leur propre AIR à travers des processus de réflexion et de développement détaillés.

On peut voir que pour réaliser ce type de RIA, même si vous avez toujours besoin d'une certaine base artistique et de capacités de conception de pages, les étapes de production de base ne sont rien de plus que les deux étapes suivantes :

1. Créez votre propre interface utilisateur en utilisant HTML et CSS.

2. Étudiez attentivement le mode de comportement de la page et écrivez du javascript pour contrôler l'interface utilisateur.

Dans le prochain article, l'auteur vous présentera un exemple plus complexe et plus complet, comprenant des boîtes de dialogue contextuelles, des menus contextuels, des calques d'effets spéciaux et des fenêtres coulissantes.