next »

[isthisthingon]

INTRODUCTION TO FORCE.COM PROGRAMMING

What would a language intro be without our beloved Hello World example?  Probably more helpful and informative but I'm sticking with the classic approach.  In this Visualforce intro I'm going to show you how to create a development org in Salesforce, adjust a few settings to make it “development friendly,” and deploy a simple Visualforce page.  Later on we'll tie in an Apex class that passes “Hello World!” into the VF page.... called from (...wait for it...) a BUTTON!!

Let's do it...

STEP 1 - CREATE A DEVELOPMENT ORGANIZATION
Go to: http://developer.force.com and click on the "Get a Free Developer Edition" link.  Enter your information and create your login.  Try something like myname@uniquedomain.com.  It doesn't matter as long as it's in email format.  Your email address is in another field.  Open the activation email you received and click on the password reset link.  Wow cool, it's yours now.  Use it in any way you wish, even to use Salesforce for it's built-in features (2-user limit per dev org).  Oh yeah, create as many accounts as you want.  They're free

STEP 2 - CONFIGURE IT FOR DEVELOPMENT
Login and click through: [Setup (upper right) | My Personal Information (mid-left) | Personal Information (mid-left) | Edit (mid-top)].  Select the "Development Mode" checkbox.

STEP 3 - CREATE YOUR PAGE
Enter a URL for the new page in your browser's address bar: https://Salesforce_instance/apex/myNewPageName.  For this example, if your salesforce.com organization uses na3.salesforce.com, enter http://na3.salesforce.com/apex/HelloWorld.  Click on the "Create Page" link that will appear.  Select the "Page Editor" button (bottom-left) to see your Visualforce code.  Try some CSS in there – it's a hoot.

Congrats! You've been assimilated into the cloud 


In my next post I'll show you how to add an Apex class to your page.

Adam

[isthisthingon]

INTRODUCTION TO FORCE.COM PROGRAMMING 2

Let's assign a tab to the page you created in step #1.  This way when you make changes you can see them easily.  You can always view your page by entering the url as in step one like this: https://c.na6.visual.force.com/apex/helloworld, where everything before /apex/helloworls is your particular org.

Assign tab:
Click through [Setup | (App Setup) Create | Tabs | Visualforce Tabs | New].  Name the tab Hello World and select a color & icon for it.

The code generated for Visualforce looks like this:

Code:

<apex:page >
  <!-- Begin Default Content REMOVE THIS -->
  <h1>Congratulations</h1>
  This is your new Page: helloworld
  <!-- End Default Content REMOVE THIS -->
</apex:page>

After we create the Apex controller class to handle a button click, we will change the above code to bind the button and display the results.

Create Apex class:
Click through [Setup | Develop | Apex Classes | New]

Paste the following code into the editor:

Code:

public class HelloWorld
{
public String displayText {get; set;}

public void SayIt()
{
displayText = 'Hello World!!';
}
}

Save the class and return to your Visualforce page: [Setup | Develop | Pages | helloworld | Edit]

Change the Visualforce code to the following:

Code:

<apex:page controller="HelloWorld">
<apex:sectionHeader title="Some Title" subtitle="Some Subtitle"/>
<apex:form >
        <apex:pageBlock >
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton action="{!SayIt}" value="Hello who?"/>
            </apex:pageBlockButtons>
            <apex:outputLabel value="Results: " for="results"/>
            <apex:inputTextarea id="results" value="{!displayText}" rows="10" style="width: 100%"/>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Now click on your Hello World tab to see the results.  With a button we've gone from Visualforce to Apex and now have the entire database along with all the other tools at our fingertips.

[isthisthingon]

The resulting page should look like this: