Best practice: How to have scrollable htmlarea in page?

[Roland]

Hi everybody,
a common need in developing php apps is to have an area in a page in which there is a lot of information shown which can be scrolled through.
The VCL4PHP only offers the Memo class which does not allow html markup and therefore is not very fancy.
The Richedit (wrapped XINHA) is imo to bloated for such a simple task.
I will describe here a way in which it is possible to have a scrollable html-area without using richedit and without developing your own component. I also want to suggest that we develop a component for this task for the VCL4PHP - I will take charge of this endeavour as soon as I am finished with my current projects - it should not take a lot of time. Since I am new to PHP it might make sense that somebody joins me. In deed I do not understand why such a component does not exist in the VCL4PHP yet since it is a minor specialization of the Panel. But perhabs I am missing something obvious.

So here is how to have a scrollable html-area in your page!!!
1. You need a panel on your page.
2. You need a hiddenfield on your page (hidDetails).
3. You assign code to the OnShow event of the panel. This code has to take care of the following:
a. Echoing an iframe with the size of the panel.
b. Gathering and setting the value of the hidden field reflecting the wanted content of the scrollable panel.
4. You further need a Javascript OnLoad event for the page of the panel which sets the DOM contentdocument of the iframe with the value of the hiddenfield.

Finished!!!

Here is examplecode for 3 PHP (OnShow):
echo "<style type=\"text/css\">";
echo "iframe {";
echo "overflow-x: hidden;";
echo "overflow-y: scroll;";
echo "}";
echo "</style>";
echo "<iframe id=\"detail\" name=\"viewframe\" width=\"200\" height=\"200\" scrolling=\"auto\" frameborder=\"0\">";
echo "</iframe>";

Remarks:
- The style-thingy is optional it is a feature often asked for to have only the vertical scrollbar. The style above takes care of this.
- The dimension has to be altered according to once needs.
- The id is for referencing the iframe in JavaScript.

Here is examplecode for the OnLoad event of the page:
function ExamplePageJSLoad($sender, $params)
{
?>
//Add your javascript code here
var myIF = document.getElementById("detail");
var doc = myIF.contentDocument;
var hidContent = document.getElementById("hidDetails");
if (doc == undefined || doc == null)
doc = myIF.contentWindow.document;
doc.open();
doc.write(hidContent.value);
doc.close();
<?php
}

Remarks:
- the JS-variable myIF is referenced with the iframe (id: detail)
- the JS-object doc is created of type contentDocument
- we assign the content of the iframe to the object
- we write the data of the hiddenfield (hidContent) to the object

Voila - there it is.

Kind regards

Roland

[405hp]

It would be pretty easy to extend Panel into this sort of thing. Probably need the properties something like what is at the top of the following.

PHP Code:

               function Panel1Show($sender, $params)
               {
               $b=1;//border
               $s='auto'; //scroll
               $w=$this->Panel1->Width;
               $h=$this->Panel1->Height;
               $n=$this->Panel1->Name.'_detail';
               $componentName=$this->Panel1->Name.'_if';
               $t=".....................<br>  .......<b>..ll</b>llllllllllllll<br>     lllllllllllllllllllllllll<br>               llllllllllllll";
               echo <<< CODE
<style type=\"text/css">
iframe {
overflow-x: scroll;
overflow-y: scroll;
}
</style>
<iframe id="$n" name="viewframe" width="$w" height="$h" scrolling="$s" frameborder="$b"></iframe>
<script type="text/javascript">
var $componentName = document.getElementById("$n");
var doc = $componentName.contentDocument;
//var hidContent = document.getElementById("hidDetails");
if (doc == undefined || doc == null)
doc = $componentName.contentWindow.document;
doc.open();
doc.write("$t");
doc.close();
</script>
CODE;
               } 


[Roland]

Hi there.
This should be a working descendent of Panel that does what I want.
Advantage no hiddenfield needed. @405hp: Thanks for the your presence on this board - you got me started.

=== This is the component code ===

<?php
require_once("vcl/vcl.inc.php");
//Includes
use_unit("extctrls.inc.php");

