[mapguide-commits] r6097 - in trunk/MgDev/Web/src/mapadmin: . images

svn_mapguide at osgeo.org svn_mapguide at osgeo.org
Fri Aug 26 02:56:02 EDT 2011


Author: hubu
Date: 2011-08-25 23:56:01 -0700 (Thu, 25 Aug 2011)
New Revision: 6097

Added:
   trunk/MgDev/Web/src/mapadmin/images/arrow_down.png
   trunk/MgDev/Web/src/mapadmin/images/arrow_left.png
   trunk/MgDev/Web/src/mapadmin/images/arrow_up.png
Modified:
   trunk/MgDev/Web/src/mapadmin/performanceReport.php
   trunk/MgDev/Web/src/mapadmin/performanceReport_Export.php
   trunk/MgDev/Web/src/mapadmin/performanceReport_GetResult.php
   trunk/MgDev/Web/src/mapadmin/performanceReport_MapViewer.php
   trunk/MgDev/Web/src/mapadmin/resizablepagecomponents.php
   trunk/MgDev/Web/src/mapadmin/serverdatafunctions.php
Log:
On behalf of Ted Yang.
fix the ticket 1768(part II): http://trac.osgeo.org/mapguide/ticket/1768

1. fixed layer info table head with vertical scroll 
2. click layer info table row will display layer detail info 
3. export works 
4. fix some UI defects:

change "Select settings" to "Select setting..."
the ajax loading image can be clicked to submit the page (use <img> instead of <input type="img">)
add some icons

Added: trunk/MgDev/Web/src/mapadmin/images/arrow_down.png
===================================================================
(Binary files differ)


Property changes on: trunk/MgDev/Web/src/mapadmin/images/arrow_down.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Added: trunk/MgDev/Web/src/mapadmin/images/arrow_left.png
===================================================================
(Binary files differ)


Property changes on: trunk/MgDev/Web/src/mapadmin/images/arrow_left.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Added: trunk/MgDev/Web/src/mapadmin/images/arrow_up.png
===================================================================
(Binary files differ)


Property changes on: trunk/MgDev/Web/src/mapadmin/images/arrow_up.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Modified: trunk/MgDev/Web/src/mapadmin/performanceReport.php
===================================================================
--- trunk/MgDev/Web/src/mapadmin/performanceReport.php	2011-08-25 10:19:32 UTC (rev 6096)
+++ trunk/MgDev/Web/src/mapadmin/performanceReport.php	2011-08-26 06:56:01 UTC (rev 6097)
@@ -144,10 +144,10 @@
                 {
                     text-align:center;
                     padding:.5em;
-                    width: 20%;
-                    border:1px solid #CCCCCC;
+                    border-top:1px solid #CCCCCC;
                     background-color:#EEEEEE;
                     border-bottom: none;
+                    cursor:  default;
                 }
 
                 .layerResultsStyle table,.layerResultsStyle td
@@ -203,10 +203,11 @@
 
                 #layerBody
                 {
-                     Height:    200px;
+                     Height:    300px;
                      margin:    0px;
                      padding:   0px;
                      overFlow:  auto;
+                     cursor: pointer;
                 }
                 
                 .mapDefinitionResultTableStyle tr
@@ -304,70 +305,73 @@
         
             <script type="text/javascript">
                 var Common = {
-                        getItself: function(id)
+                    getItself: function(id)
+                    {
+                        return "string" == typeof id ? document.getElementById(id) : id;
+                    },
+
+                    getEvent: function()
+                    {
+                        if (document.all)
                         {
-                            return "string" == typeof id ? document.getElementById(id) : id;
-                        },
-                        getEvent: function()
+                            return window.event;
+                        }
+                        func = getEvent.caller;
+                        while (func != null)
                         {
-                            if (document.all)
+                            var arg0 = func.arguments[0];
+                            if (arg0)
                             {
-                                return window.event;
-                            }
-                            func = getEvent.caller;
-                            while (func != null)
-                            {
-                                var arg0 = func.arguments[0];
-                                if (arg0)
+                                if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation))
                                 {
-                                    if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation))
-                                    {
-                                        return arg0;
-                                    }
+                                    return arg0;
                                 }
-                                func = func.caller;
                             }
-                            return null;
-                        },
-                        getMousePos: function(ev)
+                            func = func.caller;
+                        }
+                        return null;
+                    },
+
+                    getMousePos: function(ev)
+                    {
+                        if (!ev)
                         {
-                            if (!ev)
-                            {
-                                ev = this.getEvent();
-                            }
-                            if (ev.pageX || ev.pageY)
-                            {
-                                return {x: ev.pageX , y: ev.pageY};
-                            }
+                            ev = this.getEvent();
+                        }
+                        if (ev.pageX || ev.pageY)
+                        {
+                            return {x: ev.pageX , y: ev.pageY};
+                        }
 
-                            if (document.documentElement.scrollLeft && document.documentElement.scrollTop)
-                            {
-                                return {
-                                    x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
-                                    y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
-                                };
-                            }
-                            else if (document.body)
-                            {
-                                return {
-                                    x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
-                                    y: ev.clientY + document.body.scrollTop - document.body.clientTop
-                                };
-                            }
-                        },
-                        getElementPos: function(el)
+                        if (document.documentElement.scrollLeft && document.documentElement.scrollTop)
                         {
-                            el = this.getItself(el);
-                            var _x = 0, _y = 0;
-                            do
-                            {
-                                _x += el.offsetLeft;
-                                _y += el.offsetTop;
-                            } while ((el = el.offsetParent));
+                            return {
+                                x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
+                                y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
+                            };
+                        }
+                        else if (document.body)
+                        {
+                            return {
+                                x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
+                                y: ev.clientY + document.body.scrollTop - document.body.clientTop
+                            };
+                        }
+                    },
+                    
+                    getElementPos: function(el)
+                    {
+                        el = this.getItself(el);
+                        var xValue = 0, yValue = 0;
+                        do
+                        {
+                            xValue += el.offsetLeft;
+                            yValue += el.offsetTop;
+                        } while ((el = el.offsetParent));
 
-                            return { x: _x, y: _y };
-                        }
+                        return { x: xValue, y: yValue };
                     }
+                }
 
                 function CollapsibleTabClick(tabId,contentId)
                 {
@@ -377,13 +381,13 @@
                     if (collapseImage.alt == "down")
                     {
                         collapseImage.alt = "left";
-                        collapseImage.src = "images/testImages/left_18.jpg";
+                        collapseImage.src = "images/arrow_left.png";
                         content.style.display = "none";
                     }
                     else
                     {
                         collapseImage.alt = "down";
-                        collapseImage.src = "images/testImages/down_17.jpg";
+                        collapseImage.src = "images/arrow_down.png";
                         content.style.display = "block";
                     }
                 }
@@ -394,14 +398,14 @@
                     var content = document.getElementById("settingsContent");
 
                     collapseImage.alt = "left";
