Action Status decoration in Visualforce

Apex:
  <apex:commandButton value="Find" action="{!find}" reRender="SearchList" status="SearchStatus"/>

  <apex:actionstatus id="SearchStatus">
    <apex:facet name="start">
    <c:enhancedactionstatus BackColor="#efefef" borderColor="#336699" borderSize="3" height="50px" width="120px" Message="Loading..." messageStyle="color:darkred;
font-size:11pt;font-weight:
bold;"/>
    </apex:facet>
  </apex:actionstatus>


Component:

<apex:component >
<!-- Attribute Definitions -->
<apex:attribute name="BorderColor" type="String" required="true" description=""></apex:
attribute>
<apex:attribute name="Width" type="String" required="true" description=""></apex:
attribute>
<apex:attribute name="Height" type="String" required="true" description=""></apex:
attribute>
<apex:attribute name="BackColor" type="String" required="true" description=""></apex:
attribute>
<apex:attribute name="BackColor" type="String" required="true" description=""></apex:
attribute>
<apex:attribute name="BorderSize" type="String" required="true" description=""></apex:
attribute>
<apex:attribute name="ImageUrl" type="String" required="false" description=""></apex:
attribute>
<apex:attribute name="Message" type="String" required="false" description=""></apex:
attribute>
<apex:attribute name="messageStyle" type="String" required="false" description="Message inline style"></apex:attribute>
<apex:attribute name="BorderStyle" type="String" required="false" description="Message box border style: solid, outset, inset, etc"></apex:attribute>

<div id="salesforceSource_
blurybackground" style="position:absolute; left:1px; top:1px; width:100%; height:100%; text-align:center; vertical-align: middle; background-color: #dcdcdc; opacity:0.6;filter:alpha(
opacity=60)">
</div>
<div id="salesFroceSource_
StatusBox" style="position:absolute; left:100px; top: 100px;width: {!Width}; height:{!Height}; opacity:1;filter:alpha(
opacity=100)">
<table border="{!BorderSize}" cellpadding="0" cellspacing="0" style="border-left-color: {!BorderColor};
border-bottom-color: {!BorderColor}; width: {!Width}; border-top-color: {!BorderColor}; height:{!Height};
border-right-color:{!
BorderColor}; border-style:{!BorderStyle}; background-color:{!BackColor};
">
<tr>
<td align="left" valign="top">
<table border="0" cellpadding="4" cellspacing="0" style="width: 100%; height: 100%">
<tr>
<td style="border-bottom-color:{!
BorderColor}; border-bottom-width:1px; border-bottom-style:solid;
vertical-align:middle;">
<img src="{!ImageUrl}"/></td>
<td style="border-bottom-color:{!
BorderColor}; border-bottom-width:1px; border-bottom-style:solid;
vertical-align:middle;{!messageStyle}">
&nbsp;{!Message}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var AgreementForm = document.getElementById("
salesforceSource_
blurybackground");
AgreementForm.style.height = window.screen.availHeight + "px";
AgreementForm.style.width = window.screen.availWidth + "px";

var ContainerElem = document.getElementById("
salesFroceSource_StatusBox");
//ContainerElem.style.display = "block";
AlignToCenter(ContainerElem);

function AlignToCenter(Element)
{
var availableHeight = 0;
var availableWidth = 0;
if (Element.ownerDocument)
{
var docElement = Element.ownerDocument.
documentElement;
availableHeight = parseInt(docElement.
clientHeight);
if (availableHeight == "NaN") availableHeight = 0;

availableWidth = parseInt(docElement.
clientWidth);
if (availableWidth == "NaN") availableWidth = 0;
}

if (availableHeight == 0 || availableHeight == "NaN")
availableHeight = window.screen.availHeight - 200;
if (availableWidth == 0 || availableWidth == "NaN")
availableWidth = window.screen.availWidth - 100;

var msgBoxTop = parseInt((availableHeight - parseInt(Element.clientHeight)
)/2);
var msgBoxleft = parseInt((availableWidth - parseInt(Element.style.width))
/2);

if (msgBoxTop == "NaN" || msgBoxTop == 0)
msgBoxTop = 100;

Element.style.left = msgBoxleft + "px";
Element.style.top = msgBoxTop + "px";
}
</script>
</apex:component>

Cheers!!!

2 comments:

  1. you are doing great job Magulan D. i have some more doughts regarding salesforce . if u help i will be thankful to u. this is my id:rajasekhar.salesforce@gmail.com

    ReplyDelete
  2. i didn't understand anything what is the use of c tag it is any custom tag or default tag

    ReplyDelete