SharePoint 2013 App 示例之圖片牆

　　應用程序實質上是 Web 應用程序。如果您知道如何生成 Web 應用程序，則您就知道如何生成 SharePoint 相關應用程序。您可以使用任何語言，如 HTML、JavaScript、PHP 或 .NET，並且您可以使用喜愛的 Web 開發工具（包括 Microsoft Visual Studio 2012和基於 Web 的新工具 “Napa”Office 365 開發工具）以生成 SharePoint 相關應用程序。

　　雲應用程序模型支持分層的體系結構，在此體系結構中，可以將應用程序的業務邏輯、數據和用戶界面 (UI) 分配到單獨的組件中。您可以利用專門為開發該層而設計的開發工具，而不是使用通用工具。

　　Ø SharePoint 托管的應用程序

　　如果在 SharePoint 本身中托管應用程序，則代碼為 HTML 和 JavaScript 並由 SharePoint 托管。

　　Ø 提供商托管和自動托管的應用程序 - 在雲中

　　對於自動托管的應用程序（僅可安裝在 Microsoft SharePoint Online 上），SharePoint 會將應用程序自動部署到 Windows Azure 網站和 SQL Azure 中，這些應用程序在雲中運行。

　　對於提供商托管的應用程序，您或您的 IT 部門可以在專用服務器或第三方托管服務上托管應用程序。這些應用程序在服務器上或在雲中運行，具體取決於您選擇托管應用程序的方式。

　　Ø 具有 SharePoint 中的組件以及雲中的組件的應用程序

　　SharePoint 組件在 SharePoint 中運行，雲中托管的組件在雲中運行。

　　1、創建一個“SharePoint 2013 應用程序”，如下圖，新建Office/SharePoint的項目，選擇應用程序；

　　2、新建SharePoint相關應用程序向導，如下圖，輸入app名稱，調試站點，如何托管應用程序，這里我們選擇SharePoint托管；

　　3、創建完畢，查看解決方案的結構，Content里面是Css文件、Xml文件等，Images里面是圖片素材和Flash等，Scripts里面是腳本，包括JQuery的引用和我們自己需要使用的腳本引用，還有app.js的引用；

　　4、為SharePoint托管的app創建一個列表，用來存儲我們的數據。這一創建過程，和開發SharePoint其他解決方案中創建列表是一樣的，如下圖，輸入項目名稱：

　　5、SharePoint創建列表向導，輸入列表名稱和需要繼承的模板，這里我們選擇自定義列表即可；

　　6、為我們的自定義列表創建兩個字段，分別是PicUrl和Description，分別是圖片牆的圖片地址和圖片描述，自帶的標題字段是圖片的標題；

　　7、為自定義列表的實例，添加默認的內容，如下圖的xml結構，首先是List也就是列表的定義，然后是Data可以理解數據，然后是Rows和Row代表每一個列表項，最后是字段Field，字段保護一個屬性就是字段名，里面的值就是字段的值了；

　　特別要說的是，如果字段的值需要使用HTML描述，需要是CDATE[]這個標志括起來，具體請參考XML的使用

　　8、在設計和完成列表實例以后，我們需要的就是在Default.aspx頁面上寫HTML，然后在App.js里面寫JS代碼了；這一部分需要參考MSDN關於ECMAScript客戶端對象模型的介紹，我們要做的就是讀取列表里的所有項，然后拼成HTML使用JavaScript腳本的方式進行照片牆展示；廢話不多說了，還是貼代碼吧！

　　簡單介紹一下下面的代碼，就是一個獲得照片牆的JS方法，客戶端對象模型load成功了執行onSuccess方法，load失敗了則執行onFail方法並輸出錯誤信息；大家可以看到JS和SOM的方法很類似，上來獲取當前對象，然后是獲取web，這些方法在msdn中我們都可以查到方法介紹，甚至於例子；

// 此代碼在 DOM 准備就緒時運行，並且可以創建使用 SharePoint 對象模型所需的上下文對象
$(document).ready(function () {
    getPicWall();
});

