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>
Related
I'm using twitter bootstrap with JSF-2.2.4 and Spring 3.2.4 Framework. I've built a collapsible accordion based on the following tutorial: http://getbootstrap.com/javascript/#collapse
The code seems to work fine, but only if I start with opened accordions, meaning that I add the 'in' class to the div which inherits the content which is supposed to be collapsed. If I remove the 'in' class the accordion is opened by clicking the appropriate link, but the content is no displayed.
Content is plot created with plotfaces.
Any ideas?
Edit: I just tried filling the box with an image. This seems to work. Maybe this helps narrowing down the problem.
I don't know how this plotfaces work, but i expect your problem similair to fullcalendar not visible until button is clicked or window resized?
Try to set .collapse {display;block; visibilty:hidden;} instead of display none. If this don't helps try to focus on the height of the element. The plugin change the height from 0 to auto but on initial load the height is not set.
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.
My xe:applicationLayout is in my demoLayout.xsp CC. The left column width is set in the .lotusColLeft class to 220px by default. I can manually override this setting by adding the following CC to any XPage that needs a 300px wide Left column:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<style>
.lotusColLeft { width:300px }
.hugeWidth { width:2000px }
.lotusContent { overflow-x: scroll; }
</style>
</xp:view>
This works nicely, but I actually need a 400 and 500 pixel wide Left column for some xpages. Yes, could do this with 3 CCs like the one above, but was hoping for a better approach where I can simply set the desired width in a custom property at the time I add my demoLayout.xsp CC control to my xpage.
Any ideas?
Rather than putting the style tag directly on the Custom Control, how about using a Computed Field control with escape="false" (i.e. output as HTML). Then, in the value property, you can computed the width of the left column. Something like this works for me:
<xp:text escape="false"><xp:this.value><![CDATA[
<style>
.lotusColLeft {width:#{compositeData.passedWidth};}
</style>]]>
</xp:this.value></xp:text>
You can then add a passedWidth property on the Custom Control and pass the relevant width in. You could get more sophisticated and set the loaded property of the Computed Field so it only shows if the passedWidth property has been set.
I like Paul's suggestion, but another approach would be to define two conditionally rendered stylesheet resources on your layout custom control (or just one, with a computed href). The control could have a property of leftColumnWidth that accepts values of "small", "medium", or "large". If small, no additional stylesheets are rendered. Otherwise it renders one of the two. This way if you ever need to change the exact width associated with either (as well as other elements that might make sense to tweak to suit the adjusted layout), you can just change it in the stylesheet without having to touch each page.
I am using flex's layout feature to avoid the coding to align/position. How ever, it looks like though I hide (visible = false) any object, flex treats it as exists and doesn't re-align or re-position the controls as I expected.
I think, I can achieve it if I can add/remove the controls dynamically but I dont want to do that.
Does flex has the feature to ignore the invisible control and align the visibile controls only?
Below is the scenario
I have a with two in it. Either "any one" or "both" the buttons will be visible depending on the logic. No problem if I have to show both the buttons because they will be properly aligned. But if I have to show only one, the positions remain same as if both are visible.
Is there any way exists to re-align the controls when I hide/show something dynamically? That without having to add/remove
<s:Group width="100%" id="pricesGroup">
<s:layout>
<s:HorizontalLayout gap="5"/>
</s:layout>
<s:Button id="btnCoins" label="{coins.toString()}" chromeColor="#94E749"/>
<s:Button id="btnFlux" label="{flux.toString()}" chromeColor="#3B8DC7"/>
</s:Group>
You need to also mark the component out of the layout
<s:Group includeInLayout="false" />
if not, the component will keep reserved some space in the layout.
I want to change grid row color when I click a row in Wicket.
Do you have any suggestion?
Without actually seeing your code it's difficult to tell what is the more suitable way of doing this for you.
If you want to change to a specific color known at page generation time, do it client-side (javascript).
Make sure the grid row has a wicket:id so that Wicket can have control over it. Add it as a WebMarkupContainer if you haven't got it. Add a SimpleAttributeModifier for the onclick attribute that will change the css class of the element. For instance:
rowMarkupContainer = new WebMarkupContainer("row");
String javascript = "this.setAttribute('class', 'myClass');";
rowMarkupContainer.add(new SimpleAttributeModifier("onclick", javascript);
Where myClass is a CSS class that uses a new color.
Alternatively, you can always hardcode the onclick event handler in the HTML without specifying a wicket:id.