Create dynamic UI

Creating dynamic UI project creates UI dynamically based on your assigned entity, properties and property’s attribute. Once you assign entity to DataContext to your control, your user control will create textboxes, dropdown, and checkbox and so on as per you entity and registered controls.

At present these data types has registered with relevant controls as below.

String = Textbox

Int = Textbox

Long = Textbox

Decimal = Textbox

Boolean/bool = checkbox

datetime = date control

enum (any) = dropdown box

 

Pre-requisites

 

VS2008

.net 3.5

silverlight 3

 

 

Frequently asked questions:

 

Q:- How to implement dynamicUIGen in my project?

A : Add reference of HasuSLUI & HasuSLlib dlls or projects in to your project and add assembly ref. on your usercontrol as “xmlns:HasuSL="clr-namespace:HasuSLUI;assembly=HasuSLUI"”. Then add dataPanel <HasuSL:DataPanel x:Name="hsl" >

</HasuSL:DataPanel>

To populate Dynamic UI ,all you need to assing your entity. Go to code behind

       void MainPage_Loaded(object sender, RoutedEventArgs e)

       {

           Employee emp = new Employee();

           emp.EmpName = "test";

           emp.EmpNo = 100;

           emp.DOJ = new Date() { Value= DateTime.Now };

           emp.EmpType = EmpType.Permanent;

           emp.Addr1 = "test addr1";

           emp.Addr2 = "test addr2";

           emp.Addr3 = "Town";

           emp.Postcode = "AB1 2CD";

           emp.Active = true;

           hsl.DataContext = emp;

       }

 

 

Q:- How do I implements datapanel in my project?

A:- already covered in above answer.

 

Q:- How to register my Data type or class?

A:- you have to register you type and control in App.xaml.cs’s Application_Startup as below

HasuSLUI.UIDefaults.RegisterdControls.Add(typeof(UIGenDemoModel.Address),

               new HasuSLUI.RegisterdControl() {

                   ControlType = typeof(AddressSelector),

                   DefaultWidth = 200,

                   BindingProperty = TextBox.TextProperty

               });

Once you register your datatype ,your control will be register for ever untill your application close.

 

Q:- How can I populate my my UserControl with datapanel?

A:- you have to define your property in your class and register as above answered question.

 

Model Example:

 

 

   public enum EmpType

   {

       Permanent,

       Temporary,

       Apprentice,

       Student

   }

 

   public enum Country

   {

       UK,

       India,

       USA

   }

 

   public enum County

   {

       Middx,

       Essex,

       Ken,

       Other

   }

 

 

   public class Employee

   {

       public const string KEY_Company = "1. Company Details";

       public const string KEY_ADDRESS = "2. Address Details";

       public const string KEY_STATUS = "3. Status";

       public const string KEY_PAY= "4. Pay";

 

       #region Employeement details

 

       #region EmpNo

       private int _empNo =0;

       /// <summary>

       /// EmpNo

       /// </summary>

       [Display(Name = "Employee No", GroupName = KEY_Company, Order = 1, Description = "Employee Number")]

       public int EmpNo

       {

           get { return _empNo; }

           set { _empNo = value; }

       }

 

       #endregion EmpNo

 

       #region EmpName

       private string _empName = "tmp emp";

       /// <summary>

       /// EmpName

       /// </summary>

       [Display(Name = "Employee Name", GroupName = KEY_Company, Order = 2, Description = "Employee full Name")]

       public string EmpName

       {

           get { return _empName; }

           set { _empName = value; }

       }

 

       #endregion EmpName

      

       #region DOJ

       private Date _doj; //= new Date();

       /// <summary>

       /// DOJ

       /// </summary>

       [Display(Name = "Joining Date", GroupName = KEY_Company,Order=3)]

       public Date DOJ

       {

           get { return _doj; }

           set { _doj = value; }

       }

       #endregion DOJ

 

      

       #region EmpType

       private EmpType _emptype= EmpType.Permanent;

       /// <summary>

       /// EmpType

       /// </summary>

       [Display(Name = "Employeement Type", GroupName = KEY_STATUS, Order = 4)]

       public EmpType EmpType

       {

           get { return _emptype; }

         set { _emptype = value; }

       }

       #endregion EmpType

 

 

       #region Active

       private bool _active= true;

       /// <summary>

       /// Active

       /// </summary>

       [Display(Name = "Active", GroupName = KEY_STATUS, Order = 5)]

       public bool Active

       {

           get { return _active; }

           set { _active = value; }

       }

       #endregion Active

 

       #endregion

 

       [Display(Name = "CurrentAddress", GroupName = KEY_STATUS, Order = 5)]

       public Address CurrentAddress { get; set; }

 

       #region Address Details

 

       [Display(Name = "Address1", GroupName = KEY_ADDRESS, Order = 6)]

       public string Addr1 { get; set; }

 

       [Display(Name = "Address2", GroupName = KEY_ADDRESS, Order = 7)]

       public string Addr2 { get; set; }

 

       [Display(Name = "Address3", GroupName = KEY_ADDRESS, Order = 8)]

       public string Addr3 { get; set; }

 

       [Display(Name = "Post code", GroupName = KEY_ADDRESS, Order = 9)]

       public string Postcode { get; set; }

 

       [Display(Name = "County", GroupName = KEY_ADDRESS, Order = 10)]

       public County County { get; set; }

 

       [Display(Name = "Country", GroupName = KEY_ADDRESS, Order = 11)]

       public Country Country { get; set; }

 

 

       #endregion

 

       #region pay details

 

       [Display(Name = "Salary", GroupName = KEY_PAY, Order = 5)]

       public decimal Salary { get; set; }

 

       [Display(Name = "Bonus", GroupName = KEY_PAY, Order = 5)]

       public decimal Bonus { get; set; }

       #endregion

   } 



other documents will be updated soon...

Last edited Oct 19, 2010 at 9:02 PM by hasmukhlalpatel, version 7