Adding Dialog Box of “About Application” into Websites that Generated by PHPMaker 9.1.0

It's time to add the dialog box of "About Application" into your web applications that generated by PHPMaker. This is important to show your users about information of your web application. We will use YUI Panel widget for this purpose. This will make your web application will look more informative and more professional, since we do not use separated browser window for this. This "About" dialog box will act as modal window. In other words, after users displaying it, then they have to close it before to continue working with your web application. Sounds promising, eh?

Updated on February 10, 2013: This customization has been implemented in PHPMaker version 9.2.0, it matches to each other, and as a result, it works properly.

Updated on June 17, 2013: This customization below has been handled by using MasinoFixedWidthSite extension. You don’t need to implement the customization below if you use my extensions together with the original PHPMaker Template and Extension files.

[hidepost]

1. Open your \Script\template.php file, and find this code:

   </style>
   

   before that line, please insert the following code:

   .dialogcenter {
   	color: inherit; 
   	font-family: tahoma; 
   	font-size: 8pt; 
   	text-align: center;
   	padding: 8px;
   }
   
   .dialogtitle{
   	font-family: Verdana; 
   	font-size: 9pt; 
   	color: #000000; 
   	font-weight: bold;
   	vertical-align:top;
   	text-shadow: 2px 2px 2px #CACACA;
   }
   

2. Still in that \Script\template.php file, find again this code:

   </head>
   

   before that line, please insert the following code:

   <?php 
   $aboutus = "About Us";
   $abouttext = "";
   if ($gsLanguage == "en") {
   	$abouttext = "<span class='dialogtitle' style='white-space: nowrap;'>Your Dialog Title</span><br><br>"; 
   	$abouttext .= "Your main description of your web application goes here ... <br><br>";
   	$abouttext .= "<br><br>";
   	$abouttext .= "Web Developer:<br>";
   	$abouttext .= "Your name goes here<br>";
   } else { // for other language
   	$abouttext .= "<span class='dialogtitle' style='white-space: nowrap;'>Your Dialog Title in other language ...</span><br><br>"; 
   	$abouttext .= "Your main description of your web application in other language goes here ... <br><br>";
   	$abouttext .= "<br><br>";
   	$abouttext .= "Web Developer:<br></span>";
   	$abouttext .= "Your name goes here<br>";
   }
   ?>
   <script>
   YAHOO.namespace("dialog");function init(){YAHOO.dialog.AboutUs=new YAHOO.widget.SimpleDialog("AboutUs",{width:"450px",height:"350px",fixedcenter:true,visible:false,draggable:false,modal:true,close:false,text:"<font style='color: black; text-align: center;'><?php echo $abouttext; ?></font>",constraintoviewport:true,buttons:[{text:"&nbsp;&nbsp;&nbsp;"+ewLanguage.Phrase("MessageOK")+"&nbsp;&nbsp;&nbsp;",isDefault:true,handler:function(){this.hide()}}]});YAHOO.dialog.AboutUs.setHeader("<?php echo $aboutus ?>");YAHOO.dialog.AboutUs.setBody("<?php echo $abouttext; ?>");YAHOO.dialog.AboutUs.render("container");YAHOO.util.Event.addListener("about","click",YAHOO.dialog.AboutUs.show,YAHOO.dialog.AboutUs,true)}YAHOO.util.Event.addListener(window,"load",init);
   </script>
   

   Important: Please note that if you want to change the size of the dialog box, then edit the following part of code above with your needs:

   ... width:"450px",height:"350px" ...
   

3. Still in that \Script\template.php file, find again this code:

   <div class="ewFooterRow">
   

   then replace it with the following code:

   <div class="ewFooterRow" id="container">
   

4. Open your PHPMaker project (.pmp) file by using PHPMaker application, go to Tools -> Menu Editor, and then add a menu item as following:

   - Menu Item: About
   - URL: #
   - Allow Anonymous User: Yes (checked)

   afterwards, click on OK button to save the changes.

5. Generate your ewmenu.php file, afterwards, open it using your favorite text editor, and then check the Id number of the About menu item we just added before. Make sure you did not skip this step as it is important to know the Id number of the About menu we just added before.
6. Open your \Script\ewshared.php file, and find this code:

   	// Render
   	function Render($aclass = "", $liclass = "", $mobile = FALSE) {
   		// Create <A>
   		if ($mobile)
   			$attrs = array("class" => $aclass, "rel" => "external", "href" => str_replace("#","?chart=",$this->Url), "target" => $this->Target);
   		else
   			$attrs = array("class" => $aclass, "href" => $this->Url, "target" => $this->Target);
   		$innerhtml = ew_HtmlElement("a", $attrs, $this->Text);
   		if (!is_null($this->SubMenu)) {
   			if ($mobile && $this->Url <> "")
   				$innerhtml .= $innerhtml;
   			$innerhtml .= $this->SubMenu->Render(TRUE);
   		}
   		// Create <LI>
   		return ew_HtmlElement("li", array("class" => $liclass), $innerhtml);
   	}
   

   then replace it with the following code:

   	// Render
   	function Render($aclass = "", $liclass = "", $mobile = FALSE) {
   
   		// Create <A>
   		if ($mobile) 
   			$attrs = array("class" => $aclass, "rel" => "external", "href" => str_replace("#","?chart=",$this->Url), "target" => $this->Target);
   		else
   
   			// $attrs = array("class" => $aclass, "href" => $this->Url, "target" => $this->Target);
   			if ($this->Id == 123) {  // 123 is for example special "About" menu, modified by Masino Sinaga, August 27, 2012
   				$attrs = array("class" => $aclass, "href" => $this->Url, "target" => $this->Target, "id" => "about"); // <-- in order to support YUI-Dialog
   			} else {
   				$attrs = array("class" => $aclass, "href" => $this->Url, "target" => $this->Target);
   			}	
   		$innerhtml = ew_HtmlElement("a", $attrs, $this->Text);
   		if (!is_null($this->SubMenu)) {
   			if ($mobile && $this->Url <> "")
   				$innerhtml .= $innerhtml;
   			$innerhtml .= $this->SubMenu->Render(TRUE);
   		}
   
   		// Create <LI>
   		return ew_HtmlElement("li", array("class" => $liclass), $innerhtml);
   	}
   

   Warning and Important: Please note that the value of 123 is the Id number of About menu we just added in the Step 4 and check its value from Step 5 above. It may vary with the results in your generated ewmenu.php file. So, make sure you have adjusted that value with yours.

7. Finally, re-generate your script files using PHPMaker as always.

[/hidepost]