Display app web content in the host web using an app part

Display app web content in the host web using an app part
http://msdn.microsoft.com/en-us/library/office/apps/fp179921.aspx
http://code.msdn.microsoft.com/office/SharePoint-2013-Display-be8dac16

vs2012->file->new->project
c#->office/sharepoint->apps->apps for sharepoint 2013-> "AppClientWebPart"

AppClientWebPart-> right click->add new item-> select "client webpart (Host Web)-> "ClientWebPart1"

open AppClientWebPart-> Pages-> ClientWebPart1.aspx

<%@ Page language="C#" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />

<h1 id="editmodehdr" style="display:none">

    The app part is in edit mode.

</h1>

<div id="content">

    String property: <span id="strProp"></span><br />

    Integer property: <span id="intProp"></span><br />

    Boolean property: <span id="boolProp"></span><br />

    Enumeration property: <span id="enumProp"></span><br />

</div>

<script type="text/javascript">

    "use strict";

    var params = document.URL.split("?")[1].split("&");

    var strProp;

    var intProp;

    var boolProp;

    var enumProp;

    var editmode;

    for (var i = 0; i < params.length; i = i + 1) {

        var param = params[i].split("=");

        if (param[0] == "strProp")

            strProp = decodeURIComponent(param[1]);

        else if (param[0] == "intProp")

            intProp = parseInt(param[1]);

        else if (param[0] == "boolProp")

            boolProp = (param[1] == "true");

        else if (param[0] == "enumProp")

            enumProp = decodeURIComponent(param[1]);

        else if (param[0] == "editmode")

            editmode = decodeURIComponent(param[1]);

    }

    if (editmode == 1) {

        document.getElementById("editmodehdr").style.display = "inline";

        document.getElementById("content").style.display = "none";

    }

    else {

        document.getElementById("strProp").innerText = strProp;

        document.getElementById("intProp").innerText = intProp;

        document.getElementById("boolProp").innerText = boolProp;

        document.getElementById("enumProp").innerText = enumProp;

        document.getElementById("editmodehdr").style.display = "none";

        document.getElementById("content").style.display = "inline";

    }

</script>

open AppClientWebPart-> ClientWebPart1-> Elements.xml

<?xml version="1.0" encoding="utf-8"?>

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

       <ClientWebPart Name="ClientWebPart1"

                              Title="ClientWebPart1 Title"

                              Description="ClientWebPart1 Description"

                              DefaultWidth="300"

                              DefaultHeight="200">

              <Content

                           Src="~appWebUrl/Pages/ClientWebPart1.aspx?strProp=_strProp_&amp;intProp=_intProp_&amp;boolProp=_boolProp_&amp;enumProp=_enumProp_&amp;editmode=_editMode_"

                           Type="html"/>

              <Properties>

                     <Property

                           Name="strProp"

                           Type="string"

                           RequiresDesignerPermission="true"

                           DefaultValue="String default value"

                           WebCategory="Basic app part category"

                           WebDisplayName="A property of type string.">

                     </Property>

                     <Property

                           Name="intProp"

                           Type="int"

                           RequiresDesignerPermission="true"

                           DefaultValue="0"

                           WebCategory="Basic app part category"

                           WebDisplayName="A property of type integer.">

                     </Property>

                     <Property

                           Name="boolProp"

                           Type="boolean"

                           RequiresDesignerPermission="true"

                           DefaultValue="false"

                           WebCategory="Basic app part category"

                           WebDisplayName="A property of type boolean.">

                     </Property>

                     <Property

                           Name="enumProp"

                           Type="enum"

                           RequiresDesignerPermission="true"

                           DefaultValue="1st"

                           WebCategory="Basic app part category"

                           WebDisplayName="A property of type enum.">

                           <EnumItems>

                                  <EnumItem WebDisplayName="First option" Value="1st"/>

                                  <EnumItem WebDisplayName="Second option" Value="2nd"/>

                                  <EnumItem WebDisplayName="Third option" Value="3rd"/>

                           </EnumItems>

                     </Property>

              </Properties>

       </ClientWebPart>

</Elements>

Now Deploy the solution. and go to any site page and edit page and add app webpart.

Thank You.