I'm working on a simple flex / AIR application with just a mx.TextInput control and some button. I'm not using the system chrome.
less or more the mxml is this:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="495" height="316" creationComplete="init()">
<mx:TitleWindow width="481" height="84" layout="absolute" horizontalCenter="0" showCloseButton="false" id="win" top="10">
<mx:Label text="blahhh" id="label1" left="0" top="0"/>
<mx:TextInput id="textinput1" left="155" top="0" right="5" editable="true" />
<mx:Label text="expand" right="36" bottom="0" click="toggleState()"/>
<mx:Label text="exit" click="stage.nativeWindow.close()" right="0" bottom="0"/>
</mx:TitleWindow>
</mx:Application>
To make the window draggable i've added a MouseEvent.MOUSE_DOWN listener to the TitleWIndow:
win.addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void { stage.nativeWindow.startMove();});
The problem now is that the inner textinput control seems to inherit the eventlistner, so you can type text, but you can't select it (Cause holding down the mouse trigger the NativeWindow.move() function).
Am I missing something ? I want the window to be draggable only when i mousedown on the TitleWindow, not on other controls..
You should check the target attribute of the event object, like this:
win.addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void {
if (e.target == win)
stage.nativeWindow.startMove();
});
Otherwise you also catch mouseDown events bubbling up from inner elements such as the TextInput.
Related
I have a simple autocomplete menu just like the one below.
Is there any way to monitor if the user clicks outside the menu? By default, if the user clicks outside the menu, it will close the menu. But I would like to trigger other actions besides just closing the menu.
I will keep it simple with the following scenario:
I have a boolean variable called myBoolVar that has a default value of false.
When the autocomplete is mounted, it will autofocus the input and the menu will only open when the user starts typing in the input. Untill here the myBoolVar remains false. but only when the user clicks outside of the menu, then the menu closes and the myBoolVar changes to true.
I have been through vuetify api documentation without any luck so far.
<v-autocomplete
v-model="valuesActor"
:items="actorArray"
:search-input.sync="searchActor"
filled
autofocus
background-color=#313131
append-icon=""
prepend-inner-icon="mdi-arrow-left"
color="var(--textLightGrey)"
>
</v-autocomplete>
You can use blur event for autocomplete like that:
methods: {
someMethod() {
alert('tadam')
}
}
<v-autocomplete
v-model="value"
:items="items"
#blur="someMethod"
/>
You can find the documentation here https://vuetifyjs.com/en/api/v-autocomplete/#events
You can use the v-click-outside directive calls a function when something outside of the target element is clicked on.
for more info see the vuetify: v-click-outside docs.
You can use something like this
<v-autocomplete
v-click-outside="onClickOutside"
....
and on click outside you can call method
methods: {
onClickOutside () {
....
},
},
I have an horizontal TabView with 2 TabViewItems. In one of them I have a WebView that loads a certain website. The website has a long string of text that can be swiped horizontally.
<TabView>
<TabViewItem>
<WebView />
</TabViewItem>
<TabViewItem>
<!-- More XAML code -->
</TabViewItem>
<TabView>
Here is the problem: When IsSwipeEnabled is set to True (which is the default value of the property) the swipe gesture has no effect on the text. The focus is on the tab and swiping horizontally just brings on screen the other tab.
Is there a way to keep IsSwipedEnabled set to True but pass the focus to the text when the gesture happens on it?
Check TabView source code we can find actually it uses CarouselView to implement the scrolling effect.
However , it's not recommended to place a Webview on a CarouselView/ScrollView , the swipe gesture would generate conflict.
The workaround is
Disable Swipe gesture of TableView in Webview page , and recover it in another page .
<TabView IsSwipeEnabled="False" SelectionChanged="TabView_SelectionChanged">
<TabViewItem Text="111">
<WebView/>
</TabViewItem>
<TabViewItem Text="222">
<Label Text="test"/>
</TabViewItem>
</TabView>
private void TabView_SelectionChanged(object sender, Xamarin.CommunityToolkit.UI.Views.TabSelectionChangedEventArgs e)
{
if(e.NewPosition == 0)
{
(sender as TabView).IsSwipeEnabled = false;
}
else
{
(sender as TabView).IsSwipeEnabled = true;
}
}
I have an Event Handler for a keyDownEvent in a TextBox. Now when I press Enter this Event Handler changes the Visibility to Collapsed and the TextBox hides. the Problem with it is that this obviously unfocus the TextBox and foucus sth. else in my App. How can I disable this autofocus of another element and focus nothing?
I have tried the following but i am really screwed.
if (e->Key == Windows::System::VirtualKey::Enter) {
this->mode = ITEM_MODE::SELECT; // will Change Visibility to Collapsed
FocusManager::TryMoveFocus(FocusNavigationDirection::None);
e->Handled = true;
}
Thanks for your help! <3
how to disable auto tab after pressing enter and losing focus of textbox
Derive from official document,
UseSystemFocusVisuals used to get or set a value that indicates whether the control uses focus visuals that are drawn by the system or those defined in the control template.
You could set control UseSystemFocusVisuals property as False. Then next control will not be focused by system.
<StackPanel Orientation="Vertical" Name="RootLayout" IsTapEnabled="False" >
<TextBox HorizontalAlignment="Stretch" Height="44" KeyDown="TextBox_KeyDown" />
<Button Content="FouceElement" UseSystemFocusVisuals="False"/>
<Button Content="NextBtn" UseSystemFocusVisuals="False"/>
</StackPanel>
In case you just don't want the auto-focused item to have focus indicator shown, you can change the Focus type to FocusState.Pointer.
Example (C#):
object focusedElement = FocusManager.GetFocusedElement();
((Control)focusedElement).Focus(FocusState.Pointer); // This will hide focus indicator
In Win 8, the flipview control is a great control to browse the collection. But how or what is the best way to make a "selection" with a tap or a mouse click? I can always put a button outside of the flip view, but that's not the touch experience that everyone of a tablet would expect.
can someone give some example code (XAML/C#) of how to setup a flipview control with a selection of some sort that would navigate to a totally different page?
I wrote some sample code that works, if I'm understanding the question correctly. I am able to swipe through the FlipView and tap the individual item:
<FlipView Tapped="FlipView_Tapped_1">
<Image Source="Images/Apple.jpg" />
<Image Source="Images/Orange.jpg" />
<Image Source="Images/Banana.jpg" />
</FlipView>
And then
private YourTypeHere SelectedItem;
private void FlipView_Tapped_1(object sender, TappedRoutedEventArgs e)
{
this.SelectedItem = (sender as FlipView).SelectedItem;
}
You might not want to set a field, but you get the idea. Hopefully, you will be setting something in your view model. From there you can nav away or anything you need. A FlipView inherits from ItemsControl just like every other XAML repeater. So you can treat it exactly the same. http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol.aspx
I have a repeater that creates a custom component named "Block." I need to make it so that when the user clicks a button, all of the blocks created by the repeater have their visible field set to false (and then true when the button is clicked again).
Here's some of the code I have right now:
<mx:Repeater id="indPositions" dataProvider="{projectPositions}" startingIndex="0">
<components:block height="24"
width="100%" id="thisBlock" visible="true" horizontalScrollPolicy="off"
oneDay="{oneDay}"
/>
</mx:Repeater>
Here's the button the user will click to show/hide the blocks:
<mx:Button id="showHideButton" label="Show Project" x="{addBlock.x + addBlock.width + 2}" click="showProjectSwitch();" />
Here's the function showProjectSwitch():
public function showProjectSwitch():void {
if (showHideButton.label == "Hide Project")
{
showHideButton.label = "Show Project";
indPositions.visible = false;
thisProject.height = 65;
}
else
{
showHideButton.label = "Hide Project";
indPositions.visible = true;
thisProject.height = projectHeight ;
}
}
I tried setting projectRP.visible="true/false", but it didn't work :(
I also tried wrapping a canvas around the repeater, but when I did that... the repeater only ran once despite the fact I have the startingIndex="0" and the count="16". I then removed the canvas tags and the repeater ran the correct number of times.
Anybody able to help me out?
The easiest way to achieve what you want is just to use databinding, same as you did for the "oneDay" value.
<mx:Repeater id="indPositions" dataProvider="{projectPositions}" startingIndex="0">
<components:block height="24"
width="100%" id="thisBlock" visible="true" horizontalScrollPolicy="off"
oneDay="{oneDay}"
visible="{showBlocks}"
/>
</mx:Repeater>
<mx:Boolean id="showBlocks" />
[Edit for additional clarity]
To change the visibility of the blocks, you need to set the value of showBlocks, like so:
showBlocks = true;
or
showBlocks = false;
Here's how i solved it... since the variable name of "thisBlock" is declared every time a block is made, all that information gets stored in an array. After learning this, i was able to create a for each loop in a function that was called when the show/hide button was pressed... the for each loop goes something like this:
for (var I:int = 0; i < dataprovidername.length; i++)
thisBlock[i].visible = true/flase;
Hope that can help somebody else out in the future.