存档在 ‘App开发’ 分类

CSS调试技巧css debug

2014年1月4日

我们写网页或sharepoint的时候,经常要修改css样式,写普通的网页还好,修改后刷新就看到效果,如果用sharepoint designer修改网页的css则有点慢,修改后要点击保存,sharepoint designer保存有时候特别慢,要等上十几秒。

sharepoint调整css后用管理看很正常,换个用户又不正确,这个时候又要换个帐号审核看效果。调整好了,发现普通用户看到的页面结构不一样,导致有些固定id或元素位置的css失效,又要重新进行上面的流程。

所以在sharepoint里面编写css比普通的网页要用多很多时间,在这里我发现一个简单一点的办法可以提高开发css的速度:

使用jquery在控制台下面直接修改css,这样就可以实时的看到效果,直到修改满意为止。

css本身有很多选择符,也有优势执行规则的问题,所以不断保存尝试是很浪费时间的,用jquery修改就可以快速的看到效果,不满意刷新一下页面又可以重新来过,快多了!

CSS debug 1

css或javascript的脚本都推荐用chrome进行调整,比ie强大多了,有很少的功能感觉firdebug比他强,但大多数时候还是chrome的比较顺手。

ie自带的也有一个很方便的功能,trace styles,对于问题定位的调整很好,找不到原因的时候我都是将trace style的样式逐个去掉,这样可以快速定位问题。

CSS debug 2

Office365 App开发之provider-hosted供应商托管要注意http和https的问题

2013年12月21日

登录office 365后所有的链接都是htts开头,除了那个public site之外,所以其它内容一直都是以https访问,这里面有些问题需要注意:

一、在Chrome里面,如果访问的网页是https,而这个页面里面内嵌一个http的iframe就会被block住,不显示出来。而office 365 app 开发的provider-hosted模式就是通过iframe的方式内嵌一个iframe来显示provider的内容。

chrome下面提示内容如下:

[blocked] The page at ‘https://uat.sharepoint.com/sites/dev/pages/a.aspx‘ was loaded over HTTPS, but ran insecure content from ‘http://localhost:26077/Coffeemaker.html?name=Friend&teaspoons=0&decaf=false…2DCN&SPClientTag=0&SPProductNumber=16%2E0%2E2308%2E1221&SenderId=A88636EE0‘: this content should also be loaded over HTTPS.

APP开发 1

 

二、在IE里面也有类似的问题,但IE会提示你,是否显示非安全的http请求,可以选择是或否

APP开发 2

点击“显示全部内容”后才能显示http里面的内容。

 

 

我们在这里介绍一下在IIS创建https连接的办法:

一、在IIS创建自签名的证书

APP开发 3

APP开发 4

 

 

二、创建网站的时候协议选择https,证书选择刚才创建的即可

APP开发 5

就是这么简单,我在windows 2008 64bit r2 和windows 7 64bit上面都试过,看样子win7和win2008下的iis都是Server: Microsoft-IIS/7.5

Office365 App开发之供应商托管Provider-hosted

2013年12月19日

Office 365的App开发提供其中一种开发方式是Provider-hosted,即web运行环境不在SharePoint主机上,而是自己另外搭建的web服务器,自己搭建的服务器可以是asp.net, jsp, php等,然后通过CSOM(Client side object model)访问SharePoint内容。

下面的例子就是这样的结构,先来看看效果,网站托管在本地的服务器,所以看到的是localhost,然后直接访问Office 365网站上的内容。

APP开发

Configure the sample(配置例子代码)

To configure the hello world remote app using CSOM sample, update the SiteUrl property of the solution with the URL of the home page of your SharePoint 2013 site.(只需要设置SiteUrl为你在Office365的开发人员网站,不知道的可以参考 如何在Office365上创建APP应用

Build the sample(编译例子)

Press the F5 key to build and deploy the app.(按F5,VS2013会上传app到你的office365网站进行部署,然后运行localhost网站)

Run and test the sample(运行和测试例子)

  1. Choose Trust It on the consent page to grant permissions to the app.(部署的时候要点击“信任)
  2. Choose Populate Data to see some basic information about the parent web.(在页面点击”Populate Data“这个链接即可以看到读取的数据)

Provider-hosted代码下载

Office365 App开发之AutoHosted模式

2013年12月18日

我们回顾一下Office 365  App开发的三种模式

SharePoint-hosted: SharePoint托管,可以使用CSOM(javascript+html)访问SP对象,不能写服务器代码。你可以使用NAPA开发SharePoint APP或者VS2013开发App

Provider-Hosted: 供应商托管,我理解是代码运行在其它web服务上,可以使用的代码不限制,例如c#, jsp,php都可以,然后通过SharePoint提供的接口(OAuthor,CSOM等)访问等对象和数据。

Autohosted:自动托管,可以写C#代码运行在Azure云服务器上,数据库运行在SQL-Azure上,SharePoint自动和Azure沟通。使用VS2013开发。今天的代码就是这个方式,已知的限制是Office App市场暂时不接受这种App。

先来看一下效果,服务器代码执行一个查询,数据存储在SQL – Azure里面

APP开发 1

 

Configure the sample配置例子代码

  1. Open Visual Studio 2012 with administrator privileges.(以管理员身份运行VS2012我的是VS2013)
  2. On the File menu, click Open, Project/Solution and then navigate to the folder where you unzipped the O365_SharePointAuthoHosted.sln file, select it and click Open.(在VS里面打开解压的代码项目文件O365_SharePointAuthoHosted.sln)
  3. Right-click the O365_SharePointAutoHosted solution in the Solution Explorer, click Properties, and on the Property Pages pane, make sure the Multiple startup projects option is selected and then change the Action for the O365_SharePointAutoHostedDB to Start instead of None. This will execute the database project and generate your database when you build the project.(在项目文件的“属性”里面确定“Multiple startup projects”是勾选的,O365_SharePointAutoHostedDB的Action 为Start)

APP开发 2

  1. To generate a DACPAC file, right-click the O365_SharePointAutoHostedDB database project in the Solution Explorer, and then click Build. This creates a database with tables and provides you the DACPAC file in the Debug folder if you are working in the Debug mode; otherwise, you should find it in the Release folder. The file path will be similar to [Your application root folder name]\O365_SharePointAutoHostedDB\bin\Debug\O365_SharePointAutoHostedDB.dacpac.(选择O365_SharePointAutoHostedDB项目,执行编译)
  2. To link your database project to the solution, select the O365_SharePointAutoHosted project in the Solution Explorer and in the Properties pane below the Solution Explorer, click on the down arrow in the SQL Databasefield and then Select the SQL Package and navigate to the location on your computer where the DACPAC file is located.(在O365_SharePointAutoHosted项目的属性选择刚才生成的DACPAC文件或干脆选择整个DB项目)

APP开发 3

  1. In the O365_SharePointAutoHosted Web project, add a SqlAzureConnectionString property in the <appSettings> section of the Web.config file.XML(确定O365_SharePointAutoHosted Web项目的web.config文件里面包含数据库连接串)
    <add key="SqlAzureConnectionString" value="Data Source=(localdb)\Projects;
    	Initial Catalog=O365_SharePointAutoHostedDB;Integrated Security=True;
    	Connect Timeout=30;Encrypt=False;TrustServerCertificate=False" />
  2. Select the O365_SharePointAutoHosted project in the Solution Explorer and in the Properties pane below, enter the URL of your Office 365 Developer Site into the Site URL property field.(在O365_SharePointAutoHosted项目的”Site Url填入你的O365开发网站地址)

Build the sample(编译项目)

The app for SharePoint can now be uploaded to the App Catalog of a SharePoint Online tenancy. For further debugging, you can deploy the app directly from Visual Studio 2012 to a SharePoint Online website if it was created with the site template. To do this, right-click the O365_SharePointAutoHosted solution in Solution Explorer and select Deploy. Tenant administrators can install the app for SharePoint on their Office 365 Developer Site tenancy by using the following procedure:

  1. Right-click the O365_SharePointAutoHosted solution and select Publish.(编译O365_SharePointAutoHosted生成app文件)
  2. On the Publish Summary page select the Open output folder after successful packaging option and then click Finish.
  3. A folder that contains the O365_SharePointAutoHosted.app file opens–note the file location. The file path will be similar to [Your application root folder name]\O365_SharePointAutoHosted\O365_SharePointAutoHosted\O365_SharePointAutoHosted\bin\Debug\app.publish\1.0.0.0\ O365_SharePointAutoHosted.app.(一般生成的app在这个目录)

 

Run and test the sample(运行和测试例子代码)

  1. Open your Office 365 Developer Site.(打开O365的开发人员网站)
  2. On the Developer Site, in the Apps in Testing list, click the plus sign next to the text new app to deploy.(点击右手边的“正在测试应用程序”)
  3. On the Deploy App page, click the link text upload.(点击“要部署的新应用程序”)
  4. Navigate to the location of O365_SharePointAutoHosted.app, select it and click OK.(选择上面编译生成的app文件O365_SharePointAutoHosted.app,上传)
  5. Click Deploy and on the next dialog click Trust it.(下一步选择“部署”,点击“信任”)
  6. The application will be uploaded to your Office 365 Developer Site.(上传完成后,后台开始部署,部署完成后就可以点击刚才的app进行测试了)
  7. On your Developer Site, in the Apps in Testing directory, click the O365_SharePointAutoHosted app to run it.
  8. On the page titled “Office 365 Sample Code: SharePoint Auto-Hosted App” you can enter any of the EmployeeNames you find in the Script.PostDeployment1.sql file of the O365_SharePointAutoHostedDB project. You can also enter the character “%” to view all the items in the database.The entire list is shown in the following figure.

APP开发 4

 

Office 365 App开发之Autohosted模式源代码下载

 

例子代码说明的效果如下:

APP开发 5

注:一开始以为它上面使用%号可以查询,发现代码里面写的是等号,根据不可能模糊查询,所以要改一下代码

APP开发 6

粤ICP备10090854号-1