Wednesday 13 January 2016

VisualForce Basics



  • It is a mark-up language same as html.
  • It will be easier for the salesforce developers once they know how to combine the VisualForce  page with Apex.
  • It is much easier to learn compare to Apex.


MVC Pattern in Visualforce Page

The Model is simply the underlying database. In Visualforce, it’s the collection of Salesforce objects and fields that we had represent and modify in our page.

The View is the code that makes up our page’s UI. Here, it’s all of our Visualforce, HTML, CSS, and JavaScript code.

The Controller is the middle layer between the model and the view. It’s the Apex code that interacts with the database according to the view’s needs.



Where to write Visualforce Code?

For writing your first code in Visualforce Page, you need to start from here:

Step 1: Turn Development mode on in your user detail page.
             Your Name >> My Settings >> Personal >> Advanced User Details



Check both boxes and save it. This enables a VisualForce editor whenever you view your VisualForce page.

Step 2: Create a new VisualForce page
             Setup >> Develop >> Pages >> New 



Step 3: Click the New button and started writing your VisualForce code.




Step 4: Click the Preview button to open up the Visualforce editor.
    


Visualforce Tags

Here are the VisualForce tags that are used commonly in our visualforce development. We will discuss all the visualforce tags in my next blog.

<apex:page>
<apex:form>
<apex:pageblock>
<apex:pageBlockSection>

<apex:commandButton>

<apex:pageBlockButtons>

<apex:commandLink>

<apex:outputLink>

<apex:inputField>

<apex:inputFile>

<apex:inputHidden>

<apex:inputsecret>

<apex:inputText>

<apex:inputTextarea>

<apex:inputCheckbox>

<apex:outputField>

<apex:outputLabel>

<apex:outputText>

<apex:pageBlockSectionItem>

<apex:pageBlockTable>

<apex:column>

<apex:dataTable>

<apex:tabPanel>

<apex:tab>

<apex:toolbar>

<apex:toolbarGroup>

<apex:pageMessage>

<apex:panelBar>

<apex:panelBarItem>

<apex:panelGrid>

<apex:panelGroup>

<apex:param>

<apex:repeat>

<apex:facet>

<apex:actionFunction>

<apex:detail>

<apex:actionPoller>

<apex:actionRegion>

<apex:variable>

<apex:stylesheet>

<apex:SectionHeader >

<apex:relatedList>

<apex:listViews>

<apex:enhancedList>

<apex:actionStatus>

<apex:actionSupport>



Hope this helps you.  Happy Coding :)