블로그 이미지
정홍주
Azure에 대한 내용뿐만 아니라 새로운 트렌드로 빅데이터, BI, SharePoint, 앱 등의 내용을 다룹니다.

calendar

        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

Notice

'jQuery'에 해당되는 글 3

  1. 2012.03.22 SharePoint Online에서의 jQuery
  2. 2012.03.20 SharePoint 2010에서의 jQuery
  3. 2012.03.12 SharePoint 2010의 Module
2012.03.22 08:30 Office 365/SharePoint Online

SharePoint Online에서의 jQuery

 

앞에서 살펴본 SharePoint 2010의 jQuery 에 대한 내용을 살펴보았는데

물론 SharePoint Online에서도 가능합니다. SharePoint Online에서는 샌드박스 솔루션으로 개발하는 것이 주가 됩니다.

샌드박스 솔루션으로 jQuery Module 프로젝트를 생성하고 솔루션 갤러리에 업로드하고 활성화 시킬 수 있습니다. 아래 그림을 참고할 수 있습니다.

 


아래 그림은 SharePoint Designer 2010을 통해 파일들을 살펴본 결과입니다.

 

해당 aspx, js, css 파일을 처리한 결과입니다.

 

물론 aspx, aspx.cs 에 해당하는 내용은 제대로 실행되지 않습니다.

하지만 SharePoint Online에서도 비쥬얼 웹 파트(Visual Web Part)로 개발된 솔루션이 사용

가능합니다.

 

 

SharePoint Online에서도 jQuery 를 통한 지원 사항을 알아보았습니다.

다음에는 SharePoint에서의 HTML5 에 대한 내용을 알아보겠습니다.

신고
posted by 정홍주
2012.03.20 08:30 SharePoint/SharePoint 2010


SharePoint 2010
에서의 jQuery
 

이전 글에서 Module 프로젝트에 대한 내용을 통해 jQuery 파일을 배포하는 것을 알아보았으며 jQuery js 파일은 단순히 업로드를 통해서 가능합니다.

이제 jQuery를 이용한 코드를 한번 작성해볼까 합니다.

아래와 같이 Module의 파일들이 구성되어 있습니다.

<Module  Name="HModule" Url="HJ"  >

  <File  Path="HModule\images\Chrysanthemum.jpg" Url="HModule/images/Chrysanthemum.jpg" />

<File Path="HModule\css\demo.css" Url="HModule/css/demo.css" />

<File Path="HModule\js\jquery-1.6.3.min.js" Url="HModule/js/jquery-1.6.3.min.js" />

<File Path="HModule\js\jquery-1.6.3.js" Url="HModule/js/jquery-1.6.3.js" />

<File Path="HModule\Sp10HellojQuery.js" Url="HModule/Sp10HellojQuery.js" />

<File Path="HModule\Sp10HellojQuery.aspx" Url="HModule/Sp10HellojQuery.aspx" />

<File Path="HModule\HJ.aspx" Url="HModule/HJ.aspx" />

</Module>

 

Js 파일의 내용은 아래와 같습니다. 정말 간단한 jQuery 입니다. 물론 aspx 파일에 “btnGo”, “div1”의 개체가 있습니다.

 $(document).ready(function () {

    $("#div1").html("SharePoint 2010 - Hello jQuery");

    $('#btnGo').click(btnGo_click);

});

 

function btnGo_click() {

    $("#div1").css("background-color", "red");

    $("#div1").animate({height:'toggle'});

}

 

aspx 파일의 구성은 아래와 같습니다.

 <asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

 

  <link href="css/demo.css" rel="stylesheet" type="text/css" />     

  <SharePoint:ScriptLink

    runat="server"

    Defer="false"

    Name="~sitecollection/HJ/HModule/js/jquery-1.6.3.min.js"/>

   <script src="Sp10HellojQuery.js" type="text/javascript" ></script>

</asp:Content>   

 

 <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

  <h2>SharePoint 2010 Hello jQuery</h2>

<input id="btnGo" type="button" value="Hello" />

  <div id="div1" />

</asp:Content>

 

 

