Creating First Component.

Our first component will be named NewsPublisher and it will show news; as it will have visual presentation we'll create second class named NewsPublisherView. NewsPublisher will be derived from VisualComponent and NewsPublisherView will implement IContract interface because in this case LiveUI binds Compnent and View automatically.

  1. public  classNewsPublisher :  VisualComponent
  2. {
  3. }
  4.  
  5. public class NewsPublisherView : WebComponent, IView, IContract<NewsPublisher, NewsPublisherView>
  6. {
  7. }


That's how project looks

 first component project
To make NewPublisherView registered MyFirstApplication should be registered as a module, so open Configuration/LiveUI.config and add line

  1. <?xml version="1.0"?>
  2. <LiveUI>
  3.   <Modules>
  4.    ...
  5.     < add moduleName =" myApplication" moduleAssembly =" MyFirstApplication " location = "" />
  6.   </Modules>
  7. </LiveUI>


Now let's make it show something. Component will be responsible for finding data and View would be responsible for showing.

  1. public class NewsPublisher : VisualComponent
  2. {
  3.   public override void OnInitializing()
  4.   {
  5.     base.OnInitializing();
  6.     var view = this.GetContracts().Get<NewsPublisherView>();
  7.     view.Title =
  8.       "EU leaders brace for tough summit";
  9.     view.FullText =
  10.       "Tough talks on climate change, the Lisbon " +
  11.       "treaty and the EU presidency are set to " +
  12.       "dominate a leaders' summit in Brussels.";
  13.   }
  14. }
  15.  
  16. public class NewsPublisherView : WebComponent, IView, IContract<NewsPublisher, NewsPublisherView>
  17. {
  18.   public string Title { get; set; }
  19.   public string FullText { get; set; }
  20.  
  21.   public override void OnInitializing()
  22.   {
  23.     base.OnInitializing();
  24.     Workspace.Controls.Add(new LiteralControl("<h1>" + Title + "</h1>"));
  25.     Workspace.Controls.Add(new LiteralControl(FullText));
  26.   }
  27. }


It's it. We have to fix WebFormsPage.aspx.cs to look at our Component in action.

  1. public partial class WebFormsPage : Page
  2. {
  3.   protected override void OnInit(EventArgs e)
  4.   {
  5.     var rootComponent = new WebFormsRootComponent {Page = this, Workspace = Page.Form};
  6.     rootComponent.Children.Add(new NewsPublisher());
  7.     rootComponent.Initialize();
  8.   }
  9. }



And that's what we see


Unfortunately, our component is not testable because it depends of NewsPublisherView. It would be better if it knew only INewsPublisherView interface.
  1. public interface INewsPublisherView : IView, IContract<NewsPublisher, INewsPublisherView>
  2. {
  3.   string Title { get; set; }
  4.   string FullText { get; set; }
  5. }
  6.  
  7. public class NewsPublisher : VisualComponent
  8. {
  9.   public override void OnInitializing()
  10.   {
  11.     base.OnInitializing();
  12.     var view = this.GetContracts().Get<INewsPublisherView>();
  13.     view.Title = "EU leaders brace for tough summit";
  14.     view.FullText = "Tough talks on climate change, the Lisbon " +
  15.                     "treaty and the EU presidency are set to " +
  16.                     "dominate a leaders' summit in Brussels.";
  17.   }
  18. }
  19.  
  20. public class NewsPublisherView : WebApplicationComponent, INewsPublisherView, IContract<NewsPublisher, NewsPublisherView>
  21. {
  22.   public string Title { get; set; }
  23.   public string FullText { get; set; }
  24.  
  25.   public override void OnInitializing()
  26.   {
  27.     base.OnInitializing();
  28.     Workspace.Controls.Add(new LiteralControl("<h1>" + Title + "</h1>"));
  29.     Workspace.Controls.Add(new LiteralControl(FullText));
  30.   }
  31. }


  1. public interface INewsPublisherView : IView, IContract<NewsPublisher, INewsPublisherView>
  2. {
  3.   string Title { get; set; }
  4.   string FullText { get; set; }
  5. }
  6.  
  7. public class NewsPublisher : VisualComponent
  8. {
  9.   public override void OnInitializing()
  10.   {
  11.     base.OnInitializing();
  12.     var view = this.GetContracts().Get<INewsPublisherView>();
  13.     view.Title = "EU leaders brace for tough summit";
  14.     view.FullText =
  15.       "Tough talks on climate change, the Lisbon " +
  16.       "treaty and the EU presidency are set to " +
  17.       "dominate a leaders' summit in Brussels.";
  18.   }
  19. }


Our component still works, it's testable and reusable but View is not nice yet. There is no good in creating LiteralControls manually. Let's use News.ascx UserControl for html markup.

There is News.ascx
  1. <h1><%=Header %></h1>
  2. <% =Text %>


And there is News.ascx.cs
    2. public partial class News : System.Web.UI.UserControl
  2. {
    4.   public string Header { get; set;}
    5.   public string Text { get; set;}
  5. }


And let view use it

  1. public class NewsPublisherView
  2. : WebApplicationComponent, INewsPublisherView, IContract<NewsPublisher, NewsPublisherView>
  3. {
  4.   public string Title { get; set;}
  5.   public string FullText { get; set;}
  6.  
  7.   public override void OnInitializing()
  8.   {
  9.     base.OnInitializing();
  10.     var markup = LoadControl<News>("News.ascx");
  11.     markup.Header = Title;
  12.     markup.Text = FullText;
  13.     Workspace.Controls.Add(markup);
  14.   }
  15. }


Of course, result is still the same
X-tensive.com 2009