Apache Pivot: Swapping pane visibility - apache-pivot

I'm having a problem hiding one pane and showing another in my Apache Pivot app. In my BXML file I have two BoxPanes in a window. Pane 1 starts visible and pane 2 starts hidden:
<BoxPane bxml:id="pane1" orientation="vertical" styles="{horizontalAlignment:'center', verticalAlignment:'center'}">
<Label text="Pane 1"/>
<PushButton bxml:id="startButton" buttonData="Start"/>
</BoxPane>
<BoxPane bxml:id="pane2" orientation="vertical" visible="false" styles="{horizontalAlignment:'center', verticalAlignment:'center'}">
<Label text="Pane 2"/>
</BoxPane>
And I have a listener added to the button that should make pane 1 hidden and pane 2 visible:
#BXML private PushButton startButton = null;
#BXML private BoxPane pane1 = null;
#BXML private BoxPane pane2 = null;
#Override
public void initialize(Map<String, Object> namespace, URL location, Resources resources)
{
startButton.getButtonPressListeners().add(new ButtonPressListener()
{
#Override
public void buttonPressed(Button button)
{
start();
}
});
}
private void start()
{
pane1.setVisible(false);
pane2.setVisible(true);
}
When I click the button though, pane 1 is hidden and pane 2 never shows up. Same thing happens when I reverse the order of the statements in start().
Interestingly enough, when I comment out pane1.setVisible(false), then pane 2 does show up when I click the button.
This is my first Pivot app, so maybe there's some fancy container that does what I want to do in a better way, but I'd still like to know what is going on here. What I'm trying to do seems pretty simple, and I'm sort of baffled why it doesn't work.

You might want to try using a CardPane to switch between your two views. The tutorial on that is here: http://pivot.apache.org/tutorials/card-panes.html
The basic idea is to have the CardPane "host" your two BoxPanes, something like this:
<CardPane bxml:id="cardPane">
<BoxPane bxml:id="pane1" ...>
<Label text="Pane 1"/>
...
</BoxPane>
<BoxPane bxml:id="pane2" ...>
<Label text="Pane 2"/>
</BoxPane>
</CardPane>
Make both BoxPanes visible. Then when you want to change between them, use cardPane.setSelectedIndex(...);

Related

WU app XAML binding to Button grid from custom collection