SharePoint:ScriptLink 를 사용하지 않고 CDN을 통해 jQuery 파일을 아래와 같이 액세스할 수도 있습니다.

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.3.min.js"></script> 

 

배포해서 결과를 한번 보도록 하겠습니다. Css 파일에 스타일이 적용되어 있습니다.



SharePoint 2010에서도 손쉽게 Module 등을 이용해서 jQuery를 이용할 수 있다는 것을 알아보았습니다.

jQueryUI Javascript SharePoint Client Object Model 에 대한 내용도 액세스 할 수 있습니다~


신고
posted by 정홍주
2012.03.12 08:30 SharePoint/SharePoint 2010

SharePoint 2010 Module

 

SharePoint 2010에서 Module 이라는 프로젝트와 항목을 볼 수 있습니다. 또는 웹 파트를 생성 할 때 webpart파일에 Module이라는 XML 요소를 확인할 수 있습니다.

개발측면에서는 Module을 통해 SharePoint 에 있는 웹 파트 갤러리나 문서 라이브러리 등에 파일을 솔루션을 통해 추가할 수 있습니다.

여기서 Module을 다루는 이유는 SharePoint 2010에서 jQuery 적용을 통한 내용을 알아 볼 것인데 그전에 Module을 통해 jquery-1.4.4..js 등의 파일과 커스텀 js 파일을 솔루션을 통해 업로드 하는 것을 알아보도록 하겠습니다.

SharePoint 2010에서는 jQuery가 기본적으로 적용되어 있지 않기 때문에 Module을 통해 배포하는 것을 먼저 다루어봅니다. 

VS 2010에서 SharePoint 2010의 빈 프로젝트를 생성합니다. 새 항목 추가를 선택해서 Module을 선택합니다. 이름은 ‘HModule’ 이라고 합니다. 

Elements.xml Module 요소를 확인할 수 있습니다.

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

  <Module Name="HModule">

    <File Path="HModule\Sample.txt" Url="HModule/Sample.txt" />

  </Module>

</Elements>

 

파일을 보관할 폴더와 파일을 HModule 아래에 생성합니다. 그러면 위의 XML이 자동으로 추가되는 것을 확인이 가능합니다. 아래처럼 변경됩니다. Sample.txt 파일을 제거했습니다. Elements.xml파일은 자동적으로 변경사항을 반영해줍니다.

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

  <Module Name="HModule">

  <File Path="HModule\images\Chrysanthemum.jpg" Url="HModule/images/Chrysanthemum.jpg" />

<File Path="HModule\css\demo.css" Url="HModule/css/demo.css" />

<File Path="HModule\js\jquery-1.6.3.min.js" Url="HModule/js/jquery-1.6.3.min.js" />

<File Path="HModule\js\jquery-1.6.3.js" Url="HModule/js/jquery-1.6.3.js" />

<File Path="HModule\HellojQuery.js" Url="HModule/Page01_HellojQuery.js" />

<File Path="HModule\HellojQuery.aspx" Url="HModule/Page01_HellojQuery.aspx" />

</Module>

</Elements>

 

배포를 실행하면 파일과 폴더는 사이트아래에 HModule이라는 폴더로 배포되게 됩니다. 확인하려면 SharePoint Designer 2010의 모든 파일에서 확인이 가능합니다.

Module 태그에서 Url을 지정하여 특정 문서 라이브러리에 업로드도 가능합니다.

<Module  Name="HModule" Url="HJ"  >

 

아래와 같이 배포된 것을 확인 가능합니다.


HModule 아래의 파일은 위 그림에서는 안보이지만 SharePoint Designer 2010에서는 나타나며 URL로 접근할 수 있습니다.

 

위에 코드 비하인드를 가진 aspx 파일도 배포가 가능합니다. Application Page를 약간 수정하여 구성하면 아래와 같이 Response.Write("<h2>Page_Load</h2>");가 실행되어 나타나게 됩니다.

 

여기서는 jQuery 파일을 통해 SharePoint 2010에서 기능을 구성하기 위해 Module을 통해 js, css, images, aspx 파일을 솔루션을 통해 배포하는 것을 알아보았습니다.


신고
posted by 정홍주
prev 1 next

티스토리 툴바