Digg-Like Button Animation, Easy Way?

Hi,

I've been trying to create a button with fading/morphing effect for a while now (kind of like digg buttons), but so far I'm not very happy with the results.

I almost got there, but not quite. Any help would be appreciated.

I have the buttons inside a Repeater control. So getting the button's client id is not the simplest thing. I also wanted to change the source image of the button (src attribute), this can't be done thru the StyleAction, so I used a Javascript/ScriptAction solution. The solution works greatly for hover effects, but not for client-side click events.

Here's the code (all client-side):

//first the fake button and animation to init everything, I know there are other ways, but this works fine.

<asp:Button EnableViewState="false" ID="FakeTarget" runat="server" Style="display: none" />
<cc1:AnimationExtender ID="aex" runat="server" TargetControlID="FakeTarget" /
//the repeater and the individual updatepanels:
<asp:Repeater ID="rpt" runat="server" OnItemCommand="rpt_ItemCommand" EnableViewState="False" OnItemDataBound="rpt_ItemDataBound">
<ItemTemplate>
<atlas:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:LinkButton id="btn" runat="server" OnMouseOver="attach(this)"/>
</ContentTemplate>
</atlas:UpdatePanel>
</ItemTemplate>
</asp:Repeater
//the javascript code
function attach(v)
{
if (v != null)
{
//scriptaction to execute (basically change the button's image)
var s = "var x = document.getElementById('" + v.id + "');if (x) x.src = 'img/new.gif';";
var effects = new Array();
effects[0] = new AjaxControlToolkit.Animation.FadeOutAnimation(v, .5, 30, .1, 1, false);
effects[1] = new AjaxControlToolkit.Animation.ScriptAction(v, .1, 20, s);
effects[2] = new AjaxControlToolkit.Animation.FadeInAnimation(v, .5, 30, .2, 1, false);

AjaxControlToolkit.Animation.SequenceAnimation.play(v, 0, 24, effects, 1);
return false;
}
}

this works perfectly, but substituting OnMouseOver for OnClientClick messes things up, as I think it's a timing issue with the updatepanel returning too quickly. The only fix I've found so far is force the Server-side Command Event to sleep for the animation time, but I hope there's a more elegant way of doing this.

Thanks,

Alexbump

Could you explain in more detail what the desired effect looks like?

Is there an example of what you want in the web?

Development Strategy

I'm already using homegrown callbacks in my app, it's a great feature, and so I'm happy to see that Atlas is coming along so well.

My challenge is that I've got limited development resources (me and mine) and a limited window of opportunity to get my app to market. So I'm probably going to continue to test Atlas, and wait to put it into the app later in the development cycle, depending on how strong it looks at the time.

My question is, though, is there anything about the use of Atlas that I need to consider in terms of writing the app in the first place? More specifically, I recognize the "no screen flash" and other possible effects as seen by the user...that's why I started using callbacks to begin with. And I appreciate that there are probably ways to "optimize" the way the code is written to maximize the benefits of Atlas. However, I can't afford to do that now because of the risk that Atlas interfaces or behaviors will change at the last minute, and throw off my development schedule.

So the crux of the question is, is it safe to assume I can write my ASP.NET app without specific consideration of Atlas, and then drop Atlas elements (notably update panels) into it at the last minute, and for the most part "get away with it", i.e., not be stuck with a lot of changes required to make the app "Atlas" compatible?

Hope this makes sense, and would appreciate any guidance on it.

Thanks!

One advice is to make use of good HTML coding practice, such that when you integrate Atlas into the webpage, you don't get into a confusion yourself. Try to avoid using having too many layers of z-index. z-index:1 to z-index:3 should be enough for most scenarios.

I once working on a project, which requires me to atlacise a existing page with many bad HTML and CSS coding. The result was I end up re-writing the HTML elements and dragging in the ASP Controls one at a time as a attempt to clean up the attrocious HTML which the previous developer wrote. After the HTML is cleaned up, it took me just 10 minutes to atlacise the entire site.

