Author Topic: "Hello World!" application  (Read 24647 times)

mirko

  • Newbie
  • *
  • Posts: 12
    • View Profile
"Hello World!" application
« on: November 24, 2008, 02:10:46 pm »
I try to write a new application the first time and now I want share my knowledge, because I don't find something like that in the forum or somewhere else. I think when it's clear how to write a extension, more peple will do it and can extend the software faster. It will be nice, if you get suggestions for improvement!!!

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) [Select]
class HelloworldController extends ApplicationController {
function __construct() {
parent::__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.

Code: (html) [Select]
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 :

Code: (php) [Select]
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')
}
}),

Set a tab-label 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: (js) [Select]
...
  'completed on': 'Completed on',
  /* Hello World */
  'helloworld': 'Hello World'

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

Set an icon for the application:
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) [Select]
.ico-helloworld {
background-image: url(../../images/16x16/helloworld.png) !important;
}
« Last Edit: November 24, 2008, 08:01:29 pm by mirko »

ignacio

  • Hero Member
  • *****
  • Posts: 1703
    • View Profile
Re: "Hello World!" application
« Reply #1 on: November 25, 2008, 11:01:26 pm »
Hi mirko,

Nice work figuring out OpenGoo's architecture! Lack of decent development documentation is one of our weak points. I was thinking on setting up a wiki so that we can all build up some nice manuals so as to encourage people to develop for OpenGoo.

I'll keep you informed.

virgiltu

  • Newbie
  • *
  • Posts: 9
    • View Profile
Re: "Hello World!" application
« Reply #2 on: January 02, 2009, 05:13:42 pm »
making any changes to lang.js will display Missing lang.js beside menu items. any help

ignacio

  • Hero Member
  • *****
  • Posts: 1703
    • View Profile
Re: "Hello World!" application
« Reply #3 on: January 04, 2009, 02:46:25 pm »
There must be some syntax error on the file. Check that all single quotes in the strings are preceded by a backslash. E.g.: 'Escap\'d quote'

Also, check that all translation keys are followed by a colon ( : ) and all translation strings are followed by a comma ( , ) EXCEPT for the last one (this breaks IE).

virgiltu

  • Newbie
  • *
  • Posts: 9
    • View Profile
Re: "Hello World!" application
« Reply #4 on: January 08, 2009, 06:14:13 pm »
Hello,

Is it possible to call a different script in that window. So that the new script will show inside the tab. I tried to add  the script in the folder eg"helloworld" however i keep getting page not found. Is there a certain way to code it to call the script? The script is an inventory software im trying to add so that the users don't have to go out of the page. The script calls its own db and so on.

ignacio

  • Hero Member
  • *****
  • Posts: 1703
    • View Profile
Re: "Hello World!" application
« Reply #5 on: January 09, 2009, 10:34:12 am »
You have to change mirko's example like this:
Code: [Select]
new og.ContentPanel({
title: lang('helloworld'),
id: 'helloworld-panel',
iconCls: 'ico-helloworld',
autoScroll: false,
defaultContent: {
type: "html",
notbar: true,
data: '<iframe style="width:100%;height:100%;border:0" src="http://www.opengoo.org"></iframe>'
}
})

If you get an extra vertical scrollbar you can remove it by changing the iframe's height to 99% (this will be fixed for version 1.2).

In this case it will show you opengoo.org. You can change it to point to your script.


arejae

  • Newbie
  • *
  • Posts: 2
    • View Profile
    • me,english and programming..
    • Email
Re: "Hello World!" application
« Reply #6 on: March 07, 2009, 03:20:52 am »
Hi , I just want to share the code that i used for creating the HelloWorld application using 1.3-beta version.

everything is the same except for the changes that need to be done in layout.js file.

Code: [Select]
......
og.panels.reporting = new og.ContentPanel({
title: lang('reporting'),
id: 'reporting-panel',
iconCls: 'ico-reporting',
refreshOnWorkspaceChange: false,
defaultContent: {
type: "url",
data: og.getUrl('reporting','index')
}
}),
/** New HelloWorld Tab Here  **/
og.panels.helloworld = new og.ContentPanel({
title: lang('helloworld'),
id: 'helloworld-panel',
iconCls: 'ico-helloworld',
refreshOnWorkspaceChange: true,
defaultContent: {
type: "url",
data: og.getUrl('helloworld','index')
}
})

thanks to everyone

k_magnai

  • Newbie
  • *
  • Posts: 2
    • View Profile
    • Email
Re: "Hello World!" application
« Reply #7 on: March 19, 2009, 06:16:58 am »
how do use extjs in "Hello World" application
« Last Edit: March 20, 2009, 07:13:40 am by k_magnai »

mirko

  • Newbie
  • *
  • Posts: 12
    • View Profile
Re: "Hello World!" application
« Reply #8 on: March 21, 2009, 09:30:22 am »
Hm, I add a extjs-tab widget by changing the layout.js an add a new item.
When you have you own application in og, you can use extjs in you view files normally like anywhere - "Ext.MessageBox.show(...)" for example.

k_magnai

  • Newbie
  • *
  • Posts: 2
    • View Profile
    • Email
Re: "Hello World!" application
« Reply #9 on: April 05, 2009, 04:48:04 am »
oh sorry for my bad question, i meaning how to add extjs tools and how to handle event in helloworld application or how to setting up ajax request of used extjs tools

allenlook

  • Volunteer Moderator
  • Sr. Member
  • ****
  • Posts: 312
    • MSN Messenger - sii_lookal@hotmail.com
    • View Profile
    • SI Group, Inc.
Re: "Hello World!" application
« Reply #10 on: February 11, 2010, 11:20:10 am »
Thank you for this!  It took some digging and some updating (Feng Office has changed somewhat) but I was able to use this to create two new tabs, one for Announcements, and one for Labs, where we'll be building and playing with the Google Chart and Google Visualization APIs without fear of messing up the other tabs in the meantime.
I am a volunteer moderator.  Any statements, opinions or observations I contribute are solely mine and are not necessarily shared by the makers of Feng Office.

mrmango

  • Newbie
  • *
  • Posts: 9
    • View Profile
Re: "Hello World!" application
« Reply #11 on: May 02, 2010, 08:29:01 am »
Nice example and useful replies.

Can this be stickied. Be useful for new developers, like me :)

Cheers

potion

  • Freshman
  • *
  • Posts: 25
    • View Profile
    • WorkgroupBase
Re: "Hello World!" application
« Reply #12 on: June 02, 2011, 06:22:04 pm »
Any chance of updating the instructions for 1.7.4 (and beyond).   I tried the following, but got nothing...

EDIT: Caching problem, sorry - Everything works fine!

application/controllers/HelloworldController.class.php
Code: [Select]
<?php
/**
 * Hello World
 * @version 1.0
 */
 
class HelloworldController extends ApplicationController {
function __construct() {
parent::__construct();
prepare_company_website_controller($this'website');
}
function index() {
$my_planet 'Earth';
tpl_assign('planet'$my_planet);
}
}
?>


application/views/helloworld/index.php:
Code: [Select]
Hello <?php echo $planet ?> !

public/assets/javascript/og/layout.js :
Code: [Select]
. . .
// SETUP PANEL LAYOUT
og.panels = {};
var panels = [

. . .

og.panels.helloworld = new og.ContentPanel({
title: lang('helloworld'),
id: 'helloworld-panel',
iconCls: 'ico-helloworld',
refreshOnWorkspaceChange: true,
defaultContent: {
type: "url",
data: og.getUrl('helloworld','index')
}
})
];
. . .

language/en_us/lang.js:
Code: [Select]
. . .
/* Hello World  tab */
   'helloworld': 'Hello World',
. . .

public/assets/themes/default/stylesheets/general/layout.css
Code: [Select]
. . .
.ico-helloworld {
background: transparent url(../../images/16x16/helloworld.png) no-repeat scroll 0 0 !important;
}
. . .
...and uploaded the required helloworld.png

Is there anything more that needs to be set up for the app to run under 1.7.4?
 EDIT: everything works fine in 1.7.4

Denis
« Last Edit: June 14, 2011, 09:46:53 am by potion »

popov_ae

  • Newbie
  • *
  • Posts: 5
    • View Profile
    • Email
Re: "Hello World!" application
« Reply #13 on: March 12, 2012, 04:07:09 am »
Maybe you can help me...i followed this steps, and new tab is showing, but it shows  the first (before overview tab)...how can i move it to the back?

_PHPepe_

  • Freshman
  • *
  • Posts: 15
    • View Profile
    • PHPepe.com
    • Email
Re: "Hello World!" application
« Reply #14 on: March 23, 2012, 06:27:33 pm »
Hi Guys,
I've finished with Feng2 Plugin documentation and updated the wiki !
Here is the link:
http://www.fengoffice.com/web/wiki/doku.php/feng_office_2_plugin_engine