Welcome, Guest
Username: Password: Remember me

TOPIC: [HELP GUIDE] Admin style Control Panel - EASY

[HELP GUIDE] Admin style Control Panel - EASY 25 Sep 2012 21:15 #3993

  • Tomaselli
  • Tomaselli's Avatar
  • Offline
  • Elite Member
  • Posts: 293
  • Thank you received: 87
  • Karma: 46
I recently saw another post here to help the J-cook community to add a control panel to the generated component, I found it interesting but I thought there was surely an easier way to do it.

so today I had the need to add a Cpanel to one my project and here below the way I easily did it within 3 steps and few lines of code.

I hope the Admin will read this post and MAYBE integrate this into the jcook v2.0 by default :) , if he has the time to do it.

by the way, here the steps:

1) in the JCOOK builder: create a new BACKEND LAYOUT -> COLLECTION view and make it your Entry point (view) Back-end default, remove the GRID and the FILTER brick (I also removed the toolbar, it's up to you). and leave it empty for now.

2) open with a text editor the administrator/components/YOURCOMPONENT/helpers/helper.php file and add the following my function inside the YOURCOMPONENTHelper class:
	function iconButtonCreator( $text, $link, $image ){?>
		<div style="float:left;">
			<div class="icon">
				<a href="<?php echo $link?>">
					<img src="<?php echo 'components/YOURCOMPONENT/images/'.$image; ?>" alt="<?php echo $text;?>">
					<span><?php echo $text?></span>
				</a>
			</div>
		</div>
		<?php
	}

3) open with a text editor your entry point view file in the backend: administrator/components/YOURCOMPONENT/views/yourview/tmpl/default.php

in the middle should be completely empty, so you can add the following code:
<table style="width: 100%;">
<tr>
 <td width = "60%">
    <div id = "cpanel">
    <?php
YOURCOMPONENTHelper::iconButtonCreator(TEXT , LINK , IMG);
YOURCOMPONENTHelper::iconButtonCreator(TEXT , LINK , IMG);
YOURCOMPONENTHelper::iconButtonCreator(TEXT , LINK , IMG);
YOURCOMPONENTHelper::iconButtonCreator(TEXT , LINK , IMG);
YOURCOMPONENTHelper::iconButtonCreator(TEXT , LINK , IMG);
	?>
    </div>
 </td>
 <td><img src="components/com_yourcomp/images/mainimage.png" align="left" border="0"></td>
 <td style = "vertical-align:top;  font-size: 14px;">
	<div><?php echo JText::_("YOURCOMP_ABOUT");?></div>
	<table width="100%">
		<tr>
			<td>
				<div>
					<a href="http://www.yoursite.com/" target="_blank">
						<img src="components/com_yourcomp/images/yourlogo.png" border="0">
					</a>
				</div>
				<div><a href="http://www.yoursite.com/" target="_blank">www.yoursiteo.com</a></div>
				<div><a href="mailto:youremail@gmail.com">youremail@gmail.com</a></div>
			</td>
		</tr>
	</table>
 </td>
</tr>
</table>

obviously you should replace the YOURCOMPONENT and img paths, etc, etc with your data and the variables TEXT, LINK, IMG with the rights values.
(NOTE: the image should be a 48px )
whenever you will need the icons with the joomla cpanel style, you just need to use the function:

YOURCOMPONENTHelper::iconButtonCreator(TEXT , LINK , IMG);

INSIDE A DIV WITH ID = "cpanel". and magically all the icons will appears.
Last Edit: 03 Oct 2012 13:26 by admin.
The administrator has disabled public write access.
The following user(s) said Thank You: BTB300, edwardcox, JoomGuy, dyvel, mabdelaziz

Re: Joomla Admin style Control Panel for JCook - EASY 25 Sep 2012 23:16 #3994

  • edwardcox
  • edwardcox's Avatar
  • Offline
  • Premium Member
  • Here to help.
  • Posts: 131
  • Thank you received: 26
  • Karma: 12
Nice B) Well done.

Edward.
Passionate Joomla! Developer and J-Cook pro evangelist.
www.jcombuilder.com - we build great Joomla!® Components so you don't have to.
The administrator has disabled public write access.

Re: Joomla Admin style Control Panel for JCook - EASY 26 Sep 2012 08:48 #3997

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Chef
  • Posts: 3711
  • Thank you received: 986
  • Karma: 140
Really nice.
Thank you.

Karma +1

Well, the Cpanel is not a big deal.
The problem for me is to create an interface to build the menus.

I will include a default cpanel including all the back end collection layouts by default. It is easy to do.

A single comment on your code :

Try do do the same using JDom. It is a good exercice for you ;-)
I mean, the function in helper is a good place for it (regarding native), but with JDom included in your component, you should integrate this in a new JDom class.
I give you a new namespace for it :

html.link.menu.cpanel.button

Note : this is not the easiest namespace, because, you will have to create :
  • html/link/menu.php
  • html/link/menu/cpanel.php
And finally your class :
  • html/link/menu/cpanel/button.php

Very important to create this tree, because I think about the future.

You can use a more simple namespace for the moment, I will move it if I use your code.
for example :
html.link.cpanel
(It will work perfectly, but as I told you, it is not the right place for me in definitive)


About the other part (right margin), it is correct no need to use JDom, because it is one call only, and open to make modifications.

Some people prefers div than tables, as you want.
I personally continue to use tables in some cases.

Another step further, you can see often in cpanels, that the right space can also handle module positions (back-end modules), wich is really nice.

The JDom class to load a module position is not done yet. (usable anywhere in component)
Do you want to try doing it ?
It is not a big deal, and a good exercice.


For me it is not a question of time, I only offer you a possibility to write your name in the header of the generated files of future JDom files.
If you understand well JDom, you will be amazed how easy it is to contribute in it. These exercises are really perfect to start.

In our present cases, just build the minimalist functionality, and then you can add some switchers to fully customize with extra features recieving special parameters.
For example, you can add a feature that opens in modal popup, or whatever else.
(Do not create too much specific or fantasy functions, that's the idea to keep light files)

Well, you are free to try what you want.
Enjoy it !

...and thank you again. The important is not the quantity of code, but the interrest in it, and the interrest of sharing.
Coding is now a piece of cake
Last Edit: 26 Sep 2012 08:55 by admin.
The administrator has disabled public write access.
The following user(s) said Thank You: Tomaselli

Re: Joomla Admin style Control Panel for JCook - EASY 26 Sep 2012 09:56 #4002

  • Tomaselli
  • Tomaselli's Avatar
  • Offline
  • Elite Member
  • Posts: 293
  • Thank you received: 87
  • Karma: 46
Thanks for the reply and info. the Jdom was my second thought, I like it and I know it's very useful for customizations but you know.....sometimes when you are in a rush, you prefer the shortest way, that's why I went for the simple and fast hack with the function in the helper.

I agree with you Jdom is the right place for this. I will definitively do the html.link.menu.cpanel.button, probably tomorrow or after tomorrow after I complete few suspended works I have :).

about:
The problem for me is to create an interface to build the menus.
which menus are you talking about and where should be the interface?
Some people prefers div than tables, as you want.
I also prefer tables, but I prefer to use the divs when I need more freedom.
I found some tricks around to "make-up" divs as table cells and it worked fine, I still have to test it a bit on all the browsers, but it seems working well. that could be a good compromise.

The opportunity to have divs instead of tables in the jcook generated component, would improve a LOT the speed of customization process, because in this case I wouldn't even touch one single line of code from the jcook generated component.

the reason is simple, when I create a new component,if I have only raw divs I would just need to change the CSS and javascript and magically the layout would be like I want without modify anything else, of course I could also use the default joomla override system to do it, but in this case I should always keep an eye and check what it is generated by the jcook, as it is always growing up (fortunately!).
Actually I have to modify the tables by hand and check the generated files with a comparison tool when I rebuild the jcook component.
the option to have raw divs with classes and ids in the layout would be a GREAT feature!

please think about this feature, it could really speed-up the component layout customization process. if you need help on this, tell me how, I would do it with pleasure, it will speed-up the creation process of all the components I have in my head :).
The administrator has disabled public write access.
The following user(s) said Thank You: admin, JoomGuy

Re: Joomla Admin style Control Panel for JCook - EASY 26 Sep 2012 10:50 #4003

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Chef
  • Posts: 3711
  • Thank you received: 986
  • Karma: 140
which menus are you talking about and where should be the interface?

I am talking about an interface in the builder to draw your menus. This is not for tomorrow.
So, if I implement a Cpanel, it will contain all the availables pages.
Because it is more easy to delete some items, than creating from scratch.

For the moment, I am not working on this part, so everithing you engage in, will be integrated if it is good. I have no doubts.

Once, it is ready, I will add a config option to integrate a default cpanel. Maybe in front as well.

About the divs, I am not skilled as you are. If you can explain the basis in another topic, I will be very gratefull. And it will help to add this custom you speak about. Why not ?
Coding is now a piece of cake
The administrator has disabled public write access.

Re: Joomla Admin style Control Panel for JCook - EASY 02 Oct 2012 20:19 #4214

  • Tomaselli
  • Tomaselli's Avatar
  • Offline
  • Elite Member
  • Posts: 293
  • Thank you received: 87
  • Karma: 46
Hi Admin and everybody,
this evening finally I had some time to take a look on Jdom and how it really works. I'd like know more about what I did btw I made the html.link.menu.cpanel.button in JDOM "style"

It perfectly works but I don't know if it is done in the right JDOM "state of the art" standard, when you have time I'd like to know if it is correct from your development point of view and what you think about.

for everybody who would integrate this, INSTEAD of the previous hack follow the below steps:

1) just download the following file, unzip to your JDOM folder:
dom.zip

2) example call:
instead of the previous:
<?php echo YOURCOMPONENTHelper::iconButtonCreator(TEXT , LINK , IMG) ?>

use this to create the button:
<?php echo JDom::_("html.link.menu.cpanel.button", array(
		'href' => 'index.php?option=com_jhacks&view=hacks&layout=hacks',
		'link_title' => JText::_("JHACKS_VIEW_HACKS"),
		'img' => 'icon-48-jhacks_hacks.png',
		'extra' => 'whatever="myvalue" otherthing="value"' // optional
		)); ?>

- the HREF is the regular main collection view
- the LINK_TITLE is the collection view name
- the IMG is the 48px icon for the collection view inside the backend images folder

I also added an EXTRA argument optional, that's something for my needs.....to add extra custom attributes to the <a> tag element (for Admin: delete it if you think it's not needed).

Next week I'll make few new posts about the layout customization in Jcook fresh generated components and some new functionalities requests I think they could be easily added.

I saw the new options in the jcook builder about how the layout is generated, that's GREAT! I didn't have yet the time to see what will be generated, I'll do it soon! At the moment I still use the jcook v1.5.2. but for my next project I'll probably use the V2.0.
Last Edit: 03 Oct 2012 08:41 by Tomaselli.
The administrator has disabled public write access.
The following user(s) said Thank You: admin, JoomGuy, dyvel

[GUIDE] AUTOMATIC Control Panel - EASY 09 Jan 2013 14:11 #6377

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 64
OK, so, you wanna follow this thread to create your control panel but you have tons of layouts/tables and you need it quick...

As a small extension to this wonderful JDom class (THANKS @tomaselli!), here's a helper function that parses all of your <submenu> elements from your componentname.xml manifest, returns them as an associative array with which to auto create all of your CP style buttons using the CPanel Button JDom Class!

The cool thing is, it's completely dynamic so it will work straight off-the-bat in any of your cook projects providing you have the dom class for CP of course. The only issue with it is, I don't currently know how to parse the LANGUAGE STRINGS (layout names) using JText::_("COMP_VIEW_NAME") as they are vars created from reading the XML and JText doesn't like vars. :( - well, at least not in a straight-forward way that I know how.

Anyway, back to it ;)

TODO:
  1. Open you helper.php file and paste the following just before the closing '}' brace.
    public static function public static function buildControlPanelButtons($debug = false)
    {
    	// get option name (JInput)
    	$jinput = JFactory::getApplication()->input;
    	//split com_componentname by '_'
    	$option = explode("_",$jinput->get('option')); 
    	//we want $optionArr[1] as this will be the component's name
    	$option = $option[1];
    	
    	// INIT Array to gather the info we want
    	$return = array();
    	//DEBUG - Check your component name (uncomment next line)
    	$return["debug"][] = array("option" => "$option");
    	
    	//Call XML parser 
    	$xml =& JFactory::getXMLParser( 'simple' );
    	//Create a filename from option
    	$xmlFilePath = JPATH_COMPONENT_ADMINISTRATOR . DS . "$option.xml";
    	$return["debug"][] = array("manifest_path" => "$xmlFilePath");
    	
    	// Check File Loaded
    	if ($xml->loadFile($xmlFilePath)) {
    		$administration = (array)$xml->document->administration;
    		//Create SUB-array to store submenus in
    		$return["debug"] = array();
    		//Loop through child nodes
    		foreach($administration as $k){
    			//
    			$menus = (array)$k->children();
    			//Get each submenu 
    			foreach($menus[1]->menu as $sub){	
    				$image = explode('/',$sub->attributes('img'));
    				$count = count($image);
    				$image = $image[$count - 1];
    				
    				//Swap size from 16 to 48px
    				$image = explode('-',$image);
    				if($image[0] == "icon" && (int)$image[1] == 16) {
    					$image[1] = "48";
    					$image = implode('-', $image);
    				}
    				
    				$href = 'index.php?' . $sub->attributes('link');
    				$link_title = $sub->data();
    				$return["debug"][] = array(
    					'href' => $href,
    					'img' => $image,
    					'link_title' => JText::_($link_title) /***** HERE *****/
    				);
    			}
    		}
    	}
    	else {
    		$error_msg = "<h2>File Open Error: file " . $xmlFilePath . "</h2>";
    		$return["_errors"] = $error_msg;
    	}
    	if(count($return["debug"])){
    		$html = "";
    		foreach($return["debug"] as $buttons){
    			$html .= JDom::_("html.link.menu.cpanel.button", array(
    										'href' => $buttons['href'],
    										'link_title' => $buttons['link_title'], 
    										'img' => $buttons['img']
    									)
    								);
    		}
    		
    	}
    	$return["html"] = $html;
    	
    	if($debug == false)
    		return $return['html'];
    	else return $return;
    }
  2. In your desired layout, inside whatever <div> or dom element of your choosing, place the following code:
    $controlPanel = JstoresocialHelper::buildControlPanelButtons(true); //true = debug ON, false = OFF
    print_r($controlPanel);
I'm not 100% sure whether I will implement, but I was thinking of providing the ability to pass an $ignore param, into which you could pass an array of COMPONENTNAME_MENU_VIEW style translation strings (titles) to ignore. Anyway, I need to workout how to get the TRANSLATION_STRINGS for layouts to work using $vars since I'm pulling them out of the manifest...

Any ideas on how to do that????

Thanks again @tomaselli!

Hope someone finds this useful!

Gez
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
Last Edit: 09 Jan 2013 20:12 by JoomGuy. Reason: ADDED CODE
The administrator has disabled public write access.
The following user(s) said Thank You: admin

Re: [GUIDE] AUTOMATIC Control Panel - EASY 10 Jan 2013 09:16 #6382

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 64
Hi All,

For the time being, whilst the strings aren't being translated at least, if you still want to automate the process somewhat due to having a ton of views (and you're lazy like me), follow the previous post but replace the function in your helper, the call to that function in your layout (control panel).

This will render a JDom call, pre-populated with all of your views... Then, just copy them into your layout as required...
  1. HELPER: ADD the following;
    public static function outputControlPanelButtons()
    {
    	// get option name (JInput)
    	$jinput = JFactory::getApplication()->input;
    	//split com_componentname by '_'
    	$option = explode("_",$jinput->get('option'));
    	//we want $optionArr[1] as this will be the component's name
    	$option = $option[1];
    
    	// INIT Array to gather the info we want
    	$return = array();
    	//DEBUG - Check your component name (uncomment next line)
    	$return["debug"][] = array("option" => "$option");
    
    	//Call XML parser
    	$xml =& JFactory::getXMLParser( 'simple' );
    	//Create a filename from option
    	$xmlFilePath = JPATH_COMPONENT_ADMINISTRATOR . DS . "$option.xml";
    	$return["debug"][] = array("manifest_path" => "$xmlFilePath");
    
    	// Check File Loaded
    	if ($xml->loadFile($xmlFilePath)) {
    		$administration = (array)$xml->document->administration;
    		//Create SUB-array to store submenus in
    		$return["debug"] = array();
    		//Loop through child nodes
    		foreach($administration as $k){
    			//
    			$menus = (array)$k->children();
    			//Get each submenu
    			foreach($menus[1]->menu as $sub){
    				$image = explode('/',$sub->attributes('img'));
    				$count = count($image);
    				$image = $image[$count - 1];
    					
    				//Swap size from 16 to 48px
    				$image = explode('-',$image);
    				if($image[0] == "icon" && (int)$image[1] == 16) {
    					$image[1] = "48";
    					$image = implode('-', $image);
    				}
    					
    				$href = 'index.php?' . $sub->attributes('link');
    				$link_title = $sub->data();
    				$return["debug"][] = array(
    						'href' => $href,
    						'img' => $image,
    						'link_title' => $link_title /***** HERE *****/
    				);
    			}
    		}
    	}
    	else {
    		$error_msg = "<h2>File Open Error: file " . $xmlFilePath . "</h2>";
    		$return["_errors"] = $error_msg;
    	}
    	if(count($return["debug"])){
    		$html = "<pre>";
    		foreach($return["debug"] as $buttons){
    			$html .= 'echo JDom::_("html.link.menu.cpanel.button", array(' . "<br />"
    					. "	'href' => " . $buttons['href'] . ",<br />"
    					. "	'link_title' => " . $buttons['link_title'] . ",<br />"
    					. "	'img' => JText::_(" . $buttons['img'] . ")<br />"
    					. "	)<br />"
    			. "); <br /><br />";
    		}
    			
    	}
    	
    	return $html;
    }
  2. LAYOUT: Call the function with;
    $jdomCallsOutput = JstoresocialHelper::outputControlPanelButtons();
    echo $jdomCallsOutput;
  3. Visit your control panel page and Copy the JDom calls from the output
  4. Comment out the call to the function in your layout
  5. Paste the JDom calls into your layout
  6. DONE!
Hope it helps,

Gez
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The administrator has disabled public write access.
The following user(s) said Thank You: admin

Re: [GUIDE] AUTOMATIC Control Panel - EASY 11 Jan 2013 00:50 #6404

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Chef
  • Posts: 3711
  • Thank you received: 986
  • Karma: 140
Thank you Tomaselli I will integrate it soon.

Thank you so much audibeid once again. My only comment is that should be better in a view than a helper.
Not your fault because the view super class is only coming now (mean soon). So I will reuse your source there.
Not a long job.

I can easily include an autogenerated Cpanel, but not customizable in the builder for the moment.

For both of you :
$karma++;
Coding is now a piece of cake
The administrator has disabled public write access.
The following user(s) said Thank You: JoomGuy

Re: [GUIDE] AUTOMATIC Control Panel - EASY 11 Jan 2013 01:01 #6405

  • admin
  • admin's Avatar
  • Offline
  • Administrator
  • Chef
  • Posts: 3711
  • Thank you received: 986
  • Karma: 140
@audibleid :
Very nice comments, and your second code is fun. It can be an excellent idea for converting the JForms calls in JDom. Not for today, but I keep you idea. Nice one !

By the way, the filters are coming in JForms too.
Coding is now a piece of cake
The administrator has disabled public write access.
The following user(s) said Thank You: JoomGuy

Re: [GUIDE] AUTOMATIC Control Panel - EASY 11 Jan 2013 07:55 #6406

  • JoomGuy
  • JoomGuy's Avatar
  • Offline
  • Moderator
  • Joomla Enthusiast, Lover of Cooking
  • Posts: 1115
  • Thank you received: 195
  • Karma: 64
Hi @admin,

Thanks!

I put it in the helper purely because in my case, I'm building 1 main CP (home) and about 4 other sub CPs to group my objects better so I wanted to be able to reuse it in all of them.

Any thoughts on handling the LANG STRINGS?

Thanks again,

Gez
Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!
The administrator has disabled public write access.
Time to create page: 0.155 seconds

Get Started