hello.

hum...well, i'd say that with the updatepanel it's really easy (almost too easy, if there's such a thing as too easy) to transform an aspx page intro an atlas pages. if you want to use the full power of atlas, then you'll really need to decide on several things - ex.: how to update a record on a db? use a traditional page or use only client side HTML and perform the update of the record through a web service? you'll probably drop the updatepanels in many scenarios (specially if you're looking for a perfomance)

THanks Luis for sharing. Update panel actually affects performance? How much performance advantage would you get if you update directly via a webservice? Are there any advices when to use an update panel and when not to? It seems that most using the Atlas framework would make use of the UpdatePanel .

hello.

well, what i say is that if you're buildning a new app and want to use atlas, you probably should start by looking at the client side of atlas before using the updatepanel. i really think that the updatepanel is great when you just need to enable atlas on an existing aspx page. however, i also think that its usage is only justified when you are using a server side approach. and when you use it, you should also keep in mind that a partial postback results in the sending of all the fields maintained in the form (which might not be what you want when you need to perform a simple server side operation).

Thanks for inputs. The anectdotal experience reports and cautioning comments are great for providing "view ports" into this technical area.

I'm concluding that waiting to add update panels to well-formed pages is a relatively low risk approach. I'm sure I'll be testing Atlas along the way, as well.

Agradecimento!

developing composite control that combines Ajax controls

Hi,

Is it possible to write a composite control that consists of UpdatePanels, and other control from Ajax Control Toolkit?

I would be happy to view some examples on developing this kind of control.

Thanks

Hello,

You can do this. It is possible.

I suggest that you use a scriptmanagerproxy in your control in case the page containing the control has a scriptmanager already. Aslo, you may have an easier time using the update panel in the containing page instead of in the control to get the ajax capabilities.

Good Luck,

Louis

Hi,

Thanks for the reply, do you suggest to put the composit control inside an update panel?

Im planning to build two build two composite controls:

one of them should contain an AutoCompleteExtender and other simple web controls . so I guess there wont be any problem with it.

but the other control will contain a TabContainer (from the Ajax Control Toolkit) I thought to put on each tab panel's content template an update panel (to reduce the amont of rerendered data, and save bandwith)

do you think that in this case its better to locate the whole TabContainer inside one UpdatePanel?

Thanks,

Tal

Yes, I suggest not including the update panel in the usercontrol.

Hi,

Im writting a composite control as I described in my first post (combines AutoCompleteExtender and FilteredTextBoxExtender and a TextBox)

I wrote the following Render function :

1 SearchAutoComplete =new AutoCompleteExtender();2 SearchAutoComplete.ID ="SearchAutoComplete";3 SearchAutoComplete.MinimumPrefixLength = 3;4 SearchAutoComplete.BehaviorID ="AutoCompleteBehavior";5 SearchAutoComplete.EnableCaching =true;6 SearchAutoComplete.CompletionSetCount = 5;7 SearchAutoComplete.UseContextKey =true;8 SearchAutoComplete.ServiceMethod ="GetCompletionList";9 SearchAutoComplete.TargetControlID ="SearchTextBox";10//SearchAutoComplete.OnClientItemSelected = "";1112 SearchFilteredTextBox =new FilteredTextBoxExtender();13 SearchFilteredTextBox.ID ="SearchFilteredTextBox";14 SearchFilteredTextBox.TargetControlID ="SearchTextBox";15 SearchFilteredTextBox.BehaviorID ="FilteredTextBoxBehavior";16 SearchFilteredTextBox.FilterType = AjaxControlToolkit.FilterTypes.Custom | FilterTypes.Numbers;1718 SearchByNameLabel =new Label();19 SearchByNameLabel.ID ="SearchByNameLabel";20 SearchByNameLabel.Text = Resources.Resource.SearchByName;2122 SearchByNumberLabel =new Label();23 SearchByNumberLabel.ID ="SearchByNumberLabel";24 SearchByNumberLabel.Text = Resources.Resource.SearchByNumber;2526 SearchTextBox =new TextBox();27 SearchTextBox.ID ="SearchTextBox";2829this.Controls.Add(SearchAutoComplete);30this.Controls.Add(SearchFilteredTextBox);31this.Controls.Add(SearchByNameLabel);32this.Controls.Add(SearchByNumberLabel);33this.Controls.Add(SearchTextBox);

