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. 
   
2. .font1{ 
3.         font-size:20px; 
4.         color:green; 
5.         font-weight:bold; 
6.        } 
7. 
   
8. .font2{ 
9.         font-size:15px; 
10.         color:blue; 
11.        }

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

External Java Script

Add extjs.txt to static resources :

function sum(){
            var a = document.getElementById('p1:f1:n1').value;
            var b = document.getElementById('n2').value;
            var tot = eval(a) + eval(b);
            alert(tot);
            
        }
        
        function multiply(){
            var a = document.getElementById('p1:f1:n1').value;
            var b = document.getElementById('n2').value;
            var mul = eval(a) * eval(b);
            alert(mul);
            
        }


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. 
   
10. <apex:commandButton action="{!First}" value="First"/>
11. <apex:commandButton action="{!Next}" value="Next"/>
12. <apex:commandButton action="{!Previous}" value="Previous"/>
13. <apex:commandButton action="{!Last}" value="Last"/>
14.         
15. </apex:pageBlock>
16. </apex:form>
17. </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>