• [ORGINAL]OOP Panel control design(based on web )


     

    P

    anel controls are most often used as—and are intended as—containers for other controls. They're often useful when you want to show or hide a group of controls at once, or when you want to add controls to a Web page in code. The figure below show four panels top, left, bottom and right

    Figure: panels view

    *    Design issues:Double Brace:  Design issue as usual we keep in our mind the physical and the logical two entities cannot be separated

       Panel control is very straightforward for designs no need for more details with it feature just because the main function of the panel is to contain other controls to be convention for move them, hiding, or showing them, all what we need then just to implement html container that can contain many nested element here we going to use the Div element and the nested children tag consider as div tag also.

    v  Main methods of panel:

    1-   SetWidth: Just to set the width size of the panel nothing else , the getWidth function return the width of the panel  as integer value.

    2-   SetHeight : set the height of panel control

    3-   Set size : set the width and height of panel control

    4-   Set margin left : locate the position of the panel control  in x  form the left to the right of screen

    5-   Set margin top : locate the position of the panel in y from top to bottom of the screen

    6-    Set margin: set the margin left and top of the panel control

    7-   Set visibility: just control the visibility of the panel control mean when to show it in screen and when to hide it off.

    8-   Set background :   the port to set the background feature of the control panel

    9-   Set border: make the panel more customizable, showing line border with size color and other border type features like dotted border, dashed border...act

    10-    Folded Corner: Before write the css file see the physical points of the control u want to create  , just try to put the default properties of  control in css file Add function: the most important ever, so as it suggested name the just is port for the panel container to put children inside in hierarchal way.

    v  Css view of panel control:

    J

    ust because we will control the features of the panel using java script so no need to set the more sheet and attributes in the css file, according to what the control need features as default, just wrote the default ones see the code source below

     

    Text Box: .panel
{
   position:absolute;
   padding:0px;
   border:1px gray solid;
}The code beside show only the position of the control, padding and the border

    Code: css file code of the panel control

     

     

     

     

     

     

     

     

     

     

    v  Java script aspects:

     Using java script to control the auto generation html code, mean we try to create all html elements using js code

    ·         Sizing control: that is to say how to set the size (width, height) of the control, object below is the div html element that we can consider it as panel control

    Text Box:  In the SetWidth () function we keep the Val value in the w variable so that just will be easy to return it in the getWidth () function, the same issue also in others functions below.  this.setWidth=function(val)
      {
       w=val;
       obj.style.width=w;
      }
      
    this.getWidth=function(){return w;}
      
    this.setHeight=function(val)
      {
       obj.style.height=val;
       h=val;
      }
      
    this.getHeight=function(){return h;}
      
    this.setMarginLeft=function(val)
      {
       l=val;obj.style.marginLeft=val;
      }

    ·         Margining: the margining property intended for layout of the controls, where to put the control in from, page or document.

     

    Text Box: Obj is the html element we want to control it , just we consider it  as  panel control   this.setMarginLeft=function(val)
      {
       l=val;obj.style.marginLeft=val;
      }
      
    this.getMarginLeft=function(){return l;}
      
    this.setMarginTop=function(val)
      {
       obj.style.marginTop=val;t=val;
      }
      
    this.getMarginLeft=function(){return t;}
      

    Outlook: just consider the background and the border of the panel control

      this.setBackground=function(image,xy)
      {
        obj.style.backgroundImage="url("+image+")";
        
    switch(xy)
        {
           
    case 'x':
             obj.style.backgroundRepeat='repeat-x';
           
    break;
           
    case 'y':
           obj.style.backgroundRepeat='repeat-y';
           
    break;
        }
      }

      
    this.setBorder=function(boderWidth,color,type)
      {
        obj.style.border=boderWidth+"px "+color+ " "+type;
      }

      

     add function :

         this.add=function()
        {
             childIndex++;
             
    var ch=new Child();
             ch.setParent(pid);
             ch.setTag('div');
             ch.setId(pid+childIndex);
             
    return ch.getId();
      
       }

       this.setVisibilty=function(val)
       {
         
    if(val==true){obj.style.display='block';}
         
    else if(val==false){obj.style.display='none';}
       }

     

    Total js code:

     



    function Child()
    {
      
    var pa;
      
    var chi;
      
    this.setParent=function(pid)
      {
        pa=document.getElementById(pid);
      }
      
    this.setTag=function(tag)
      {
          chi=document.createElement(tag);
          pa.appendChild(chi);
      }
      
    this.setId=function(Name)
      {
        chi.id=Name;

      }
      
    this.setClassName=function(css)
      {
       chi.className=css;
      }
      
      
    this.getId=function(){return chi.id;}
      
    this.getObject=function(){return document.getElementById(chi.id);}

      
    }


    function createHtmlPanel(pid)
    {
         
    var baba=document.getElementById(pid);
             baba.className='panel';
    }

    function Panel(pid)
    {

      
    var childIndex=-1;
      createHtmlPanel(pid);
      
    var w,h,l,t;
      
    var obj=document.getElementById(pid);
      
      
    this.setWidth=function(val)
      {
       w=val;
       obj.style.width=w;
      }
      
    this.getWidth=function(){return w;}
      
    this.setHeight=function(val)
      {
       obj.style.height=val;
       h=val;
      }
      
    this.getHeight=function(){return h;}
      
    this.setMarginLeft=function(val)
      {
       l=val;obj.style.marginLeft=val;
      }
      
    this.getMarginLeft=function(){return l;}
      
    this.setMarginTop=function(val)
      {
       obj.style.marginTop=val;t=val;
      }
      
    this.getMarginLeft=function(){return t;}
      
      
    this.setSize=function(wi,he)
      {
         
    this.setWidth(wi);
         
    this.setHeight(he);    
      }
      
      
    this.setMargin=function(lef,top)
      {
       
    this.setMarginLeft(lef);
       
    this.setMarginTop(top);
      }
      
      
    this.setBackground=function(image,xy)
      {
        obj.style.backgroundImage="url("+image+")";
        
    switch(xy)
        {
           
    case 'x':
             obj.style.backgroundRepeat='repeat-x';
           
    break;
           
    case 'y':
           obj.style.backgroundRepeat='repeat-y';
           
    break;

       
        }
      }
      
      
    this.setBorder=function(boderWidth,color,type)
      {
        obj.style.border=boderWidth+"px "+color+ " "+type;
      }
      
      
    this.getId=function()
      {
       
    return pid;
      }
      
         
    this.add=function()
        {
             childIndex++;
             
    var ch=new Child();
             ch.setParent(pid);
             ch.setTag('div');
             ch.setId(pid+childIndex);
             
    return ch.getId();
      
       }
       
    this.setVisibilty=function(val)
       {
         
    if(val==true){obj.style.display='block';}
         
    else if(val==false){obj.style.display='none';}
       }

      
     
    }

     

    Html aspect:

     


    <div id="Top"></div>
    <div id="left"></div>
    <div id="right"></div>
    <div id="bottom"></div>
    <div id="center"></div>

    <script language="javascript" type="text/javascript">

     
    var pan1=new Panel('Top');
         pan1.setSize(1000,200);
         pan1.setMargin(100,0);
         pan1.setBackground('images/no.png','x');
         pan1.setBorder(1,'#333','solid');
         
         
     
    var pan2=new Panel('left');
         pan2.setSize(200,300);
         pan2.setMargin(100,200+5);
         pan2.setBackground('images/SmallScreen.png','xy');
         pan2.setBorder(1,'#333','solid');

     
    var pan2=new Panel('right');
         pan2.setSize(200,300);
         pan2.setMargin(900,200+5);
         pan2.setBackground('images/SmallScreen.png','xy');
         pan2.setBorder(1,'#333','solid');
     
    var pan1=new Panel('bottom');
         pan1.setSize(1000,50);
         pan1.setMargin(100,500);
         pan1.setBackground('images/no.png','x');
         pan1.setBorder(1,'#333','solid');

         
    </script>

     

     

  • 相关阅读:
    C programming course
    关于时间管理的培训心得
    吴老师,一路好走!
    自己实现Int32Collection(.Net 1.1),以及效率问题的体会
    《C陷阱与缺陷》和《C专家编程》两本书又翻印了
    暂时闲一会,写一点点面试体会吧
    人类没有一件事是值得烦恼的
    EP0N系统中简便可行的光纤保护方法
    越来越不想写代码了
    [转]PON关键技术-通用成帧协议研究
  • 原文地址:https://www.cnblogs.com/ammar/p/1633312.html
Copyright © 2020-2023  润新知