I want to disable the default animation on items in a BrowseFragment when they are selected ie scaling animation and the change of position. I want the items to stay where they are and not change their size when selected.
So far I tried various things on my ListRowPresenter object like setting the OnItemViewSelectedListene to null but without successful effect.
How can I achieve this ? (I'm using the version 26 of the leanback library)
You can set the zoom factor for the animation to none by passing in ZOOM_FACTOR_NONE to the constructor of the ListRowPresenter.
There is a constructor for ListRowPresenter to control the animation (focusZoom).
From the documentation:
ListRowPresenter (int focusZoomFactor)
Constructs a ListRowPresenter with the given parameters.
Parameters
focusZoomFactor int: Controls the zoom factor used when an item view is focused. One of ZOOM_FACTOR_NONE, ZOOM_FACTOR_SMALL, ZOOM_FACTOR_XSMALL, ZOOM_FACTOR_MEDIUM, ZOOM_FACTOR_LARGE Dimming on focus defaults to disabled.
Example:
ArrayObjectAdapter adapter =
new ArrayObjectAdapter(new ListRowPresenter(ZOOM_FACTOR_NONE));
setAdapter(adapter);
ArrayObjectAdapter rowAdapter =
new ArrayObjectAdapter(new MyCardViewPresenter(getContext()));
HeaderItem header = new HeaderItem("Header Title");
ListRow row = new ListRow(header, rowAdapter);
for (Video video : videos) {
rowAdapter.add(video);
}
adapter.add(row);
Related
I use a Thread to change the opacity of an AnchorPane.
I add an onMouseEnter method to raise opacity gradually,and an onMouseExited method to decrease opacity gradually.
I have two panes, if my mouse enter any one of them,both two panes will change opacity.
Then I start my application, I find that after my mouse enter and exit the pane for some times, one will stop at a specific opacity,while the other still change opacity gradually.
I am confused why this happen...
My codes are like:
private double base = 0.5;
private void changeOpacity(boolean increase){
new Thread(()-> {
while((increase && base < 0.9) || ((!increase)&&base > 0.5)){
base += increase?0.01:-0.01;
leftPane.setOpacity(base);
rightPane.setOpacity(base);
Thread.sleep(5);
}
}
}
I am sorry for my poor English.
Thanks.!
You are only allowed to change values of JavaFX components while you are on the JavaFX-Thread (something you are clearly not).
You need to sync yourself back using Platform.runLater(Runnable) but in your case you'd swap the event loop with Runnables which an equally bad idea.
The correct way is:
Use a Timeline with a KeyFrame
Use the already predefined FadeTransition foreach Node (together with a ParallelTransition)
I have a couple of OptionGroups with very long captions that run across the width of the page, which looks very bad. I tried restricting the width of the OptionGroup using setWidth and via CSS, and also tried restricting the width of the parent container; all without effect.
So I made a grid layout with an option group in the first column (spanning all rows), and individual labels for the captions in the second column (one per row). However, in case the captions span multiple lines (which they do in my case), this leads to the radio buttons / checkboxes no longer being aligned to the captions. (Regrettably, I'm not allowed to post images.) For instance,
(o) This is a multiline
(o) caption
This is another multiline
caption
I resolved this by creating one OptionGroup per label, and adding each option group in the first column:
(o) This is a multiline
caption
(o) This is another multiline
caption
Clearly, in case of radio buttons, this means multiple buttons can be selected at the same time, since they are no longer linked via a single OptionGroup. Therefore, I registered listeners which, each time a button is selected, de-select all other buttons. And this brings me to my problem; since this "unchecking" is done at the server side, there will unavoidably be some lag, meaning that for some time, multiple radio buttons will appear selected at the client side.
Any ideas on how to resolve this? I only started working with Vaadin recently, so I'm far from an expert. Is there some simple way of restricting the caption width (some magical undocumented CSS class), or do I need to extend / adapt the client-side widget implementation?
Thanks,
William
What you need is FlexibleOptionGroup add-on.
Here is an example implementation:
#Override
protected void init(VaadinRequest request) {
Container cont = new IndexedContainer();
cont.addContainerProperty("caption", String.class, "");
// very long strings in the following setValue() methods
cont.getContainerProperty(cont.addItem(), "caption").setValue("I have...");
cont.getContainerProperty(cont.addItem(), "caption").setValue("So I ma...");
FlexibleOptionGroup fog = new FlexibleOptionGroup(cont);
fog.setCaption("FlexibleOptionGroup:");
fog.setItemCaptionPropertyId("caption");
fog.setMultiSelect(true); // force using CheckBoxes
VerticalLayout fogLayout = new VerticalLayout();
Iterator<FlexibleOptionGroupItemComponent> iter;
iter = fog.getItemComponentIterator();
while(iter.hasNext()) {
// OptionGroupItem part (CheckBox or RadioButton)
FlexibleOptionGroupItemComponent fogItemComponent = iter.next();
// CustomComponent part
Label caption = new Label(fogItemComponent.getCaption());
caption.setWidth(400, Unit.PIXELS);
fogLayout.addComponent(new HorizontalLayout(fogItemComponent, caption));
}
setContent(fogLayout);
}
The above code produces:
I'm looking for some method to change grid column's width (or row's height) by animtion defined in Storyboard. I have already found some solutions for WPF apps, but they are all useless in case of Windows Store programming, eg.:
Grid Column changing Width when animating
how to change the height of a grid row in wpf using storyboard
http://www.codeproject.com/Articles/18379/WPF-Tutorial-Part-2-Writing-a-custom-animation-cla
Is such result obtainable by creating a custom class, inheriting from Timeline? If so, which components should be overrode for proper implementation?
You should be able to use a simple DoubleAnimation. Make sure to set EnableDependentAnimation=True, as outline here.
One thing to realize when trying things out is that ColumnDefinitions are a GridLength struct. You can find more information on them here. You will need to have the animation set the Value property.
Here is a sample method to animate a Grid ColumnDefinition MaxWidth.
private void Animate(ColumnDefinition column)
{
Storyboard storyboard = new Storyboard();
Duration duration = new Duration(TimeSpan.FromMilliseconds(500));
CubicEase ease = new CubicEase { EasingMode = EasingMode.EaseOut };
DoubleAnimation animation = new DoubleAnimation();
animation.EasingFunction = ease;
animation.Duration = duration;
storyboard.Children.Add(animation);
animation.From = 1000;
animation.To = 0;
animation.EnableDependentAnimation = true;
Storyboard.SetTarget(animation, column);
Storyboard.SetTargetProperty(animation, "(ColumnDefinition.MaxWidth)");
storyboard.Begin();
}
I have a several chart components that I have created in Flex. Basically I have set up a special UI that allows the user to select which of these charts they want to print. When they press the print button each of the selected charts is created dynamically then added to a container. Then I send this container off to FlexPrintJob.
i.e.
private function prePrint():void
{
var printSelection:Box = new Box();
printSelection.percentHeight = 100;
printSelection.percentWidth = 100;
printSelection.visible = true;
if (this.chkMyChart1.selected)
{
var rptMyChart1:Chart1Panel = new Chart1Panel();
rptMyChart1.percentHeight = 100;
rptMyChart1.percentWidth = 100;
rptMyChart1.visible = true;
printSelection.addChild(rptMyChart1);
}
print(printSelection);
}
private function print(container:Box):void
{
var job:FlexPrintJob;
job = new FlexPrintJob();
if (job.start()) {
job.addObject(container, FlexPrintJobScaleType.MATCH_WIDTH);
job.send();
}
}
This code works fine if the chart is actually displayed somewhere on the page but adding it dynamically as shown above does not. The print dialog will appear but nothing happens when I press OK.
So I really have two questions:
Is it possible to print flex components/charts when they are not visible on the screen?
If so, how do I do it / what am I doing wrong?
UPDATE:
Well, at least one thing wrong is my use of the percentages in the width and height. Using percentages doesn't really make sense when the Box is not contained in another object. Changing the height and width to fixed values actually allows the printing to progress and solves my initial problem.
printSelection.height = 100;
printSelection.width = 100;
But a new problem arises in that instead of seeing my chart, I see a black box instead. I have previously resolved this issue by setting the background colour of the chart to #FFFFFF but this doesn't seem to be working this time.
UPDATE 2:
I have seen some examples on the adobe site that add the container to the application but don't include it in the layout. This looks like the way to go.
i.e.
printSelection.includeInLayout = false;
addChild(printSelection);
Your component has to be on the stage in order to draw its contents, so you should try something like this:
printSelection.visible = false;
application.addChild(printSelection);
printSelection.width = ..;
printSelection.height = ...;
...
then do the printing
i'm not completely sure, but in one of my application I have to print out a complete Tab Navigator and the only method i have found to print it is to automatically scroll the tabnavigator tab in order to show the component on screen when i add them to the printjob.
In this way they are all printed. Before i created the tabnaviagotr scrolling the print (to PDF) result was a file with all the pages of the tab but only the one visible on screen really printed.
I embed SVG graphics in my Flex application using
package MyUI
{
public class Assets
{
[Embed(source="/assets/pic.svg"]
[Bindable]
public static var svgPic:Class;
}
}
and then extending the Tree class with some of my own code, setting the icon upon adding a node to the data provider:
public class MyTree extends Tree
{
public function MyTree()
{
// ...
this.iconField = "svgIcon";
// ...
this.dataProvider = new ArrayCollection;
this.dataProvider.addItem({ /* ... */ svgIcon: MyUI.Assets.svgPic /* ... */ });
// ...
}
}
Now I have two things I want to do:
use the SVG graphics in multiple places in the app, scaling them to the appropriate size for each appearance, i. e. scale them to a proper icon size when using them in the tree
change the size of the icon at runtime, e. g. display a slightly larger icon for selected items or let an icon "pulse" as a response to some event
I read the Flex documentation on the 9-slice scaling properties in the Embed tag, but I think that's not what I want.
Edit:
I unsuccessfully checked the "similar questions" suggested by SO, among others this one:
Flex: Modify an embedded icon and use it in a button?
Subclass mx.controls.treeClasses.TreeItemRenderer and make it resize the icon to your desired dimensions, or create your own item renderer implementation by using the same interfaces as TreeItemRenderer. Set a custom item renderer with the itemRenderer property:
exampleTree.itemRenderer = new ClassFactory( ExampleCustomItemRendererClass );
The answer to this question might point you in the right direction, without knowing more about the trouble you're having:
Flex: Modify an embedded icon and use it in a button?
Hope it helps!