1 AddAttributesToRender(writer);23 writer.AddAttribute(4 HtmlTextWriterAttribute.Cellpadding,5"1",false);6 writer.RenderBeginTag(HtmlTextWriterTag.Table);7 writer.RenderBeginTag(HtmlTextWriterTag.Tr);8 writer.RenderBeginTag(HtmlTextWriterTag.Td);9 SearchByNameLabel.RenderControl(writer);10 writer.RenderEndTag();11 writer.RenderBeginTag(HtmlTextWriterTag.Td);12 SearchByNumberLabel.RenderControl(writer);13 writer.RenderEndTag();14 writer.RenderBeginTag(HtmlTextWriterTag.Td);15 SearchAutoComplete.RenderControl(writer);16 writer.RenderEndTag();17 writer.RenderBeginTag(HtmlTextWriterTag.Td);18 SearchFilteredTextBox.RenderControl(writer);19 writer.RenderEndTag();20 writer.RenderEndTag();21 writer.RenderEndTag();22

and got the following Exception:

"Error: Sys.ArgumentException: value must not be null for controls and behaviors.

parameter name:element"

Any idea?

Thanks

hi,

change

SearchAutoComplete.TargetControlID ="SearchTextBox"

to be

SearchAutoComplete.TargetControlID = SearchTextBox.ClientID

the script is hassling you about being unable to find the targetControl

Hi,

Thanks for your reply.

I want my WebMethod to be integrated with the CompositeControl (Im not intersted in Exposing it as a top level property).

How can I embed a web-service with the control (I prefer using PageMethod fo GetCompletionList). ?

I read somewhere that I should write a custom HttpHandler ( if i want my CompositeControl to use my embedded webservice) , It seems complicated , do you have en example for this?

or better , a solution for how I can use an "embedded" PageMethod?

Thanks,

Tal

Hi Tal,

It's not recommended to embed the pageMethod inside a UserControl.

By default, a client can't request for a user control( with extension .ascx) directly, it's blocked by the a special handler that prevents accessing. It's not recommend to change this behavior.

May be you are trying to implement a user control that is easy to maintain and use, but if the user has to pay more to get accustom to this.

Hi,

Im Writting a CompositeControl not a UserControl.

so actually Im trying to "embed" the PageMethod or Web-service method (GetCompletionList method) inside the DLL of my CompositeControl.

Is there a way to solve this?

(im not interesting in exposing the AutoCompleteExtender's ServiceMethod property)

I want that the logic of geting the completion results will be a part of my CompositeControl.

Thanks

It's also not allowed to access a assembly on client side directly.

There should always an endpoint( a class implement IHttpHandler interface ) on the server be responsible for processing a request. You may implement a class and use it to invoke the method in the dll.

Hi,

Do you have any refferences for how to implement such a class?

I have know idea how to write an HttpHandler that invokes a web-service that is embedded in a DLL...

Thanks

Hi,

Just create a class that implementIHttpHandlerinterface. And you may refer to the ScriptResourceHandler class in thesource code of ajax extension for a practical implementation of it.

Hi,

Thanks for the reply. I will have a look at the source code of ajax extension.

Do you think I should also implement an HttpHandlerFactory?

As I understand my custom HttpHandlerFactory will check all *.asmx requests,

if the asmx request is for my AutoComplete web service return my custom HttpHandler, otherwise return the default one.

is this correct?

Not necessary, you may register the Handler to a specific file name in web.config.

But if you plan to use .asmx, why don't you add a web service directly. It's a implicit httpHandler.

Hi,

what do you mean by "adding the web-service directly"?