no way to compare when less than two revisions

Differences

This shows you the differences between two versions of the page.


Previous revision
Last revision
—hello_world_application [2012-12-12 11:17] – [Hello World! Application] potion
Line 1: Line 1:
 +======= Hello World! Application =======
 +This is a developer documentation for a simple application without any database access. Feng Office uses the [[MVC|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 -  [[plugins_documentation|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.
 +
 +<code php>
 +class HelloworldController extends ApplicationController {
 + function __construct() {
 + parent::__construct();
 + prepare_company_website_controller($this, 'website');
 + }
 + function index() {
 + $my_var = 'World';
 + tpl_assign('world', $my_var);
 +
 + }
 +}
 +</code>
 +
 +===== 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.
 +
 +<code html>
 +Hello <?php echo $world ?> !
 +</code>
 +
 +===== 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 :
 +
 +<code php>
 + var tab_panel = new Ext.TabPanel({
 + id: 'tabs-panel',
 + region:'center',
 + 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')
 + }
 + }),
 +</code>
 +
 +===== 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.
 +   
 +<code javascript>
 + ...
 +  'completed on': 'Completed on',
 +  /* Hello World */
 +  'helloworld': 'Hello World',
 +</code>
 +
 +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/16x16 folder.
 +Now connect the CSS class //ico-helloworld// to your image in the CSS file public/assets/themes/default/stylesheets/general/layout.css
 +
 +<code css>
 +.ico-helloworld {
 + background-image: url(../../images/16x16/helloworld.png) !important;
 +}
 +</code>
 +
 +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 ======
 +
 +[[http://www.emarketingtrends.co.za/2009/09/using-hooks-in-opengoo|Using hooks in openGoo]]