Personnalisation de la vue Web d’un dossier
[Cette fonctionnalité est prise en charge uniquement sous Windows XP ou une version antérieure. ]
Une vue Web est un moyen puissant et flexible d’utiliser le Explorer Windows pour afficher des informations sur le contenu d’un dossier Shell.
Introduction
Windows offre aux utilisateurs deux façons principales d’afficher et de naviguer dans l’espace de noms Shell. Le plus familier d’entre eux, le style Classic, est similaire au Gestionnaire de fichiers Windows familier. Le volet droit répertorie le contenu du dossier actuellement sélectionné dans l’un des cinq formats suivants : Grande icône, petite icône, liste, détails et miniature. La principale différence par rapport au Gestionnaire de fichiers Windows est le volet gauche, qui ressemble beaucoup à la barre de Explorer de Windows Internet Explorer. Il peut être redimensionné ou supprimé, et il peut afficher plusieurs volets en plus de l’arborescence du système de fichiers familier, comme un volet de recherche.
Notes
Les informations contenues dans ce document ne s’appliquent pas à Windows XP. Les techniques décrites s’appliquent uniquement aux versions antérieures de Windows.
L’illustration suivante montre le dossier Imprimantes en style classique.
Le style Classique fonctionne relativement bien pour les dossiers et fichiers de système de fichiers normaux. Toutefois, avec l’introduction de Windows 95, le système de fichiers a évolué vers l’espace de noms. L’espace de noms permet la création de dossiers virtuels, tels que les imprimantes ou le voisinage réseau, qui peuvent représenter des types d’informations très différents d’un dossier de système de fichiers normal.
Le style Web, également connu sous le nom de vue Web, offre un moyen plus flexible et plus puissant de présenter des informations que le style classique. Dans une vue Web, l’utilisateur affiche et navigue essentiellement dans l’espace de noms à l’aide d’Internet Explorer. La disposition de base d’une vue Web est similaire au style Classique. La barre de Explorer est inchangée. Toutefois, la région occupée par la liste de fichiers devient une zone d’affichage à usage général qui est en fait une page web. Une vue Web est toujours utilisée pour afficher des informations sur le contenu d’un dossier, mais il existe peu de contraintes quant à l’affichage ou à la façon dont les informations sont affichées. Chaque dossier peut avoir sa propre vue Web, personnalisée en fonction de ses fonctionnalités particulières.
L’illustration suivante montre une vue Web du dossier Imprimantes (précédemment en style Classique).
Tout comme les pages web conventionnelles, les affichages Web sont contrôlés par un modèle HTML. La création d’un modèle d’affichage Web est presque identique à la création d’une page web et offre le même degré de flexibilité dans le contenu et la disposition des informations. Les modèles d’affichage web peuvent utiliser du code HTML dynamique (DHTML) et des scripts pour répondre à des événements, tels qu’un utilisateur qui clique sur un élément. Ils peuvent également héberger des objets qui leur permettent d’obtenir et d’afficher des informations à partir du dossier ou de son contenu.
L’utilisateur peut choisir une vue Web en démarrant Windows Explorer, en cliquant sur Options de dossier dans le menu Affichage, puis en sélectionnant cette option : Activer le contenu web dans les dossiers. Toutefois, l’utilisateur peut également démarrer Internet Explorer et pointer le navigateur sur le système de fichiers en cliquant sur le menu Affichage, en pointant sur Explorer Barre, puis en cliquant sur Dossiers. Dans une vue Web, il n’existe pratiquement aucune différence entre internet Explorer et Windows Explorer.
Sur le côté gauche du volet droit, la vue Web Imprimantes affiche une bannière avec le nom et l’icône du dossier, suivies d’un bloc d’informations sur le dossier. La liste de fichiers habituelle occupe le côté droit de la page.
Lorsqu’un utilisateur clique sur un élément, des informations détaillées sur l’élément s’affichent dans le bloc d’informations. La vue Web Imprimantes affiche en fait les mêmes informations que celles disponibles dans le style Classique, mais elle le fait dans un format plus utilisable. Toutefois, une vue Web n’est pas simplement une façon différente d’afficher des informations de style classique. Par exemple, un lien vers un site web utile peut être affiché sous le bloc d’informations, une fonctionnalité qui n’est pas disponible dans le style Classique. Si l’utilisateur clique sur le lien, le site s’affiche.
La vue Web Imprimantes illustrée dans l’illustration précédente est similaire au style Classic, car le modèle d’affichage Web sous-jacent (un fichier .htt) a été écrit de cette façon. La liste des fichiers, pour instance, n’est pas générée directement par le modèle d’affichage Web. Il est créé et affiché par un objet WebViewFolderContents hébergé par le modèle d’affichage Web. Les méthodes et propriétés de l’objet permettent à la vue Web de contrôler sa disposition et d’obtenir des informations sur des éléments particuliers. Le contenu et la disposition du bloc de bannière et d’informations sont spécifiés dans le modèle d’affichage Web.
Étant donné qu’une vue Web prend en charge DHTML, le modèle peut également être utilisé pour gérer l’interaction utilisateur. Par instance, lorsqu’un utilisateur clique sur l’une des icônes d’imprimante, l’objet WebViewFolderIcon déclenche un événement SelectionChanged. Le modèle utilise un gestionnaire d’événements DHTML écrit dans un script pour récupérer les informations demandées et les afficher dans le bloc d’informations.
Cet exemple simple pour le dossier Imprimantes n’est en aucun cas la seule façon d’utiliser une vue Web. En écrivant votre propre modèle et, si nécessaire, des objets, vous pouvez utiliser une vue Web pour afficher des informations et interagir avec l’utilisateur de la manière la plus efficace. Notez qu’à l’heure actuelle, les modèles d’affichage Web affichent uniquement les dossiers virtuels définis par le système. Bien que les développeurs puissent créer un dossier virtuel en implémentant une extension d’espace de noms, ils doivent utiliser les techniques décrites dans Extensions d’espace de noms pour l’afficher.
Utilisation du modèle d’affichage web
La façon dont les données sont affichées dans une vue Web peut être personnalisée de manière limitée en modifiant le fichier Desktop.ini d’un dossier. Pour plus d’informations, consultez Personnalisation des dossiers avec Desktop.ini . Un moyen beaucoup plus flexible et puissant de personnaliser une vue Web consiste à créer un modèle d’affichage Web personnalisé.
Le modèle d’affichage Web contrôle ce qui est affiché dans une vue Web et comment. Il utilise des techniques de code HTML, DHTML et de script standard pour obtenir et afficher des informations et interagir avec l’utilisateur. Cette section explique comment créer une vue Web en examinant un modèle simple: Generic.htt.
<html>
<style>
<!-- This section defines a variety of styles that can be used
when displaying the document -->
body {font: 8pt/10pt verdana; margin: 0}
#Banner {position: absolute; width: 100%; height: 88px; background: URL(res://webvw.dll/folder.gif) no-repeat top left}
#MiniBanner {position: absolute; width: 100%; height: 32px; background: window}
#Icon {position: absolute; left: 11px; top: 12px; width: 64px; height: 64px}
#FileList {position: absolute; left: 30%; top: 88px; width: 1px; height: 1px}
#Info {position: absolute; top: 88px; width: 30%; background: window; overflow: auto}
p {margin-left: 20px; margin-right: 8px}
p.Title {font: 16pt/16pt verdana; font-weight: bold; color: #0099FF}
a:link {color: #FF6633}
a:visited {color: #0099FF}
a:active {color: black}
</style>
<head>
<!-- allow references to any resources you might add to the
folder -->
<base href="%THISDIRPATH%\">
<script language="JavaScript">
<!-- This section defines a number of JavaScript utilities -->
var L_Intro_Text = "This folder contains a variety of interesting stuff.<br><br>To get information about any of them, click the items icon.<br><br>";
var L_Multiple_Text = " objects selected.";
function FixSize() {
// this function handles layout issues not covered by the style sheet
var hideTop = 200;
var hideLeft = 400;
var miniHeight = 32;
if (200 > document.body.clientHeight) {
//A short window. Use the minibanner
document.all.Banner.style.visibility = "hidden";
document.all.MiniBanner.style.visibility = "visible";
document.all.FileList.style.top = 32;
document.all.Info.style.top = 32;
}
else {
//A normal window. Use the normal banner
document.all.Banner.style.visibility = "visible";
document.all.MiniBanner.style.visibility = "hidden";
document.all.FileList.style.top = (document.all.Banner.offsetHeight - 32) + "px";
document.all.Info.style.top = (document.all.Banner.offsetHeight) + "px";
document.all.Rule.style.width = (document.body.clientWidth > 84 ? document.body.clientWidth - 84 : 0) + "px";
}
if (400 > document.body.clientWidth) {
//A narrow window. Hide the Info region and expand the file list region
document.all.Info.style.visibility = "hidden";
document.all.FileList.style.pixelLeft = 0;
document.all.FileList.style.pixelTop = document.all.Info.style.pixelTop;
}
else {
//Normal width
document.all.Info.style.visibility = "visible";
document.all.FileList.style.pixelLeft = document.all.Info.style.pixelWidth;
}
document.all.FileList.style.pixelWidth = document.body.clientWidth - document.all.FileList.style.pixelLeft;
document.all.FileList.style.pixelHeight = document.body.clientHeight - document.all.FileList.style.pixelTop;
document.all.Info.style.pixelHeight = document.body.clientHeight - document.all.Info.style.pixelTop;
}
function Init() {
/* Set the initial layout and have FixSize() called whenever the window is resized*/
window.onresize = FixSize;
FixSize();
TextBlock.innerHTML = L_Intro_Text;
}
</script>
<script language="JavaScript" for="FileList" event="SelectionChanged">
// Updates the TextBlock region when an item is selected
var data;
var text;
// name
text = "<b>" + FileList.FocusedItem.Name + "</b>";
// comment
data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 3);
if (data)
text += "<br>" + data;
// documents
data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 1);
if (data)
text += "<br><br>" + FileList.Folder.GetDetailsOf(null, 1) + ": " + data;
// status
data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 2);
if (data)
text += "<br><br><b><font color=red>" + data + "</font></b>";
// tip?
data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, -1);
if (data != "" && data != FileList.FocusedItem.Name)
text += "<br><br>" + data;
TextBlock.innerHTML = text;
</script>
</head>
<!-- The body of the document controls the actual data display.
It uses several scripting objects to communicate with the
namespace folder, and calls on the JavaScript objects defined
in the header to handle much of the processing -->
<body scroll=no onload="Init()">
<!-- The normal banner. This banner displays the folder
name and icon at the top of the WebView pane. This banner
is used if the WebView pane is sufficiently large to
display the icon and still have room for some information -->
<div id="Banner" style="visibility: hidden">
<!-- Display the folder name using a table with nowrap
to prevent word wrapping. Explorer will replace
%THISDIRNAME% with the current folder name -->
<table class="clsStd"><tr><td nowrap>
<p class=Title style="margin-left: 104px; margin-top: 16px">
%THISDIRNAME%
</td></tr></table>
<!-- this is more efficient than a long graphic, but it has to be adjusted in FixSize() -->
<hr id="Rule" size=1px color=black style="position: absolute; top: 44px; left: 84px">
<!-- Load the WebViewFolderIcon object, which extracts the folder's icon -->
<object id=Icon classid="clsid:e5df9d10-3b52-11d1-83e8-00a0c90dc849">
<param name="scale" value=200>
</object>
</div>
<!-- The mini banner. This banner is used when the
WebView pane is too short to display the icon. Instead,
it displays only the folder name -->
<div id="MiniBanner" style="visibility: hidden">
<!-- use a table with nowrap to prevent word wrapping -->
<table class="clsStd"><tr><td nowrap>
<p class=Title style="margin-left: 16px; margin-top: 4px">
%THISDIRNAME%
</td></tr></table>
</div>
<!-- The Info region. This displays the information
associated with a folder or file. Javascript in the header
is used to generate the regions contents by assigning
a text block to TextBlock.innerHTML -->
<div id="Info">
<p style="margin-top: 16px");
<span id="TextBlock">
</span>
</div>
<!-- end left info panel -->
<!-- Load the WebViewFolderContents object. This object
returns information on the contents of the folder that
can be used in the information display. -->
<object id="FileList" border=0 tabindex=1 classid="clsid:1820FED0-473E-11D0-A96C-00C04FD705A2"
</object>
</body>
</html>
Un moyen simple de créer votre propre modèle d’affichage Web consiste à prendre Generic.htt et à le modifier. Étant donné qu’il est plutôt limité, vous devriez également consulter d’autres exemples plus complexes pour obtenir d’autres idées. Vous pouvez les trouver en recherchant dans votre système l’extension .htt utilisée par tous les modèles d’affichage Web. Si vous souhaitez créer un modèle personnalisé pour un dossier, vous devez commencer par le modèle Folder.htt par défaut, qui est généralement stocké dans C:\Winnt\Web ou C:\Windows\Web. Notez que ces fichiers étant définis comme masqués, vous devrez peut-être modifier vos paramètres windows Explorer pour les afficher. Une fois qu’un fichier .htt est créé, il doit être marqué comme en lecture seule et masqué.
Les modèles d’affichage web utilisent l’extension .htt, car ils diffèrent légèrement des documents .htm conventionnels. La main différence est plusieurs variables spéciales dans les fichiers .htt que le système remplace par les valeurs d’espace de noms actuelles. Les variables %THISDIR% et %THISDIRPATH% représentent le nom et le chemin d’accès du dossier actuellement sélectionné. La variable %TEMPLATEDIR% représente le dossier dans lequel les feuilles de style d’affichage Web sont stockées.
Comme la plupart des modèles HTML, les fichiers .htt ont deux parties de base : un corps et une tête. Le corps du modèle contrôle la disposition de base de la vue Web et charge les objets utilisés pour communiquer avec l’espace de noms et afficher les informations. La tête contient des scripts et des fonctions qui effectuent des tâches telles que la gestion du redimensionnement et l’obtention d’informations à partir du dossier. La plupart des modèles, y compris Generic.htt, incluent également une feuille de style. En général, il est préférable d’inclure les informations de feuille de style dans votre modèle. Des feuilles de style distinctes peuvent ne pas fonctionner correctement lorsqu’une vue Web est utilisée avec des espaces de noms distants.
Corps du modèle
Le corps du modèle spécifie ce qui sera présenté par une vue Web. C’est également là que les objets utilisés pour afficher des informations et communiquer avec les dossiers d’espace de noms sont chargés. La disposition définie par Generic.htt est similaire à celle illustrée dans l’illustration de la section précédente. Il existe trois régions d’affichage : la bannière et le bloc d’informations sur le côté gauche de la vue et la liste des fichiers à droite.
Les régions sont toutes des identificateurs attribués à utiliser par la feuille de style et DHTML. Comme indiqué dans la section suivante, il existe deux bannières possibles, avec les identificateurs « Banner » et « MiniBanner ». L’identificateur de la région du bloc d’informations est « Info ». L’identificateur de l’objet de liste de fichiers est « FileList ». Les détails de la disposition de la région sont gérés par la feuille de style et une fonction Microsoft JScript, FixSize, qui est abordée plus loin dans le chapitre.
Région de bannière
La bannière se trouve en haut de l’affichage, dans le coin supérieur gauche de la vue Web. La bannière normale affiche le nom et l’icône du dossier dont le contenu est affiché dans la liste des fichiers à droite. Toutefois, si la fenêtre devient trop courte, il se peut qu’il n’y ait pas d’espace sous l’icône pour afficher des informations. Pour cette raison, Generic.htt définit également un minibanner qui affiche uniquement le nom du dossier. Les deux bannières sont initialement définies comme masquées. FixSize choisit celui à afficher et le définit sur « visible ».
La bannière normale pour Generic.htt est définie par :
<div id="Banner" style="visibility: hidden">
<table class="clsStd"><tr><td nowrap>
<p class=Title style="margin-left: 104px; margin-top: 16px">
%THISDIRNAME%
</td></tr></table>
<hr id="Rule" size=1px color=black style="position: absolute; top: 44px; left: 84px">
<object id=Icon classid="clsid:e5df9d10-3b52-11d1-83e8-00a0c90dc849">
<param name="scale" value=200>
</object>
</div>
La première partie de la section bannière affiche le titre avec une règle horizontale en dessous. Les balises de table sont utilisées pour contrôler sa position. L’attribut nowrap est défini pour le pour empêcher l’habillage des mots. Le système remplacera %THISDIRNAME% par le nom du dossier actif. Un objet WebViewFolderIcon , avec l’identificateur « Icon » par souci de simplicité, est ensuite chargé pour extraire et afficher l’icône du dossier.
La section minibanner est similaire à la bannière normale. Le format du titre est placé un peu plus haut et n’a pas de règle. Étant donné qu’il n’y a pas d’icône, l’objet WebViewFolderIcon n’est pas chargé.
<div id="MiniBanner" style="visibility: hidden">
<table class="clsStd"><tr><td nowrap>
<p class=Title style="margin-left: 16px; margin-top: 4px">
%THISDIRNAME%
</td></tr></table>
</div>
Région d’informations
La partie de la vue Web sous la bannière est utilisée pour présenter des informations détaillées sur l’élément sélectionné. Si aucun élément n’est sélectionné, un message par défaut s’affiche. Étant donné que Generic.htt n’affiche qu’un seul bloc de texte, cette section est assez simple.
<div id="Info">
<p style="margin-top: 16px");
<span id="TextBlock">
</span>
</div>
La majeure partie du travail de collecte des informations est gérée par un script d’informations de dossier décrit plus loin dans le chapitre. Il affiche les informations en affectant le texte à TextBlock.innerHTML.
Vous pouvez facilement personnaliser l’affichage des informations en modifiant ces éléments ou en incluant des éléments supplémentaires. Tout ce que vous pouvez mettre sur une page web peut être utilisé. Par exemple, pour afficher un lien vers votre site web, vous pouvez ajouter un élément d’ancrage après le bloc de texte dans Generic.htt.
<div id="Info">
<p style="margin-top: 16px");
<span id="TextBlock">
</span>
<span>
<p> Click on <a href="https://your.address"></a>
</span>
</div>
La région FileList
Enfin, Generic.htt charge un objet WebViewFolderContents pour la région FileList. Étant donné que son identificateur est défini sur « FileList », il sera désormais appelé objet FileList.
<object id="FileList" border=0 tabindex=1 classid="clsid:1820FED0-473E-11D0-A96C-00C04FD705A2"
</object>
L’objet FileList se trouve dans la plupart des affichages Web et sert à plusieurs fins. FileList affiche la liste des éléments contenus dans le dossier sélectionné avec les mêmes options et apparence que la liste de fichiers en style classique. Lorsqu’un élément est sélectionné, FileList avertit la vue Web en déclençant un événement SelectionChanged . FileList expose également des méthodes et des propriétés qui peuvent être utilisées pour récupérer des informations sur des éléments individuels et contrôler la position et la taille de sa zone d’affichage.
Bien que l’objet FileList soit très utile, il retourne uniquement des informations de système de fichiers standard, telles que la taille de fichier ou les attributs. Pour récupérer d’autres types d’informations à partir d’un dossier Shell, vous devez charger et gérer des objets supplémentaires. Tout objet pouvant être hébergé par une page web peut être utilisé avec une vue Web.
L’en-tête du modèle
L’en-tête du modèle d’affichage Web contient les scripts et les fonctions qui effectuent la plupart du travail réel. Deux tâches essentielles doivent être gérées. L’une d’elles est la disposition de l’affichage Web, qui doit être ajustée pour prendre en charge différentes régions d’affichage. L’autre consiste à récupérer et à afficher des informations à partir du dossier lorsqu’un élément est sélectionné. Comme avec les feuilles de style, il est préférable d’inclure tous les scripts et fonctions dans le modèle au lieu de les référencer en tant que fichiers distincts.
Contrôle de la disposition de l’affichage Web
La zone disponible pour un affichage Web dépend de la taille de la fenêtre d’affichage Web et de la quantité de celle-ci est prise par la barre d’Explorer Windows. Cette zone change chaque fois que la fenêtre ou la barre windows Explorer est redimensionnée. Par conséquent, la disposition doit être mise en correspondance avec la zone disponible lorsqu’une vue Web est chargée et modifiée de manière appropriée lorsqu’elle est redimensionnée. Une grande partie de la disposition est spécifiée dans la feuille de style. La région Info, par exemple, est définie pour occuper les 30 % les plus à gauche de l’affichage Web.
#Info {position: absolute; top: 88px; width: 30%; background: window;
overflow: auto}
À mesure qu’une vue Web est redimensionnée, la largeur de la région d’informations change pour conserver ce pourcentage. FixSize gère les problèmes de disposition qui ne peuvent pas être gérés par une feuille de style.
Chargement et initialisation de l’affichage web
Lorsqu’une vue Web est chargée, la disposition doit être ajustée pour s’adapter à la zone d’affichage disponible. Étant donné qu’aucun élément n’a encore été sélectionné, les affichages Web affichent normalement des informations par défaut qui s’appliquent à l’ensemble du dossier. Pour gérer l’initialisation, la <balise BODY> pour Generic.htt détecte l’événement onload et appelle la fonction Init .
<body scroll=no onload="Init">
Init est une fonction JScript simple.
function Init() {
window.onresize = FixSize;
FixSize();
TextBlock.innerHTML = L_Intro_Text;
}
Init lie FixSize à l’événement window.onresize afin qu’il soit appelé chaque fois que la zone d’affichage web change. Il exécute ensuite FixSize pour définir la disposition initiale et affecte L_Intro_Text à la région d’informations. L_Intro_Text est un bloc de texte d’introduction qui est défini dans la section feuille de style.
var L_Intro_Text = "This folder contains a variety of interesting stuff.<br>
<br>To get information about any of them, click the items icon.<br><br>";
Ajustement de la disposition à l’aide de la fonction FixSize
La fonction FixSize permet de spécifier plusieurs aspects de la disposition qui ne peuvent pas être gérés par la feuille de style.
Il existe deux bannières possibles qui peuvent être utilisées, en fonction de la hauteur de l’affichage Web.
if (200 > document.body.clientHeight) {
//A short window. Use the minibanner.
document.all.Banner.style.visibility = "hidden";
document.all.MiniBanner.style.visibility = "visible";
document.all.FileList.style.top = 32;
document.all.Info.style.top = 32;
}
else {
//A normal window. Use the normal banner.
document.all.Banner.style.visibility = "visible";
document.all.MiniBanner.style.visibility = "hidden";
document.all.FileList.style.top = (document.all.Banner.offsetHeight - 32) + "px";
document.all.Info.style.top = (document.all.Banner.offsetHeight) + "px";
document.all.Rule.style.width = (document.body.clientWidth > 84 ? document.body.clientWidth - 84 : 0) + "px";
}
Generic.htt utilise une hauteur de 200 pixels comme ligne de séparation entre les valeurs normales et minibanner. Il définit le style de la bannière sélectionnée sur visible et l’autre sur masqué. Il définit également plusieurs propriétés de disposition pour les régions Info et FileList afin qu’elles s’adaptent correctement à la bannière sélectionnée.
Si une vue Web devient trop étroite, FixSize utilise la pleine largeur de la zone d’affichage pour l’affichage FileList.
if (400 > document.body.clientWidth) {
//A narrow window. Hide the Info region, and expand the file list region.
document.all.Info.style.visibility = "hidden";
document.all.FileList.style.pixelLeft = 0;
document.all.FileList.style.pixelTop = document.all.Info.style.pixelTop;
}
else {
//Normal width.
document.all.Info.style.visibility = "visible";
document.all.FileList.style.pixelLeft = document.all.Info.style.pixelWidth;
}
Generic.htt utilise 400 pixels comme ligne de séparation entre les affichages étroits et larges. Si l’affichage Web est trop étroit, FixSize masque la région Info et modifie la propriété FileList pixelLeft afin qu’elle remplit la région entière sous la bannière.
Les dernières lignes de FixSize ajustent plusieurs propriétés de disposition en fonction des résultats du code précédent. La largeur de la région FileList est ajustée de sorte qu’elle remplit exactement la partie de la vue Web qui n’est pas occupée par la région Info. La hauteur de la région d’informations est dimensionnée pour s’ajuster entre la bannière et le bas de l’affichage Web.
document.all.FileList.style.pixelWidth = document.body.clientWidth
document.all.FileList.style.pixelLeft;
document.all.FileList.style.pixelHeight = document.body.clientHeight
document.all.FileList.style.pixelTop;
document.all.Info.style.pixelHeight = document.body.clientHeight
document.all.Info.style.pixelTop;
Récupération et affichage des informations de dossier
Lorsqu’un utilisateur sélectionne un élément, l’objet FileList déclenche un événement SelectionChanged . Cet événement est géré par un script JScript. Par souci de simplicité, le script trouvé dans Generic.htt suppose qu’un seul élément peut être sélectionné à la fois.
<script language="JavaScript" for="FileList" event="SelectionChanged">
// Updates the TextBlock region when an item is selected.
var data;
var text;
// Name
text = "<b>" + FileList.FocusedItem.Name + "</b>";
// Comment
data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 3);
if (data)
text += "<br>" + data;
// Documents
data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 1);
if (data)
text += "<br><br>" + FileList.Folder.GetDetailsOf(null, 1) + ": " + data;
// Status
data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, 2);
if (data)
text += "<br><br><b><font color=red>" + data + "</font></b>";
// Tip
data = FileList.Folder.GetDetailsOf(FileList.FocusedItem, -1);
if (data != "" && data != FileList.FocusedItem.Name)
text += "<br><br>" + data;
TextBlock.innerHTML = text;
</script>
Le script utilise deux propriétés FileList, FileList.FocusedItemet FileList.Folder pour obtenir des informations sur l’élément. FileList.FocusedItem identifie l’élément sélectionné, avec le nom de l’élément donné par FileList.FocusedItem.Name. FileList.Folder est en fait un pointeur vers un objet Folder . La méthode GetDetailsOf de l’objet Folder est utilisée pour récupérer les informations restantes sur l’élément.
Toutes les informations sont concaténées en une seule chaîne de texte, séparée par
balises pour la lisibilité. Le texte est ensuite affiché en l’affectant à TextBlock.innerHTML.
Récapitulatif
Ce chapitre décrit certaines des techniques que vous pouvez utiliser pour personnaliser la façon dont windows Explorer affiche les informations sur les dossiers Shell. La création d’un fichier Desktop.ini vous permet d’effectuer une personnalisation simple, comme l’affichage d’une icône personnalisée à la place de l’icône de dossier standard. Lorsqu’un dossier apparaît dans une vue Web, sa disposition et son affichage sont contrôlés par un modèle HTML qui détermine quelles informations sont affichées et comment. Vous pouvez exercer un haut degré de contrôle sur la vue Web d’un dossier à l’aide de techniques html, DHTML et de script standard pour créer un modèle personnalisé.
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour