J1.5 talk

Difference between revisions of "Using the JToolBar class in the frontend"

From Joomla! Documentation

Line 81: Line 81:
  
 
Hi
 
Hi
 +
 
I was very happy when I saw the chapter on using JToolBar in 1.6 – everything looked so easy! But since then I have tried for several days to build a simple front-end admin view (list and edit form) for the HelloWorld application that is built in the MVC tutorial. My understanding was that I needed only
 
I was very happy when I saw the chapter on using JToolBar in 1.6 – everything looked so easy! But since then I have tried for several days to build a simple front-end admin view (list and edit form) for the HelloWorld application that is built in the MVC tutorial. My understanding was that I needed only
 
* copy the backend component folder to the frontend
 
* copy the backend component folder to the frontend
 
* define a getToolbar function with appropriate buttons in both views, using tasknames like ‘helloword.add’, ‘helloworld.edit’ and ‘helloworld.save’
 
* define a getToolbar function with appropriate buttons in both views, using tasknames like ‘helloword.add’, ‘helloworld.edit’ and ‘helloworld.save’
 
* call the function in both templates
 
* call the function in both templates
 +
* define a default.xml file for the helloworlds view and link the view to a menu item in the frontend
 
and as soon as the toolbar would be displayed, all the background tasks would be handled by the standard MVC classes.
 
and as soon as the toolbar would be displayed, all the background tasks would be handled by the standard MVC classes.
  
Line 90: Line 92:
 
But there seem to be several hidden problems, especially in the edit form:  
 
But there seem to be several hidden problems, especially in the edit form:  
 
* the toolbar title is never shown (in both views)
 
* the toolbar title is never shown (in both views)
* when editing an item, its data is displayed properly and can be edited, but the save button does not save the changes and just calls the home page of the application. By dumping some variables I only found out that the controller is never called with “…&task=save” (as it is in the backend) although the rendered code of the button in the frontend is exactly the same as in the backend.
+
* when editing an item, its data is displayed properly and can be edited, but the save button does not save the changes and just redirects to the home page of the application. By dumping some variables I saw that the controller is never called with “…&task=save” (as it is in the backend) although the rendered code of the button in the frontend is exactly the same as in the backend.
 
* when adding a new item, the greeting text of the item with id=1 is always shown. As in edit, save doesn’t work. Even worse: if item 1 is deleted in the database, opening the edit form after pressing “new” fails with JLIB_DATABASE_ERROR_EMPTY_ROW_RETURNED.
 
* when adding a new item, the greeting text of the item with id=1 is always shown. As in edit, save doesn’t work. Even worse: if item 1 is deleted in the database, opening the edit form after pressing “new” fails with JLIB_DATABASE_ERROR_EMPTY_ROW_RETURNED.
  

Revision as of 12:53, 22 August 2011

javascript[edit]

Hi,

This is a great article :) However I had a small problem due to my lack of experience... I propose a small change in the javascript part: Instead of <script type="text/javascript" src="includes/js/joomla.javascript.js"></script>, shouldn't it be: <script language="javascript" type="text/javascript" src="includes/js/joomla.javascript.js"></script> ?

Since I am quite new to web development (including html and php) it took me some time to understand that the reason behind my buttons inactivity was the language attribute... I do not know if this is a general feature or if it depends on the developer's configurations... either way, probably this should be mentioned on the article.

--Sbrandao 13:20, 2 March 2009 (UTC)

Complete the toolbar look and feel[edit]

Thanks to the original contributor; very nice piece explaining how we can add the menu to the front end. I would like to add the following to give a more complete picture.

Changes to CSS Copy the contents from the following CSS into the new CSS you are creating for your component.

From directory /joomla/administrator/templates/khepri/css

  1. rounded.css or norounded.css as needed (you can copy both if you could be using either of them)
  2. general.css
  3. you can ignore the additions for table.toolbar a and table.toolbar a:hover they are already in general.css. However, you need to have the code for icons

The code copied from general.css has the styles for div.header. By default the color is #0B55C4, change this to your color of choice

Changes to com_yourcomponent.php

echo "<div id=\"toolbar-box\">\n";
echo "<div class=\"t\">\n";
echo "<div class=\"t\">\n";
echo "<div class=\"t\"></div>\n";
echo "</div></div>\n";
echo "<div class=\"m\">\n";
echo yourcomponentHelperToolbar::getToolbar( );
echo "<div class=\"header\">menu header</div>\n";
echo "<div class=\"clr\"></div>\n";
echo "</div>\n";
echo "<div class=\"b\">\n";
echo "<div class=\"b\">\n";
echo "<div class=\"b\"></div>\n";
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";

This will make sure that the look and feel is exactly like the backend.

Enjoy the toolbar!!!

"New" is a reserved word ergo you can't have a function called "new" you will get a syntax error that wont go away. So you need to change the name of the "task" "new" to something like "mynew" and then the function to "mynew" also.

Hey, something is not working with the function name new():

function new()

  {
     JRequest::setVar('view' , 'new');
     parent::display();
  }


Parse error: syntax error, unexpected T_NEW, expecting T_STRING in D:\htdocs\cattleinfo\components\com_breed\controller.php on line 7

so..we need to change the function name first, or yu guys have other option to solve this problem.

Its quite confussing where to insert the following form, is it inside default.php

<form action = "index.php" method = "post" id = "adminForm" name = "adminForm" />

<input type = "hidden" name = "task" value = "" />
<input type = "hidden" name = "option" value = "com_yourcom" />
</form>

thukten dendup

Using a toolbar in the MVC tutorial HelloWorld application[edit]

Hi

I was very happy when I saw the chapter on using JToolBar in 1.6 – everything looked so easy! But since then I have tried for several days to build a simple front-end admin view (list and edit form) for the HelloWorld application that is built in the MVC tutorial. My understanding was that I needed only

  • copy the backend component folder to the frontend
  • define a getToolbar function with appropriate buttons in both views, using tasknames like ‘helloword.add’, ‘helloworld.edit’ and ‘helloworld.save’
  • call the function in both templates
  • define a default.xml file for the helloworlds view and link the view to a menu item in the frontend

and as soon as the toolbar would be displayed, all the background tasks would be handled by the standard MVC classes.


But there seem to be several hidden problems, especially in the edit form:

  • the toolbar title is never shown (in both views)
  • when editing an item, its data is displayed properly and can be edited, but the save button does not save the changes and just redirects to the home page of the application. By dumping some variables I saw that the controller is never called with “…&task=save” (as it is in the backend) although the rendered code of the button in the frontend is exactly the same as in the backend.
  • when adding a new item, the greeting text of the item with id=1 is always shown. As in edit, save doesn’t work. Even worse: if item 1 is deleted in the database, opening the edit form after pressing “new” fails with JLIB_DATABASE_ERROR_EMPTY_ROW_RETURNED.

I would very much appreciate it if someone could provide a solution to this, i.e. extend the HelloWorld application of the MVC Tutorial with an admin frontend using a toolbar as described in this article.

Thank you very much

--Rolfz 13:56, 21 August 2011 (CDT)