Klasörün Web Görünümünü Özelleştirme

[Bu özellik yalnızca Windows XP veya önceki sürümlerde desteklenir. ]

Web görünümü, Bir Kabuk klasörünün içeriği hakkında bilgi görüntülemek için Windows Gezgini'ni kullanmanın güçlü ve esnek bir yoludur.

Giriş

Windows, kullanıcılara Kabuk ad alanını görüntülemek ve gezinmek için iki birincil yol sunar. Bunların en tanıdıkı olan Klasik stil, tanıdık Windows Dosya Yöneticisi'ne benzer. Sağ bölmede seçili durumdaki klasörün içeriği beş biçimde listelenir: Büyük Simge, Küçük Simge, Liste, Ayrıntılar ve Küçük Resim. Windows Dosya Yöneticisi'nden en önemli fark, Windows Internet Explorer'ın Gezgin çubuğuna çok benzeyen sol bölmedir. Yeniden boyutlandırılabilir veya kaldırılabilir ve arama bölmesi gibi tanıdık dosya sistemi ağacına ek olarak birkaç bölme görüntüleyebilir.

Not

Bu belgedeki bilgiler Windows XP için geçerli değildir, açıklanan teknikler yalnızca Windows'un önceki sürümleri için geçerlidir.

 

Aşağıdaki çizimde, Yazıcılar klasörü Klasik stilde gösterilmiştir.

yazıcılar klasörünün klasik stilini .

Klasik stil, normal dosya sistemi klasörleri ve dosyaları için makul ölçüde iyi çalışır. Ancak, Windows 95'in kullanıma sunulmasıyla birlikte dosya sistemi ad alanına dönüşmüştür. Ad alanı, sanal klasörlerin oluşturulmasına olanak tanır. Örneğin, Yazıcılar veya Ağ Mahallesi, normal bir dosya sistemi klasöründen çok farklı bilgi türlerini temsil edebilir.

Web görünümü olarak da bilinen Web stili, Klasik stilden daha esnek ve güçlü bir bilgi sunma yöntemi sunar. Web görünümünde, kullanıcı temelde Internet Explorer'ı kullanarak ad alanını görüntüler ve bu ad alanında geziner. Web görünümünün temel düzeni Klasik stile benzer. Gezgin çubuğu değiştirilmez. Ancak, dosya listesi tarafından işgal edilen bölge, etkili bir şekilde bir web sayfası olan genel amaçlı bir görüntüleme alanı haline gelir. Web görünümü yine de bir klasörün içeriği hakkındaki bilgileri görüntülemek için kullanılır, ancak hangi bilgilerin görüntüleneceği veya nasıl görüntüleneceği konusunda birkaç kısıtlama vardır. Her klasörün kendi Web görünümü olabilir ve bu görünüm kendi özelliklerine uyacak şekilde özelleştirilebilir.

Aşağıdaki çizimde, Yazıcılar klasörünün (daha önce Klasik stilde gösterilmiştir) Web görünümü gösterilmektedir.

Yazıcılar klasörünün varsayılan web görünümünü .

Geleneksel web sayfaları gibi Web görünümleri de HTML tabanlı bir şablon tarafından denetlenmektedir. Web görünümü şablonu yazmak, web sayfası yazmakla neredeyse aynıdır ve içerik ve bilgi düzeninde aynı düzeyde esneklik sağlar. Web görünümü şablonları, bir kullanıcının öğeye tıklaması gibi olaylara yanıt vermek için Dinamik HTML (DHTML) ve betik kullanabilir. Ayrıca, klasör veya içeriklerinden bilgi almalarına ve görüntülemelerine olanak sağlayan nesneleri barındırabilir.

Kullanıcı, Windows Gezgini'ni başlatarak, Görünüm menüsünde Klasör Seçenekleri tıklayarak ve şu seçeneği belirleyerek bir Web görünümü seçebilir: klasörlerde Web içeriğini etkinleştir seçeneğini belirleyin. Ancak kullanıcı, Görünüm menüsüne tıklayarak, Explorer Çubuğuüzerine gelip Klasörler'ne tıklayarak Internet Explorer'ı başlatabilir ve tarayıcıyı dosya sistemine işaret edebilir. Web görünümünde, Internet Explorer ile Windows Gezgini arasında neredeyse hiçbir fark yoktur.

Sağ bölmenin sol tarafında, Yazıcılar Web görünümü, klasörün adını ve simgesini içeren bir başlık ve ardından klasörle ilgili bir bilgi bloğu görüntüler. Her zamanki dosya listesi sayfanın sağ tarafını kaplar.

Kullanıcı bir öğeye tıkladığında, bilgi bloğunda öğe hakkındaki ayrıntılı bilgiler görüntülenir. Yazıcılar Web görünümü aslında Klasik stilde sağlanan bilgilerin aynısını görüntüler, ancak bunu daha kullanılabilir bir biçimde gösterir. Ancak, Web görünümü Klasik stil bilgilerini görüntülemek için farklı bir yöntem değildir. Örneğin, klasik stilde bulunmayan bir özellik olan bilgi bloğunun altında yararlı bir web sitesinin bağlantısı görüntülenebilir. Kullanıcı bağlantıya tıklarsa site görüntülenir.

Önceki çizimde gösterilen Yazıcılar Web görünümü Klasik stile benzer, çünkü temel alınan Web görünümü şablonu (.htt dosyası) bu şekilde yazılmıştır. Örneğin, dosya listesi doğrudan Web görünümü şablonu tarafından oluşturulmaz. Web görünümü şablonu tarafından barındırılan bir WebViewFolderContents nesnesi tarafından oluşturulur ve görüntülenir. Nesnenin yöntemleri ve özellikleri, Web görünümünün düzenini denetlemesine ve belirli öğeler hakkında bilgi almasına olanak sağlar. Başlık ve bilgi bloğunun içeriği ve düzeni Web görünümü şablonunda belirtilir.

Web görünümü DHTML'yi desteklediğinden, şablon kullanıcı etkileşimini işlemek için de kullanılabilir. Örneğin, bir kullanıcı yazıcı simgelerinden birine tıkladığında WebViewFolderIcon nesnesi SelectionChanged olayını tetikler. Şablon, istenen bilgileri almak ve bilgi bloğunda görüntülemek için betikte yazılmış bir DHTML olay işleyicisi kullanır.

Yazıcılar klasörü için bu basit örnek, Web görünümünü kullanmanın tek yolu değildir. Kendi şablonunuzu ve gerekirse nesnelerinizi yazarak bilgileri görüntülemek ve kullanıcıyla en etkili bulduğunuz şekilde etkileşime geçmek için bir Web görünümü kullanabilirsiniz. Şu anda Web görünümü şablonlarının yalnızca sistem tanımlı sanal klasörleri görüntülediğini unutmayın. Geliştiriciler bir ad alanı uzantısı uygulayarak sanal klasör oluşturasa da, bunu görüntülemek için Ad Alanı Uzantıları açıklanan teknikleri kullanmaları gerekir.

Web Görünümü Şablonunu Kullanma

Verilerin Web görünümünde görüntülenme şekli, klasörün Desktop.ini dosyası değiştirilerek sınırlı bir şekilde özelleştirilebilir. Ayrıntılar için bkz. Klasörleri Desktop.ini ile Özelleştirme. Web görünümünü özelleştirmenin çok daha esnek ve güçlü bir yolu, özel bir Web görünümü şablonu oluşturmaktır.

Web görünümü şablonu, Web görünümünde neyin ve nasıl görüneceğini denetler. Bilgileri almak ve görüntülemek ve kullanıcıyla etkileşime geçmek için standart HTML, DHTML ve betik oluşturma tekniklerini kullanır. Bu bölümde basit bir şablonu (Generic.htt) inceleyerek Web görünümü oluşturma işlemi açıklanmıştır.

<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:aaaaaaaa-0000-1111-2222-bbbbbbbbbbbb">
                <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:bbbbbbbb-1111-2222-3333-cccccccccccc"
        </object>

    </body>
</html>

Kendi Web görünümü şablonunuzu oluşturmanın basit bir yolu Generic.htt dosyasını alıp değiştirmektir. Oldukça sınırlı olduğundan, ek fikirler için diğer, daha karmaşık örneklere de bakmanız gerekir. Bunları, sisteminizde tüm Web görünümü şablonları tarafından kullanılan .htt uzantısını arayarak bulabilirsiniz. Bir klasör için özel şablon oluşturmak istiyorsanız, genellikle C:\Winnt\Web veya C:\Windows\Web'de depolanan varsayılan Folder.htt şablonuyla başlamalısınız. Bu dosyaların gizli olarak tanımlandığını unutmayın, bu nedenle bunları görüntülemek için Windows Gezgini ayarlarınızı değiştirmeniz gerekebilir. Bir .htt dosyası oluşturulduktan sonra salt okunur olarak işaretlenmeli ve gizlenmelidir.

Web görünümü şablonları geleneksel .htm belgelerden biraz farklı olduğundan .htt uzantısını kullanır. Temel fark, sistemin geçerli ad alanı değerleriyle değiştirdiği, .htt dosyalarında bulunan birkaç özel değişkendir. %THISDIR% ve %THISDIRPATH% değişkenleri, seçili durumdaki klasörün adını ve yolunu temsil eder. %TEMPLATEDIR% değişkeni, Web görünümü stil sayfalarının depolandığı klasörü temsil eder.

Çoğu HTML şablonunda olduğu gibi .htt dosyalarının da iki temel bölümü vardır: gövde ve baş. Şablon gövdesi, Web görünümünün temel düzenini denetler ve ad alanıyla iletişim kurmak ve bilgileri görüntülemek için kullanılan nesneleri yükler. Baş, yeniden boyutlandırmayı işleme ve klasörden bilgi alma gibi görevleri yerine getiren betikler ve işlevler içerir. Generic.htt de dahil olmak üzere çoğu şablon bir stil sayfası da içerir. Genel olarak, şablonunuza stil sayfası bilgilerini eklemek daha iyidir. Web görünümü uzak ad alanlarıyla kullanıldığında ayrı stil sayfaları düzgün çalışmayabilir.

Şablon Gövdesi

Şablonun gövdesi, Web görünümü tarafından nelerin sunulacağını belirtir. Ayrıca, bilgileri görüntülemek ve ad alanı klasörleriyle iletişim kurmak için kullanılan nesnelerin yüklendiği yerdir. Generic.htt tarafından tanımlanan düzen, önceki bölümdeki çizimde gösterilene benzer. Üç görüntüleme bölgesi vardır: görünümün sol tarafındaki başlık ve bilgi bloğu ve sağ taraftaki dosya listesi.

Bölgelere, stil sayfası ve DHTML tarafından kullanılacak tanımlayıcılar atanır. Sonraki bölümde açıklandığı gibi, "Başlık" ve "MiniBanner" tanımlayıcılarına sahip iki olası başlık vardır. Bilgi bloğunun bölgesinin tanımlayıcısı "Bilgi"dir. Dosya listesi nesnesinin tanımlayıcısı "FileList" şeklindedir. Bölgenin düzeni ayrıntıları, bölümün ilerleyen kısımlarında ele alınacak olan stil sayfası ve bir Microsoft JScript işlevi olan FixSizetarafından işlenir.

Başlık Bölgesi

Başlık, ekranın üst kısmında, Web görünümünün sol üst köşesinde bulunur. Normal başlık, sağ taraftaki dosya listesinde içeriği görüntülenen klasörün adını ve simgesini görüntüler. Ancak, pencere çok kısa olursa, simgenin altında bilgileri görüntülemek için yer olmayabilir. Bu nedenle Generic.htt, yalnızca klasör adını görüntüleyen bir minibanner da tanımlar. Her iki başlık da başlangıçta gizli olarak tanımlanır. FixSize hangisinin görüntüleneceğini seçer ve bunu "görünür" olarak ayarlar.

Generic.htt için normal başlık şu şekilde tanımlanır:

<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:aaaaaaaa-0000-1111-2222-bbbbbbbbbbbb">
        <param name="scale" value=200>
    </object>
</div>

Başlık bölümünün ilk bölümünde başlığın altında yatay bir kural bulunur. Tablo etiketleri, konumunu denetlemek için kullanılır. nowrap özniteliği bir şey için ayarlandı Sözcük kaydırmasını önlemek için etiket. Sistem, %THISDIRNAME% geçerli klasörün adıyla değiştirir. "Kolaylık olması açısından 'Icon' tanımlayıcısına sahip bir WebViewFolderIcon nesnesi, klasörün simgesini ayıklayıp görüntülemek için yüklenir."

Minibanner bölümü normal başlıkla benzerdir. Başlığın şekli biraz daha yüksek konumlandırılmıştır ve buna dair bir kural yoktur. Simge olmadığından WebViewFolderIcon nesnesi yüklenmez.

<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>

Bilgi Bölgesi

