應用程序實質上是 Web 應用程序。若是您知道如何生成 Web 應用程序,則您就知道如何生成 SharePoint 相關應用程序。您可使用任何語言,如 HTML、JavaScript、PHP 或 .NET,而且您可使用喜好的 Web 開發工具(包括 Microsoft Visual Studio 2012和基於 Web 的新工具 「Napa」Office 365 開發工具)以生成 SharePoint 相關應用程序。css
雲應用程序模型支持分層的體系結構,在此體系結構中,能夠將應用程序的業務邏輯、數據和用戶界面 (UI) 分配到單獨的組件中。您能夠利用專門爲開發該層而設計的開發工具,而不是使用通用工具。html
Ø SharePoint 託管的應用程序web
若是在 SharePoint 自己中託管應用程序,則代碼爲 HTML 和 JavaScript 並由 SharePoint 託管。服務器
Ø 提供商託管和自動託管的應用程序 - 在雲中app
對於自動託管的應用程序(僅可安裝在 Microsoft SharePoint Online 上),SharePoint 會將應用程序自動部署到 Windows Azure 網站和 SQL Azure 中,這些應用程序在雲中運行。工具
對於提供商託管的應用程序,您或您的 IT 部門能夠在專用服務器或第三方託管服務上託管應用程序。這些應用程序在服務器上或在雲中運行,具體取決於您選擇託管應用程序的方式。開發工具
Ø 具備 SharePoint 中的組件以及雲中的組件的應用程序網站
SharePoint 組件在 SharePoint 中運行,雲中託管的組件在雲中運行。ui
一、建立一個「SharePoint 2013 應用程序」,以下圖,新建Office/SharePoint的項目,選擇應用程序;this
二、新建SharePoint相關應用程序嚮導,以下圖,輸入app名稱,調試站點,如何託管應用程序,這裏咱們選擇SharePoint託管;
三、建立完畢,查看解決方案的結構,Content裏面是Css文件、Xml文件等,Images裏面是圖片素材和Flash等,Scripts裏面是腳本,包括JQuery的引用和咱們本身須要使用的腳本引用,還有app.js的引用;
四、爲SharePoint託管的app建立一個列表,用來存儲咱們的數據。這一建立過程,和開發SharePoint其餘解決方案中建立列表是同樣的,以下圖,輸入項目名稱:
五、SharePoint建立列表嚮導,輸入列表名稱和須要繼承的模板,這裏咱們選擇自定義列表便可;
六、爲咱們的自定義列表建立兩個字段,分別是PicUrl和Description,分別是圖片牆的圖片地址和圖片描述,自帶的標題字段是圖片的標題;
七、爲自定義列表的實例,添加默認的內容,以下圖的xml結構,首先是List也就是列表的定義,而後是Data能夠理解數據,而後是Rows和Row表明每個列表項,最後是字段Field,字段保護一個屬性就是字段名,裏面的值就是字段的值了;
特別要說的是,若是字段的值須要使用HTML描述,須要是CDATE[]這個標誌括起來,具體請參考XML的使用
八、在設計和完成列表實例之後,咱們須要的就是在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()); }
九、固然,頁面上還有照片牆展現的HTML和JavaScript,這些不是咱們App實例的重點,因此就不貼這段代碼了,你們看看展現的效果吧!
十、固然,我以爲上面SharePoint自帶的Ribbon菜單很是難看,因此就用樣式去掉了;
<style type="text/css"> #s4-titlerow { display: none !important; } #suiteBar { display: none !important; } #s4-ribbonrow { display: none !important; } </style>
下圖是去掉Ribbon之後的Default頁面,看起來清爽多了!
十一、在建立完SharePoint 2013 App之後,咱們能夠上傳到App CateLog中,分發給應用程序下的各個網站集,以下圖,打開應用程序目錄:
十二、點擊網站內容,進入適用於SharePoint的應用程序,將SP2013PictureWallApp.app上傳到這裏;
1三、上傳完畢,能夠看到咱們上傳的app以及一些關於app的版本信息等;
1四、打開一個改應用程序下的站點,點擊站點內容,來自您的組織;
1五、能夠看到咱們開發的app了,點擊,便可添加;
1六、信任咱們自定義開發的app,以下圖;
1七、信任之後,以下圖顯示正在添加,沒必要刷新,稍等片刻會添加完畢,變成和其餘app同樣的樣子;
1八、查看咱們app的效果,以下圖:
特別的,本土應該是Gif動態效果,可是在這裏可能顯示不出來,表示有點遺憾!
效果解釋:點擊圖會展現圖片的詳細信息,包括圖片、標題、描述三個信息;能夠再次點開打開頁中的圖片,會顯示這張圖片。
1九、效果截圖展現,以下圖:
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解決方案包下載