function getPicWall() {
    var ctx = new SP.ClientContext.get_current();
    var web = ctx.get_web();
    var list = web.get_lists().getByTitle('PictureWall');//獲取特定的文檔庫
    var query = SP.CamlQuery.createAllItemsQuery();
    allItems = list.getItems(query);
    ctx.load(allItems, 'Include(Title,PicUrl,Description)');//載入特定列
    ctx.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFail));
}

function onSuccess(sender, args) {
    var htmlstr = "";
    var ListEnumerator = this.allItems.getEnumerator();
    while (ListEnumerator.moveNext()) {
        var currentItem = ListEnumerator.get_current();//獲取當前項
        htmlstr += "<li><img src=\"" + currentItem.get_item('PicUrl') + "\" data-img=\"" + currentItem.get_item('PicUrl') + "\"/><div><h2>" + currentItem.get_item('Title') + "</h2><p>" + currentItem.get_item('Description') + "</p></div></li>";
    }
    $("#iw_thumbs").html(htmlstr);
}

function onFail(sender, args) {
    alert('Error:' + args.get_message());
}

　　9、當然，頁面上還有照片牆展示的HTML和JavaScript，這些不是我們App實例的重點，所以就不貼這段代碼了，大家看看展示的效果吧！

　　10、當然，我覺得上面SharePoint自帶的Ribbon菜單非常難看，所以就用樣式去掉了；

<style type="text/css">
    #s4-titlerow {
        display: none !important;
    }
    #suiteBar {
        display: none !important;
    }
    #s4-ribbonrow {
        display: none !important;
    }
</style>

　　下圖是去掉Ribbon以后的Default頁面，看起來清爽多了！

　　11、在創建完SharePoint 2013 App以后，我們可以上傳到App CateLog中，分發給應用程序下的各個網站集，如下圖，打開應用程序目錄：

　　12、點擊網站內容，進入適用於SharePoint的應用程序，將SP2013PictureWallApp.app上傳到這里；

　　13、上傳完畢，可以看到我們上傳的app以及一些關於app的版本信息等；

　　14、打開一個改應用程序下的站點，點擊站點內容，來自您的組織；

　　15、可以看到我們開發的app了，點擊，即可添加；

　　16、信任我們自定義開發的app，如下圖；

　　17、信任以后，如下圖顯示正在添加，不必刷新，稍等片刻會添加完畢，變成和其他app一樣的樣子；

　　18、查看我們app的效果，如下圖：

　　特別的，本土應該是Gif動態效果，但是在這里可能顯示不出來，表示有點遺憾！

　　效果解釋：點擊圖會展示圖片的詳細信息，包括圖片、標題、描述三個信息；可以再次點開打開頁中的圖片，會顯示這張圖片。

　　19、效果截圖展示，如下圖：

　　20、特別的，我們可以查看我們插入的列表，但是只能手動敲URL的形式，除非你把這個Url輸出到Default.aspx做成超鏈接；

　　以上便是SharePoint App開發過程的一個簡單示例，我理解就是講需要的JS引用，圖片素材，樣式表等資源，首先拷貝的SharePoint App的解決方案中；然后在Css中編寫樣式，在JS中編寫腳本，使用REST服務或者ECMAScript客戶端對象模型和SharePoint交互，結合使用JQuery或者JavaScript或者其他第三方腳本。

　　當然，這里介紹的僅僅是SharePoint 2013 App的一個簡單示例，SharePoint App應該還可以完成更復雜的東西，甚至於包裝一個不十分復雜的業務系統，然后在應用程序目錄中分發給各個站點使用。

　　好了，今天的SharePoint 2013 App圖片牆的示例，就介紹到這里，下面看看動態的Gif圖，來欣賞下這個簡單而美觀的App吧！

附 錄

SharePoint客戶端對象模型

http://technet.microsoft.com/zh-cn/library/jj163201

wsp解決方案包下載

http://files.cnblogs.com/jianyus/SP2013PictureWallApp.rar