I want my textfield to get blue color shadow when the user taps on the textfield to enter text. I would like to get an example that would update the inputCls inside focus event.
I have set the inpuCls while creating the textfield. I wanted to how know to add it inside FOCUS event.
can anyone help me on this. thanks in advance
You can add a listener in your TextField that listens to the event focus.
The listener can then change the inputCls to what you want.
If you want, you can then listen to the blur event to revert the changes with the same logic.
I strongly suggest you read the documentation about events :
http://docs.sencha.com/touch/2.0.2/#!/guide/events
EDIT : Code sample
listeners : {
focus: function() {
yourTextfield.setInputCls('yourcls');
}
}
Related
I'm using 7.1.0.GA, nothing happened when I click on Label, So I tried to put it inside a View, the event fire when I click around the Label but dont when I click on the area of Label.
it's probably don't receive the touch maybe your label or parent have touchEnabled false, or probably you have a view above your label add different background color for each element to find the guilty
Set touchEnabled of your Label to false and then it should work when you click on the View.
I have been trying to focus the first button but focus engine takes the third button right below the tab bar as the first item to be focussed. I tried with preferred focus view but found that when i place the buttons in vertical order then preferred takes the preferred view to be focussed but when i placed all the buttons in horizontal plane it always takes the third button.The other approach i can think of if Focus Guide but i wonder how that will work in this scenario?
override weak var preferredFocusedView: UIView? {
get {
return thrirdButton
}
}
It happens because focus engine takes the nearest possible focus element as 1st element as you can see from the picture attached.I have attached the context screenshot for the view controller. Any help or clue to solve this will be appreciated.
Solution :
We need to add focus guide just above button 3 and redirect it to button one when the focus guide is focussed.
private var focusGuide = UIFocusGuide()
self.view.addLayoutGuide(focusGuide)
self.focusGuide.bottomAnchor.constraintEqualToAnchor(self.button3.topAnchor).active = true
self.focusGuide.leftAnchor.constraintEqualToAnchor(self.button3.leftAnchor).active = true
// Width and height
self.focusGuide.widthAnchor.constraintEqualToAnchor(self.button3.widthAnchor).active = true
self.focusGuide.heightAnchor.constraintEqualToAnchor(self.button3.heightAnchor).active = true
focusGuide.centerXAnchor.constraintEqualToAnchor(self.button3.centerXAnchor).active = true
override func didUpdateFocusInContext(context: UIFocusUpdateContext, withAnimationCoordinator coordinator: UIFocusAnimationCoordinator) {
self.focusGuide.preferredFocusedView = button1
}
Try adding a UIFocusGuide just above the button rows. In that case, before reaching the button, it will hit your focus guide in which you can redirect the preferredFocusedView to that particular button. The code to redirect is to be done by overriding didUpdateFocusInContext method.
Assuming you have setup the focus guide in viewDidload, the following is a sample,
override func didUpdateFocusInContext(context: UIFocusUpdateContext, withAnimationCoordinator coordinator: UIFocusAnimationCoordinator) {
super.didUpdateFocusInContext(context, withAnimationCoordinator: coordinator)
self.focusGuide.preferredFocusedView = self.mypreferredbutton
}
TO initialise a focus guide ( Do the addition of guide to view in viewDidLoad)
var focusGuide = UIFocusGuide()
self.view.addLayoutGuide(self.sidefocusGuide)
self.focusGuide.leftAnchor.constraintEqualToAnchor(self.placerLabel.leftAnchor).active = true
self.focusGuide.rightAnchor.constraintEqualToAnchor(self.placerLabel.rightAnchor).active = true
self.focusGuide.topAnchor.constraintEqualToAnchor(self.audioTable.topAnchor).active = true
I too faced a similar issue but somehow able to do it through this. The preferredFocusedView approach will also work, but you have to do lot of circus by updating some reference variable and then calling setneedsfocusupdate for that view. Try the focus guide way. Hope it helps.
EDITED:
I have added code how to setup the guide. In this case I have put the guide on the right side of my view. So, whenever your focus hits the guide, it redirects to the preferredfocusguide view that you want the focus to go to in the didUpdateFocusInContext. "There is only one view in focus at anytime.", remember thes ? So, the moment it hits the guide, the overriden method gets hit which in turn moves your focus to the guide's preferred view. For examples, you can refer to Apple's UIKitCatlog app for tvOS and here is one link explaining the same.
The best way to give the initial focus to your preferred view is by using preferredFocusEnivronments.
override var preferredFocusEnvironments: [UIFocusEnvironment] {
return [firstButton]
}
preferredFocusEnvironments will be called before didUpdateFocus, that way you can inform the system, where you want the focus to be redirected.
I try to implement a custom ContextMenu in a LongListSelector.
I'm not using the ContextMenu from Microsoft.Phone.Controls.Toolkit, it's basically the same as in the Rowi App:
(source: hiddenpineapple.com)
Approach 1
My list item toggles a VisualState on hold and an overlay is shown with controls in it.
The problem
I can't find a way to go back to the default state when the user clicks outside of the list item (as in the default ContextMenu).
Approach 2
I've implemented a custom template for the toolkit ContextMenu which looks exactly the same. I had to move its margin top to -itemHeight, as by default it is below the item.
The problem
The problem with this solution is, that it automatically closes itself when opening and I couldn't figure out how to avoid this.
Another problem was that it didn't work well with TiltEffect.IsTiltEnabled from the Toolkit (visual problems).
I need your help
Any suggestions on how to get this working?
Answer
Thanks to Cheese, now I know how to properly close the menu when the user clicks outside.
His suggestion was to get the coordinates of a Tap event on the current page, and check if it's inside the menu. When not, close the menu.
So I added a Tap listener to the page when the menu opens, and removed it when the menu closes. From the page listener I got the event coordinates and could check if it's inside the control which holds the menu (same size and position). I received the position of the control with Point leftUpperPoint = control.TransformToVisual(page).Transform(new Point(0, 0)) and the rightLowerPoint by adding the ActualWidth and ActualHeight.
But then I realized:
Why should I even calculate if the tap is inside the menu? I always want to close the menu when the user taps anywhere on the screen. If it's outside, yes. If it's on a menu button, yes.
Another modification I made was to listen for MouseLeftButtonDown instead of Tap as it also triggers when the user swipes.
So I removed this code and came up with the following:
private void ToggleMenu(object sender, System.Windows.Input.GestureEventArgs e)
{
PhoneApplicationFrame frame = ((PhoneApplicationFrame)Application.Current.RootVisual);
VisualState state = this.States.CurrentState;
if (state == null || state.Name == "DefaultState")
{
frame.MouseLeftButtonDown += MouseDownDelegate;
this.State = "MenuState";
}
else
{
frame.MouseLeftButtonDown -= MouseDownDelegate;
this.State = "DefaultState";
}
}
private void MouseDownDelegate(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
ToggleMenu(sender, null);
}
This works perfectly!
Thanks to Cheese for the hint.
Something like this by #denniscode http://dotnet.dzone.com/articles/rowi-show-tap-menu
Approach 1 problem
The best solution would be:
Get the menus coordinates, when user makes a tap - you check are tap coordinates on menu or not, if not - dissmiss - simple.
Approach 2 problem
I guess you had some button in a corner and when you tapped on it - nothing happened? And when you dissmissed the Tilt all worked. It seems that tilt works faster than a click, so, tilt changes the button coordinates, and device thiks you have missed/or dragged off
You can use what #ScottIsAFool suggested and maybe create another Dependency Property on your TapMenu control of type UIElement named CloseWhenTappedElement and automatically listen for Tap events inside your control once set. For example
<Grid x:Name="TapArea"/>
<TapMenu CloseWhenTappedElement="{Binding ElementName=TapArea"}/>
i'd like to do this:
show some form, handle Rectangle::onClicked event (disable form, set opacity to 0.2, process some javascript to submit form, then set opacity back to 1.0, enable form).
But I don't know how to do it.
It seems onClicked() is processed in "batch" mode, changing any ui properties aren't visible until the function exits. I played with states, transitions and animations, but still not succeed.
Thanks for any suggestion,
Michal
You can simply start two custom animations, one to hide the form and one to show it back. Something like this:
SequentialAnimation {
id: submitAndHideForm
ParallelAnimation {
// Animations to hide the form elements
}
ScriptAction {
script: submitForm()
}
}
ParallelAnimation {
id: showForm
// Animations to show the form elements
}
Then you could just start the first one with submitAndHideForm.start() when you want to submit the form, and when you get a response you can start the second one.
It should be possible to solve with states. You could try to do the Javascript processing in a WorkerScript. When the processing is done it will send back a reply to the QML WorkerScript element that sets the state of the form to enabled again. So in onClicked you do the disable animation by setting the state, and in the onMessage function of the WorkerScript element you do the enable animation by setting the state to "enabled".
Perhaps you talking about using XMLHttpRequest asynchronously. "Disable" form on sending request, and "enable" it when onreadystatechange called with readyState === XMLHttpRequest.DONE.
With a listbox visible, I have clicked on the windows form hoping to use the listbox.lostfocus event to let me hide the listbox - but the event does not occur. I suppose I can use the form.click event to hide the listbox, but how would I get the form to accept focus?
A Form does not want to receive the focus. It was designed to be a container control, it makes sure that one of its child controls always gets the focus. It is technically possible to whack it over the head and make it lose that behavior:
public partial class Form1 : Form {
public Form1() {
InitializeComponent();
this.SetStyle(ControlStyles.ContainerControl, false);
}
protected override void OnClick(EventArgs e) {
this.Focus();
base.OnClick(e);
}
}
This is however a bad idea. A Form doesn't have any way to indicate that it has the focus, you'll also have to override OnPaint() to do something like draw a focus rectangle. If you don't then the user completely loses track of where the focus is located. Then there's the considerable inconvenience that nothing interesting can happen when the user uses the keyboard, a form doesn't have a use for it.
Don't do this. If you want to make a control disappear then add a menu item, toolbar button or a normal button to your UI. Something the user can click on.
the LostFocus event work when the focus move to another control like textbox,... or when the form all of it lost the focus you can use click event for the form to detect taht