SharePoint 圖片墻 完成案例圖文教程

應用程序實質上是 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 += "
" + currentItem.get_item('Title') + "
" + currentItem.get_item('Description') + "
";    }    $("#iw_thumbs").html(htmlstr);}function onFail(sender, args) {    alert('Error:' + args.get_message());}

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

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

　　下圖是去掉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應該還可以完成更復雜的東西，甚至于包裝一個不十分復雜的業務系統，然后在應用程序目錄中分發給各個站點使用。