Translations of this page?:

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


PLEASE NOTE: Comments to the wiki should only contain suggestions and questions that help us to improve the manual (and not the software). These comments will be deleted as soon as the information has been integrated into the manual.

Posts that do not contribute to the DOCUMENTATION of the project will be DELETED.

Ask QUESTIONS on the product here.
Report BUGS here.
Propose NEW FEATURES here.

Toni Martínez, 2010-10-13 05:47


When you create the view file you have to do it in application/views/helloworld/ folder instead of application/views/ folder (as it says in the manual). Otherwise the output of the view will be not found.

If you do that everything works perfect!! :)

Enter your comment
hello_world_application.txt · Last modified: 2013-02-27 18:06 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 3.0 Unported

Terms of Service | Privacy and Security policies | Copyright © 2020