Step 1 - Create an empty component

Let us start this exercise by looking at which Packages and Namespaces are needed in order to get our first piece of working code. Since we want to work with the Seeems Framework, we will need to import the Seeems.Framework and Seeems.Framework.UI packages, which will give us access to the needed Framework Components.

Using System; Using Seeems.Framework.UI; Using Seeems.Framework;

The next step is to specify the Namespace we want to associate our Component with, here we will use the Seeems.Cms.Content Namespace since we want to add our Component to the same namespace as the rest of the Components found in the BackOffice.

... namespace Seeems.Cms.Content { ... } ...

Now we are ready to create our first Component. We do this by extending the Component Class, which contains the most basic properties needed to create a new Component for the Framework.

... public class MyComponent : Component { } ...

While we are in the process of constructing our MyComponent, let us also specify its Component Relation, which is done through attributes. The Component Relation allows you to make two different kinds of relations, either a direct tightly coupled Parent/Child relation or a more abstract relation which allows separately developed Components to work together without having explicit knowledge about each other's existence. By taking advantage of these relations, the only common reference needed for them to work together, is the component relation attribute. Such an abstract relation system opens up for the possibility of integrating Components created by a wide range of different developers and integrating them into your own CMS. For now let us specify the Parent to be a Content Component as shown in the following code snippet.

... [Parent("Content")] public class MyComponent : Component { } ...

Besides the Component Relation, attributes also allow you to specify a Caption and which group to place the Component in for the BackOffice menu. For now we will leave out these attributes, which we can do because the Seeems.Framework will always have a default solution ready when certain information has not been specified manually. So in this case the framework will put the MyComponent in the General folder and its caption will be its Class name. Furthermore it should be noted that the General folder is not found in the BackOffice by default, but is automatically created when a Component is added to the BackOffice that is not attached to a specific folder. Later on we will see how to specify these attributes exactly for our Component.

Now we have all the code needed to compile our very first Component, which should like the snippet below.

Using System;
Using Seeems.Framework.UI;
Using Seeems.Framework;
namespace Seeems.Cms.Content { [Parent("Content")] public class MyComponent: Component {}
}