Hi All,
Overlay box is many times used whenever there is a need to show user a processing box and we dont need user do any activity on page while processing is going on. So i am sharing a simple vf component here which has css and js which gives overlay effect in your normal VF pages like below:
<c:overlay style="processing">
Here "style" attribute can have two values for now [classic, processing]. Classic style shows gray overlay, and Processing style shows animated image.
Here is the steps how you can use this component to achieve overlay effect:
1) put the component in head section of your page
<c:overlay style="classic">
2) put this div at the very bottom of your page, just before close of </body> tag or </apex:page> tag
<div id="overlay"></div>
3) put this <apex:actionstatus in your form
<apex:actionstatus id="overlayStatus" onstart="showOverlay();" onstop="hideOverlay();"></apex:actionstatus>
4) finally refer this action status in your action function or command button as below
<apex:commandbutton action="{!saveRecord}" status="overlayStatus" value="Save" rerender="pBlock">
Here is the complete code :
<apex:page controller="OverlayDemoController">
<head>
<c:Overlay style="processing" />
</head>
<apex:form>
<apex:actionStatus id="overlayStatus" onStart="showOverlay();" onstop="hideOverlay();"></apex:actionstatus>
<apex:sectionHeader title="Contact Save" subtitle="Overlay Demo" />
<apex:pageBlock id="pBlock">
<apex:pageMessages></apex:pageMessages>
<apex:pageBlockButtons>
<apex:commandButton action="{!saveRecord}" status="overlayStatus" value="Save" reRender="pBlock"/>
</apex:pageBlockButtons>
<apex:pageBlockSection>
<apex:inputField value="{!cnt.First_Name__c}" />
<apex:inputField value="{!cnt.Last_Name__c}" />
<apex:inputField value="{!cnt.Phone__c}" />
<apex:inputField value="{!cnt.Email__c}" />
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
<div id="overlay"></div>
</apex:page>
http://www.blogger.com/img/blank.gif
5) Here are the links for working online demo for the overlay :
http://labsprojects-developer-edition.ap1.force.com/OverlayDemo
http://labsprojects-developer-edition.ap1.force.com/OverlayDemoProcessing
6) You can download the complete code from here:
http://labs.aslambari.com/overlay.zip
Hope it will be useful for developers.
Thanks
Aslam Bari
Thursday, October 6, 2011
by Aslam - The Alexendra
Hi All,
Today I came to know about 'Stripe' APIs.
Stripe is a simple, developer-friendly way to accept payments online. According to
Stripe :-
"We believe that enabling transactions on the web is a problem rooted in code, not finance, and we want to help put more websites in business.
Complexity and opacity have traditionally been hallmarks of online payment processing. We want to fix that."
So, as usual, here I came up with the solution of Apex Wrapper for Stripe APIs. I developed this API library with my colleague
Sanjay. The library gives basic api methods to call and use as follows:
//1) CreateCharge
Stripe request = new Stripe('y001LvDyqiGbNZclaaaxxxxttttOJk8w');
StripeResponseModel response = request.createCharge('4242424242424242', '2013', '10', '123', '2000', 'usd', 'testing');
if(!response.isError){
system.debug('Transaction ID :: ' + response.id);
system.debug('Transaction Fee :: ' + response.fee);
}else{
system.debug('Error Message :: ' + response.errorResponse.message);
}
//Create charge using customer
Stripe request = new Stripe('y001LvDyqiGbNZclaaaxxxxttttOJk8w');
StripeResponseModel response = request.createCharge('cus_EPTWuvf7EXDb4g', '2000', 'usd', 'testing');
if(!response.isError){
system.debug('Transaction ID :: ' + response.id);
system.debug('Transaction Fee :: ' + response.fee);
}else{
system.debug('Error Message :: ' + response.errorResponse.message);
}
//2) CreateCustomer
Stripe request = new Stripe('y001LvDyqiGbNZclaaaxxxxttttOJk8w');
StripeResponseModel response = request.createCustomer('4242424242424242', '10','2013', '123', 'Aslam', '', '', '', '', 'IN', 'aslam.bari@gmail.com', 'test');
if(!response.isError){
system.debug('Customer ID :: ' + response.id);
}else{
system.debug('Error Message :: ' + response.errorResponse.message);
}
//3) RetrieveCustomer
Stripe request = new Stripe('y001LvDyqiGbNZclaaaxxxxttttOJk8w');
StripeResponseModel response = request.retrieveCustomer('cus_EPTWuvf7EXDb4g');
if(!response.isError){
system.debug('Customer Country :: ' + response.card.country);
system.debug('Customer Last4 CC :: ' + response.card.last4);
}else{
system.debug('Error Message :: ' + response.errorResponse.message);
}
//4) CreateInvoice
Stripe request = new Stripe('y001LvDyqiGbNZclaaaxxxxttttOJk8w');
StripeResponseModel response = request.createInvoice('cus_EPTWuvf7EXDb4g', '2000', 'usd', 'test');
if(!response.isError){
system.debug('Invoice Id :: ' + response.id);
}else{
system.debug('Error Message :: ' + response.errorResponse.message);
}
//5) RetrieveInvoice
Stripe request = new Stripe('y001LvDyqiGbNZclaaaxxxxttttOJk8w');
StripeResponseModel response = request.retreiveInvoice('ii_W19Xp6cxrqVABH');
if(!response.isError){
system.debug('Invoice Date :: ' + response.created);
}else{
system.debug('Error Message :: ' + response.errorResponse.message);
}
//6) CreatePlan
Stripe request = new Stripe('y001LvDyqiGbNZclaaaxxxxttttOJk8w');
StripeResponseModel response = request.createPlan('AMX_101', '2000', 'usd', 'month' , 'AMX Testing');
if(!response.isError){
system.debug('Plan Id :: ' + response.id);
}else{
system.debug('Error Message :: ' + response.errorResponse.message);
}
//7) RetreivePlan
Stripe request = new Stripe('y001LvDyqiGbNZclaaaxxxxttttOJk8w');
StripeResponseModel response = request.retrievePlan('AMX_101');
if(!response.isError){
system.debug('Plan Label :: ' + response.name);
}else{
system.debug('Error Message :: ' + response.errorResponse.message);
}
You can download the code from github here:
https://github.com/aslambari/Stripe-Apex-ToolkitOr from my website here:
http://www.aslambari.com/stripe_apex_toolkit.htmlThere are many more methods which are under development like CreateSubscription, ListAllCustomers etc, we are working on them. And will back soon with full set of methods. Till, try this library and let us know if that works fine for you and revert back us for enhancements.
Thanks
Aslam Bari
