I use Slider xtype in dialog.xml
Is it possible to automatically display the value of this slider? for example - like a tooltip when the value changes
<slider
jcr:primaryType="cq:Widget"
fieldLabel="Tile Background Transparency"
name="./slider"
width="{Long}200"
value="42"
increment="1"
minValue="0"
maxValue="100"
xtype="slider"/>
You can use the sliderfield xtype which provides this functionality.
The useTips property allows to enforce the desired behaviour.
<slider
jcr:primaryType="cq:Widget"
fieldLabel="Tile Background Transparency"
name="./slider"
width="{Long}200"
value="42"
increment="1"
useTips="true"
minValue="0"
maxValue="100"
xtype="sliderfield"/>
Check out the docs for more information.
Related
I would like to use tooltip for sheet columns. Like
<pe:sheetcolumn headerText="Coverage Shape" value="#{material.coverageShape}" colWidth="250"
colType="dropdown"
selectItems="#{itemActionsManagedBean.getMapItems('coverageShape')}">
<pe:tooltip value="Coverage" atPosition="top" autoShow="true" />
</pe:sheetcolumn>
It doesn't show any tooltip. I tried to give id to sheetcolumn and tried to use in tooltip like referring by for attribute. But no luck. How can i show tooltips for sheetcolumns ?
My JSF VERSION : 2.2.1 PRİMEFACES AND PRIMEFACES EXTENSION VERSION : 6.2
I tried #Melloware solution but it didn't work.
I tried that. But didnt show me any error and didnt show tooltip.
<pe:tooltip value="Coverage" atPosition="top" global="true" for="#(.coverage)"/>
<pe:sheet id="someSheet" widgetVar="someSheetSheetWidget" value="#{itemActionsManagedBean.materials}" var="material"
extender="sheetExtender" height="300">
<pe:sheetcolumn headerText="Material Number" readOnly="true" value="#{material.materialNumber}" styleClass="coverage"
colWidth="250"/> </pe:sheet>
That won't work. OK remove that tooltip from inside the sheet and do this.
Add a custom style class coverage to the column like..
<pe:sheetcolumn headerText="Coverage Shape"
value="#{material.coverageShape}"
colWidth="250"
styleClass="coverage"
colType="dropdown"
selectItems="#{itemActionsManagedBean.getMapItems('coverageShape')}">
Add this global tooltip OUTSIDE of the sheet.
<pe:tooltip value="Coverage" atPosition="top" global="true" for="#(.coverage)" />
That should find every one of your cell values with coverage style and give it the tooltip.
How can I disable the animation when adding a new item to list view?
How to set animations/transitions when adding elements to a ListViews?
I tried this example, but it does not show any list footer for my list.
I have tried doing this:
<ListView>
<ListView.ItemContainerTransitions>
<ContentThemeTransition /> <!-- omit AddDeleteThemeTransition -->
</ListView.ItemContainerTransitions>
</ListView>
But that does not run, it crashes when I start the app.
There is this quirk as noted in the documentation for ItemsControl.ItemContainerTransitions property:
Important The XAML syntax for properties that have a TransitionCollection value is unusual in that you must declare an explicit TransitionCollection object element as the value, and then provide object elements as child elements of TransitionCollection for each of the transition animations you want to use. For most other XAML collection properties you could omit the collection object element because it can be implicit, but TransitionCollection doesn't support the implicit collection usage.
Try this XAML instead:
<ListView>
<ListView.ItemContainerTransitions>
<TransitionCollection>
<ContentThemeTransition /> <!-- You can even omit this transition if desired -->
</TransitionCollection>
</ListView.ItemContainerTransitions>
</ListView>
I have a GridView in a windows store app that has an ItemContainerStyleSelector. Within the style is an Image control that has a custom dependency property to set the source (This is so I can get a handle on the Image and hook up to the unloaded event).
My issue is the Image is never unloaded and seems to be reused. This means that when I set the source, the image is set on other items in the GridView as well (For Example I have an object which has no image but after scrolling away and then back again it has an image from another object).
I've tried to set virtualization mode to standard where I can but it doesn't help. Any ideas would be greatly appreciated.
Here is the Image that is contained in the style. This is passed to a method "OnRemoteURISourceChanged" when set. I'd expect a different image control whenever the method is called but this is not the case.
<Image x:Name="BackgroundImage" DataContext="{Binding CurrentBackdrop}" helpers:ImageExtensions.RemoteURISource="{Binding Uri}" Stretch="UniformToFill"/>
And here is my GridView
<GridView x:Name="ItemsGrid" Grid.Row="1" ItemsSource="{Binding BrowseResults}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" Margin="20,0,20,0"
IsItemClickEnabled="True" ItemClick="ItemsGrid_ItemClick" VirtualizingStackPanel.VirtualizationMode="Standard">
<GridView.ItemContainerStyleSelector>
<controls:UPnPCDStyleSelector CDObject="{StaticResource somestyle1}" Container="{StaticResource somestyle2}" Item="{StaticResource somestyle3}"/>
</GridView.ItemContainerStyleSelector>
<GridView.ItemsPanel>
<ItemsPanelTemplate VirtualizingStackPanel.VirtualizationMode="Standard">
<WrapGrid Orientation="Vertical" VirtualizingStackPanel.VirtualizationMode="Standard"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
UPDATE: The issue appears to be the WrapGrid. If I change this to a VirtualizingStack Panel and set the VirtualizationMode to Standard then everything works as expected but obviously my items then only appear on one line and not multiple lines as I wish.
How do I set the virtualization mode of a WrapGrid?
Is there a chance your helpers:ImageExtensions.RemoteURISource doesn't clear the Image.Source when either your CurrentBackdrop property or its Uri property value is null?
Are you sure the task which is loading the img source returns to default ui context when awaiting? I don't think it is a good idea to set Image.Source property form code. The better solution would be to create a custom observable task class and bind im source to it's result. In the background you can call the task. Do you need the control to be Image? Because if it would be a control with template, it would be easier for you to do that. I can send you the class which does that if you want to.
How does this code in the PrimeFaces DataTable row selection work?
<p:commandButton update=":form:display" oncomplete="confirmation.show()" image="ui-icon ui-icon-close" title="Delete">
<f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
</p:commandButton>
I am confused by the following: update=":form:display", and image="ui-icon ui-icon-close".
Is this inbuilt into Primefaces? or do I need to create an additional form, or have an external image mapped to it?
update=":form:display" refers to a specific element on the page. The first ':' goes to the root of the page, so there needs to be a component with the id "form" (probably a form) and inside that a component with the id "display". This means after the button actions has completed :form:display will be updated. Note that it's generally not a great idea to use absolute paths as they can be hard to keep up to date when you change the page structure. If the button is on the same level as the "display" component you could just do update="display", or you can do things like update="#form" to update the entire current form.
image="ui-icon ui-icon-close" refers to style classes in your css. These two comes predefined with primeface, but if you want to use custom graphics you can also define your own style classes for them.
can someone explain what the the contextmenu attribute does and if it can be used with all the HTML elements and can someone point me to some online demos/examples?
The contextmenu attribute refers to the <menu> element the user agent should render when a context menu is requested by the user (e.g. using the right mouse button or the Menu/Hyper key on modern keyboards.
You can find an example here.
You can see how it may look like in this demo:
https://bug617528.bugzilla.mozilla.org/attachment.cgi?id=554309
At the time of writing only FireFox 8 supports it.
The context menu appears when the user right-clicks on an interface element. The contextmenu attribute is the ID of a <menu> element to open when the user right clicks on the element with this attribute.
Quoting for you to understand easily:
The contextmenu attribute allows you
to display a menu without taking up
valuable UI space for the menu. It is
a menu which fires on events, such as
mouseup or keyup providing a bubble
menu which provides options and
actions based on those selections.
Source: http://net.tutsplus.com/tutorials/html-css-techniques/html5-globals-and-you/
See official link for more information:
http://www.w3.org/TR/html5/interactive-elements.html
The contextmenu should be used on an input field to specify which menu element is for the field. The menus look sort of like the right click menu or a dropdown box however they are not implemented in any browser yet so you should avoid using them.
This may help clear things up:
http://dev.w3.org/html5/spec-author-view/interactive-elements.html
<form name="npc">
<label>Character name: <input name="char" type="text" contextmenu="namemenu" required></label>
<menu type="context" id="namemenu">
<command label="Pick random name" onclick="document.forms.npc.elements.char.value = getRandomName()">
<command label="Prefill other fields based on name" onclick="prefillFields(document.forms.npc.elements.char.value)">
</menu>
</form>
http://www.w3.org/TR/html5/interactive-elements.html#context-menus