本文章是由機器翻譯。

新式應用程式

WinJS ListView 控制項須知

Rachel Appel

你有資料。大量的資料。您需要的使用者可以毫不費力地訪問並使它在您的應用程式時的感覺的方式提出這種資料。應用程式公開其新聞文章、 食譜、 體育比賽的比分、 財務圖表和更多的表單中的資料都晃來晃去各種大小的車廂在螢幕和試圖吸引消費者的注意。應用程式在市場上的絕大多數今天在網格中顯示資料或清單的格式,因為它有意義,作為小型到中型的資料網格是容易為人類消耗、 搜索和篩選。從企業應用程式到個人應用程式到應用程式可能會不管,網格是資料快速視覺化略讀,道具的腳手架。

在 Windows 應用商店的應用程式,您可以設置了此種結構用於資料演示文稿通過使用 ListView 控制項。如果你是新到 Windows 存儲應用程式開發,你可以加快通過閱讀我 2013 年 2 月的文章,"創建 Windows 商店的應用程式與 HTML5 和 JavaScript"(msdn.microsoft.com/magazine/jj891058) 和我 2013 年 7 月的文章,"掌握控制項和設置在 Windows 存儲應用程式生成與 JavaScript"(msdn.microsoft.com/magazine/dn296546)。

ListView 控制項的基礎功能

在 HTML 和 XAML 中可用,ListView 是控制 du jour 以網格或清單的形式顯示資料。在 Windows 庫中的 JavaScript (WinJS) 的應用程式 (本文的重點),你可以使用 ListView 控制項將資料贏控制項屬性設置 < div > 的主機上 元素為"WinJS.UI.ListView",像這樣:

    <div id="listView" data-win-control= "WinJS.UI.ListView"></div>

< > Div 主機清單視圖不包含子項目。 但是,它不會包含屬性的命名資料-贏-選項中的基本配置資訊。 資料-贏-選項允許您設置在 HTML 頁中使用聲明性語法的 ListView 控制項的任何屬性。 若要正確使用 ListView,您需要對它應用以下特性:

  • ListView 組和物料的範本。
  • 組和物料資料來源的清單視圖。
  • 是否清單視圖使用網格或清單佈局 (預設情況下是網格)。

您還應指定 ListView 項選擇模式是否是單個或多個 (預設情況下是多個)。 設置資料-贏-選項屬性中的佈局和 selectionMode 屬性與基本 ListView 看起來像這樣:

    <div id="listView" data-win-control= "WinJS.UI.ListView" data-win-options=
      "{ selectionMode: 'single', layout : {type: WinJS.UI.GridLayout} }" ></div>

雖然上面的代碼中定義清單視圖,清單視圖不是工作本身它需要的 WinJS.Binding.List 物件的説明。清單物件綁定使用的 HTML 元素中的項和組範本定義物件填充的陣列。這意味著該清單物件定義要顯示而範本定義如何顯示它的資料。

創建清單視圖範本

一旦你有了 < div > 對於清單視圖設置,你可以移動了到為它創建範本。清單視圖取決於 HTML 範本,以顯示給使用者可讀的資料。幸運的是,網格、 拆分、 集線器 (集線器是可用的在 Windows 中 8.1) Windows 存儲應用程式範本中包含的一切所需提交的資料以網格或清單的格式,包括示例資料、 預定義的 ListView 控制項和預定義的 CSS 類。您可以修改這些範本或去和創建您自己的如果你想。但是請注意,是否您創建您自己的範本,你應該堅持現代 UI 設計的原則和執行 Windows 8 剪影中用於 Windows 存儲應用程式在開發中心所述 bit.ly/IkosnL。這是你當你使用內置的Visual Studio範本。

ListView 需要項範本,而如果要對資料進行分組,然後它就需要頁眉範本以及。專案和組範本的父元素是簡單 < div > 元素與資料-贏-控制項屬性設置為"WinJS.Binding.Template"。

頁眉範本包含連結,為每個組,按一下時,應採取向列出屬於該組的專案的頁面使用者。這是相當常見的主/詳細資訊導航模式的示例。在圖 1,< div > 歸入"來開始此表"包含一個 < 按鈕 > 元素繫結到組的金鑰。當使用者點擊或按一下按鈕時,她將移到揭示那組的成員的頁面。

圖 1 為 ListView 控制項的頁眉範本和項範本

    <div class="headertemplate" data-win-control="WinJS.Binding.Template">
      <button class="group-header win-type-x-large win-type-interactive"
         data-win-bind="groupKey: key" 
         onclick="Application.
    navigator.pageControl
        .
    navigateToGroup(event.srcElement.groupKey)" 
         role="link" tabindex="-1"
         type="button">
        <span class="group-title win-type-ellipsis" data-win-bind=
          "textContent: title"></span>
        <span class="group-chevron"></span>
      </button>
    </div>
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
      <div class="item">
        <img class="item-image" src="#" data-win-bind=
          "src: backgroundImage; alt: title" />
          <div class="item-overlay">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind=
              "textContent: subtitle"></h6>
          </div>
      </div>
    </div>

中的項範本圖 1 組成的 < div > 隨函附上圖像和兩個文字欄位的標籤。今天的資料在現代的應用程式中找到的大部分是圖形,所以那裡是 < img > 在專案範本中的元素。示例資料填充此元素與只是一種灰色純色的圖像。圖 2描述了預設 ListView 從網格佈局。


圖 2 從具有標題和導覽按鈕的網格範本預設 ListView 標為紅色

編碼的專案和組範本後他們掛一些資料的時間。

資料和使用 ListView 控制項的資料繫結

JavaScript 和 JSON 去手中手 (JSON 是 JavaScript 物件符號,畢竟),這樣一旦你已經檢索到一些 JSON 資料,只是東西它入的 Windows.Binding.List 物件和陣列變成它可用的資料來源的清單視圖。換句話說,你不要直接綁到陣列或資料來源,ListView,含義的清單物件充當清單視圖與資料來源之間的仲介。這是因為該清單物件將資料轉化為 ListView 知道如何使用的東西 — — ListView 本身只定義網格的佈局和外觀。清單物件還提供用於搜索、 排序、 添加和刪除成員的基礎陣列的方法。

檢查 \js\data.js 檔揭示資料的命名空間,以及編造的示例資料的陣列。關鍵這主要是兩個數組混合,形成一種主/從關係。SampleItems 陣列 (詳細資訊) 中的每個物件的組屬性是指在 sampleGroups 陣列 (碩士),其組中所示圖 3

圖 3 示例資料網格中的陣列形式在專案範本

var sampleGroups = [
  { key: "group1", title: "Group Title: 1", 
     subtitle: "Group Subtitle: 1",
     backgroundImage: darkGray, description: groupDescription },
  { key: "group2", title: "Group Title: 2", 
     subtitle: "Group Subtitle: 2",
     backgroundImage: lightGray, description: groupDescription },
  { key: "group3", title: "Group Title: 3", 
     subtitle: "Group Subtitle: 3",
     backgroundImage: mediumGray, description: groupDescription }
];
var sampleItems = [
  { group: sampleGroups[0], title: "Item Title: 1",
    subtitle: "Item Subtitle: 1", 
    description: itemDescription,
     content: itemContent, backgroundImage: lightGray },
  { group: sampleGroups[0], title: "Item Title: 2",
     subtitle: "Item Subtitle: 2", 
     description: itemDescription,
     content: itemContent, backgroundImage: darkGray },
  { group: sampleGroups[0], title: "Item Title: 3", subtitle:
     "Item Subtitle: 3", 
     description: itemDescription,
     content: itemContent, backgroundImage: mediumGray },
  { group: sampleGroups[1], title: "Item Title: 1", subtitle:
     "Item Subtitle: 1", description: itemDescription,
     content: itemContent, backgroundImage: darkGray },
  { group: sampleGroups[2], title: "Item Title: 2", subtitle:
     "Item Subtitle: 2", description: itemDescription,
     content: itemContent, backgroundImage: mediumGray },
];

當然,你就會替換示例資料與您自己通過構建您自己的陣列訪問的 JSON 或 XML 資料,或者通過調用 Web 服務。 你是不綁在使用資料的命名空間和相反可以定義您自己...

靠近頂部的 data.js 檔是代碼的下面行:

var list = new WinJS.Binding.List();

此清單中的變數是陣列的容器。 通過將它傳遞到此清單中的建構函式方法或使用 push 方法,您可以向清單中添加一個陣列:

generateSampleData().forEach(function (item) {
  list.push(item);
});

這樣做將填充該清單與陣列的資料,和你現在準備將清單和清單視圖相關聯。 如果你堅持用預設的範本代碼,則應執行本協會 app 第一次載入時,在 _initializeLayout 函數的 \js\default.js 檔中,如下所示:

listView.itemDataSource = Data.items.dataSource;
listView.groupDataSource = Data.groups.dataSource;

當然,根據您的資料的大小,載入時可能會發生變化,因此你可能需要修改載入過程。 使用您將資料載入到記憶體中,銘記性能的重要性,對使用者的最佳判斷。

請注意,專案和小組的資料來源設置為 Data.items.dataSource 和 Data.groups.dataSource,分別。 名為"專案"和"團體"的資料命名空間的成員請返回已創建的陣列包含的資料 (即 groupedItems) 的職能。 \Js\data.js 檔中的資料的命名空間聲明反映了這一概念,並顯示其他公共成員中使用的資料的命名空間:

WinJS.Namespace.define("Data", {
  items: groupedItems,
  groups: groupedItems.groups,
  getItemReference: getItemReference,
  getItemsFromGroup: getItemsFromGroup,
  resolveGroupReference: resolveGroupReference,
  resolveItemReference: resolveItemReference
});

資料命名空間的專案和團體成員指向的 groupedItems 物件,建造了正確的資料。 你見過到目前為止的資料命名空間中的所有內容包括在Visual Studio專案範本。 如果您選擇從空白專案開始的您需要自己模具資料通過創建類似資料-­訪問而不是依靠資料命名空間成員的方法。

此時,ListView 是完整的資料並綁定設置。 你可以綁定資料來源中的物件的屬性到 HTML 元素使用贏將資料繫結屬性,如下所示:

    <h4 class="item-title" data-win-bind="textContent: title"></h4>

前面的程式碼將標題屬性綁定到 < h4 > 元素作為其文本的一部分。 圖 1圖 2 在行動中有更多的樣本的贏將資料繫結屬性。

現在,你有的清單視圖和資料訪問準備好了,是時候將上移動到樣式清單視圖。

ListView 控制項的樣式

演示文稿都是樣式。 WinJS 庫包含一套完整的 CSS 規則與預定義的樣式您可以覆蓋到模具中以各種方式 ListView。 如果你熟悉 WinJS 控制項樣式,在看到我 2013 年 10 月的文章,"生成回應和現代 UI 與 CSS 的 WinJS 程式," msdn.microsoft.com/magazine/dn451447。 您可以通過覆蓋.win listview CSS 類樣式整個清單視圖。 與樣式清單視圖,您可以設置 ListView 的組成件使用下面的類別選取器:

  • .win-視區:樣式清單視圖的視區。 視區是捲軸位置坐。
  • .win-表面:樣式清單視圖的可捲動區域。 當使用者滾動時移動這一領域。

有兩種方法到 ListView 中的樣式項。 您可以將樣式應用於專案範本通過.win 專案類中,或您可以重寫.win 容器類。 牢記 ListView 中的每個專案包括多個 HTML 元素 (請參閱圖 1 若要查看這些元素)。 正如您可以看到從圖 1,< div > 組成專案範本的元素包含.item.item 圖像,.item 疊加,.item 標題和副標題.item 類。 你會發現這些定義 (即,ui 光和 ui 黑暗) 的系統樣式表中為這些都是給你的風格。

你應該意識到少數幾個陷阱與造型,所涉及的特別是有關何時應用到 ListView 控制項的邊距和襯距。 您可以查看所有前前後後的樣式清單視圖設置為 Windows 存儲應用程式在開發中心的 bit.ly/HopfUg。 Don忘了為所有各種視圖創建樣式國家可能需要您的應用程式。

Windows 8.1 包括對關於兒童/後代選擇器特異性的 ListView 一些樣式設置更改。 這是因為一個新的節點屬於內部樹頁結構的,所以您必須更新你的 CSS 選取器,包含.win itembox 類別選取器,像這樣:.win 容器 |.win itembox |.win 專案。

回應在清單視圖中的檢視狀態更改

