Action Status decoration in Visualforce

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>

Leave a Reply