To demonstrate how easy it is to create a program in XOJO we will make, run and build a simple project.

Open XOJO.

FirstWindow-300x178

Select “Desktop” and enter “Picture Chooser” as the Application Name. Click OK.

The project window will open. Click the Library button on the toolbar. From the list of controls on the right drag a popupmenu onto the window in the editing area. Also drag a canvas onto the window. Position them approximately as shown in the image below.

Sample_Project

Double-click the Popupmenu to open the event picker. Select Open and click OK. In the Open event editor that appears type (or copy/paste):

me.addrow “Photo 1”

me.addrow “Photo 2”

me.addrow “Photo 3”

me.listIndex = 0

This tells the popupmenu to populate its list with “Photo 1”, “Photo 2”, and “Photo 3”. The last line tells it to show its first item when the program runs.

Next, in an image editor crop three image to the width and height of the canvas in Window1.

Name the images “p1.jpg”, p2.jpg”, and p3.jpg”. Drag and drop them onto the Contents area at the left of the project window to add them to your project.

Click on the popupmenu to select it then click the Insert button on the toolbar. Choose “Event Handler” and then “Change”. In the Change event editor type (or copy/paste):

Select Case me.ListIndex
case 0
canvas1.Backdrop = p1
case 1
canvas1.Backdrop = p2
case 2
canvas1.Backdrop = p3
end Select

This code changes the image displayed in canvas1 according to which row the user selected in popupmenu1.

Save your project.

Now test your project by clicking the Run button on the toolbar.

If all goes well your project will display the window with the popupmenu and an image in the canvas. Select different photos using the popupmenu and the image in the canvas should change accordingly.

If your project fails to run XOJO will show you where any errors are. Correct any errors and run the project again.

Now it’s time to make a standalone application from your project.