Building windows8 modern app for sp2013
-
Upload
bap-rang -
Category
Technology
-
view
1.014 -
download
4
Transcript of Building windows8 modern app for sp2013
Building Windows 8 Modern Style
apps for SharePoint 2013
SharePoint Saturday Vietnam 5th
Binh Nguyen
About me
My name is Nguyen Thanh Binh
Work at Bamboo Solutions (http://bamboosolutions.com)
Hobbies: Football; Coffee; SharePoint
Reach me at:
• Email: [email protected]
• Facebook: http://facebook.com/binhthanhng
• LinkedIn: http://linkedin.com/in/binhthanhng
• Twitter: @binhtnguyen
Agenda
Windows 8 Modern (Metro) Style App
• Introduction Windows 8
• Platform
• DEMO
SharePoint 2013 and Windows 8 App
• APIs
• REST
• Web Services
• DEMO
Q&A
Windows 8 and
Modern Style
apps
Cloud-
connected
Built on a
solid
foundation
Get more at
the Windows
Store
At home and
at work
All the apps
you want
Reimagined
browsing with
IE10
Windows
reimagined
Great
experience
across all
hardware
Windows 8
Windows reimagined
A new Metro style UI where touch is a first-class citizen along with full mouse-and-keyboard support
New development models built on WinRT, including native support for HTML/CSS/JS, C#/XAML, C++/DirectX
Designed from the chipset up for multiple form-factors – tablets, laptops, desktops & all-in-ones
The Windows Store on every device with a full
commerce platform and flexibility
SharePoint 2013
and Windows 8
Apps
API set in SharePoint 2013
Server Object Model
Client Object Models for managed code
• .NET client object model
• Silverlight client object model
• JavaScript object model
Direct Remote Procedure Calls (RPC) calls to the owssvr.dll
REST/OData endpoints
Web Services (.ASMX)
How to determine which API and language set to use
Type of
Application
Device
which
code runs
Your
existing
skills
SharePoint API and Language for Windows 8 App Dev.
Type of
Application
Device
which
code runs
Your
existing
skills Language
HTML5/CSS and JavaScript
XAML and C#/VB DirectX and C++/C
SharePoint APIs
Server Object Model
Client Object Model
Direct Remote Procedure Calls (RPC)
REST/ODataendpoints
Web Services (.ASMX)
Representational State Transfer (REST) interface in SharePoint 2013
PERFORM basic create, read, update, and delete (CRUD) operations in SharePoint 2013
REST exposes all SharePoint 2013 entities and operations
NO NEED to add references to any SharePoint assemblies/libraries
MAKE a request method to http://siteurl/_api/web/lists
ACCEPT the OData representation of the lists in XML or JSON from the response
Access SharePoint 2013 via REST
• Use Windows 8 Modern App WinJS Library (Microsoft
Window Library for JavaScript SDK) (Recommend)
• Use Cross-platform JavaScript libraries like jQuery,
KnockoutJS, ExtJS…
HTML5/JavaScript
• Use HttpWebRequest or System.Net.HttpClient with
asynchronous calling
• Process the data with Linq-to-XML
XAML/C# - .NET
Reading data
• JavaScript with jQuery
jQuery.ajax({url: "http://siteurl/_api/web/lists",type: "GET",headers: {
"ACCEPT": "application/json;odata=verbose“},success: doSuccess,error: doError
});
• JavaScript with WinJS
WinJS.xhr({
type: "GET",
url: "http://siteurl/_api/web/lists",
headers: { "content-type": "application/json; charset=utf-8" },
}).done(doSuccess, doError);
• C# - VB.NET
HttpWebRequest endpointRequest = (HttpWebRequest)HttpWebRequest.Create(sharepointUrl.ToString() + "/_api/web/lists");
endpointRequest.Method = "GET";
endpointRequest.Accept = "application/json;odata=verbose";
HttpWebResponse endpointResponse = (HttpWebResponse)endpointRequest.GetResponse();
Writing data
• JavaScript with jQuery/WinJS
jQuery.ajax({ url: “http://siteurl/_api/web/lists”,type: "POST", data: JSON.stringify({ '__metadata': { 'type': 'SP.List' }, 'AllowContentTypes': true, 'BaseTemplate': 100,
'ContentTypesEnabled': true, 'Description': 'My list description', 'Title': 'Test' } ), headers: {
"accept": "application/json;odata=verbose", "content-type":"application/json;odata=verbose", "content-length":length of post body "X-RequestDigest": $("#__REQUESTDIGEST").val()
}, success: doSuccess, error: doError
});
jQuery.ajax({ url: “http://siteurl/_api/web/lists/GetByTitle(‘Test')”,type: "POST", data: JSON.stringify({ '__metadata': { 'type': 'SP.List' }, 'Title': 'New title' } ), headers: {
“X-HTTP-Method”:”MERGE”, "accept": "application/json;odata=verbose", "content-type": "application/json;odata=verbose", "content-length":length of post body "X-RequestDigest": $("#__REQUESTDIGEST").val(), “IF-MATCH”: “*”
}, success: doSuccess, error: doError
});
SharePoint Web Services (.ASMX)
Still supported in SharePoint 2013 framework for backward compatibility
NOT recommend for the new projects
Web Services provide methods to work remotely with a deployment of SharePoint such as:
• Lists Web Services - http://<site>/_vti_bin/Lists.asmx
• Webs Web Services – http://<site>/_vti_bin/Webs.asmx
• Views Web Services - http://<site>/_vti_bin/Views.asmx
• …
• …Simply use the HTTP request to the .asmx include the CAMLQuery to invoke the service
method
For Windows 8 Modern App: we can Web Services apply for both HTML5/JS and XAML/C#
Recommend to use jQuery SPServices (http://spservices.codeplex.com) for HTML5/JS Apps
Code sample
var soapEnv = "<soap:Envelope xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> <soap:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>
<listName>Announcements</listName><query><Query><Where><Eq><FieldRef Name='Title'/>
<Value Type='Text'>Test Announcement</Value></Eq></Where></Query></query>
<viewFields><ViewFields>
<FieldRef Name='Title' /> <FieldRef Name='Body' /> <FieldRef Name='Expires' />
</ViewFields></viewFields> <rowLimit>99999</rowLimit>
<queryOptions xmlns:SOAPSDK9='http://schemas.microsoft.com/sharepoint/soap/'
><QueryOptions/></queryOptions>
</GetListItems> </soap:Body> </soap:Envelope>";
jQuery.ajax({
url: "http://siteurl/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
contentType: "text/xml; charset=\"utf-8\"",
complete: function(xData, status){
jQuery(xData.responseXML).find("z\\:row").each(function () {
$(this).attr("ows_Title");
});
} });
jQuery SPServices
jQuery Library for SharePoint Web Services
Support SharePoint 2007/2010 and 2013 as well
Syntax:
$().SPServices({
operation: "operationname",
[webURL: "/sitepath",]
[option1: value1,]
[option2: value2,]
[async: false,]
completefunc: function (xData, Status) {
...do stuff...
}
});
jQuery SPServices sample
$().SPServices({
webURL: "http://siteurl/"
operation: "GetListItems",
async: false,
listName: "Announcements",
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
$("#tasksUL").append(liHtml);
});
}
});
SPServices({
operation: "UpdateListItems",
listName: testList,
ID: ID,
valuepairs: [["Title", “abc”]],
completefunc: function (xData, Status) {
…
}
});
DEMOWeb Services (.ASMX)
Versus
HTML5/JavaScript
JavaScript and HTML is more comfortable for SharePoint
Developers than the XAML and Silverlight
Since Windows 8 App uses the Internet Explorer 10 engine for
HTML5/CSS, then easy to port the current SharePoint
App/ASPX/HTML to Windows 8 App.
Create a cross-platform application that can easily become a
mobile app or even a SharePoint app (Re-use)
HTML5/CSS is easy to use, branding, design and get support from
other team, community, Internet…
HTML5 is the future so it's best to always be up to date.
XAML/C#
Object Oriented Programming: Unit Testing, inheritance,
polymorphism, architectural reuse…
Reuse the .NET Libraries for your Windows 8 App
Easy to port the current XAML app to Windows 8 App such as: Xbox,
Windows Phone, Windows Embedded, Windows Desktop,
Silverlight…
Strong in Animations, Transitions and Effects
XAML is Resolution Independence and vector-based, can leverage
GPU acceleration and scale indefinitely
“Liệu cơm gắp mắm, Tùy app chọn code”
Reference
http://msdn.microsoft.com/en-us/windows/apps/br229512.aspx
http://msdn.microsoft.com/en-us/library/jj164022(v=office.15).aspx
http://msdn.microsoft.com/en-us/library/jj164060(v=office.15).aspx
http://blogs.microsoft.co.il/blogs/choroshin/archive/2012/09/15/how-to-create-a-windows-8-app-for-
sharepoint-part-1-the-planning-stage.aspx
http://blogs.microsoft.co.il/blogs/choroshin/archive/2012/09/30/how-to-create-a-windows-8-app-for-
sharepoint-part-2-the-development-stage.aspx
http://spservices.codeplex.com/
Thank you!
See you at next SharePoint Saturday Vietnam event!