fredag, december 30, 2005
Sitecore ASP.NET 2.0 final version released
We will release Sitecore version 5.2.0.2 today. This is the ASP.NET 2.0 version of Sitecore version 5.1.1.8
torsdag, december 22, 2005
Sitecore Portal
This post is a draft of how to use the build in portal functionality in Sitecore V5.1.1.x. Please provide input on its content so that this post can become an article in time.
Using the ”Sitecore Today” portal in you own applications.
Sitecore has build in a simple portal framework used in some applications in the Sitecore GUI client. It is possible to use this framework in your own applications by the means of creating some XML (XAML like) controls and some code. This is an instruction on how to get started.
1) Create the Portal Layout
The first thing you need to do is to create the layout that defines the portal. To create such layout, start the layout studio and click File -> new -> XML Layout. The “Create XML Layout wizard” appears.
Press next and name the layout what you like. For this example the layout is called “Portal Demo”. Press next two times to place the layout in the layouts folder, and finish the wizard.
The layout studio opens the newly created xml layout and displays its content in a window. Delete the content of the editor, and replace it with the following:
<?xml version="1.0" encoding="utf-8" ?>
<control xmlns:def="Definition" xmlns="http://schemas.sitecore.net/Visual-Studio-Intellisense">
<PortalDemo>
<FormPage Scroll="yes">
<CodeBeside Type="Example.PortalDemo,MyDll"/>
<Stylesheet Src="/sitecore/portal/tech/tech.css"/>
<Portal ID="PortalDemo" DataSource="/sitecore/content/Home/PortalDemo/Portal" RefreshPageOnRedraw="true">
<Border Class="Portal">
<GridPanel Columns="3" Width="100%" Height="100%" CellSpacing="4" CellPadding="4">
<PortalZone ID="Left" GridPanel.Width="33%" GridPanel.Class="PortalColumn" GridPanel.VAlign="top" GridPanel.Height="100%"/>
<PortalZone ID="Mid" GridPanel.Width="33%" GridPanel.Class="PortalColumn" GridPanel.VAlign="top"/>
<PortalZone ID="Right" GridPanel.Width="33%" GridPanel.Class="PortalColumn" GridPanel.VAlign="top"/>
</GridPanel>
</Border>
</Portal>
<Frame ID="Sidebar" Width="6" Height="100%" Style="position:absolute; left:expression(parentNode.clientWidth-6); top:0"/>
</FormPage>
</PortalDemo>
</control>
The fist element defines that this is a control and the second element <PortalDemo> defines the name of the layout. The portal uses the FormPage <FormPage Scroll="yes"> with scrolling and has a codeBeside class type of PortalDemo located in the dynamic linked library MyDll.
The creation of the codeBeside type will be explained in the next step. The <Stylesheet/> element points to the same style sheet that is used for the “Sitecore Today” application found in the Sitecore client, but can just as well be replaced by our own custom style sheet to achieve you own look and feel.
The next element <Portal> defines the actual portal and it defines where in the content tree its portlets (Sitecore items) are to be found. We will create these items shortly.
The portal element defines the portalZones where portlets can be placed by Id. In this example we have defined tree zones named Left, Mid and Right.
The last element <Frame> defines a sidebar users can invoke to add and remove portlets to their portal.
2) Create the layout code beside class
As seen, the portal defines a code beside class, with the sole purpose of adding portlets to the sidebar.
Create a new class Named PortalDemo in the namespace Example. The source should look like this:
using System;
using Sitecore;
using Sitecore.Text;
using Sitecore.Web.UI.HtmlControls;
using Sitecore.Web.UI.Sheer;
namespace MyPortal {
public class RuniPortal : BaseForm {
protected Frame Sidebar;
protected override void OnLoad(EventArgs e) {
base.OnLoad(e);
if (!Sitecore.Context.ClientPage.IsEvent) {
UrlString url = new UrlString(UIUtil.GetUri("control:PortalSidebar"));
url.Add("pid", "Sidebar");
url.Add("pds", "/sitecore/content/Home/Portal sidebar");
url.Add("pt", "/sitecore/content/Home/PortalDemo/Portal");
url.Add("pn", "PortalDemo");
Sidebar.SourceUri = url.ToString();
}
}
#endregion
}
}
The PortalSidebar control is used to contain portlets and requires some url parameters as setup. The first parameter defines the control to use, the second the id of the control, the third the location of the Sitecore items defining the sidebar and the fourth the path of the portal and the last the name of the portal.
3) Creating a portlet
Portlets can be created with any control, as long as the items that are defining it are based on the portlet template. However, to support moving and adding new portlets from the portlet itself, a special control must be created.
To create a portlet which basically wraps the document control, create a new xmlcontrol from the layout studio and paste the following xml into it (same procedure as in step 1):
<?xml version="1.0" encoding="utf-8" ?>
<control xmlns:def="Definition" xmlns="http://schemas.sitecore.net/Visual-Studio-Intellisense">
<DocumentPortlet ID="DocumentPortlet" def:inherits="DocumentPortletXmlControl,Sitecore.Client" > <!--The id is used for moving between columns-->
<DefaultPortletWindow def:ID="Window" Header="Document" Icon="Applications/16x16/star_yellow.png"> <!-- The id is used for the context menu popup -->
<Document def:ID="document"/>
</DefaultPortletWindow>
</DocumentPortlet>
</control>
The newly defined controls is called “DocumentPortlet” and uses the DefaultPortletWindow control to render the portlets surrounding frame, giving it support for moving it from portalzone to portalzone and showing and hiding it. This DocumentPortlet must also have a code beside file which we will create afterwards.
Inside the DocumentPortlet, the Document control is used to render the item’s content. Now create the codebeside class:
using System;
using Sitecore.Web.UI.XmlControls;
public class DocumentPortletXmlControl : XmlControl {
protected XmlControl Window;
protected override void OnLoad(EventArgs e) {
base.OnLoad(e);
if (!Sitecore.Context.ClientPage.IsEvent) {
Window.ID = ID + "_window";
}
}
}
This is a required step in order to make sure that the id of the control is valid.
When this step is completed, it is time to create the Sitecore items to support the Portal, and the Portal sidebar.
4) Creating the Portal Items
Create a new Item in the content editor based on the Document template. The name of this item should be the same as defined in the PortalDemo layout created in previous step.
Choose the PortalDemo as the default layout in the layout window in the content editor, and save it.
As a child of the newly created PortalDemo item, create a new item based on the Portal template.
Under the new item, create another item named “Test” based on the template portlet, and fill in the description, and ID. In the “Control name” field add the name of the portlet control we just created: “DocumentPortlet”. In the zone filed, write for example: “Right” to place the portlet in the portal zone named Right.
5) Creating the sidebar Items
Create a new Item under the Home item named Portal sidebar. The Item must be based on the Portal template.
Create a new Item under the “Portal sidebar” based on the Portlet template named “Configurator”. Give it the Item ID: “PortalConfiguratorPortlet” and the Name “PortalConfiguratorPortlet” In the Zone field write “DefaultZone” and in the Order field write “10”. Check the “Default” checkbox.
6) Displaying the Portal
The portal should now be configured with one portlet, and can be seen in the client. Navigate to http://yourserver/PortalDemo.aspx to display the newly created portal. You can invoke the sidebar by moving the mouse towards the right of the browser.
Good luck.
Using the ”Sitecore Today” portal in you own applications.
Sitecore has build in a simple portal framework used in some applications in the Sitecore GUI client. It is possible to use this framework in your own applications by the means of creating some XML (XAML like) controls and some code. This is an instruction on how to get started.
1) Create the Portal Layout
The first thing you need to do is to create the layout that defines the portal. To create such layout, start the layout studio and click File -> new -> XML Layout. The “Create XML Layout wizard” appears.
Press next and name the layout what you like. For this example the layout is called “Portal Demo”. Press next two times to place the layout in the layouts folder, and finish the wizard.
The layout studio opens the newly created xml layout and displays its content in a window. Delete the content of the editor, and replace it with the following:
<?xml version="1.0" encoding="utf-8" ?>
<control xmlns:def="Definition" xmlns="http://schemas.sitecore.net/Visual-Studio-Intellisense">
<PortalDemo>
<FormPage Scroll="yes">
<CodeBeside Type="Example.PortalDemo,MyDll"/>
<Stylesheet Src="/sitecore/portal/tech/tech.css"/>
<Portal ID="PortalDemo" DataSource="/sitecore/content/Home/PortalDemo/Portal" RefreshPageOnRedraw="true">
<Border Class="Portal">
<GridPanel Columns="3" Width="100%" Height="100%" CellSpacing="4" CellPadding="4">
<PortalZone ID="Left" GridPanel.Width="33%" GridPanel.Class="PortalColumn" GridPanel.VAlign="top" GridPanel.Height="100%"/>
<PortalZone ID="Mid" GridPanel.Width="33%" GridPanel.Class="PortalColumn" GridPanel.VAlign="top"/>
<PortalZone ID="Right" GridPanel.Width="33%" GridPanel.Class="PortalColumn" GridPanel.VAlign="top"/>
</GridPanel>
</Border>
</Portal>
<Frame ID="Sidebar" Width="6" Height="100%" Style="position:absolute; left:expression(parentNode.clientWidth-6); top:0"/>
</FormPage>
</PortalDemo>
</control>
The fist element defines that this is a control and the second element <PortalDemo> defines the name of the layout. The portal uses the FormPage <FormPage Scroll="yes"> with scrolling and has a codeBeside class type of PortalDemo located in the dynamic linked library MyDll.
The creation of the codeBeside type will be explained in the next step. The <Stylesheet/> element points to the same style sheet that is used for the “Sitecore Today” application found in the Sitecore client, but can just as well be replaced by our own custom style sheet to achieve you own look and feel.
The next element <Portal> defines the actual portal and it defines where in the content tree its portlets (Sitecore items) are to be found. We will create these items shortly.
The portal element defines the portalZones where portlets can be placed by Id. In this example we have defined tree zones named Left, Mid and Right.
The last element <Frame> defines a sidebar users can invoke to add and remove portlets to their portal.
2) Create the layout code beside class
As seen, the portal defines a code beside class, with the sole purpose of adding portlets to the sidebar.
Create a new class Named PortalDemo in the namespace Example. The source should look like this:
using System;
using Sitecore;
using Sitecore.Text;
using Sitecore.Web.UI.HtmlControls;
using Sitecore.Web.UI.Sheer;
namespace MyPortal {
public class RuniPortal : BaseForm {
protected Frame Sidebar;
protected override void OnLoad(EventArgs e) {
base.OnLoad(e);
if (!Sitecore.Context.ClientPage.IsEvent) {
UrlString url = new UrlString(UIUtil.GetUri("control:PortalSidebar"));
url.Add("pid", "Sidebar");
url.Add("pds", "/sitecore/content/Home/Portal sidebar");
url.Add("pt", "/sitecore/content/Home/PortalDemo/Portal");
url.Add("pn", "PortalDemo");
Sidebar.SourceUri = url.ToString();
}
}
#endregion
}
}
The PortalSidebar control is used to contain portlets and requires some url parameters as setup. The first parameter defines the control to use, the second the id of the control, the third the location of the Sitecore items defining the sidebar and the fourth the path of the portal and the last the name of the portal.
3) Creating a portlet
Portlets can be created with any control, as long as the items that are defining it are based on the portlet template. However, to support moving and adding new portlets from the portlet itself, a special control must be created.
To create a portlet which basically wraps the document control, create a new xmlcontrol from the layout studio and paste the following xml into it (same procedure as in step 1):
<?xml version="1.0" encoding="utf-8" ?>
<control xmlns:def="Definition" xmlns="http://schemas.sitecore.net/Visual-Studio-Intellisense">
<DocumentPortlet ID="DocumentPortlet" def:inherits="DocumentPortletXmlControl,Sitecore.Client" > <!--The id is used for moving between columns-->
<DefaultPortletWindow def:ID="Window" Header="Document" Icon="Applications/16x16/star_yellow.png"> <!-- The id is used for the context menu popup -->
<Document def:ID="document"/>
</DefaultPortletWindow>
</DocumentPortlet>
</control>
The newly defined controls is called “DocumentPortlet” and uses the DefaultPortletWindow control to render the portlets surrounding frame, giving it support for moving it from portalzone to portalzone and showing and hiding it. This DocumentPortlet must also have a code beside file which we will create afterwards.
Inside the DocumentPortlet, the Document control is used to render the item’s content. Now create the codebeside class:
using System;
using Sitecore.Web.UI.XmlControls;
public class DocumentPortletXmlControl : XmlControl {
protected XmlControl Window;
protected override void OnLoad(EventArgs e) {
base.OnLoad(e);
if (!Sitecore.Context.ClientPage.IsEvent) {
Window.ID = ID + "_window";
}
}
}
This is a required step in order to make sure that the id of the control is valid.
When this step is completed, it is time to create the Sitecore items to support the Portal, and the Portal sidebar.
4) Creating the Portal Items
Create a new Item in the content editor based on the Document template. The name of this item should be the same as defined in the PortalDemo layout created in previous step.
Choose the PortalDemo as the default layout in the layout window in the content editor, and save it.
As a child of the newly created PortalDemo item, create a new item based on the Portal template.
Under the new item, create another item named “Test” based on the template portlet, and fill in the description, and ID. In the “Control name” field add the name of the portlet control we just created: “DocumentPortlet”. In the zone filed, write for example: “Right” to place the portlet in the portal zone named Right.
5) Creating the sidebar Items
Create a new Item under the Home item named Portal sidebar. The Item must be based on the Portal template.
Create a new Item under the “Portal sidebar” based on the Portlet template named “Configurator”. Give it the Item ID: “PortalConfiguratorPortlet” and the Name “PortalConfiguratorPortlet” In the Zone field write “DefaultZone” and in the Order field write “10”. Check the “Default” checkbox.
6) Displaying the Portal
The portal should now be configured with one portlet, and can be seen in the client. Navigate to http://yourserver/PortalDemo.aspx to display the newly created portal. You can invoke the sidebar by moving the mouse towards the right of the browser.
Good luck.
Abonner på:
Opslag (Atom)