VF Page Basics 1

Without CSS

  1. <apex:page sidebar="false" showHeader="false">
  2.   <apex:form >
  3.       <br/><br/>
  4.       <div >
  5.           <apex:outputtext value="Welcome to IBM INDIA" > </apex:outputtext>
  6.       </div>
  7.       <br/>
  8.       <table>
  9.           <tr>
  10.               <td >
  11.                   <apex:outputtext value="IBM Registration Form" />
  12.               </td>
  13.           </tr>
  14.           <tr>
  15.               <td>
  16.                   <apex:outputtext value="IBM Employee ID"></apex:outputtext>
  17.               </td>
  18.               <td>
  19.                   <input type="text"/>
  20.               </td>
  21.           </tr>
  22.            <tr>
  23.               <td>
  24.                   <apex:outputtext value="IBM Password"></apex:outputtext>
  25.               </td>
  26.               <td>
  27.                   <input type="text"/>
  28.               </td>
  29.           </tr>
  30.           <tr>
  31.               <td >
  32.                   <apex:commandButton value="login"/>
  33.               </td>
  34.           </tr>
  35.       </table>
  36.   </apex:form>
  37. </apex:page>

Inline CSS

  1. <apex:page sidebar="false" showHeader="false">
  2.   <apex:form >
  3.       <br/><br/>
  4.       <div align="center">
  5.           <apex:outputtext value="Welcome to IBM INDIA" style="font-size:20px;color:green;font-weight:bold;"> </apex:outputtext>
  6.       </div>
  7.       <br/>
  8.       <table border="1" align="center">
  9.           <tr>
  10.               <td colspan="2" align="center">
  11.                   <apex:outputtext value="IBM Registration Form" style="font-size:15px;color:blue;"/>
  12.               </td>
  13.           </tr>
  14.           <tr>
  15.               <td>
  16.                   <apex:outputtext value="IBM Employee ID"></apex:outputtext>
  17.               </td>
  18.               <td>
  19.                   <input type="text"/>
  20.               </td>
  21.           </tr>
  22.            <tr>
  23.               <td>
  24.                   <apex:outputtext value="IBM Password"></apex:outputtext>
  25.               </td>
  26.               <td>
  27.                   <input type="text"/>
  28.               </td>
  29.           </tr>
  30.           <tr>
  31.               <td colspan="2" align="center">
  32.                   <apex:commandButton value="login"/>
  33.               </td>
  34.           </tr>
  35.       </table>
  36.   </apex:form>
  37. </apex:page>

External CSS

Add testingcss.css to static resources :


  1. .font1{ 
  2.         font-size:20px; 
  3.         color:green; 
  4.         font-weight:bold; 
  5.        } 

  6. .font2{ 
  7.         font-size:15px; 
  8.         color:blue; 
  9.        }

Page:

  1. <apex:page sidebar="false" showHeader="false">
  2.        
  3.    <apex:stylesheet value="{!$Resource.testingcss}"/>
  4.    
  5.   <apex:form >
  6.       <br/><br/>
  7.       <div align="center">
  8.       <apex:image value="{!$Resource.google}" style="height:60px;width:100px;"/>
  9.       </div>
  10.       <div align="center">
  11.           <apex:outputtext value="Welcome to IBM INDIA" styleclass="font1"> </apex:outputtext>
  12.       </div>
  13.       <br/>
  14.       <table border="1" align="center">
  15.           <tr>
  16.               <td colspan="2" align="center">
  17.                   <apex:outputtext value="IBM Registration Form" styleclass="font2"/>
  18.               </td>
  19.           </tr>
  20.           <tr>
  21.               <td>
  22.                   <apex:outputtext value="IBM Employee ID"></apex:outputtext>
  23.               </td>
  24.               <td>
  25.                   <input type="text"/>
  26.               </td>
  27.           </tr>
  28.            <tr>
  29.               <td>
  30.                   <apex:outputtext value="IBM Password"></apex:outputtext>
  31.               </td>
  32.               <td>
  33.                   <input type="text"/>
  34.               </td>
  35.           </tr>
  36.           <tr>
  37.               <td colspan="2" align="center">
  38.                   <apex:commandButton value="login"/>
  39.               </td>
  40.           </tr>
  41.       </table>
  42.   </apex:form>
  43. </apex:page>