Web görünümünün başlığın altındaki bölümü, seçili öğe hakkında ayrıntılı bilgi sunmak için kullanılır. Hiçbir öğe seçilmezse, varsayılan bir ileti gösterilir. Generic.htt yalnızca tek bir metin bloğu görüntülediğinden, bu bölüm oldukça basittir.

<div id="Info">
    <p style="margin-top: 16px");
        <span id="TextBlock">
        </span>
</div>

Bilgileri toplama çalışmalarının çoğu, bölümün ilerleyen bölümlerinde ele alınan bir klasör bilgileri betiği tarafından işlenir. TextBlock.innerHTMLöğesine metin atayarak bilgileri görüntüler.

Bu öğeleri değiştirerek veya ek öğeler ekleyerek bilgilerin görünümünü kolayca özelleştirebilirsiniz. Web sayfasına yerleştirebileceğiniz her şey kullanılabilir. Örneğin, web sitenizin bağlantısını görüntülemek için Generic.htt dosyasındaki metin bloğundan sonra bir tutturucu öğesi ekleyebilirsiniz.

<div id="Info">
    <p style="margin-top: 16px");
        <span id="TextBlock">
        </span>
        <span>
        <p> Click on <a href="https://your.address"></a>
        </span>
</div>

FileList Bölgesi

Son olarak Generic.htt, FileList bölgesi için bir WebViewFolderContents nesnesi yükler. Tanımlayıcısı "FileList" olarak ayarlandığından bundan sonra FileList nesnesi olarak adlandırılacaktır.

<object id="FileList" border=0 tabindex=1 classid="clsid:bbbbbbbb-1111-2222-3333-cccccccccccc"
        </object>

FileList nesnesi çoğu Web görünümünde bulunur ve çeşitli amaçlara hizmet eder. FileList, seçili klasörün içerdiği öğelerin listesini Klasik stildeki dosya listesiyle aynı seçeneklere ve görünüme sahip olarak görüntüler. Bir öğe seçildiğinde, FileList bir SelectionChanged olayı başlatarak Web görünümüne bildirir. FileList ayrıca tek tek öğeler hakkındaki bilgileri almak ve görüntüleme alanının konumunu ve boyutunu denetlemek için kullanılabilecek yöntemleri ve özellikleri kullanıma sunar.

FileList nesnesi çok yararlı olsa da, yalnızca dosya boyutu veya öznitelikler gibi standart dosya sistemi bilgilerini döndürür. Shell klasöründen diğer tür bilgileri almak için ek nesneleri yüklemeniz ve işlemeniz gerekir. Web sayfası tarafından barındırılabilen tüm nesneler Web görünümüyle kullanılabilir.

Şablon Başlığı

Web görünümü şablonunun başı, fiili işin büyük bölümünü gerçekleştiren betikleri ve işlevleri içerir. İşlenmeleri gereken iki temel görev vardır. Bunlardan biri, farklı görüntüleme bölgelerini barındıracak şekilde ayarlanması gereken Web görünümü görünümünün düzenidir. Diğeri, bir öğe seçildiğinde klasördeki bilgileri almak ve görüntülemektir. Stil sayfalarında olduğu gibi, tüm betikleri ve işlevleri ayrı dosyalar olarak adlandırmak yerine şablona eklemek daha iyidir.

Web Görünümü Düzenini Denetleme

Web görünümü için kullanılabilir alan, Web görünümü penceresinin boyutuna ve Windows Gezgini çubuğunun ne kadarının kapladığına bağlıdır. Pencere veya Windows Gezgini çubuğu yeniden boyutlandırıldığında bu alan değişir. Bu nedenle, bir Web görünümü yüklendiğinde düzenin kullanılabilir alanla eşleşmesi ve yeniden boyutlandırıldığında uygun şekilde değiştirilmesi gerekir. Düzenin çoğu stil sayfasında belirtilir. Örneğin Bilgi bölgesi, Web görünümünün en soldaki yüzde 30'unu kaplar.

#Info       {position: absolute; top: 88px; width: 30%; background: window;
    overflow: auto}

Web görünümü yeniden boyutlandırıldıkçe, Bilgi bölgesinin genişliği bu yüzdeyi koruyacak şekilde değişir. FixSize, bir stil sayfası tarafından çözülemeyen düzen sorunlarını yönetir.

Web Görünümünü Yükleme ve Başlatma

