Silverlight event handling - silverlight-3.0

I try to catch the MouseUp event from the slider but it never goes inside of the handler. The code is usual:
<Slider x:Name="sliderTime"
MouseLeftButtonDown="sliderTime_MouseLeftButtonDown"
MouseLeftButtonUp="sliderTime_MouseLeftButtonUp" />
And in code behind:
private void sliderTime_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
//some code
}
Is it bug of the slider or something else?
Thanks

I duplicated the code you posted and it worked for me.
Any chance the event isn't actually wired up?
I built it two different ways and the event fired for me. How did you build it?
Also check to see if you somehow have an object covering the slider?
Version 1:
Open Blend 3, file>create project, Silverlight 3 Application + Website. Added a slider and named it (simply because you did). Added a label (to check the event firing).
Selected the component, switched over events and double-clicked the events for MouseLeftButtonDown and MouseLeftButtonUp to create the events and code-behind stubs. Updated the label when MouseLeftButtonUp fires.
Version 2: Open Blend 3, file>create project, Silverlight 3 Application + Website. Added a slider and a label. Right-clicked on the silverlight project in Blend and opened it in VS2008. Wired up the events in markup using intellisense.
Both version worked for me. Is this part of other code? If so try to make a version with just the slider and see if that works, if it does then something in your existing code may be off. I'll post my code so you can see it.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"
x:Class="SilverlightAppSlider2Test.MainPage"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="White">
<Slider x:Name="sliderTime" MouseLeftButtonUp="Slider_MouseLeftButtonUp" MouseLeftButtonDown="sliderTime_MouseLeftButtonDown" Width="Auto" Height="20" Margin="5"/>
<dataInput:Label x:Name="Label1" Width="200"/>
</Grid>
</UserControl>
AND
private void Slider_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
// TODO: Add event handler implementation here.
Label1.Content = "Mouse button left released.";
}

Since Silverlight 2 Beta 2, many controls dont fire the MouseDown/MouseUp events, and I believe that Slider is one of them. You can "work around" that by inheriting from Slider and writing custom code to fire these events.
Take a look here: http://forums.silverlight.net/forums/p/18328/61917.aspx

You can use the FrameworkElement.AddHandler method to handle this event. You won't be able to wire it up in xaml however. More info in this blog post:
http://blogs.msdn.com/kmahone/archive/2009/03/19/handling-mouse-input-events-on-controls.aspx

Related

How to hide <p:messages> after it displayed the messages?

