How to get an icon from JSF resources folder to a dynamic menu created from org.primefaces.model.MenuModel; The setIcon methods of menu take only a string as a parameter.
You can specify a custom icon by using css style class like this:
<p:menuitem icon="barca" ... />
and load the image located at resources/default/images/icons folder like this:
.barca {
background: url('#{resource['default:images/icons/barca_logo.png']}') no-repeat;
height:16px;
width:16px;
}
Yes, the setIcon method takes a string which is the name of the icon you want to set. So for example:
MenuItem item3 = new MenuItem();
item3.setIcon("ui-icon-print");
Are you perhaps trying to use an image instead of an icon? There is a cheat sheet of predefined icons here: http://www.petefreitag.com/cheatsheets/jqueryui-icons/
If you are trying to create your own icon then you will need to do what #Ravi has indicated and create a custom CSS class which you will reference in the setIcon() method.
Related
I have a liferay theme for version 7.3. I am facing one problem in the theme's menu.
Now menu has some static items. How can I change (add / remove) items dynamically by admin account?
The menu is added in /src/templates/portal_normal.ftl as
<#include "${full_templates_path}/menu-bar.ftl" />
this file has static html data.
Now how can I make it dynamic so that admin can change the menu items?
Make the menu as a web content, and drag it to the theme? Not makes sense because menu is the part of the theme.
Or any other way of picking the menu items, looping the items in .ftl and display it?
The times of scripting navigation and menus in the theme are over, and I'd rather recommend to embed a portlet in your theme that does the job. That might be a stock NavigationMenu portlet (see how Liferay's default "classic theme" does this with NavigationMenu or the SearchBar), or a custom one, which generates exactly what you'd like.
Reason: It's a lot simpler to redeploy a new portlet and generate/test appropriate HTML markup generation in a portlet than it is to implement proper error handling in a theme's freemarker script.
The solution can be if you want to add your data in navigation menu in themes, go into the navigation menus inside site builder in menu and create a new menu by clicking + button on top right and name the menu. Then go into the pages inside site builder inside menu. There will be a + sign on public pages. Click that and add a page that you want to list. If you want to create a submenu then on the page that is created, create a subpage by clicking there + sign. The page will be child and will be shown as a sub menu in theme.
Through the admin GUI I want to use a page as Parent Navigation Item for a set of other pages. Instead of a Container.
Is there a way to make this possible?
First, you would have to create a plugin that overrides the dropdown template, since Bootstrap doesn't have clickable dropdowns in the navbar by default.
Then you would want the plugin to override the navigation form to show the Link field when navItem.type is "container".
Lastly, your plugin would need its own getBootstrapNav function, preferably in a custom service, that would inject the link into the dropdown item.
I have created menu and its child links like
About
contact us
portfolio
our location
I have used menu block to display sub menu only when about in click and display sub menus in another layer.
Now my requirement is when i click on any sub menu in parent menu then the parent menu should be active. To achieve this task i searched a lot off and found menu position module for this purpose. I have configured and specify page path in Restricted to certain pages, but now it is now working. What i have mistake or any other solution for this problem. Please let me know the right solution.
<?php
$block = module_invoke('menu_block', 'block_view', '1');
print render($block['content']);
?>
I am adding this code below the topbar menu. but inside the menubar wrapper.
If my understanding clear then you will need this menu - Menu Position https://www.drupal.org/project/menu_position
This module allows for the creation of rules that will dynamically add the current page into the menu system at the requested spots.
If you dont want to use this module then you will need to append menu-id in the menu link's li and then through jquery / js will need to add certain classes to parent menu items.
Actually there is no requirement to use any module for this situation. What i have done to achieve it. I just modified template.php of zurb foundation theme. i have copied the code(foreach loop code) from here and added to the template.php file as mentioned in the page and added the css like below:
#main-menu li.active-trail a,
#main-menu li a.active, #main-menu li a:hover {
background:#fec325;
/* IE6-9 */
}
and that's it. i have achieve what i want. I hope anybody who is looking same kind of problem can find this solution useful for this kind of requirement.
I have a GXT ContentPanel instance (cp). I attempt to add a Text object to the content panel as below:
Text text = new Text("Main Content Window");
cp.add(text);
However, the Text is not visible even though I did text.setVisible(true). In my debugger, I saw that the content panel (cp) does have the text object added to the cp.items list. However, the text object has "rendered = false" and "attached = false".
Thanks for Help!
you may add the text to ContentPanel using Label which is straight forward.
by the way text is not not component to add to the panel(Contentpanel/ layout container)
we can add only component to the container.
If ContentPanel is already rendered and you add anything to it you have to call cp.layout() to add new contents to the DOM. If you add the text before rendering it it's not necessary.
I have a Flex 4 TabBar component with a custom skin. In this skin, the item renderer is defined with an ButtonBarButton with a custom skin.
All the tabs in the itemrenderer have now the same width.
The client however wants me to make the tabs width dynamically, so a smaller tab for a smaller label, a bigger one for a long label.
Does anybody know how to adjust the width of Tab (ButtonBarButton)?
Thanks a million!
I found something that works.
Create a custom component that inherits from ButtonBarButton, call it CustomTabButton.
Add a bindable property tabWidth.
Then when we update tabWidth, the width of the tab is adjusted with it.
THis is how you update the skin:
set the host component to the custom class CustomTabButton.
In the SparkSkin definition, bind the width value to the hostComponents property tabWidth.
width="{hostComponent.tabWidth}"
The skin looks like this:
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
minHeight="54"
width="{hostComponent.tabWidth}"
xmlns:tabbar="be.boulevart.project.components.tabbar.*">
<!-- host component -->
<fx:Metadata>
<![CDATA[
[HostComponent("be.boulevart.project.components.tabbar.CustomTabButton")]
]]>
</fx:Metadata>