DreamFactory Tutorial

Introduction

This guide describes the basic steps you should know to build and deploy applications using the DreamFactory Cloud Development Platform. The DreamFactory player allows you to develop and test your applications all from inside your browser while leveraging our DirectConnect technology to run on the cloud platform(s) of your choice. This guide illustrates a simple application named HelloWorld which allows the user to run a filter and display the results in a table.

References

Detailed documentation on the DreamFactory architecture, security, scripting language, and other related topics is available at http://dreamfactory.org/documentation.

Accessing the HelloWorld Application

HelloWorld can be accessed by going to our developer website http://dreamfactory.org/. There you will see a “Launch Now” button.

Clicking this button will launch the HelloWorld application in a new browser tab. The first time you run the application the DreamFactory Player will be downloaded and installed. Note the installation path at the bottom of the dialog.

After that the HelloWorld application will be downloaded and launched.

The application file is named helloworld.dfac. Normally all applications (sometimes referred to as project files) will have the .dfac file extension.

Selecting and Logging Into a Platform

The first thing you will see is a dialog asking you to select a platform.

The application supports all of the platforms you see in the dropdown menu. You can select any platform for which you have login credentials. For the purposes of this guide we will assume you are logging into salesforce.com.

Select salesforce.com from the menu then enter your user name and password. Click the login button to log in and begin running the application. If there is a login error you be prompted to try again.

Running the Application

Once you have logged in you will see a filter panel and a summary table. Use the filter panel to create your query then click the filter button. The query will be performed and the results displayed in the summary table. The data is being pulled from the platform of the current login.

You can click on the table column headers for sorting and other operations. You can also drag column headers to reorder the columns. The filter panel and summary table are referred to as components. They are just two of the many pre-built components available for building enterprise grade solutions right in the browser. These components support a vast array of features from simple text and graphics to sophisticated business logic.

Editing the Application

At this point you are in runtime mode where the application is not being edited. Authoring mode unlocks the ability to edit the application. To enter authoring mode click on the icon in the upper right corner.

The icon serves as the toggle between runtime and authoring mode. Authoring mode can be password protected if needed. The application is fully functional even when in authoring mode. Clicking on the filter button will rerun the current query and update the results table. This allows you to debug your application on the fly as you are creating it.

There are several tool palettes you will use to edit your application.

Project Manager - Shows all of the libraries and nodes in the current project.

Utility Palette – Open, close, and manage your project files.

Alignment Palette – Align and position the selected nodes.

Tool Palette – Create new nodes by dragging them to the work area. These are the low level building blocks for your application.

Component Palette – Create new components by dragging them to the work area. These are pre-built node trees with configurable properties that you can add to your application.

The tool palette has two main modes, pointer and reshaper. Select pointer for normal operation when you want to run the application.

Select reshaper when you want to edit, move, or resize nodes.

For example to move the filter panel to the right you can select the reshaper tool and click on the filter panel. It will now have handles and can be moved or resized. A nice trick to locate a node in the Project Manager palette is to click on it with the reshaper. The selected node will be highlighted in the Project Manager palette. Double clicking a component will bring up the component properties dialog for that component. The properties dialog allows you to customize the behavior of that component. When you are done editing click the pointer tool again to return to normal operation.

Editing Scripts and Dataflows

For most nodes you can shift-click on them to see the script. Doing this for the filter panel will bring up the following script. You can see the function clickfilter() that sends the user-specified filter string to the summary table component when you click the filter button. The last line of that function demonstrates how to connect dataflows between components.

Customizing the Application

Using the HelloWorld application as a template you can now make a minor change to make it your very own. Go to the draw tool palette and drag a text node over to the work area.

You can right-click the text to change its value or appearance. Use the reshaper tool to resize or position the text.

Saving the Application

Click the Save icon on the Utility palette to save a copy of your project to your hard drive.

Click the zip icon on the utility palette to zip the file you just saved.

Note that the zipped file will have the same .dfac extension but it has been compressed.

Deploying Your Application

To deploy your new application you must put the zipped helloworld.dfac on your web server along with helloworld.html. To make your own version of helloworld.html you can use the browser to view the HTML source for the current page. Save this file to your hard drive as helloworld.html and modify the following two lines by changing the URL to point to the dfac file on your server.

document.write('value="http://www.dreamfactory.org/downloads/helloworld.dfac' + window.location.search + '">\n');
			
document.write('openfile="http://www.dreamfactory.org/downloads/helloworld.dfac' + window.location.search + '">\n');

Now you can upload the zipped helloworld.dfac and helloworld.html to your server

Launching Your Application

In your browser navigate to the uploaded HTML file. This should download and launch your customized HelloWorld application. It will also install the DreamFactory player if not already installed. If this doesn’t work be sure to double check the location of your dfac and HTML files on the server as well as the dfac path names inside the HTML file. For More Information or Support

1-888-399-3732 (option 2)