Developer's Guide :: Layers

From Delphi for PHP Documentation Wiki

Layers are a powerful feature which allows you to create stack based interfaces, that is, you can have several layers or panels and switch the controls are going to be shown by changing a property.

Every control on the library has a Layer property, which is a string and can be anything, that property specifies in which Layer of the parent control this control is rendered.

Parent controls, like Panel, can have an ActiveLayer property, which specifies which Layer are going to render, and because of that, only child controls having Layer with the same value as ActiveLayer will be rendered.

Let's see a sample:

 
<?php
        //Includes
        require_once("vcl/vcl.inc.php");
        use_unit("forms.inc.php");
        use_unit("extctrls.inc.php");
        use_unit("stdctrls.inc.php");
 
        //Class definition
        class LayerSample extends Page
        {
               public $Button2 = null;
               public $Button1 = null;
               public $Panel1 = null;
               function Button1Click($sender, $params)
               {
                        if ($sender->Layer=="Layer1") $this->Panel1->ActiveLayer="Layer2";
                        else $this->Panel1->ActiveLayer="Layer1";
               }
 
        }
 
        global $application;
 
        global $LayerSample;
 
        //Creates the form
        $LayerSample=new LayerSample($application);
 
        //Read from resource file
        $LayerSample->loadResource(__FILE__);
 
        //Shows the form
        $LayerSample->show();
 
?>
 

This is the XML resource:

<?php
<object class="LayerSample" name="LayerSample" baseclass="page">
  <property name="Background"></property>
  <property name="Caption">Layer sample</property>
  <property name="DocType">dtNone</property>
  <property name="Font">
    <property name="Align">taNone</property>
    <property name="Case"></property>
    <property name="Color"></property>
    <property name="Family">Verdana</property>
    <property name="LineHeight"></property>
    <property name="Size">10px</property>
    <property name="Style"></property>
    <property name="Variant"></property>
    <property name="Weight"></property>
  </property>
  <property name="Height">600</property>
  <property name="IsMaster">0</property>
  <property name="Layout">
    <property name="Cols">5</property>
    <property name="Rows">5</property>
    <property name="Type">ABS_XY_LAYOUT</property>
  </property>
  <property name="Name">LayerSample</property>
  <property name="Width">800</property>
  <property name="OnAfterShow"></property>
  <property name="OnAfterShowFooter"></property>
  <property name="OnBeforeShow"></property>
  <property name="OnBeforeShowHeader"></property>
  <property name="OnCreate"></property>
  <property name="OnShow"></property>
  <property name="OnShowHeader"></property>
  <property name="OnStartBody"></property>
  <property name="OnTemplate"></property>
  <object class="Panel" name="Panel1" >
    <property name="ActiveLayer">Layer2</property>
    <property name="Caption">Panel1</property>
    <property name="Dynamic"></property>
    <property name="Font">
        <property name="Align">taNone</property>
        <property name="Case"></property>
        <property name="Color"></property>
        <property name="Family">Verdana</property>
        <property name="LineHeight"></property>
        <property name="Size">10px</property>
        <property name="Style"></property>
        <property name="Variant"></property>
        <property name="Weight"></property>
    </property>
    <property name="Height">400</property>
    <property name="Layout">
        <property name="Cols">5</property>
        <property name="Rows">5</property>
        <property name="Type">XY_LAYOUT</property>
    </property>
    <property name="Left">144</property>
    <property name="Name">Panel1</property>
    <property name="Top">56</property>
    <property name="Width">528</property>
    <property name="OnAfterShow"></property>
    <property name="OnBeforeShow"></property>
    <property name="OnShow"></property>
    <object class="Button" name="Button1" >
      <property name="Caption">Button1</property>
      <property name="Font">
            <property name="Align">taNone</property>
            <property name="Case"></property>
            <property name="Color"></property>
            <property name="Family">Verdana</property>
            <property name="LineHeight"></property>
            <property name="Size">10px</property>
            <property name="Style"></property>
            <property name="Variant"></property>
            <property name="Weight"></property>
      </property>
      <property name="Height">25</property>
      <property name="Layer">Layer1</property>
      <property name="Left">53</property>
      <property name="Name">Button1</property>
      <property name="Top">59</property>
      <property name="Width">75</property>
      <property name="OnAfterShow"></property>
      <property name="OnBeforeShow"></property>
      <property name="OnClick">Button1Click</property>
      <property name="OnShow"></property>
    </object>
    <object class="Button" name="Button2" >
      <property name="Caption">Button2</property>
      <property name="Font">
            <property name="Align">taNone</property>
            <property name="Case"></property>
            <property name="Color"></property>
            <property name="Family">Verdana</property>
            <property name="LineHeight"></property>
            <property name="Size">10px</property>
            <property name="Style"></property>
            <property name="Variant"></property>
            <property name="Weight"></property>
      </property>
      <property name="Height">25</property>
      <property name="Layer">Layer2</property>
      <property name="Left">241</property>
      <property name="Name">Button2</property>
      <property name="Top">137</property>
      <property name="Width">75</property>
      <property name="OnAfterShow"></property>
      <property name="OnBeforeShow"></property>
      <property name="OnClick">Button1Click</property>
      <property name="OnShow"></property>
    </object>
  </object>
</object>
?>

That is, when you click on button, it conmutes the ActiveLayer property of the panel, so the other button is shown.