-                    collapseImage.src = "images/testImages/left_18.jpg";
+                    collapseImage.src = "images/arrow_left.png";
 
                     content.style.display = "none";
                 }
 
                 function SetResultNotMatchWarningMsg(visible)
                 {
-                    var wrnMsg=document.getElementById("ResultNotMatchWrn");
+                    var wrnMsg = document.getElementById("ResultNotMatchWrn");
                     if(visible)
                     {
                         wrnMsg.style.display = "block";
@@ -414,7 +418,7 @@
 
                 function ShowReportWarningMsg()
                 {
-                    var reportTab=document.getElementById("resultsTab");
+                    var reportTab = document.getElementById("resultsTab");
                     if(reportTab.style.display=="block")
                     {
                         SetResultNotMatchWarningMsg(true);
@@ -449,7 +453,7 @@
                     }
 
                     //show the map definition ID by the side of the map selector
-                    if(mapDefinitonSelector.selectedIndex>=0)
+                    if(mapDefinitonSelector.selectedIndex >= 0)
                     {
                         tipDiv.innerHTML=mapDefinitonSelector.options[mapDefinitonSelector.selectedIndex].value;
                         //clear warning message
@@ -488,8 +492,8 @@
                 {
                     var result=false;
                    
-                    var scale=document.getElementById("txtScale");
-                    var scaleWarnMsg=document.getElementById("scaleWarnMessage");
+                    var scale = document.getElementById("txtScale");
+                    var scaleWarnMsg = document.getElementById("scaleWarnMessage");
                     var scaleValue=RemoveSpace(scale.value);
 
                     if("" == scaleValue)
@@ -526,11 +530,11 @@
 
                 function ValidateCenterPoint(needFormat)
                 {
-                    var result=false;
+                    var result = false;
 
-                    var centerPoint=document.getElementById("txtCenterPoint");
-                    var centerPointWarnMsg=document.getElementById("centerPointWarnMessage");
-                    var centerPointValue=RemoveSpace(centerPoint.value);
+                    var centerPoint = document.getElementById("txtCenterPoint");
+                    var centerPointWarnMsg = document.getElementById("centerPointWarnMessage");
+                    var centerPointValue = RemoveSpace(centerPoint.value);
 
                     if("" == centerPointValue)
                     {
@@ -590,7 +594,7 @@
 
                     if(visible)
                     {
-                        var mapDefinitonSelector=document.getElementById("mapSelector_DO_NOT_PERSIST");
+                        var mapDefinitonSelector = document.getElementById("mapSelector_DO_NOT_PERSIST");
                         if(mapDefinitonSelector.selectedIndex>=0)
                         {
                             visible=ValidateCenterPoint(false);
@@ -610,7 +614,7 @@
 
                     if(visible)
                     {
-                        var mapDefinitonSelector=document.getElementById("mapSelector_DO_NOT_PERSIST");
+                        var mapDefinitonSelector = document.getElementById("mapSelector_DO_NOT_PERSIST");
                         if(mapDefinitonSelector.selectedIndex>=0)
                         {
                             visible=ValidateScale(false);
@@ -626,7 +630,7 @@
 
                 function ScaleFocus()
                 {
-                    var scale=document.getElementById("txtScale");
+                    var scale = document.getElementById("txtScale");
 
                     if( scale.value=="Enter scale")
                     {
@@ -636,7 +640,7 @@
 
                 function CenterPointFocus()
                 {
-                    var centerPoint=document.getElementById("txtCenterPoint");
+                    var centerPoint = document.getElementById("txtCenterPoint");
 
                     if( centerPoint.value=="Enter center point")
                     {
@@ -647,15 +651,15 @@
                 var checkMapFrameLoadedInterval = null;
                 function SelectMapSettings()
                 {
-                    var mapFrame=document.getElementById("mapViewerFrame");
-                    var mapDefinitonSelector=document.getElementById("mapSelector_DO_NOT_PERSIST");
+                    var mapFrame = document.getElementById("mapViewerFrame");
+                    var mapDefinitonSelector = document.getElementById("mapSelector_DO_NOT_PERSIST");
                     if(mapDefinitonSelector.selectedIndex>=0)
                     {
                         mapFrame.src="performanceReport_MapViewer.php?mapDefinition="+mapDefinitonSelector.options[mapDefinitonSelector.selectedIndex].value;
                     }
 
-                    var bgDiv=document.getElementById("bgDiv");
-                    var mapViewerDiv=document.getElementById("mapViewerDialog");
+                    var bgDiv = document.getElementById("bgDiv");
+                    var mapViewerDiv = document.getElementById("mapViewerDialog");
 
                     bgDiv.style.display = "block";
                     SetBgDivSize(bgDiv);
@@ -699,14 +703,14 @@
 
                 function WindowResized()
                 {
-                    var mapViewerDiv=document.getElementById("mapViewerDialog");
+                    var mapViewerDiv = document.getElementById("mapViewerDialog");
 
                     if("block" == mapViewerDiv.style.display.toLowerCase())
                     {
                         SetMapViewerLoaction(mapViewerDiv);
                     }
 
-                    var bgDiv=document.getElementById("bgDiv");
+                    var bgDiv = document.getElementById("bgDiv");
                     if("block" == bgDiv.style.display.toLowerCase())
                     {
                         SetBgDivSize(bgDiv);
@@ -740,15 +744,15 @@
 
                 function CloseMapViewer()
                 {
-                    var bgDiv=document.getElementById("bgDiv");
-                    var msgDiv=document.getElementById("mapViewerDialog");
+                    var bgDiv = document.getElementById("bgDiv");
+                    var msgDiv = document.getElementById("mapViewerDialog");
 
                     bgDiv.style.display = "none";
                     msgDiv.style.display="none";
 
                     //must destory the old page, if not, the CheckMapFrameLoaded
                     //will get the old page's frame and then the buttons will not be displayed in new page
-                    var mapFrame=document.getElementById("mapViewerFrame");
+                    var mapFrame = document.getElementById("mapViewerFrame");
                     mapFrame.src="";
                 }
 
@@ -765,7 +769,7 @@
                     //use setInterval to make sure that the message div has been created.
                     messageShorterInterval = window.setInterval(function(){ makeMessageShorter(mapFrame); }, 100);
 
-                    mapSpace = mapFrameDocument.getElementById("mapSpace");
+                    var mapSpace = mapFrameDocument.getElementById("mapSpace");
                     var buttonPanel = mapFrameDocument.createElement('div');
                     buttonPanel.style.backgroundColor="transparent";
                     buttonPanel.style.padding="0px";
@@ -803,18 +807,18 @@
                    var center = mapFrame.GetCenter();
                    var scale = mapFrame.GetScale();
 
-                   var centerPoint=document.getElementById("txtCenterPoint");
+                   var centerPoint = document.getElementById("txtCenterPoint");
                    centerPoint.value=center.X+"*"+center.Y;
                    var centerPointValidate=ValidateCenterPoint(true);
 
-                   var txtScale=document.getElementById("txtScale");
-                   txtScale.value=scale;
+                   var scaleInput = document.getElementById("txtScale");
+                   scaleInput.value=scale;
                    var scaleValidate=ValidateScale(true);
 
                    var visible=centerPointValidate&&scaleValidate;
                    if(visible)
                    {
-                       var mapDefinitonSelector=document.getElementById("mapSelector_DO_NOT_PERSIST");
+                       var mapDefinitonSelector = document.getElementById("mapSelector_DO_NOT_PERSIST");
                        if(mapDefinitonSelector.selectedIndex>=0)
                        {
                            visible=true;
@@ -840,6 +844,26 @@
                     mapFrame.mapMessage.container.style.padding="1px";
                 }
 
+                //remove the space at the begin and end of a string
+                function Trim(str)
+                {
+                    var returnedStr="";
+
+                    var i = 0;
+                    for(; i < str.length && str.charAt(i)==" "; i++);
+
+                    var j = str.length;
+                    for(; j>0 && str.charAt(j-1)==" " ; j--);
+
+                    if(i<=j)
+                    {
+                        returnedStr = str.substring(i,j);
+                    }
+
+                    return returnedStr;
+                }
+
+                //remove all the space inside a string
                 function RemoveSpace(str)
                 {
                     var i=0,strWithoutSpace="";
@@ -871,7 +895,8 @@
 
                    var t = "";
 
-                   for(i = 0; i < l.length; i ++ )
+                   var i=0;
+                   for(; i < l.length; i ++ )
                    {
                       t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? " " : "");
                    }
@@ -928,7 +953,8 @@
                   if ("" == str)
                     return true;
 
-                  for(var i = 0; i < str.length;i++)
+                  var i = 0;
+                  for(; i < str.length;i++)
                   {
                      var oneNum = str.substring(i,i+1);
                      if (oneNum < "0" || oneNum > "9")
@@ -955,7 +981,8 @@
                         len=str.length;
                     }
 
-                    for(var i = 0;i < len;i++)
+                    var i = 0;
+                    for(;i < len;i++)
                     {
                         var oneNum = str.substring(i,i+1);
 
@@ -977,7 +1004,8 @@
 
                 function HighlightRow(tableRow)
                 {
-                    for (var i = 0; i < tableRow.childNodes.length; i++)
+                    var i = 0;
+                    for (; i < tableRow.childNodes.length; i++)
                     {
                         var obj = tableRow.childNodes[i];
                         obj.className = "over";
@@ -986,7 +1014,8 @@
 
                 function UnhighlightRow(tableRow)
                 {
-                    for (var i = 0;i < tableRow.childNodes.length;i++)
+                    var i = 0;
+                    for (;i < tableRow.childNodes.length;i++)
                     {
                         var obj = tableRow.childNodes[i];
                         obj.className = "";
@@ -1048,11 +1077,11 @@
 
                 function GetResult()
                 {
-                    var mapDefinitonSelector=document.getElementById("mapSelector_DO_NOT_PERSIST");
+                    var mapDefinitonSelector = document.getElementById("mapSelector_DO_NOT_PERSIST");
 
                     if(mapDefinitonSelector.selectedIndex<0)
                     {
-                        var mapResourceWarningMessage=document.getElementById("selectMapResourceWarningMessage");
+                        var mapResourceWarningMessage = document.getElementById("selectMapResourceWarningMessage");
                         mapResourceWarningMessage.innerHTML="A map resource was not selected.";
                         return false;
                     }
@@ -1065,13 +1094,13 @@
 
                     SetResultNotMatchWarningMsg(false);
 
-                    var ajax_loading_img=document.getElementById("ajax_loading_img");
-                    ajax_loading_img.style.display="inline";
+                    var loadingImg = document.getElementById("ajax_loading_img");
+                    loadingImg.style.display="inline";
 
-                    var btnClear=document.getElementById("btnClearSpan");
+                    var btnClear = document.getElementById("btnClearSpan");
                     btnClear.style.display="none";
 
-                    var runButton=document.getElementById("runBtn");
+                    var runButton = document.getElementById("runBtn");
                     runButton.setAttribute("disabled", "disabled");
 
                     xmlHttp=GetXmlHttpObject();
@@ -1081,42 +1110,72 @@
                        return;
                     }
 
-                    var scale=document.getElementById("txtScale");
-                    var mapSelector=document.getElementById("mapSelector_DO_NOT_PERSIST");
+                    var scale = document.getElementById("txtScale");
+                    var centerPoint = document.getElementById("txtCenterPoint");
+                    var mapSelector = document.getElementById("mapSelector_DO_NOT_PERSIST");
                     var url="performanceReport_GetResult.php";
 
-                    url+="?scale="+scale.value;
-                    url+="&mapDefinition="+mapSelector.value;
+                    url+="?scale="+encodeURIComponent(scale.value);
+                    url+="&centerPoint="+encodeURIComponent(centerPoint.value);
+                    url+="&mapDefinition="+encodeURIComponent(mapSelector.value);
                     url+="&sid="+Math.random();
-                    xmlHttp.onreadystatechange=stateChanged;
+                    xmlHttp.onreadystatechange=StateChanged;
                     xmlHttp.open("POST",url,true);
                     xmlHttp.send(null);
                 }
 
-                function stateChanged()
+                function StateChanged()
                 {
                     if ((4 == xmlHttp.readyState || "complete" == xmlHttp.readyState)&& 200 == xmlHttp.status)
-                     {
-                        var profileResult=document.getElementById("resultsTab");
+                    {
+                        var profileResult = document.getElementById("resultsTab");
                         profileResult.innerHTML=xmlHttp.responseText;
 
-                        var btnClear=document.getElementById("btnClearSpan");
+                        var btnClear = document.getElementById("btnClearSpan");
                         btnClear.style.display="inline";
 
-                        var ajax_loading_img=document.getElementById("ajax_loading_img");
-                        ajax_loading_img.style.display="none";
+                        var loadingImg = document.getElementById("ajax_loading_img");
+                        loadingImg.style.display="none";
                         
                         CollapseSettingTab();
                         ExpandResultsTab();
                         SetRunButtonState(true);
-                     }
+
+                        // the js in the ajax returned content will not be executed and recognized,
+                        // so we get the js content and append it to the <head>
+                        if(document.getElementById('layerDetailsJsArray'))
+                        {
+                            //get js content in the hidden span
+                            var innerScript = document.getElementById('layerDetailsJsArray').innerHTML;
+                            innerScript=innerScript.replace(/\\n/,'');
+
+                            //check to remove the script if it already exists
+                            var insertScript = document.getElementById("layerDetailsJs");
+                            if(insertScript)
+                            {
+                                document.getElementsByTagName("head").item(0).removeChild(insertScript);
+                            }
+
+                            //every new execute should generate new js array data
+                            insertScript = document.createElement("script");
+                            insertScript.type = "text/javascript";
+                            insertScript.id = "layerDetailsJs";
+                            insertScript.text=innerScript;
+
+                            document.getElementsByTagName("head").item(0).appendChild(insertScript);
+                        }
+                    }
                 }
                 
                 //End AJAX part
 
-                function exportCSV()
+                function ExportCSV()
                 {
-                    var form=document.getElementById("getCSVFileForm");
+                    var url="performanceReport_Export.php";
+                    var centerPoint = document.getElementById("txtCenterPoint");
+                    url+="?centerPoint="+encodeURIComponent(centerPoint.value);
+                    var form = document.getElementById("getCSVFileForm");
+                    form.action=url;
                     form.submit();
                 }
 
@@ -1125,7 +1184,7 @@
                     //When Clear button clicked, removes the settings from
                     //map selector, scale textbox and center point textbox.
                     //Also removes any validation messages that are visible.
-                    var mapDefinitonSelector=document.getElementById("mapSelector_DO_NOT_PERSIST");
+                    var mapDefinitonSelector = document.getElementById("mapSelector_DO_NOT_PERSIST");
 
                     if(mapDefinitonSelector.selectedIndex>=0)
                     {
@@ -1138,7 +1197,7 @@
                     //Also removes any validation messages that are visible.
                     ClearWrnMsg();
 
-                    var mapSelectorWarnMsg=document.getElementById("selectMapResourceWarningMessage");
+                    var mapSelectorWarnMsg = document.getElementById("selectMapResourceWarningMessage");
                     mapSelectorWarnMsg.innerHTML = "";
                  
                     SetRunButtonState(false);
@@ -1146,22 +1205,22 @@
 
                 function ClearWrnMsg()
                 {
-                    var scale=document.getElementById("txtScale");
+                    var scale = document.getElementById("txtScale");
                     scale.className="";
 
-                    var centerPoint=document.getElementById("txtCenterPoint");
+                    var centerPoint = document.getElementById("txtCenterPoint");
                     centerPoint.className="";
 
-                    var scaleWarnMsg=document.getElementById("scaleWarnMessage");
+                    var scaleWarnMsg = document.getElementById("scaleWarnMessage");
                     scaleWarnMsg.innerHTML = "";
 
-                    var centerPointWarnMsg=document.getElementById("centerPointWarnMessage");
+                    var centerPointWarnMsg = document.getElementById("centerPointWarnMessage");
                     centerPointWarnMsg.innerHTML = "";
                 }
 
                 function SetRunButtonState(visible)
                 {                 
-                    var runButton=document.getElementById("runBtn");
+                    var runButton = document.getElementById("runBtn");
 
                     if(visible)
                     {
@@ -1171,17 +1230,301 @@
                     {
                         runButton.setAttribute("disabled", "disabled");
                     }
-                }     
+                }
+
+                //when the layer info row click find the corresponding layer detail info and display it on the UI
+                function LayerDataTableRowClicked(layerName)
+                {
+                    var layerCount=layerDetailValues.length;
+
+                    var i = 0;
+                    for(; i < layerCount; i++)
+                    {
+                        if( Trim(layerName) == Trim(layerDetailValues[i][0]) )
+                        {
+                            DisplayLayerDetail(layerDetailValues[i]);
+                            break;
+                        }
+                    }
+                }
+
+                //the detail info of a layer is on the left of the layer info table
+                //this method will display the selected layer detail info on the UI with designed style
+                //Note: when use document.getElementById, make sure the variable name is not the same with the "ID"
+                //like this: layerInfoDetail =document.getElementById("layerInfoDetail");
+                //it will cause problem under IE9 quirks mode, layerInfoDetail is already a built-in object of the document.
+                //two way to solve this problem
+                //1) make the variable name different with the "ID", layerDetail =document.getElementById("layerInfoDetail");
+                //2) add "var" before the varibale name, var layerInfoDetail =document.getElementById("layerInfoDetail");
+                function DisplayLayerDetail(layerDetail)
+                {                    
+                    var layerDetailContent='<div style="padding-bottom: 8px; padding-top: 7px; width: 80%;">' + layerDetail[0] + '</div>'+ "\n";
+                    layerDetailContent+='<div style=" border: 1px solid #cccccc; width: 80%">';
+                    layerDetailContent+='<div style="padding: 10px;">';
+                    layerDetailContent+="<b>Filter</b>";
+                    layerDetailContent+="<br/><br/>";
+                    layerDetailContent+=layerDetail[1];
+                    layerDetailContent+="</div>";
+                    layerDetailContent+='<div style=" background-color: #EEEEEE;padding: 10px;">';
+                    layerDetailContent+="<b>Scale Range</b>";
+                    layerDetailContent+="<br/><br/>";
+                    layerDetailContent+=layerDetail[2];
+                    layerDetailContent+="</div>"+ "\n";
+                    layerDetailContent+="</div>"+"\n";
+
+                    //remove the layer detail info if it already exist
+                    var layerInfo = document.getElementById("layerDetailContentDiv");
+
+                    if (layerInfo)
+                    {
+                        layerInfo.parentNode.removeChild(layerInfo);
+                    }
+
+                    var layerDetailDiv = document.createElement("div");
+                    layerDetailDiv.id="layerDetailContentDiv";
+                    layerDetailDiv.innerHTML = layerDetailContent;
+
+                    //the placeholder for the layer detail info
+                    var layerInfoDetail =document.getElementById("layerInfoDetail");
+                    layerInfoDetail.appendChild(layerDetailDiv);
+                }
+
+                //sort layers information table part
+                var SortLayers = {
+                    //reverse the table rows
+                    reverse: function(tBody)
+                    {
+                        // reverse the rows in a tbody
+                        newRows = [];
+                        var i = 0;
+                        for (; i < tBody.rows.length; i++)
+                        {
+                            newRows[i] = tBody.rows[i];
+                        }
+
+                        var j=1;
+
+                        i = newRows.length - 1;
+                        for (; i >= 0; i--)
+                        {
+                            tBody.appendChild(newRows[i]);
+
+                            if(0 == j%2)
+                            {
+                                newRows[i].className="even";
+                            }
+                            else
+                            {
+                                newRows[i].className="odd";
+                            }
+
+                            j++;
+                        }
+                        delete newRows;
+                    },
+
+                    sortByColumn: function(headerColumn)
+                    {
+                        //get the table body of the layers information table
+                        var layersTBody = document.getElementById("layerResultsTable").tBodies[0];
+
+                        if (headerColumn.className.search(/\blayersSorted\b/) != -1)
+                        {
+                            // if we're already sorted by this column, just reverse the table
+                            SortLayers.reverse(layersTBody);
+                            headerColumn.className = headerColumn.className.replace("layersSorted","layersSortedReverse");
+
+                            headerColumn.removeChild(document.getElementById('layersSortDown'));
+
+                            layersSortUp = document.createElement("span");
+                            layersSortUp.id = "layersSortUp";
+                            layersSortUp.innerHTML =  "&nbsp;<image src='images/arrow_up.png' alt='&#x25B4;'/>";
+                            headerColumn.appendChild(layersSortUp);
+
+                            return;
+                        }
+
+                        if (headerColumn.className.search(/\blayersSortedReverse\b/) != -1)
+                        {
+                            // if we're already sorted by this column, just reverse the table
+                            SortLayers.reverse(layersTBody);
+                            headerColumn.className = headerColumn.className.replace("layersSortedReverse","layersSorted");
+
+                            headerColumn.removeChild(document.getElementById('layersSortUp'));
+                            
+                            layersSortDown = document.createElement('span');
+                            layersSortDown.id = "layersSortDown";
+                            layersSortDown.innerHTML = "&nbsp;<image src='images/arrow_down.png' alt='&#x25BE;'/>";
+                            headerColumn.appendChild(layersSortDown);
+
+                            return;
+                        }
+
+                        // remove layersSorted classes
+                        layerHeadRow = headerColumn.parentNode;
+                        var i = 0;
+                        for( ; i < layerHeadRow.childNodes.length; i++)
+                        {
+                            cell = layerHeadRow.childNodes[i];
+                            if (cell.nodeType == 1)// an element
+                            {   
+                                cell.className = cell.className.replace('layersSortedReverse', '');
+                                cell.className = cell.className.replace('layersSorted', '');
+                            }
+                        }
+
+                        //remove the icon sort down or up if it already exist
+                        var layersSortDown = document.getElementById('layersSortDown');
+
+                        if (layersSortDown)
+                        {
+                            layersSortDown.parentNode.removeChild(layersSortDown);
+                        }
+
+                        var layersSortUp = document.getElementById('layersSortUp');
+
+                        if (layersSortUp)
+                        {
+                            layersSortUp.parentNode.removeChild(layersSortUp);
+                        }
+
+                        //by default, we sort the talbe by ASC
+                        headerColumn.className = "layersSorted";
+                        layersSortDown = document.createElement('span');
+                        layersSortDown.id = "layersSortDown";
+                        layersSortDown.innerHTML = "&nbsp;<image src='images/arrow_down.png' alt='&#x25BE;'/>";
+                        headerColumn.appendChild(layersSortDown);
+
+                        //get the content need to be sorted into a 2-D array
+                        rowArray = [];
+                        //TODO: it has problem under IE9 quirks mode, will fix it in part 3
+                        colIndex = headerColumn.attributes["columnindex"].value-1;
+                        rows = layersTBody.rows;
+                        var j = 0;
+                        for (; j < rows.length; j++)
+                        {
+                            rowArray[rowArray.length] = [SortLayers.getInnerText(rows[j].cells[colIndex]), rows[j]];
+                        }
+
+                        //only the second column needs to be sorted by numeric, others are all by alpha
+                        if(1==colIndex)
+                        {
+                            rowArray.sort(SortLayers.sortByNumeric);
+                        }
+                        else
+                        {
+                            rowArray.sort(SortLayers.sortByAlpha);
+                        }                     
+
+                        //reset the row alternate color after sorting
+                        tableBody = layersTBody;
+                        for (j = 0; j < rowArray.length; j++)
+                        {
+                            tableBody.appendChild(rowArray[j][1]);
+
+                            if(0 == j%2)
+                            {
+                                rowArray[j][1].className="odd";
+                            }
+                            else
+                            {
+                                rowArray[j][1].className="even";
+                            }
+                        }
+
+                        delete rowArray;
+                    },
+
+                    getInnerText: function(node)
+                    {
+                        // gets the text we want to use for sorting for a cell.
+                        // strips leading and trailing whitespace.
+
+                        if (node.getAttribute("sortKey") != null)
+                        {
+                            return node.getAttribute("sortKey");
+                        }
+                        else if (typeof node.textContent != 'undefined')
+                        {
+                            return node.textContent.replace(/^\s+|\s+$/g, '');
+                        }
+                        else if (typeof node.innerText != 'undefined')
+                        {
+                            return node.innerText.replace(/^\s+|\s+$/g, '');
+                        }
+                        else if (typeof node.text != 'undefined')
+                        {
+                            return node.text.replace(/^\s+|\s+$/g, '');
+                        }
+                        else
+                        {
+                            switch (node.nodeType)
+                            {
+                                case 4:
+                                    return node.nodeValue.replace(/^\s+|\s+$/g, '');
+                                    break;
+                                case 1:
+                                case 11:
+                                    var innerText = '';
+                                    var i = 0;
+                                    for (; i < node.childNodes.length; i++) {
+                                        innerText += SortLayers.getInnerText(node.childNodes[i]);
+                                    }
+                                    return innerText.replace(/^\s+|\s+$/g, '');
+                                    break;
+                                default:
+                                    return '';
+                            }
+                        }
+                    },
+
+                    // sort functions
+                    // a is an array with two elements, so as b
+                    // so you are comparing a[0] and b[0]
+                    sortByNumeric: function(a, b)
+                    {
+                        a0 = parseFloat(a[0].replace(/[^0-9.-]/g, ''));
+                        if (isNaN(a0))
+                        {
+                            a0 = 0;
+                        }
+
+                        b0 = parseFloat(b[0].replace(/[^0-9.-]/g, ''));
+                        if (isNaN(b0))
+                        {
+                            b0 = 0;
+                        }
+
+                        return a0 - b0;
+                    },
+
+                    //Making sorttable sort your columns case-insensitive
+                    sortByAlpha: function(a,b)
+                    {
+                        if (a[0].toLowerCase() == b[0].toLowerCase())
+                        {
+                            return 0;                               
+                        }
+       
+                        if (a[0].toLowerCase() < b[0].toLowerCase())
+                        {
+                            return -1;
+                        }
+
+                        return 1;
+                    }
+                }
+
             </script>
 
             <div id="settingsTitle">
              <table>
                  <tr>
-                     <td style=" width: 20px;">
-                         <img src="images/testImages/down_17.jpg" alt="down" style="cursor:pointer;"
+                     <td style=" width: 8px;">
+                         <img src="images/arrow_down.png" alt="down" style="cursor:pointer;"
                               id="settings_CollapseImage_ID" onclick="CollapsibleTabClick('settings_CollapseImage_ID','settingsContent')"/>
                      </td>
-                     <td style=" font-size:22px; color: orange; text-align: left;"  >
+                     <td style=" font-size:18px;  font-weight: bold; text-align: left;"  >
                          <span style="cursor:pointer;" onclick="CollapsibleTabClick('settings_CollapseImage_ID','settingsContent')">Settings</span>
                      </td>
                  </tr>
@@ -1247,7 +1590,7 @@
                                                             <div style=" margin-bottom: 5px;">
                                                                 Choose a center point and scale from the map viewer or enter the values manually.
                                                             </div>
-                                                            <input type="button" id="mapViewerBtn" value="Select Settings" onClick="SelectMapSettings();"  disabled="disabled" style="width:160px; height: 28px;font-weight: bold;">
+                                                            <input type="button" id="mapViewerBtn" value="Select Settings..." onClick="SelectMapSettings();"  disabled="disabled" style="width:160px; height: 28px;font-weight: bold;">
                                                             <div id="mapViewerDialog" align="center" class="mapViewerDialogStyle">
                                                                 <table width="100%" style="margin:0px; padding: 0px;" cellspacing="0" cellpadding="0">
                                                                     <tr>
@@ -1312,7 +1655,8 @@
                                                     </td>
                                                     <td>
                                                         <span id="ajax_loading_img" style="display:none;">
-                                                            <input type="image" src="images/ajax_loading.gif"></span>
+                                                            <img src="images/ajax_loading.gif" alt="loading"/>
+                                                        </span>
                                                     </td>
                                                     <td>
                                                         <span style="margin-left: 25px;" id="btnClearSpan">
@@ -1382,10 +1726,15 @@
                     </tr>
                 </table>
             </div>
+            
             <div id="resultsTab" style=" display: none;">
             </div>        
             <?php EndContentArea( true, $formName, "" ); ?>
             <!-- End of Contents Area -->
+            <!-- This form is used to export the profiling results as .csv file -->
+            <!-- If we put the form inside the innerHTML and inside another form, the Chrome and safari will ignore this form-->
+            <form id="getCSVFileForm" action="performanceReport_Export.php" method="post" >
+            </form>
         </tr>
     </table>
 </body>

Modified: trunk/MgDev/Web/src/mapadmin/performanceReport_Export.php
===================================================================
--- trunk/MgDev/Web/src/mapadmin/performanceReport_Export.php	2011-08-25 10:19:32 UTC (rev 6096)
+++ trunk/MgDev/Web/src/mapadmin/performanceReport_Export.php	2011-08-26 06:56:01 UTC (rev 6097)
@@ -1,9 +1,103 @@
 <?php
+   include 'resizableadmin.php';
+
+    LoadSessionVars();
+
+    // Did the user logout?
+    CheckForLogout();
+
+    // Are we cancelling?  If so, there is nothing to do.
+    CheckForCancel( 'performanceReport.php' );
+
+    // Define Local values
+    $mapProfileResult=new MapProfileResult();
+
+    function GetProfilingResults()
+    {
+        global $mapProfileResult;
+        $resultSource=new DOMDocument();
+        //As the profiling API is not finished, now we just use a temp xml file to simulate it.
+        //we will change it in part 3.
+        $resultSource->load("profilingmapxml/profileResults.xml");
+        $mapProfileResult->ReadFromXML($resultSource);
+        $mapProfileResult->GetBaseLayerCount();
+    }
+
+    GetProfilingResults();
+
+    //add one line gap
+    echo "\n";
+
+    //output the basic information of the map resource
+    //get the extent display string
+    list($x1, $y1, $x2, $y2) = explode(",", $mapProfileResult->MapProfileData->DataExtents);
+    $extents= '"X1:' . $x1 . '    Y1:' . $y1.'    X2:' . $x2 . '    Y2:' . $y2.'"';
+
+    //get the scale display string
+    $scale= "1:" . number_format($mapProfileResult->MapProfileData->Scale,0,"."," ");
+
+    //get the center point display string
+    list($centerPointX, $centerPointY) = explode("*", $_REQUEST["centerPoint"]);
+    $centerPoint= '"X:'.trim($centerPointX).'    Y:'.trim($centerPointY).'"';
+
+    //export the map information
+    echo '"Resource Name",'.$mapProfileResult->MapProfileData->MapResourceId;
+    echo ',"Data Extents",'.$extents,"\n";
+    echo '"Base Layers",'.$mapProfileResult->MapProfileData->BaseLayerCount.',"Image Format",';
+    echo $mapProfileResult->MapProfileData->ImageFormat,"\n";
+    echo '"Center Point",'.$centerPoint.',Layers,';
+    echo $mapProfileResult->MapProfileData->LayerCount,"\n";
+    echo '"Coordinate System",'.$mapProfileResult->MapProfileData->CoordinateSystem;
+    echo ',"Render Type",'.$mapProfileResult->MapProfileData->RenderType,"\n";
+    echo 'Scale,'.$scale,"\n";
+
+    //add two lines gap to divide the information into different sections
+    echo "\n";
+    echo "\n";
+
+    //output the render time information
+    echo '"Total Generation Time:","'.$mapProfileResult->MapProfileData->TotalMapRenderTime . ' ms"',"\n";
+
+    echo '"Layers ","'.$mapProfileResult->MapProfileData->TotalLayerRenderTime . ' ms",';
+    echo $mapProfileResult->MapProfileData->GetLayerRenderPercent() .'%',"\n";
+
+    echo '"Labels ","'.$mapProfileResult->MapProfileData->TotalLabelRenderTime . ' ms",';
+    echo $mapProfileResult->MapProfileData->GetLabelRenderPercent() .'%',"\n";
+
+    echo '"Watermarks ","'.$mapProfileResult->MapProfileData->TotalWatermarkRenderTime . ' ms",';
+    echo $mapProfileResult->MapProfileData->GetWartermarkRenderPercent() .'%',"\n";
+
+    echo '"Images ","'.$mapProfileResult->MapProfileData->TotalImageRenderTime . ' ms",';
+    echo $mapProfileResult->MapProfileData->GetImageRenderPercent() .'%',"\n";
+
+    echo '"Other ","'.$mapProfileResult->MapProfileData->GetOtherRenderTime() . ' ms",';
+    echo $mapProfileResult->MapProfileData->GetOthersRenderPercent() .'%',"\n";
+    
+    //add two lines gap to divide the information into different sections
+    echo "\n";
+    echo "\n";
+
+    //output the detailed information of each layer
+    echo 'Layer,"Render Time","Feature Class","Coordinate System",Type,Filter,"Scale Range"',"\n";
+
+    foreach ($mapProfileResult->LayerProfileData->LayerProfileDataCollection as $layerProfileData)
+    {
+        echo '"'.$layerProfileData->LayerName.'",' ;
+        echo '"'.$layerProfileData->TotalRenderTime.' ms",' ;
+        echo '"'.$layerProfileData->FeatureClass .'",';
+        echo '"'.$layerProfileData->CoordinateSystem .'",';
+        echo '"'.$layerProfileData->LayerType.'",' ;
+        echo '"'.$layerProfileData->Filters.'",' ;
+        echo '"'.$layerProfileData->ScaleRange.'"' ;
+        echo "\n";
+    }
+
+    //construct a readable file name
+    $tempMapName = strrchr($mapProfileResult->MapProfileData->MapResourceId, '/');
+    $tempMapName = substr($tempMapName, 1, strlen($tempMapName) - 15);
     $Date = date("Y-m-d_His");
-    $Filename = $Date.".csv";
+    $Filename = $Date."_".$tempMapName.".csv";
 
     header("Content-type:application/vnd.ms-excel");
     header("Content-Disposition:filename=".$Filename);
-    echo "Layer,Render Time,Feature Class,Coordinate System,TypeLF";
-    //TODO: The real export data will be implemented in part2
 ?>
\ No newline at end of file

Modified: trunk/MgDev/Web/src/mapadmin/performanceReport_GetResult.php
===================================================================
--- trunk/MgDev/Web/src/mapadmin/performanceReport_GetResult.php	2011-08-25 10:19:32 UTC (rev 6096)
+++ trunk/MgDev/Web/src/mapadmin/performanceReport_GetResult.php	2011-08-26 06:56:01 UTC (rev 6097)
@@ -16,8 +16,6 @@
     $confirmationMsg = "";
     $errorMsg = "";
     $mapProfileResult=new MapProfileResult();
-    $mapResources;
-    $mapResourceShortNames;
     $displayManager= new DisplayProfileResultManager();
 
     function GetProfilingResults()
@@ -25,17 +23,16 @@
         global $mapProfileResult;
         $resultSource=new DOMDocument();
         //As the profiling API is not finished, now we just use a temp xml file to simulate it.
-        //we will change it in part 2.
+        //we will change it in part 3.
         $resultSource->load("profilingmapxml/profileResults.xml");
         $mapProfileResult->ReadFromXML($resultSource);
+        $mapProfileResult->GetBaseLayerCount();
     }
 
     GetProfilingResults();
 
     $displayManager->mapProfileResult=$mapProfileResult;
 
-    //TODO: remove this in part 2
-    sleep(3);
 }
 catch ( MgException $e )
 {
@@ -50,19 +47,17 @@
 
 <table style="width: 70%;">
     <tr>
-        <td colspan="2" style=" padding-left: 18px;">
+        <td colspan="2" style=" padding-left: 14px;">
             <br>
-            <span style=" font-size: large; font-weight: bold;">Results</span>
+            <span style=" font-size: 18px; font-weight: bold; ">Results</span>
         </td>
     </tr>
     <tr>
-        <td style=" padding-left: 18px;">
+        <td style=" padding-left: 15px;">
             <span><?php echo date("F d ,Y h:i:s A"); ?></span>
         </td>
         <td style=" text-align: right;">
-            <input type="button" value="Export" style="width:80px; font-weight: bold;height: 28px;" onclick="exportCSV();" />
-            <form id="getCSVFileForm" action="performanceReport_Export.php" method="post" >
-            </form>
+            <input type="button" value="Export" style="width:80px; font-weight: bold;height: 28px;" onclick="ExportCSV();" />
         </td>
     </tr>
     <tr>
@@ -73,7 +68,7 @@
                         <td style="width:22%; font-weight: bold;">Resource Name:</td>
                         <td style="width:32%;">
                             <?php
-                            $displayManager->OutputMapResourceNameWithToolTip($mapProfileResult->MapProfileData->MapResourceId);
+                                $displayManager->OutputMapResourceNameWithToolTip($mapProfileResult->MapProfileData->MapResourceId);
                             ?>
                         </td>
                         <td style="width:18%;font-weight: bold;">
@@ -90,7 +85,11 @@
                     </tr>
                     <tr>
                         <td style=" font-weight: bold;">Base Layers:</td>
-                        <td>12</td>
+                        <td>
+                            <?php
+                                echo $mapProfileResult->MapProfileData->BaseLayerCount;
+                            ?>
+                        </td>
                         <td style=" font-weight: bold;">Image Format:</td>
                         <td>
                             <?php
@@ -101,12 +100,21 @@
                     <tr>
                         <td style=" font-weight: bold;">Center Point:</td>
                         <td>
-                            X:23423.343E2
-                            <br/>
-                            Y:23423.23E5
+                            <?php
+                                list($x, $y) = explode("*", $_REQUEST["centerPoint"]);
+                                $x = trim($x);
+                                $y = trim($y);
+                                echo "X:&nbsp;" . $x;
+                                echo "<br/>";
+                                echo "Y:&nbsp;" . $y;
+                            ?>
                         </td>
                         <td style=" font-weight: bold;">Layers:</td>
-                        <td>56</td>
+                        <td>
+                            <?php
+                                echo $mapProfileResult->MapProfileData->LayerCount;
+                            ?>
+                        </td>
                     </tr>
                     <tr>
                         <td style=" font-weight: bold;">Coordinate System:</td>
@@ -149,9 +157,9 @@
         <td colspan="2">
             <div>
                 <table style="width:100%; padding: 0px; text-align: center;" cellspacing="0" cellpadding="0">
-                <?php
-                    $displayManager->OutputMapRenderTimeGraph();
-                ?>
+                    <?php
+                        $displayManager->OutputMapRenderTimeGraph();
+                    ?>
                     <tr style="height:35px;">
                         <td colspan="4" style=" text-align: center;">
                             <span style="width: 11px; height: 11px; background-color:#E4C7AE; margin-right: 5px;">
@@ -176,19 +184,26 @@
         </td>
     </tr>
 </table>
+<span id="layerDetailsJsArray" style="display:none;">
+    <?php
+        $displayManager->OutputLayerDetailData();
+    ?>
+</span>
 <div id="LayersResult">
     <table style=" width:100%;">
         <tr>
             <td style="width:70%; padding-top: 15px;">
                 <div id="layerHeader" class="layerResultsHeaderStyle" style="margin:0px; padding: 0px;">
-                    <table>
+                    <table id="layerHeaderTable">
                         <thead>
+                            <!--the table head is in a different div so when the table scrolls, the head will be fixed -->
+                            <!--Also, the table head columns are set with some customer attribute to help to sort the table data from the client site-->
                             <tr>
-                                <th>Layer</th>
-                                <th>Render Time</th>
-                                <th>Feature Class</th>
-                                <th>Coordinate System</th>
-                                <th>Type</th>
+                                <th style="width:15%;border-left:1px solid #CCCCCC;" columnIndex="1" onClick="SortLayers.sortByColumn(this);">Layer</th>
+                                <th style="width:20%;" columnIndex="2" onClick="SortLayers.sortByColumn(this);">Render Time</th>
+                                <th style="width:25%;" columnIndex="3" onClick="SortLayers.sortByColumn(this);">Feature Class</th>
+                                <th style="width:25%;" columnIndex="4" onClick="SortLayers.sortByColumn(this);">Coordinate System</th>
+                                <th style="width:15%;border-right:1px solid #CCCCCC;" columnIndex="5" onClick="SortLayers.sortByColumn(this);">Type</th>
                             </tr>
                         </thead>
                     </table>
@@ -204,9 +219,8 @@
                 </div>
             </td>
             <td style="width:30%; padding-left:15px; vertical-align: top; padding-top: 15px;">
-                <?php
-                    $displayManager->OutputLayerDetailData();
-                ?>
+                <div id="layerInfoDetail">         
+                </div>
             </td>
         </tr>
     </table>

Modified: trunk/MgDev/Web/src/mapadmin/performanceReport_MapViewer.php
===================================================================
--- trunk/MgDev/Web/src/mapadmin/performanceReport_MapViewer.php	2011-08-25 10:19:32 UTC (rev 6096)
+++ trunk/MgDev/Web/src/mapadmin/performanceReport_MapViewer.php	2011-08-26 06:56:01 UTC (rev 6097)
@@ -18,7 +18,8 @@
     // get contents of a file into a string
     try
     {
-        $filename = "profilingmapxml\\MapViewerTemplate.xml";
+        //under Liunx, we should use '/' instead of '\\'
+        $filename = "profilingmapxml/MapViewerTemplate.xml";
         $handle = fopen($filename, "r");
         $contents = fread($handle, filesize($filename));
         fclose($handle);

Modified: trunk/MgDev/Web/src/mapadmin/resizablepagecomponents.php
===================================================================
--- trunk/MgDev/Web/src/mapadmin/resizablepagecomponents.php	2011-08-25 10:19:32 UTC (rev 6096)
+++ trunk/MgDev/Web/src/mapadmin/resizablepagecomponents.php	2011-08-26 06:56:01 UTC (rev 6097)
@@ -2168,51 +2168,70 @@
 
         public function OutputMapDefinitionData()
         {
-            //TODO: will be implemented in part2
+            //TODO: will be implemented in part 3
         }
 
+        //Output the layer profiling information to the webpage as table rows
+        //TODO: will refine in part 3, when there's no data
         public function OutputLayerDefinitionData()
         {
             $rowNumber=1;
             foreach ($this->mapProfileResult->LayerProfileData->LayerProfileDataCollection as $layerProfileData)
             {
+                //set different colors for alternate rows and when mouse move over the row it will change color
                 if(0 == $rowNumber%2)
                 {
-                    echo '<tr class="even" onmouseover="HighlightRow(this);" onmouseout="UnhighlightRow(this);">',"\n";
+                    echo '<tr class="even" onmouseover="HighlightRow(this);" onmouseout="UnhighlightRow(this);" onclick="LayerDataTableRowClicked(\''.$layerProfileData->LayerName.'\');">',"\n";
                 }
                 else
                 {
-                    echo '<tr class="odd" onmouseover="HighlightRow(this);" onmouseout="UnhighlightRow(this);">',"\n";
+                    echo '<tr class="odd" onmouseover="HighlightRow(this);" onmouseout="UnhighlightRow(this);" onclick="LayerDataTableRowClicked(\''.$layerProfileData->LayerName.'\');">',"\n";
                 }
 
-                echo "<td style='width:20%;'>".$layerProfileData->GetLayerName()."</td>","\n";
-                echo "<td style='width:20%;'>".$layerProfileData->TotalRenderTime."</td>","\n";
-                echo "<td style='width:20%;'>"."Class Info Goes here"."</td>","\n";
-                echo "<td style='width:20%;'>".$layerProfileData->CoordinateSystem."</td>","\n";
-                echo "<td style='width:20%;'>".$layerProfileData->LayerType."</td>","\n";
+                //output the layer profiling information by each column,
+                //for the render time column, we set the sort key as the original number, which will be used as client sort
+                echo "<td style='width:15%;'>".$layerProfileData->LayerName."</td>","\n";
+                echo "<td style='width:20%;' sortKey='".$layerProfileData->TotalRenderTime."'>".$layerProfileData->TotalRenderTime."&nbsp;ms (15%)</td>","\n";
+                echo "<td style='width:25%;'>".$layerProfileData->FeatureClass."</td>","\n";
+                echo "<td style='width:25%;'>".$layerProfileData->CoordinateSystem."</td>","\n";
+                echo "<td style='width:15%;'>".$layerProfileData->LayerType."</td>","\n";
                 echo "</tr>","\n";
 
                 $rowNumber++;
             }
         }
 
+        //Convert the php array of layer detail information as js array
+        //and output to the webpage
         public function OutputLayerDetailData()
         {
-            $layerDetail=$this->mapProfileResult->LayerProfileData->LayerProfileDataCollection["Library://Buildings.LayerDefinition"];
+            //get the layer profiling data from the LayerProfileData
+            $layerDetails=$this->mapProfileResult->LayerProfileData->LayerProfileDataCollection;
+            $layerDetailCount=count($layerDetails);
 
-            echo '<div style="padding-bottom: 8px; padding-top: 7px; width: 80%;">' . $layerDetail->GetLayerName() . '</div>', "\n";
-            echo '<div style=" border: 1px solid #cccccc; width: 80%">';
-            echo '<div style="padding: 10px;">';
-            echo "<b>Filter</b>";
-            echo "<br/><br/>";
-            echo $layerDetail->Filters;
-            echo "</div>";
-            echo '<div style=" background-color: #EEEEEE;padding: 10px;">';
-            echo "<b>Scale Range</b>";
-            echo "<br/><br/>";
-            echo $layerDetail->ScaleRange;
-            echo "</div>", "\n";
-            echo "</div>", "\n";
+            //if there's no layer, return
+            if($layerDetailCount<=0)
+            {
+                return;
+            }
+
+            // create script string to append to content.
+            // create 2-D JS array to contain the values for LayerName, Filters, ScaleRange.
+            $script = "var layerDetailValues = new Array(".$layerDetailCount.");";
+
+            $i=0;
+            foreach ($layerDetails as $key => $value)
+            {
+                $script = $script." layerDetailValues[".$i."]=new Array(3); ";
+                $script = $script." layerDetailValues[".$i."][0]='".$value->LayerName."'; ";
+                $script = $script." layerDetailValues[".$i."][1]='".$value->Filters."'; ";
+                $script = $script." layerDetailValues[".$i."][2]='".$value->ScaleRange."'; ";
+               
+                $i++;
+            }
+
+            //out put to UI
+            echo $script;
         }
 
         public function OutputMapRenderTimeGraph()
@@ -2262,6 +2281,5 @@
             echo '</div>',"\n";
         }
     }
-
-
+    
 ?>

Modified: trunk/MgDev/Web/src/mapadmin/serverdatafunctions.php
===================================================================
--- trunk/MgDev/Web/src/mapadmin/serverdatafunctions.php	2011-08-25 10:19:32 UTC (rev 6096)
+++ trunk/MgDev/Web/src/mapadmin/serverdatafunctions.php	2011-08-26 06:56:01 UTC (rev 6097)
@@ -2302,28 +2302,11 @@
         public $LayerType;
         public $Filters;
         public $ScaleRange;
-
-        public function GetLayerName()
-        {
-            $shortLayerName = strrchr($this->LayerResuorceId, '/');
-            $shortLayerName = substr($shortLayerName, 1, strlen($shortLayerName) - 17);
-            return $shortLayerName;
-        }
     }
 
     class LayerDefinitionProfileResults
     {
         public $LayerProfileDataCollection;
-
-        public function Sort($columnName,$sortOrder)
-        {
-            //TODO: will be implemented in part2
-        }
-
-        public function Page()
-        {
-            //TODO: will be implemented in part2
-        }
     }
 
     class MapDefinitionProfileData
@@ -2410,6 +2393,9 @@
                             case "Extent":
                                 $this->MapProfileData->DataExtents = $node->nodeValue;
                                 break;
+                            case "LayerCount":
+                                $this->MapProfileData->LayerCount = $node->nodeValue;
+                                break;
                             case "Scale":
                                 $this->MapProfileData->Scale = $node->nodeValue;
                                 break;
@@ -2473,12 +2459,18 @@
                     foreach ($layerNode->childNodes as $node) {
                         if (1 == $node->nodeType) {
                             switch ($node->nodeName) {
+                                case "LayerName":
+                                    $tempLayerProfileData->LayerName = $node->nodeValue;
+                                    break;
                                 case "ResourceId":
                                     $tempLayerProfileData->LayerResuorceId = $node->nodeValue;
                                     break;
                                 case "LayerType":
                                     $tempLayerProfileData->LayerType = $node->nodeValue;
                                     break;
+                                case "FeatureClassName":
+                                    $tempLayerProfileData->FeatureClass = $node->nodeValue;
+                                    break;
                                 case "CoordinateSystem":
                                     $tempLayerProfileData->CoordinateSystem = $node->nodeValue;
                                     break;
@@ -2495,16 +2487,66 @@
                             }
                         }
                     }
-                    $this->LayerProfileData->LayerProfileDataCollection[$tempLayerProfileData->LayerResuorceId]=$tempLayerProfileData;
+                    $this->LayerProfileData->LayerProfileDataCollection[$tempLayerProfileData->LayerName]=$tempLayerProfileData;
                 }
             }
         }
 
         public function SaveAsCSV()
         {
-            //TODO: will be implemented in part2
+            //TODO: will be implemented in part3
         }
+
+        //Get the base map layer count of the specified map resource
+        //The base map layer count is not provided by the profiling report
+        //but we need it on UI
+        public function GetBaseLayerCount()
+        {
+            try
+            {
+                //site and userInfo are saved in the session
+                global $site;
+                global $userInfo;
+                $mapResourceContent = "";
+                $resourceID = $this->MapProfileData->MapResourceId;
+
+                //connect to the site and get a resource service instance
+                $siteConn = new MgSiteConnection();
+                $siteConn->Open($userInfo);
+                $resourceService = $siteConn->CreateService(MgServiceType::ResourceService);
+                //get the map resource content from the server
+                $mgResourceID = new MgResourceIdentifier($resourceID);
+                $byteReader = $resourceService->GetResourceContent($mgResourceID);
+
+                //read the content into a string
+                $chunk = "";
+                do
+                {
+                    $chunkSize = $byteReader->Read($chunk, 4096);
+                    $mapResourceContent = $mapResourceContent . $chunk;
+                } while ($chunkSize != 0);
+
+                //parse the xml data use DOMDocument
+                $resourceContent = new DOMDocument();
+                $resourceContent->loadXML($mapResourceContent);
+
+                //get all the elements with the element name "BaseMapLayer"
+                $baseLayers = $resourceContent->documentElement->getElementsByTagName("BaseMapLayer");
+
+                //set the base map layer count
+                $this->MapProfileData->BaseLayerCount= $baseLayers->length;
+            }
+            catch (Exception $exc)
+            {
+                //Exceptions:
+                //MgInvalidRepositoryTypeException
+                //MgInvalidRepositoryNameException
+                //MgInvalidResourcePathException
+                //MgInvalidResourceNameException
+                //MgInvalidResourceTypeException
+                $errorMsg = $exc->getMessage();
+            }
+        }
+
     }
-
-    
 ?>



More information about the mapguide-commits mailing list