回應新的 Windows 8 管理單元和填充的意見是重要的傳遞 Windows 存儲認證進程。 管理單元視圖的充分和填充的意見,是使用者可以如何排列在螢幕上的多個 Windows 應用商店應用程式。 在 Windows 8,使用者可能會到兩個打開的程式視窗,另一個在填充視圖對齊視圖中調整大小。 在 Windows 8.1 windows 的最大數目增加到四個,有更多的應用程式顯示選項。 這些視圖稱為高或狹窄的 Windows 8.1 和稍有不同的管理單元和填充 Windows 8 的意見。

這意味著您必須編寫代碼 ListView 控制項來更改其格式在回應中的應用程式檢視狀態的更改。 這是一個稱為回應設計的過程,您可以通過使用 CSS 媒體查詢實現它。 在 CSS 媒體查詢上底漆,看我的博客張貼、"創建移動網站佈局與 CSS 媒體查詢," bit.ly/1c39mDx

媒體查詢形狀的 ListView 控制項,以適合不同的檢視狀態在不同的螢幕大小為有意義的方式和方向,和每個視圖一起去。 切換到高高的意見時,清單視圖需要轉到一個清單中,如下所示:

listView.layout = new ui.ListLayout();

後來,當使用者切換回原始檢視狀態時,您必須設置 ListView 回一個網格:

listView.layout = new ui.GridLayout({ groupHeaderPosition: "top" });

如果您想要在清單視圖中的項的樣式設置發生更改時更改螢幕,將 CSS 添加到 \css\default.css 檔中的媒體查詢:

@media screen and (-ms-view-state: snapped) {...}

你不必媒體查詢為完整或填充的意見,作為那些使用預設樣式表。 然而,你可以為各種螢幕尺寸如果需要使用不同的媒體查詢。

ListView 和語義縮放

Windows 版本 8 中觸覺系統需要新的方式來視覺化、 導航和搜索資料。 這意味著您需要以不同的角度思考如何的方法搜索。 而不是使用者不必在搜索框中鍵入短語和篩選結果的名單,他們現在可以使用語義縮放凝結成可消化部分的資料。

語義變焦由使用 pinch 手勢讓使用者搜索的東西 (或 Ctrl + 滑鼠滾輪) 泛或縮小並觀察聚合格式的資料。 例如,Windows 啟動頁的行為這種方式通過顯示使用者所有可用的應用程式,當它們縮小。 在您的應用程式中使用語義縮放是容易的的因為它是只是一種控制 WinJS:

<div data-win-control="WinJS.UI.SemanticZoom">
  <!-- The control that provides the zoomed-in view goes here.
-->
  <!-- The control that provides the zoomed-out view goes here.
-->
</div>

SemanticZoom 控制是簡單地為 ListView 或兩個或也許 HTML Repeater 控制項 Windows 8.1 的新包裝。

關於 ListView 雜物

Don不使用 ListView 作為通用佈局控制項。 使用 CSS 框模型,相反。 在 Windows 8.1,你應該考慮你是否更好使用 ListView 控制項或 Repeater 控制項。 如果你不需要大量的從控制項,只需多次重複相同的 HTML 設計,Repeater 控制項是功能的更好。 在寫這篇文章時,Windows 8.1 是在預覽中,因此可能有幾個其他更改清單視圖,以及其他 Windows 存儲區 API 的應用程式元件。 關於 Windows 8.1 API 更改的詳細資訊,請參閱在開發中心文檔 bit.ly/1dYTylx

Rachel Appel é consultora, autora, mentora e antiga funcionária da Microsoft com mais de 20 anos de experiência no setor de TI.Ela dá palestras em importantes congressos do setor, como o Visual Studio Live!, o DevConnections, o MIX e muitos outros.Sua experiência está ligada a soluções de desenvolvimento que alinham negócios e tecnologia com foco na pilha de desenvolvimento da Microsoft e em Web aberta.Para obter mais informações sobre a Appel, visite seu site em rachelappel.com.

衷心感谢以下技术专家对本文的审阅:Eric Schmidt(Microsoft)
Eric Schmidt是內容開發商在微軟的 Windows 開發人員內容團隊中,寫關於 Windows 庫的 JavaScript (WinJS)。 以前,他生成的而在Microsoft Office司辦公平臺的應用程式的代碼樣本。 否則為他花時間與他的家庭、 戲劇字串低音、 生成 HTML5 視頻遊戲或塑膠建材玩具博客 (historybricks.com)。