//Class definition
class IFPanel extends Panel
{
protected $_htmlcontent = "<h1>This is html</h1>";
function getHTMLContent() { return $this->_htmlcontent; }
function setHTMLContent($value) { $this->_htmlcontent = $value; }
function defaultHTMLContent() { return "<h1>This is html</h1>"; }

function __construct($aowner = null , $width = 400, $height = 400, $content = "<h1>This is html</h1>")
{
parent::__construct($aowner);
if(isset($width)) $this->Width = $width;
if(isset($height)) $this->Height = $height;
if(isset($content)) $this->HTMLContent = $content;
}

function dumpContents()
{
parent::dumpContents();
echo "<style type=\"text/css\">";
echo "iframe {";
echo "overflow-x: hidden;";
echo "overflow-y: scroll;";
echo "}";
echo "</style>";
echo "<style type=\"text/css\">";
echo ".detstyle {";
echo "display: table; border: 1px solid; font-size: 8 pt; font-family: Verdana, Arial, sans-serif; empty-cells: show;";
echo "overflow-y: scroll;";
echo "}";
echo "</style>";
echo "<script type=\"text/javascript\">";
echo "function Loady()";
echo "{";
echo "var myIF = document.getElementById(\"_detail\");";
echo "var doc = {$this->Name}_detail.contentDocument;";
echo "if (doc == undefined || doc == null) doc = myIF.contentWindow.document;";
echo "doc.open();";
echo "doc.write(\"" . htmlToText($this->HTMLContent) . "\");";
echo "doc.close();";
echo "}";
echo "</script>";
echo "<iframe onload=\"Loady()\" id=\"_detail\" name=\"viewframe\" width=\"{$this->Width}\" height=\"{$this->Height}\" scrolling=\"auto\" frameborder=\"0\">";
echo $this->HTMLContent;
echo "</iframe>";
}
}
?>
=== END OF CODE ===

Kind Regards

Roland

P.S.: Any suggestions for improvements wanted.

[405hp]

See how mine outputted, you don't need the onload stuff.

Also add more properties. Make things optional ie you want it with no border but I would want the border.

Is it set up to work with various font sizes /colors?

Will the background color be the same as the page background if I want it to be?

BTW The heredoc method saves you all the backslashes.

PHP Code:

echo <<< CODE
CODE; 


PHP: Strings - Manual

I played around with the styles a bit but couldn't make them work with ff.

[Roland]

Hi again,
I was not aware of the heredoc method ...
I understand the want to have a configurable component - but I was somehow disapointed that the VCL4PHP does not offer anything to have HTML dumped in a scrollable area whereever you want it on the page. So now we have the IFrame component that allow us exactly that by setting HTMLContent ...
Whatever we want considering styles and colors has to be coded in the HTMLContent at the moment. Later on it might make sense to have a CSSContent property to seperate styles from HTML ...

Here is the revisited componentcode:

PHP Code:

<?php
//Includes
use_unit("extctrls.inc.php");

//Class definition
class EyeFrame extends Control
{
   protected $_htmlcontent = "<h1>This is html</h1>";
   function getHTMLContent() { return $this->_htmlcontent; }
   function setHTMLContent($value) { $this->_htmlcontent = $value; }
   function defaultHTMLContent() { return "<h1>This is html</h1>"; }

   protected $_jsonload=null;
   function getjsOnLoad() { return $this->_jsonload; }
   function setjsOnLoad($value) { $this->_jsonload=$value; }


   function __construct($aowner = null , $width = 400, $height = 400, $content = "<h1>This is html</h1>")
   {
      parent::__construct($aowner);
      $this->Caption = "IFPanel";
      if(isset($width))
      {
       $this->Width = $width;
      }
      else
      {
       $this->Width = 200;
      }
      if(isset($height))
      {
        $this->Height = $height;
      }
      else
      {
         $this->Height = 200;
      }
      if(isset($content))
      {
       $this->HTMLContent = $content;
      }
   }

   function dumpContents()
   {
      parent::dumpContents();
      echo "<style type=\"text/css\">";
      echo "iframe {";
      echo "overflow-x: hidden;";
      echo "overflow-y: scroll;";
      echo "}";
      echo "</style>";
      echo "<style type=\"text/css\">";
      echo ".detstyle {";
      echo "display: table; border: 1px solid; font-size: 8 pt; font-family: Verdana, Arial, sans-serif; empty-cells: show;";
      echo "overflow-y: scroll;";
      echo "}";
      echo "</style>";
      echo "<script type=\"text/javascript\">";
      echo "function {$this->Name}_Loady()";
      echo "{";
      echo "var myIF = document.getElementById(\"{$this->Name}_detail\");";
      echo "var doc = {$this->Name}_detail.contentDocument;";
      echo "if (doc == undefined || doc == null) doc = myIF.contentWindow.document;";
      echo "doc.open();";
      echo "doc.write(\"" . htmlToText($this->HTMLContent) . "\");";
      echo "doc.close();";
      echo "}";
      echo "</script>";
      if (($this->ControlState & csDesigning) == csDesigning)
      {
      echo "<h1>This is the IFrame Panel - set HTMLContent as you like.</h1>";
      }
      else
      {
      echo "<iframe onload=\"{$this->Name}_Loady()\" id=\"{$this->Name}_detail\" name=\"viewframe\" width=\"{$this->Width}\" height=\"{$this->Height}\" scrolling=\"auto\" frameborder=\"0\">";
      echo $this->HTMLContent;
      echo "</iframe>";
      }
   }