I'm quite new to XAML trying to make grid with Toggle buttons
Something like this:
<GridView ItemSource="{Binding ButtonCollection}">
<GridView.ItemTemplate>
<DataTemplate>
<ToggleButton Content="{Binding Label}" IsEnabled="{Binding BEnabled}" IsChecked="{Binding BChecked, Mode=TwoWay}"/>
<DataTemplate>
</GridView.ItemTemplate>
</GridView>
I have
ObservableCollection<ButtonClass> ButtonCollection
also class for buttons
class ButtonClass
{
public string Label {get; set;}
public bool BEnabled {get; set:}
public bool BChecked {get;set;}
}
binding works when page loads buttons are displayed from ObservableCollection
But I want collection to update when button IsChecked value changes
also is there any way to bind function to click method like:
Click="{Binding DoWhenClicked}"
Now it just results in error I think that is because DoWhenClicked isn't in ItemSource.
Summary:
I want to have Grid of toggle buttons that binds to some sort of list/array/collection of data with label, checked status, enabled status.
When toggle button is checked I want it to reflect in my collection.
Also I want to bind event to Click method so that i can perform operations like disable some Toggle Buttons when other button is checked.
What is good way to do this.
I noticed that you asked several question about Template 10 before, so I supposed that you also used Template 10 here for MVVM pattern.
binding works when page loads buttons are displayed from ObservableCollection But I want collection to update when button IsChecked value changes
In Template 10 project, if you want to get notified when parameter in the data model (here means your ButtonClass), you can derive your class from BindableBase. If you check the BindableBase class you will find that it has done the work of INotifyPropertyChanged, it will be much easier here deriving from BindableBase directly rather than implementing INotifyPropertyChanged by yourself.
also is there any way to bind function to click method
Also I want to bind event to Click method so that i can perform operations like disable some Toggle Buttons when other button is checked.
Instead of Click event, I personally recommend you to using Command in MVVM pattern, and you may want to know which Button is clicked, so you can use CommandParameter here. I created a blank template 10 project and here is my sample:
<GridView x:Name="gridView" RelativePanel.Below="pageHeader" Margin="16,12,0,0" ItemsSource="{x:Bind ViewModel.ButtonCollection}">
<GridView.ItemTemplate>
<DataTemplate>
<ToggleButton Width="100" Content="{Binding Label}" IsEnabled="{Binding BEnabled}"
IsChecked="{Binding BChecked, Mode=TwoWay}" Command="{Binding ToggleBtnClickCommand}"
CommandParameter="{Binding Label}" />
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
The ButtonClass is like this:
public class ButtonClass : BindableBase
{
public string Label { get; set; }
public bool BEnabled { get; set; }
private bool _bChecked;
public bool BChecked
{
get { return _bChecked; }
set
{
_bChecked = value;
RaisePropertyChanged();
}
}
public ICommand ToggleBtnClickCommand { get; set; }
}
And the MainPageViewModel:
public class MainPageViewModel : ViewModelBase
{
public ObservableCollection<ButtonClass> ButtonCollection;
public MainPageViewModel()
{
ButtonCollection = new ObservableCollection<ButtonClass>();
for (int i = 0; i < 20; i++)
{
ButtonCollection.Add(new ButtonClass
{
Label = "TButton " + i,
BChecked = true,
BEnabled = true,
ToggleBtnClickCommand = new DelegateCommand<string>(ToggleBtnClicked)
});
}
}
public void ToggleBtnClicked(string obj)
{
var buttonLable = obj;
}
}
In case you need to check my sample, you can find my demo here.
There are a few concepts that are missing from your code that you need to properly implement for this to work
INotifyPropertyChanged -> Your ButtonClass class acts as a view model for your view. As such, for values to properly update UI and the other way around you need your class to implement it and all your properties to raise the PropertyChanged event when their values change (in the setter)
2-Way bindings -> If you want your ButtonClass instance to update when you click the button and you want your button to change state if you change the property in the ButtonClass, your bindings need to be Mode=TwoWay. You might want to explore the new Bindings {x:Bind} for better performance
Commands -> To bind the click event, you need to use the Command property. You would need to create a ICommand implementation, and create a property in your ButtonClass. The use Command property of the Button to bind to that Command.
Essentially, everything I mentioned are components of an MVVM framework, of which there are many out there. Here are some of the more popular ones: Caliburn, MVVMCross, Prism.
There's also a great starter kit for Windows 10 that will definitely kick start your app and contains a lot of this classes already built - Template10

XAML c# get window location

How do programmers for XAML C# find the current position of a wpf application's window? there is a function to find the startup location but it's crucial that when the window is moved by dragging it to another side the position changes, so i always need the current position so that another function acts accordingly relative to the wpf window position.
I am not sure about how to find window position but using cursor I have done it to find the current location, may be that can guide you. for knowing the current position of cursor you should be inside the window else it will always sho 0,0. Code is like this:
Xaml File:
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Application 2" Height="350" Width="325"
MouseDown="Window_MouseDown"
AllowDrop="True" DragOver="Window_DragOver">
<StackPanel>
<Label Name="lblInfo1" Content="Info 1"/>
<Label Name="lblInfo2" Content="Info 2"/>
</StackPanel>
</Window>
C# file:
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
DragDrop.DoDragDrop((DependencyObject)e.Source, "Sample", DragDropEffects.Copy);
}
private void Window_DragOver(object sender, DragEventArgs e)
{
System.Windows.Point p1 = Mouse.GetPosition(this);
lblInfo1.Content = string.Format("Mouse.GetPosition: {0}, {1}", p1.X, p1.Y);
System.Windows.Point p2 = e.GetPosition(this);
lblInfo2.Content = string.Format("DragEventArgs.GetPosition: {0}, {1}", p2.X, p2.Y);
}
Try it.
For code-behind binding button with event:
private void b_Click(object sender, EventArgs e)
{
// your code...
}
Xaml file:
<Button Click="ButtonClicked">Button</Button>

While typing in a text field enable a keystroke ENTER to activate a button in JavaFX