I am working on JSF application in primefaces in that i am showing an information to the user via <p:messages> .
So when the user click submit the page will processed and the p:messages dialog will triggered to show the information to the user ,
I referred Primefaces p:messages showcase Page
It is working fine..But after it displayed the messages , it is not closing automatically either we need to close that dialog manually or it remains in open stage.
I need it should it close automatically after it displayed the message to user...
How can i do that ...Can anybody give suggestion that how can i do ?
<p:messages id="msgs"> is ultimately rendered as <div id="msgs"> and its contents is then updated with the factual messages to the user.
If you want to clear the message screen after some delay you should use the JavaScript setTimeout function after ajax call has been completed:
<p:commandButton ...
oncomplete="setTimeout(function() { $('#msgs").html(''); }, 3000);" />
The second parameter of setTimeout function is the delay in milliseconds.
The other alternative is to use <p:growl> instead.
Worked for me for <p:fileUpload>, which was in <p:dataList> and <h:panelGrid> elements.
<p:fileUpload...
oncomplete="setTimeout(function() { $('[id$=mr-upload-messages]').hide(1000); }, 2000);">
...
<p:messages id="mr-upload-messages" showDetail="true" showSummary="false" closable="true"/>
I have used jQuery $('[id$=mr-upload-messages]' to find id's which ends with mr-upload-messages, because Primefaces adds it's unique identifier at the beginning of id.
$('#msgs').html(''); immediately hide in 3 seconds but if you want to hide slowly as jquery hide method do this..
<p:commandButton ...
oncomplete="setTimeout(function() { $('#msgs').hide(1000); }, 3000);" />
hide(1000); hiding motion will be completed in 1 second
I came across the attention, and did it this way:
function hideMsg(){
$("#msg").delay(1000).hide(1000);
}
oncomplete="hideMsg()"

How to set focus of UIComponent after <f:ajax request completed?

First of all, Thanks a lot all of you for your continuous support.
I have a problem releated .xhtml and 'f:ajax'.
I am setting richfaces:collapsiblepanel 'expanded' attribute by bean variable which is default collapsed and on blur event it gets expanded. I want to set focus a UIComponent after f:ajax request compeleted. And for that I have written a function in javascript and called it in 'onevent' of f:ajax.
But onevent function fires before panel open and I can not able to set focus on UIComponent which are define in that collapsible panel.
How can I setFocus or How can I fire that function after ajax request compeleted ?
Thanks in advance.
Your js function should look like this
function doTheFocus(data) {
if (data.status === 'success') {
//here goes the js code that will set the focus
//this code will be executed only when the ajax will be done
}
}
And here is how your f:ajax will look like
<f:ajax onevent="doTheFocus" />
If you want to call the js function of the focus when the panel is opened you can try
<rich:collapsiblePanel onswitch="doTheFocus"
or (I'm not sure...)
<rich:collapsiblePanel onswitch="doTheFocus()"
If you eventually will use the onswitch , you might be needed to add some logic inside doTheFocus function to check if the panel is expanded or not...

Ajax attached to Composite Component updates model but does not fire listener

I have a custom component location. I want that, when a change is done, the model is update so another component (an autocomplete) is to show only results related to the location value. Also, that component is rerendered to reset it.
I have a page with the following code (simplified):
<h:form id="ticketForm">
...
<loc:location id="locationId" <-- CUSTOM COMPONENT
hiddenFieldValue="#{ticketCtrl.ticket.location}"
visibleFieldValue="#{ticketCtrl.ticket.locationDescription}"
rendered="#{ticketCtrl.ticketModifiable}">
<f:ajax event="changeLocation" render=":ticketForm:gfhId" <-- AJAX CALL.
execute=":ticketForm:locationId" listener="#{ticketCtrl.locationListener}"/>
</loc:location>
...
</h:form>
When the value in the component is changed, the model is updated and :ticketForm:gfhId is rendered as needed, but the listener(which performs additional resets) is not executed.
Attaching the ajax to a simpler control results in the listener being executed; v.g.
<h:inputText id="contactId"
value="#{ticketCtrl.ticket.contactPerson}"
disabled="#{not ticketCtrl.ticketModifiable}">
<f:ajax event="change" render=":ticketForm:gfhId"
execute=":ticketForm:locationId" listener="#{ticketCtrl.locationListener}"/>
</h:inputText>
works perfectly.
I do not know if it may be related as how the changeLocation event is fired; inside my component I define it as
<composite:interface>
...
<composite:clientBehavior name="changeLocation" event="change" targets="visibleId"/>
</composite:interface>
with visibleId being a readonly text; when it is changed by javascript I fire the change event on it with JS.
function launchEvent(fieldName) {
if ("fireEvent" in fieldName) {
fieldName.fireEvent("onchange");
} else {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
fieldName.dispatchEvent(evt);
}
}
The info I find in other questions is about making ajax an inner part of the composite component, here I want ajax detached because I probably won't need it in other uses of the component.
I am using JBoss 6.1 wih Mojarra 2.1.9 and Richfaces 4.
Thanks in advance.
UPDATE:
Even after finding jarek.jpa's answer right, if someone wants to check the code it is here:
The composite component
http://pastebin.com/9wqMVfR5
The main form
http://pastebin.com/i39ys2D9
This may have to do with the "readonly" attribute set to true. Though you manage to send the change-event by hand (JS), the server-side processing of the listener may be dropped due to the readonly state. See e.g. jsf (richfaces) readonly input text validation.

jQuery Mobile: Uncaught cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'

I am pulling my hair out dealing with this problem.
These are the code that I used and caused the mentioned problem.
$(document).ready(function () {
$("#at-site-btn").bind("tap", function () {
$.mobile.changePage("view/dialog/at-site.php", { transition:"slidedown", role:"dialog" });
});
$('#at-site-page').live('pagecreate', function(){
var $checked_emp = $("input[type=checkbox]:checked");
var $this = $(this);
var $msg = $this.find("#at-site-msg");
$checked_emp.appendTo($msg);
$checked_emp.trigger('create');
$msg.trigger('create');
$(document).trigger('create');
$this.trigger('create');
$("html").trigger('create');
});
});
Explanation:
The above code is in a file named hod.php. The file contain a number of checkboxes. These checkboxes and be checked simultaneously and when I pressed the #at-site-btn button the at-site.php appear (as a dialog) and display every checked checkboxes.
This is where the problem occurred. When I pressed the back button in the dialog to go back to the previous page and tried to uncheck those checkboxes, the error pops out as mentioned in the title. There are no calls to 'refresh method' in my code so I don't see the way to fix this.
Can anyone please suggest a way to solve this problem?
Am I using it right? (I am very new to jQuery Mobile. If there are some concepts behind using JQM please explain it to me [I've tried read JQM Docs it seems so unclear to me]).
Best regards and thank you very much for your answers.
What version of jQueryMobile are you using? You might need to use pageinit instead of pagecreate. This portion of the jQueryMobile documentation talks about the choices.
For re-painting or creation, the solution that #Taifun pointed out, which looks like:
$("input[type='radio']").checkboxradio();
$("input[type='radio']").checkboxradio("refresh");
worked okay for me, but it didn't paint the controls 100% correctly. Radio buttons didn't get the edges painted with rounded corners.
Before I saw your code, I read here that you can call .trigger('create') on the container object and it worked for me. You are doing that but inside pagecreate instead of in pageinit.
I was actually using a flipswitch checkbox:
<div class="some-checkbox-area">
<input type="checkbox" data-role="flipswitch" name="flip-checkbox-lesson-complete"
data-on-text="Complete" data-off-text="Incomplete" data-wrapper-class="custom-size-flipswitch">
</div>
so had to do this:
$("div.ui-page-active div.some-checkbox-area div.ui-flipswitch input[type=checkbox]").attr("checked", true).flipswitch( "refresh" )
See my full answer here.

WPF TextBox.SelectAll () doesn't work

I have used the following template in my project:
<DataTemplate
x:Key="textBoxDataTemplate">
<TextBox
Name="textBox"
ToolTip="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}"
Tag="{Binding}"
PreviewKeyDown="cellValueTextBoxKeyDown">
<TextBox.Text>
<MultiBinding
Converter="{StaticResource intToStringMultiConverter}">
<Binding
Path="CellValue"
Mode="TwoWay">
<Binding.ValidationRules>
<y:MatrixCellValueRule
MaxValue="200" />
</Binding.ValidationRules>
</Binding>
<Binding
RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type y:MatrixGrid}}"
Path="Tag"
Mode="OneWay" />
</MultiBinding>
</TextBox.Text>
</TextBox>
</DataTemplate>
I used this template to create an editable matrix for the user. The user is able to navigate from cell to cell within the matrix and I would like to highlight the data in the selected textbox but it doesn't work. I called TextBox.Focus () and TextBox.SelectAll () to achieve the effect but nothing. The Focus () works but the text never gets highlighted.
Any help is welcome and appreciated.
Okay, if anyone is interested, the solution to this problem of mine was to include the statement e.Handled = true; in the event handler method where the textBox.SelectAll() and textBox.Focus() are called.
The problem was that I attached an event handler to the textbox's PreviewKeyDown event which handles a tunneling event and probably the SelectAll() and Focus() calls are ignored without calling the e.Handled = true; statement.
Hope it'll help someone.
Without the rest of your code it's difficult to say whether this will work for you, but I put together a small sample using your DataTemplate (minus the parts that refer to code that wasn't posted).
I was able to select all the text in the text boxes by adding a GotFocus event handler to the TextBox in the DataTemplate:
<TextBox
...
GotFocus="textBox_GotFocus"
...>
...
</TextBox>
And the code-behind:
private void textBox_GotFocus(object sender, RoutedEventArgs e)
{
TextBox textBox = sender as TextBox;
if (textBox != null)
{
textBox.SelectAll();
}
}
Let me know if you are attempting to select all under different circumstances (not when the box receives focus).
Here's a very good very simple solution (I don't know if it works for your template, but give it a try): http://social.msdn.microsoft.com/forums/en-US/wpf/thread/564b5731-af8a-49bf-b297-6d179615819f

Resources