Web görünümü yüklendiğinde, düzenin kullanılabilir görüntü alanına uyacak şekilde ayarlanması gerekir. Henüz hiçbir öğe seçilmediğinden, Web görünümleri normalde klasörün tamamı için geçerli olan bazı varsayılan bilgileri görüntüler. Başlatmayı işlemek için Generic.htt için <BODY> etiketi yük olayını algılar ve Init işlevini çağırır.

<body scroll=no onload="Init">

Init basit bir JScript işlevidir.

function Init() {
    window.onresize = FixSize;
    FixSize();
    TextBlock.innerHTML = L_Intro_Text;
}

Init, Web görünümü görüntüleme alanı her değiştiğinde çağrılması için FixSize'yi window.onresize olayına bağlar. Ardından FixSize'ı çalıştırarak ilk düzeni ayarlar ve Bilgi bölgesine L_Intro_Text atar. L_Intro_Text, stil sayfası bölümünde tanımlanan bir giriş metni bloğudur.

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>";

FixSize işlevini kullanarak Düzeni ayarlama

FixSize işlevi, düzenin stil sayfası tarafından işlenmeyecek çeşitli yönlerini belirtmek için kullanılır.

Web görünümünün yüksekliğine bağlı olarak kullanılabilecek iki olası başlık vardır.

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, normal ve minibanner'lar arasında bölme çizgisi olarak 200 piksellik bir yükseklik kullanır. Seçili başlığın stilini görünür, diğerini gizlenecek şekilde ayarlar. Ayrıca Info ve FileList bölgeleri için seçilen başlıkla düzgün bir şekilde sığacak şekilde çeşitli düzen özellikleri ayarlar.

Web görünümü çok dar hale gelirse, FixSize FileList görüntüsü için görüntüleme alanının tam genişliğini kullanır.

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, dar ve geniş ekranlar arasında bölme çizgisi olarak 400 piksel kullanır. Web görünümü çok darsa, FixSize Bilgi bölgesini gizler ve fileList pixelLeft özelliğini değiştirerek başlığın altındaki bölgenin tamamını doldurmasını sağlar.

FixSize'in son birkaç satırı, önceki kodun sonuçlarına göre çeşitli düzen özelliklerini ayarlar. FileList bölgesinin genişliği, Web görünümünün Bilgi bölgesi tarafından işgal edilmeyen bölümünü tam olarak dolduracak şekilde ayarlanır. Bilgi bölgesinin yüksekliği, başlık ile Web görünümünün alt kısmına sığacak şekilde boyutlandırılır.

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;

Klasör Bilgilerini Alma ve Görüntüleme

Kullanıcı bir öğe seçtiğinde, FileList nesnesi bir SelectionChanged olayı başlatır. Bu olay bir JScript betiği tarafından işlenir. Kolaylık olması için Generic.htt dosyasında bulunan betik, aynı anda yalnızca bir öğenin seçilebileceğini varsayar.

<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>

Betik, FileList.FocusedItemve FileList.Folder olmak üzere iki FileList özelliğini kullanarak, öğe hakkında bilgi edinir. FileList.FocusedItem, seçili öğeyi FileList.FocusedItem.Nametarafından verilen öğenin adıyla tanımlar. FileList.Folder aslında bir Klasör nesnesine işaretçidir. Klasör nesnesinin GetDetailsOf yöntemi, öğeyle ilgili kalan bilgileri almak için kullanılır.

Tüm bilgiler tek bir metin dizesinde birleştirilir ve ayırıcı ile ayrılır.
okunabilirlik için etiketler. Metin daha sonra TextBlock.innerHTMLatanarak görüntülenir.

Özet

Bu bölümde, Windows Gezgini'nin Kabuk klasörleri hakkındaki bilgileri görüntüleme biçimini özelleştirmek için kullanabileceğiniz bazı teknikler özetlenmektedir. Desktop.ini dosyası oluşturmak, standart klasör simgesinin yerine özel bir simge görüntüleme gibi bazı basit özelleştirmeler yapmanıza olanak tanır. Web görünümünde bir klasör göründüğünde, bu klasörün düzeni ve görüntüsü, hangi bilgilerin ve nasıl görüntüleneceğini belirleyen HTML tabanlı bir şablon tarafından denetlenür. Özel şablon oluşturmak için standart HTML, DHTML ve betik oluşturma tekniklerini kullanarak bir klasörün Web görünümü üzerinde yüksek düzeyde denetim kullanabilirsiniz.

 

 

  • Last updated on