Table of Contents

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

New controller

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);

New view

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 ?> !

Integrate in Feng Office

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')

Set a tab-label and an icon for the application

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

Other examples

Using hooks in openGoo