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