   function dumpJsEvents()
   {
      parent::dumpJsEvents();
      $this->dumpJSEvent($this->_jsonload);
   }

}

?>

If the codefiel would be calles EyeFrame.inc.php ...
... this would be the packagecode ...

PHP Code:

<?php
  require_once("vcl/vcl.inc.php");
  use_unit("designide.inc.php");
  setPackageTitle("The great EyeFrame Package");
  //Change this setting to the path where the icons for the components reside
  setIconPath("./icons");

  //Change yourunit.inc.php to the php file which contains the component code
  registerComponents("Standard",array("EyeFrame"),"EyeFrame.inc.php");
?>

So this packagefile could be called EyeFrame.package.php.

After creating this two files you can install the package. It is working.

I admit that the use of heredoc would be easier.

Kind Regards

Roland

[Roland]

This is the code of a testpage that contains two panels and two eyeframe components ...

PHP Code:

<?php
require_once("vcl/vcl.inc.php");
//Includes
use_unit("EyeFrame.inc.php");
use_unit("IFPanel.inc.php");
use_unit("forms.inc.php");
use_unit("extctrls.inc.php");
use_unit("stdctrls.inc.php");

//Class definition
class Unit2 extends Page
{
       public $EyeFrame2 = null;
       public $EyeFrame1 = null;
       public $Panel2 = null;
       public $Panel1 = null;
       public $Button1 = null;
       function Button1Click($sender, $params)
       {
       $this->EyeFrame1->HTMLContent =  "<h1>Bla1 bla1 bla1</h1>";
       $this->EyeFrame1->HTMLContent .= "<h2>Bla1 bla1 bla1</h2>";
       $this->EyeFrame1->HTMLContent .= "<h3>Bla1 bla1 bla1</h3>";
       $this->EyeFrame2->HTMLContent =  "<h1>Bla2 bla2 bla2</h1>";
       $this->EyeFrame2->HTMLContent .= "<h2>Bla2 bla2 bla2</h2>";
       $this->EyeFrame2->HTMLContent .= "<h3>Bla2 bla2 bla2</h3>";
       }
}

global $application;

global $Unit2;

//Creates the form
$Unit2=new Unit2($application);

//Read from resource file
$Unit2->loadResource(__FILE__);

//Shows the form
$Unit2->show();

?>

Kind regards

Roland

[Roland]

Hi again hp405.
Yes - you can achieve that by putting the iframe to transparent style.
This would be a further good property for the component.

Regards

Roland

[405hp]

Whatever we want considering styles and colors has to be coded in the HTMLContent at the moment. Later on it might make sense to have a CSSContent property to seperate styles from HTML ...

Just do them as properties and set them directly.
protected $_border = 0;
function getBorder() { return $this->_border; }
function setBorder($value) { $this->_border = $value; }

[cc_023]

I also missed first the scrollable object to put some HTML-text in my project. I first tryed it with a Label, but that is a very bad solution, and no scrolling...
Also Picture insert I cannot get to work.

Than i change the complete concept. E.g. I did not add scrollable HTML to my D4PHP-page, but I insert my D4PHPpage in HTML, using Smarty.
So you can use dreamweaver or whatever to layout your HTML, and extend it with some powerfull PHP-calulations, databaseacces aso...

[guy]

Hi,

I find this component very interresting and I have test it but I have message "stack overflow at line 0" !!

I think problem is at:

echo "doc.open();";
echo "doc.write(\"" . htmlToText($this->HTMLContent) . "\");";
echo "doc.close();";

because if I put "comment" on lines , no problem !!!

Did somebody have solution ?

Thank you and sorry for my bad english

Guy