Hello World! Application

This is a developer documentation for a simple application without any database access. Feng Office uses the MVC design pattern, but for this example we need only the view and the controller part.

Note: this page relates to the older, Feng Office V1.x framework. Because it is embedded in the main Feng Office parent application, your application will not survive system updates and upgrades. Starting from V2.x, the preferred method is to use the plugin framework - see V2.x Hello World plugin tutorial here

Create a new file called HelloworldController.class.php in the application/controllers folder. This controller will be loaded automatically and have one or more actions (here only one: index). You can set some variables to use they in the view template.

class HelloworldController extends ApplicationController {
	function __construct() {
		prepare_company_website_controller($this, 'website');
	function index() {
		$my_var = 'World';
		tpl_assign('world', $my_var);

Create a file which is called equal to the action name, here index.php, in the application/views folder to show the output of the controller.

Hello <?php echo $world ?> !

Show the new application near the others as a tab: Add it to the constructor of the TabPanel class to the items array in public/assets/javascript/og/layout.js :

	var tab_panel = new Ext.TabPanel({
		id: 'tabs-panel',
		activeTab: 0,
		enableTabScroll: true,
		items: [
			new og.ContentPanel({
				title: lang('helloworld'),
				id: 'helloworld-panel',
				iconCls: 'ico-helloworld',
				refreshOnWorkspaceChange: true,
				defaultContent: {
					type: "url",
					data: og.getUrl('helloworld','index')

For the English translation add a new item called helloword (see above) to the array in the javascript file language/en_us/lang.js.

  	'completed on': 'Completed on',
  	/* Hello World */
  	'helloworld': 'Hello World',

The icon must set by the used theme, so for the default theme you save your icon by default in the public/assets/themes/default/images/16×16 folder. Now connect the CSS class ico-helloworld to your image in the CSS file public/assets/themes/default/stylesheets/general/layout.css

.ico-helloworld {
	background-image: url(../../images/16x16/helloworld.png) !important;

Now reload your Feng Office and you will see your Hello World! application at the top.

For Hello World discussion see http://forums.opengoo.org/index.php?topic=476.0

Other examples