Internal Java Script

  1. <apex:page id="p1" showHeader="false">
  2.     <script>
  3.          function sumconfirm(){
  4.              if(   confirm("Are you sure to do sum?"))
  5.                     {
  6.                         sum()
  7.                       } 
  8.                     }
  9.                     
  10.         function sum(){
  11.             var a = document.getElementById('p1:f1:n1').value;
  12.             var b = document.getElementById('n2').value;
  13.             var tot = eval(a) + eval(b);
  14.             alert(tot);
  15.             
  16.         }
  17.         
  18.         function multiply(){
  19.             var a = document.getElementById('p1:f1:n1').value;
  20.             var b = document.getElementById('n2').value;
  21.             var mul = eval(a) * eval(b);
  22.             alert(mul);
  23.             
  24.         }
  25.     </script>

  26.   <apex:form id="f1">
  27.       <table align="center" border="1">
  28.           <tr>
  29.               <td colspan="2" align="center" style="background-color:yellow;">
  30.                   <apex:outputtext value="Arithmetic Calculator" style="color:blue;font-size:15px;font-weight:bold;"></apex:outputtext>
  31.               </td>
  32.           </tr>
  33.           <tr>
  34.               <td>
  35.                   <apex:outputtext value="Enter First Value"></apex:outputtext>
  36.               </td>
  37.               <td>
  38.                   <apex:inputtext id="n1"/>
  39.               </td>
  40.           </tr>
  41.           <tr>
  42.               <td>
  43.                   <apex:outputtext value="Enter Second Value"></apex:outputtext>
  44.               </td>
  45.               <td>
  46.                   <input type="text" id="n2"/>
  47.               </td>
  48.           </tr>
  49.           <tr>
  50.               <td colspan="2" align="center">
  51.                   <input type="button" value="Sum" onclick="sumconfirm();"/> &nbsp;
  52.                   <input type="button" value="Multiply" onclick="multiply();"/>
  53.               </td>
  54.           </tr>
  55.       </table>
  56.   </apex:form>
  57. </apex:page>

External Java Script

Add extjs.txt to static resources :

  1. function sum(){
  2. var a = document.getElementById('p1:f1:n1').value;
  3. var b = document.getElementById('n2').value;
  4. var tot = eval(a) + eval(b);
  5. alert(tot);
  6. }
  7. function multiply(){
  8. var a = document.getElementById('p1:f1:n1').value;
  9. var b = document.getElementById('n2').value;
  10. var mul = eval(a) * eval(b);
  11. alert(mul);
  12. }
Page:

  1. <apex:page id="p1">
  2.  <apex:includeScript value="{!$Resource.extjs}"/>
  3.   <apex:form id="f1">
  4.       <table align="center" border="1">
  5.           <tr>
  6.               <td colspan="2" align="center" style="background-color:yellow;">
  7.                   <apex:outputtext value="Arithmetic Calculator" style="color:blue;font-size:15px;font-weight:bold;"></apex:outputtext>
  8.               </td>
  9.           </tr>
  10.           <tr>
  11.               <td>
  12.                   <apex:outputtext value="Enter First Value"></apex:outputtext>
  13.               </td>
  14.               <td>
  15.                   <apex:inputtext id="n1"/>
  16.               </td>
  17.           </tr>
  18.           <tr>
  19.               <td>
  20.                   <apex:outputtext value="Enter Second Value"></apex:outputtext>
  21.               </td>
  22.               <td>
  23.                   <input type="text" id="n2"/>
  24.               </td>
  25.           </tr>
  26.           <tr>
  27.               <td colspan="2" align="center">
  28.                   <input type="button" value="Sum" onclick="sum();"/> &nbsp;
  29.                   <input type="button" value="Multiply" onclick="multiply();"/>
  30.               </td>
  31.           </tr>
  32.       </table>
  33.   </apex:form>
  34. </apex:page>

List view of Data

  1. <apex:page showHeader="false" standardController="Account" recordSetVar="mRec">
  2. <apex:form >
  3. <apex:pageBlock id="allAccounts">
  4.     <apex:pageBlockSection >
  5.         <apex:dataList value="{!mRec}" var="c" type="1" rendered="true"> // type is to define the type of list 
  6.             {!c.Name}
  7.         </apex:dataList>
  8.     </apex:pageBlockSection>

  9. <apex:commandButton action="{!First}" value="First"/>
  10. <apex:commandButton action="{!Next}" value="Next"/>
  11. <apex:commandButton action="{!Previous}" value="Previous"/>
  12. <apex:commandButton action="{!Last}" value="Last"/>
  13.         
  14. </apex:pageBlock>
  15. </apex:form>
  16. </apex:page>


Standard pagination buttons with page block table


<apex:page showHeader="false" standardController="account" recordSetVar="records">
  <apex:form >
      <apex:pageBlock >
          <apex:pageblocktable value="{!records}" var="A">
              <apex:column value="{!A.Name}"/>
              <apex:column headerValue="Account Phone" value="{!A.Phone}"/>
          </apex:pageblocktable>
      </apex:pageBlock>
      <apex:commandButton action="{!First}" value="First"/>
      <apex:commandButton action="{!Next}" value="Next"/>
      <apex:commandButton action="{!Previous}" value="Previous"/>
      <apex:commandButton action="{!Last}" value="Last"/>
  </apex:form>
</apex:page>

Comments

Popular Posts