Droptiles - Metro 风格的实时磁贴支持的 Web 仪表板

引言

Droptiles 是一个 Windows 8 开始风格的 Metro 风格 Web 2.0 仪表板。它使用磁贴构建体验。磁贴是小型应用程序，可以从外部源获取数据。点击磁贴会启动完整的应用程序。应用程序可以是任何现有网站，也可以是专门为适应仪表板体验而定制的网站。Droptiles 几乎完全由 HTML、Javascript 和 CSS 构建，因此具有高度的可移植性。示例项目使用 ASP.NET 构建，以展示一些服务器端集成，例如注册、登录和从服务器获取动态数据。但只需稍作修改，您就可以将其移植到 PHP、Ruby、JSP 或任何其他平台。Droptiles 是我的 Dropthings 的续作，Dropthings 是第一个开源 Web 2.0 仪表板。 

立即体验！，访问 Droptiles.com

从以下位置获取代码： 

https://github.com/oazabir/Droptiles

功能   

• 拟态 Metro 风格的用户界面。CSS 框架用于构建 Metro 风格的网站，灵感来自 metroui.org.ua。 
• 拖放磁贴以个性化体验。
• 客户端对象模型和数据绑定，便于实现 MVVM。
• 服务器端平台无关实现。可轻松移植到 PHP、JSP。
• 动态磁贴。磁贴是小型应用程序，可以从各种来源加载数据。

它甚至拥有自己的应用商店！ 

如何使用 Droptiles 

• 企业仪表板，汇总来自各种系统的数据，并提供内部/互联网应用程序的启动板。 
• Web 2.0 门户，以磁贴形式提供端口。汇总来自各种服务的数据，并作为不同服务的启动板。
• 支持触摸的自助服务终端前端。非常适合酒店、餐厅、银行前台自助服务。 
• 用于新闻和研究的内容聚合器。

主要组成部分

Droptiles 有三个主要部分：

• 仪表板
• 应用商店
• 登录、注册、设置。

仪表板是主页，显示磁贴。

应用商店展示了可供用户添加到仪表板的应用集合。

登录、注册、设置区域使用 ASP.NET 构建，并使用 ASP.NET Membership provider。

仪表板

仪表板由多个部分组成。每个部分包含一个磁贴集合。您看到的每个框都是一个磁贴。磁贴是小型应用程序。磁贴可以是以下类型：

• 简单的 HTML 页面 
• 动态 Javascript 迷你应用程序  
• 动态页面 

编写磁贴 

让我们看看Flickr磁贴。首先，所有磁贴的外观都在 Tiles.js 文件中定义，该文件包含所有磁贴的元数据。例如，Flickr 磁贴的元数据定义如下：

    flickr: function (uniqueId) {
        return {
            uniqueId: uniqueId,
            name: "flickr",
            iconSrc: "img/Flickr alt 1.png",
            label: "Flickr",
            size: "tile-double tile-double-vertical",
            color: "bg-color-darken",
            appUrl: "http://www.flickr.com/",
            cssSrc: ["tiles/flickr/flickr.css"],
            scriptSrc: ["tiles/flickr/flickr.js"],
            initFunc: "flickr_load"
        };
    }

icon 是在加载 javascript、css、html 时在磁贴上显示的默认图标。磁贴的水平和垂直大小在 size 属性中定义。然后，在点击时，定义了什么 URL 会在全屏视图中托管 appUrl。需要加载的附加 CSS、Javascript 在 cssSrc 和 scriptSrc 中定义。最后，initFunc 告诉在 Javascript 加载完成后要调用哪个函数。

元数据定义了磁贴在仪表板上的显示方式。从 Flickr 加载数据的行为来自 Flickr.js 文件，定义如下：

    function flickr_load(tile, div) {
 
        var url = "http://api.flickr.com/services/feeds/photos_public.gne?lang=en-us&format=json&tags=nature&jsoncallback=?";    
 
        $.getJSON(url, function (data) {        
            var ctr = 0;
            $.each(data.items.reverse(), function (i, item) {
                if (item.tags.length < 150) {
                    var sourceSquare = item.media.m;
                    var sourceOrig = (item.media.m).replace("_m.jpg", ".jpg");
 
                    var htmlString = '<div class="flickr_item"> <a target="_blank" href="' + sourceOrig +
                        '" class="link" title="' + item.title + '">';
                    htmlString += '<img title="' + item.title +
                        '" src="' + sourceSquare + '" ';
                    htmlString += 'alt="' + item.title +
                        '" />';
                    htmlString += '</a><div class="flickr_title">' + item.title + '</div>' +
                        '</div>';
 
                    tile.slides.push(htmlString);
 
                    ctr = ctr + 1;
                }
            });
 
            tile.counter(ctr);
        });
 
    }

就是这样。

磁贴可以是直接在磁贴框中加载的动态 aspx 页面。例如：

仪表板的工作方式如下：

• 首先获取每个部分中的部分列表和磁贴列表。
• 根据 Tiles.js 文件中存储的定义创建磁贴框。 
• 对于每个磁贴，查看它是否需要加载任何外部 Javascript、CSS 和 HTML 文件。如果是，则加载它们。
• 执行 initFunc 中定义的函数。将磁贴对象、磁贴 div 引用和 initParams 传递给它。 

仪表板的默认磁贴 

仪表板上显示的默认磁贴与 Tiles.js 文件中的定义相同：

    window.DefaultTiles = [
        {
            name :"Section1",
            tiles: [
               { id: "flickr1", name:"flickr" },
               { id: "amazon1", name:"amazon" },
               { id: "news1", name: "news" },
               { id: "weather1", name: "weather" },
               { id: "calendar1", name: "calendar" },
               { id: "feature1", name: "feature" },
               { id: "facebook1", name: "facebook" }
            ]
        },
        {
            name: "Section2",
            tiles: [
               { id: "wikipedia1", name: "wikipedia" },           
               { id: "email1", name: "email" },
               { id: "maps1", name: "maps" },
               { id: "angrybirds1", name: "angrybirds" },
               { id: "cuttherope1", name: "cutTheRope" },
               { id: "dynamicTile1", name: "dynamicTile" },
               { id: "buy1", name: "buy" }]
        },
        {
            name: "Section3", tiles: [
               { id: "youtube1", name: "youtube" },
               { id: "ie1", name: "ie" },
 
            ]
        }
    ];

磁贴的显示顺序与其定义时的顺序完全一致。名称必须与定义磁贴元数据时使用的名称相同。

磁贴的 HTML 标记

磁贴有各种组成部分：

以下 HTML 定义了磁贴设计：

    <div class="metro-sections" data-bind="foreach: sections">
        <div class="metro-section" data-bind="attr: {id : uniqueId}, foreach: sortedTiles">
            <div data-bind="attr: { id: uniqueId, 'class': tileClasses }">
                <!-- ko if: tileImage -->
                <div class="tile-image">
                    <img data-bind="attr: { src: tileImage }" src="img/Internet%20Explorer.png" />
                </div>
                <!-- /ko -->
                <!-- ko if: iconSrc -->
                <!-- ko if: slides().length == 0 -->
                <div data-bind="attr: { 'class': iconClasses }">
                    <img data-bind="attr: { src: iconSrc }" src="img/Internet%20Explorer.png" />
                </div>
                <!-- /ko -->
                <!-- /ko -->
                <div data-bind="foreach: slides">
                    <div class="tile-content-main">
                        <div data-bind="html: $data">
                        </div>
                    </div>
                </div>
                <!-- ko if: label -->
                <span class="tile-label" data-bind="html: label">Label</span>
                <!-- /ko -->
                <!-- ko if: counter -->
                <span class="tile-counter" data-bind="html: counter">10</span>
                <!-- /ko -->
                <!-- ko if: subContent -->
                <div data-bind="attr: { 'class': subContentClasses }, html: subContent">
                    subContent
                </div>
                <!-- /ko -->
            </div>
        </div>
    </div>

标记中充满了 KnockoutJS 标记，用于将磁贴对象模型绑定到 HTML 标记。

仪表板执行 

这是一个序列图，展示了仪表板如何加载：

Dashboard.js 中的代码非常直接，它完成了所有的魔术！

    var viewModel = new DashboardModel("Start", [], window.currentUser, ui, TileBuilders);
 
    $(document).ready(function () {
 
        // Hide the body area until it is fully loaded in order to prevent flickrs
        $('#content').css('visibility', 'visible');
 
        // Initiate KnockoutJS binding which creates all the tiles and binds the whole
        // UI to viewModel.
        ko.applyBindings(viewModel);
 
        // See if user has a previous session where page setup was stored
        var cookie = readCookie("p");
        if (cookie != null && cookie.length > 0) {
            try {
                viewModel.loadSectionsFromString(cookie);
            } catch (e) {
                // Failed to load saved tiles. Load the default tiles.
                viewModel.loadSectionsFromString(DefaultTiles);
            }
        }
        else {
            // No cookie, load default tiles. Defined in Tiles.js
            viewModel.loadSectionsFromString(DefaultTiles);
        }

首先，它尝试从 cookie 中读取部分和磁贴的设置（如果已保存）。如果 cookie 中未找到，则加载默认定义。然后，TheCore.js 中的框架开始工作，负责创建磁贴并将动态行为注入到磁贴中。

代码有详细的注释，因此您可以从中阅读详细信息。

应用商店 

 

应用商店的体验与仪表板的构建方式相同。应用商店展示了 Droptiles 框架的可重用性。它使用相同的 TheCore.js 来提供体验。唯一的区别是，它有一个自己的 AppStoreTiles.js 文件，用于定义应用商店中显示的磁贴元数据和默认磁贴，而不是 Tiles.js 文件（该文件定义了磁贴元数据和默认磁贴）。

这就是不同之处。 

这是 AppStore.js 中的代码：

    var viewModel = new DashboardModel("App Store", [], window.currentUser, ui, 
        TileBuilders);
 
    $(document).ready(function () {
 
        // Hide the body area until it is fully loaded in order to prevent flickrs
        $('#content').css('visibility', 'visible');
 
        // Initiate KnockoutJS binding which creates all the tiles and binds the whole
        // UI to viewModel.
        ko.applyBindings(viewModel);
 
        viewModel.switchTheme('theme-white');
        viewModel.loadSectionsFromString(window.AppStoreTiles);

就是这样。loadSectionsFromString 函数负责创建应用商店磁贴。它以字符串序列化的格式接收部分和磁贴配置，如下所示：

    Section1~flickr1,flickr.news1,news|Section2~angrybirds1,angrybirds

Cookie 中也以这种方式存储数据，以便下次访问仪表板时，它会显示您上次离开时的状态。  

结论

Droptiles 是一个开源项目，旨在展示如何仅使用 HTML、Javascript 和 CSS 构建 Windows 8 开始屏幕体验。它可以被改编用于构建各种 Web 应用程序，尤其是支持触摸的应用程序。现代的 Metro 外观和感觉使其非常适合用作自助服务门户体验或内容聚合器。