Such as typing into the Google search box the hitting ENTER activates the search
I've just been introduced to JavaFX and Scene Builder a few days ago so I'm learning the basics here. I have the latest version of JavaFX and am using Scene Builder to facilitate action events. Also, any pointers to relevant tutorials would be helpful. At one point in the day I was focused on the Keyboard section of the coding panel of Scene Builder, especially with the "On Key Released" event with no results. Thanks in advance
Here's a rough idea of what I'm trying to do:
#FXML
Text Field theTextField;
#FXML
Button theButton;
#FXML
void ButtonPressed() {
//do stuff here
}
#FXML
//when ENTER is pressed the button is activated
void textFieldEnterPressed() {
ButtonPressed();
}
In your FXML file, add a onKeyPressed handler
<TextField fx:id="yourTextField" onKeyPressed="#handleEnterPressed">
Implement the handler in you Controller
#FXML
public void handleEnterPressed(KeyEvent event)
if (event.getCode() == KeyCode.ENTER) {
// do some actions
}
}
In TextField, when you press Enter, you get notification through onAction. In your Java code you can add:
#FXML
private void handleTFAction(ActionEvent event) {
TextField source = (TextField)event.getSource();
System.out.println("You entered: "+source.getText());
}
In your FXML (or through JavaFX SceneBuilder designer) hook it up to your TextField's OnAction event. In FXML it looks something like this:
<TextField onAction="#handleTFAction" ... />

adding duplicate components to a JSF panel grid

I am reasonably new to Java/JSF development (previously Mainframe legacy) so I am hoping someone will be able to let me know if what I am about to ask is possible and how to do it. Or at least point me in the right direction.
I'm trying to create a portlet where I can add the same component over and over again up to a maximum of 30 times. Eventually the data behind these components will be different in each one but from the same database. What I've done so far is create a container component and a button which calls a method to add something to the container. Like as follows:
<h:body>
<h:form>
<ice:panelGrid binding="#{simpleBean.containerComponent}"/>
<br/>
<ice:commandButton value="add new section" action="#{simpleBean.addComponent}" />
</h:form>
</h:body>
What I'm struggling with is the backing bean to create and render the component. At the minute I am just trying to create anything that repeats. The final code will be more complex than this.
private HtmlPanelGrid containerComponent;
private int i = 1;
public void addComponent() {
UIColumn uiColumn = new UIColumn();
uiColumn.setId("UIColumn_"+i);
HtmlOutputText htmlOutputText = new HtmlOutputText();
htmlOutputText.setId("HtmlOutputText_"+i);
htmlOutputText.setValue("HtmlOutputText_1_Value");
HtmlInputText htmlInputText = new HtmlInputText();
htmlInputText.setId("HtmlInputText_"+i);
htmlInputText.setValue("HtmlInputText_1_Value");
uiColumn.getChildren().add(htmlOutputText);
uiColumn.getChildren().add(htmlInputText);
if (containerComponent == null) {
containerComponent = new HtmlPanelGrid();
}
containerComponent.getChildren().add(uiColumn);
i++;
}
I can get the code to render something the first time the button is clicked but nothing happens subsequently. In an ideal world I'd get 30 of the same component displayed on the screen.
Can anyone offer any advice?
Thank you in advance.
Chris

wpf -shorcut key for image button

On my wpf window, I have got an image button. Does anyone have any idea how to assign a short cut for this button like "Cntrl + O".
I can put "_" to trigger click on normal button.
<Button Margin="89,73,114,106" Name="button1" Click="button1_Click">
<StackPanel Name="_StackPanel">
<Image Source="image.png" ></Image>
</StackPanel>
</Button>
In WPF general keyboard shortcuts (unlike the special case of Alt access keys) aren't assigned to buttons, they are assigned to actions. When you want both a Button (or menu item, multiple buttons, etc.) and a key command for the same action you can use a single Command for both. For a custom RoutedCommand you can assign KeyGestures to fire the command:
public static RoutedCommand MyCommand { get; private set; }
static Window1()
{
MyCommand = new RoutedCommand("MyCommand", typeof(Window1), new InputGestureCollection { new KeyGesture(Key.O, ModifierKeys.Control) });
}
public Window1()
{
InitializeComponent();
CommandBindings.Add(new CommandBinding(MyCommand, (_, e) => MessageBox.Show("Command fired")));
}
And then also assign it as the Button's Command:
<Button Content="Click Me" Command="{x:Static local:Window1.MyCommand}"/>

Resources