I'm using gxt to my application.
I won't to align the ContentPanel's header ToolButtons to the left instaed to the right (which is the defualt)
there is no method such as setHorizontalAlogment.
any suggestions how to do that?
I don't see any method offered by GXT to achieve this. But I found a way to do this. Here is the code that demonstrates how you can achieve this.
public class CustomPanel extends ContentPanel {
public CustomPanel() {
super();
addListener(Events.Render, new Listener<BaseEvent>() {
#Override
public void handleEvent(final BaseEvent be) {
final HorizontalPanel panel = getWidgetPanel(getHeader());
panel.setStyleAttribute("float", "left");
}
});
}
//widgetPanel is private. It can be accessed using JSNI
private native HorizontalPanel getWidgetPanel(Component header)/*-{
return header.#com.extjs.gxt.ui.client.widget.Header::widgetPanel;
}-*/;
}
try to set the position through the style .. float: left
Related
When I put this control on to a form, change it's size and location, save it and close the form. After opening it, location and size are not the same, but in ".Designer.cs" it's exactly how I set it.
I can't find a solution to this problem, not even someone mentioning it.
This is a simple example of a custom control I am using:
[Designer(typeof(myControlDesigner1))]
public partial class UserControl1 : UserControl
{
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[TypeConverter(typeof(Panel))]
[MergableProperty(false)]
public System.Windows.Forms.Panel Panel
{
get
{
return pnlWorkingArea;
}
set
{
pnlWorkingArea = value;
}
}
public UserControl1()
{
InitializeComponent();
}
}
public class myControlDesigner1 : ControlDesigner
{
public override void Initialize(IComponent component)
{
base.Initialize(component);
UserControl1 bc = component as UserControl1;
EnableDesignMode(bc.Panel, "MyPanel");
}
}
Yes I can reproduce your issue now, that is because the panel is inside usercontrol, they are added as a whole to the Form, that means the location of the panel is relative to usercontrol, so if you set the location of the panel is (x, y), then when you reopen the form, the actual location of the panel will be (usercontrol.location.X+x, usercontrol.location.Y+y).
You can find there is not any problem if you set the location of the usercontrol in the form is (0, 0), please have a try.
If you do not want to set the location of the usercontrol is (0, 0), as an alternative solution, you can add the following code in Form_Load event, so the location will be where you set it when you run the form:
private void Form1_Load(object sender, EventArgs e)
{
this.userControl11.Panel.Location = new Point(userControl11.Panel.Location.X - userControl11.Location.X, userControl11.Panel.Location.Y - userControl11.Location.Y);
}
I would like to create buttons like these for settings panel navigation:
Can you tell me how I can create this hover effect over the icons? The most difficult part for me is to create CSS code which looks like the the picture.
Although the above answer works. You should really do this completely in CSS using pseudo-selectors:
java:
btnsa.getStyleClass().add("myButton");
css:
.myButton {
-fx-background-color:transparent;
}
.myButton:hover {
-fx-background-color:#dae7f3;
}
You have to use MouseEntered and MouseExited events for getting hover effects over the icons.
try this its working.........
btnsa.setStyle("-fx-background-color:transparent;");
btnsa.setGraphic(new ImageView(new Image(getClass().getResourceAsStream("JavafxSm.gif"))));
btnsa.setOnMouseEntered(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent t) {
btnsa.setStyle("-fx-background-color:#dae7f3;");
}
});
btnsa.setOnMouseExited(new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent t) {
btnsa.setStyle("-fx-background-color:transparent;");
}
});
some snap shots of above code......
Instead, you can do just 1 line code in CSS, if your FXML file connected with CSS
yourButtonId:hover{-fx-background-color: #6695e2}
In a cross platform Xamarin app built with the MvvmCross framework I'm using a ToggleButton Widget in an Android .axml layout. I've bound the Checked property to a View Model property using a converter using the following binding syntax:
Checked MarketBuySellViewModel.Direction, Converter=DirectionBool, ConverterParameter='Sell'
Everything works well. On the iOS side, it appears you can use UIButton as a ToggleButton by using the Selected property. This implies that the following binding should achieve what I want on iOS:
set.Bind (SellButton).For(b => b.Selected).To (vm => vm.MarketBuySellViewModel.Direction).WithConversion("DirectionBool", "Sell");
I don't get any binding errors in the application output but the binding itself doesn't seem to work. Clicking the button doesn't set the Direction property and setting the direction to a different value does not set the Selected property on the UIButton.
Do I need to create a Custom Binding or am I simply setting up the binding incorrectly?
I also tried using a UISegmentedControl to achieve the same effect. Is binding to this control supported at all in MvvmCross? I don't see any reference to it in the source code. Does this mean I need to create custom bindings for it too?
For the UIButton, I don't believe there's any included Selected binding built into MvvmCross. Because of this - and because Selected doesn't have a simple paired event SelectedChanged, then I believe Selected binding should work one-way (from ViewModel to View) but not two-way.
There is a binding for the On of a UISwitch control and that's the control I've seen used most in these situations.
If you wanted to add a custom 2-way binding for Selected then I guess you'd have to do this using the ValueChanged event (but would need to check that is correct).
To do so, you'd just build a target binding something like:
public class MvxUIButtonSelectedTargetBinding : MvxPropertyInfoTargetBinding<UIButton>
{
public MvxUIButtonSelectedTargetBinding(object target, PropertyInfo targetPropertyInfo)
: base(target, targetPropertyInfo)
{
var view = View;
view.ValueChanged += HandleValueChanged;
}
private void HandleValueChanged(object sender, System.EventArgs e)
{
var view = View;
if (view == null)
return;
FireValueChanged(view.Selected);
}
public override MvxBindingMode DefaultMode
{
get { return MvxBindingMode.TwoWay; }
}
protected override void Dispose(bool isDisposing)
{
base.Dispose(isDisposing);
if (isDisposing)
{
var view = View;
if (view != null)
{
view.ValueChanged -= HandleValueChanged;
}
}
}
}
and this could be registered in Setup in protected override void FillTargetFactories(IMvxTargetBindingFactoryRegistry registry) using something like:
registry.RegisterPropertyInfoBindingFactory(typeof(MvxUIButtonSelectedTargetBinding), typeof(UIButton),
"Selected");
Similarly, I don't believe anyone has added a two way UISegmentedControl binding yet - but would happily see one added.
Building a two way UISegmentedControl binding would be quite straight-forward - you'd just have to bind to the pair SelectedSegment and ValueChanged - with code similar to above.
Alternatively, you could switch to using a custom MySegmentedControl which had a nicer Value`ValueChanged` pair which would automatically work without a custom binding - e.g.:
public class MySegmentedControl : UISegmentedControl
{
// add more constructors if required
public int Value
{
get { return base.SelectedSegment; }
set { base.SelectedSegment = value; }
}
}
If any or all of these custom bindings are needed, then the Mvx project is happy to get these bindings added as issues or pull requests along with test/demo UIs in the https://github.com/slodge/MvvmCross-Tutorials/blob/master/ApiExamples/ApiExamples.Touch/Views/FirstView.cs project
Could be helpful to someone else, so i'm sharing my experience. I needed a two way binding for UISegmentedControl.SelectedSegment property to a ViewModel. The one way biding (ViewModel => View) works by default. I couldn't able to properly utilize the solution proposed by Stuart - to subclass the UISegmentedControl. I tried to ensure that the linker does not rip off the new custom control code, but this didn't help me a bit. So a perfectly viable solution is the one with MvxPropertyInfoTargetBinding. Here is the code working ok for me:
public class MvxUISegmentedControlSelectedSegmentTargetBinding : MvxPropertyInfoTargetBinding<UISegmentedControl>
{
public MvxUISegmentedControlSelectedSegmentTargetBinding(object target, PropertyInfo targetPropertyInfo)
: base(target, targetPropertyInfo)
{
this.View.ValueChanged += HandleValueChanged;
}
private void HandleValueChanged(object sender, System.EventArgs e)
{
var view = this.View;
if (view == null)
{
return;
}
FireValueChanged(view.SelectedSegment);
}
public override MvxBindingMode DefaultMode
{
get { return MvxBindingMode.TwoWay; }
}
protected override void Dispose(bool isDisposing)
{
base.Dispose(isDisposing);
if (isDisposing)
{
var view = this.View;
if (view != null)
{
view.ValueChanged -= HandleValueChanged;
}
}
}
}
public class Setup : MvxTouchSetup
{
...
protected override void FillTargetFactories(IMvxTargetBindingFactoryRegistry registry)
{
registry.RegisterPropertyInfoBindingFactory(typeof(MvxUISegmentedControlSelectedSegmentTargetBinding), typeof(UISegmentedControl), "SelectedSegment");
}
}
I am currently working on a javaFX 2.0 game and I want to know how to make it so when I type a specific key something will happen. Thank You for taking your time for reading this.
Make your root node focused and then write your logic in the setOnKeyPressed method.
Sample code:
root.setFocusTraversable(true);
root.setOnKeyPressed(new EventHandler<KeyEvent>() {
#Override
public void handle(KeyEvent kEvent) {
if (kEvent.getCode() == KeyCode.SPACE) {
System.out.println("Space Bar pressed");
}
}
});
I have a small problem: my text field keeps selecting itself, for example if I alt-tab from and to application.
For my application, text selection is not needed and will not be used - so I want to disallow this annoying behavior. Actually, just setting selection color to transparent or white will work fine.
Is there some way to do this?
The following css fixed the problem for me:
-fx-highlight-fill: null;
-fx-highlight-text-fill: null;
You can disable text selection for key events:
myTextField.addEventFilter(KeyEvent.KEY_TYPED, new EventHandler<KeyEvent>() {
#Override
public void handle(KeyEvent inputevent) {
if (!myTextField.getSelectedText().isEmpty()) {
myTextField.deselect();
}
}
});
For mouse events you could also use:
myTextField.addEventFilter(MouseEvent.MOUSE_DRAGGED, new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
if (!myTextField.getSelectedText().isEmpty()) {
myTextField.deselect();
}
}
});
Super late for an answer, but I have a better solution.
Instead of disabling the style for selected text or managing mouse events, it's better to directly manage the selectedTextProperty().
The advantages of this solution are:
The selection properties will always be empty selection
Double clicks are also covered, not only mouse drag events
The code...
textField.selectedTextProperty().addListener((observable, oldValue, newValue) -> {
if (!newValue.isEmpty()) textField.deselect();
});