Contents tagged with AJAX

  • ASP.NET Dynamic Data: Customize a template field

    Following my first post on ASP.NET Dynamic Data, I want to show you that you can customize existing fields used by Dynamic Data very easily.

    With the Northwind db, here is the generated edit screen for the Employees table:

     

    We could make this default user experience a lot better by changing the date input, why not add some AJAX here ?

    Template fields used by Dynamic Data are stored in DynamicData/FieldTemplates folder as simple user controls:

    You can see that there is a DateTime_Edit.ascx control, open it and add an Image for the calendar icon and a CalendarExtender from the ASP.NET AJAX Control Toolkit.

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
    <asp:TextBox ID="TextBox1" runat="server" CssClass="droplist" Text='<%# FieldValueEditString %>' Columns="20" /> 
    <asp:Image ID="imgCalendar" runat="server" ImageUrl="~/DynamicData/Content/Images/calendar.png" />
    <ajax:CalendarExtender runat="server" TargetControlID="TextBox1" PopupButtonID="imgCalendar" />


    Now you get:

    The calendar looks weird due to some CSS applied to the DetailsView. A quick workaround is to remove the CssClass attribute from the DetailsView1 control in DynamicData/PageTemplates/Edit.aspx :

    Doing that (or fixing the CSS in Site.css file) will make the calendar looks good:

    Note that the field is still fully functional without adding code, in a next post I will show how to create a new template field.

    Source code:

     

    Technorati Tags:
  • SwissTrains: Impressive mashup!!

    OMG this is *Really* impressive!!!

    View Swiss trains live on a map : http://www.swisstrains.ch

    Current version use Google Maps and the official train timetable to estimate trains positions, but they are working on a solution based on realtime GPS information...

    Check the Follow feature : click on a moving train, click in the unfolding menu on the button "Follow". This will show you the moving train on a bird's eye view via satellite images!!

  • Free Microsoft Press E-Books!

    Good deal: 3 free e-books from Microsoft Press!

    Go to http://csna01.libredigital.com/?urvs5cn3s8 sign with your Windows Live ID and get the full complete books free chapters and the full complete LINQ book!


    Introducing Microsoft LINQ
    by Paolo Pialorsi and Marco Russo

    Complete!!



    Introducing Microsoft ASP.NET AJAX
    by Dino Esposito

    Chapter 1: The AJAX Revolution
    Chapter 5: The AJAX Control Toolkit



    Introducing Microsoft Silverlight 1.0
    by Laurence Moroney

    Chapter 1: Silverlight and User Experience
    Chapter 5: Programming Silverlight with JavaScript

    [edit: only the LINQ ebook is fully downloadable, sorry for the confusion.]

     

  • realDEVELOPMENT_07 Canadian Tour for Web Developers

    The Real Development Reloaded Tour will be in Montreal on October 18.

    I had the chance to review the content of this event, lots of good tips and tricks will be shown, and I am sure you will learn something new, even if like me you do ASP.NET since you are born (almost!).
    This tour focus on today's technologies, the ones you use on your day to day job as a web developer. So don't miss this chance to consolidate your knowledge, feel more confident on ASP.NET, AJAX, and learn about the best tools for your browser!

     

    realDEVELOPMENT_07 tour is coming to a Canadian city near you. This half-day event is your chance to get a closer look at the technologies you use to create real web applications.

    In the sessions, you’ll learn how to use:

    • Visual Studio® development system to debug and trace your web application
    • Third party tools and utilities such as the Internet Explorer® internet browser Readiness Toolkit, Developer Toolbar, and Fiddler
    • the Enterprise Library to implement best practices
    • ASP.NET AJAX to create more immersive and interactive experiences

    Link for Montreal registration:
    MONTREAL - OCT 18, 2007 (8:30 AM - 12 NOON)

    For other dates and cities, read this post.

  • Building a simple mashup step by step with Popfly

    If you don't know what is Popfly, please read my previous post for an introduction : Popfly: Let's have fun!

    Here my goal is just to show you the few steps involved during the creation of a complete mashup with Popfly, for those of you who do not want to bother asking for an invitation nor watching a webcast, or maybe fed up with beta things?
    Just look below and discover how to build a Blaugh carousel in 35 sec (4 steps)!! 

    One of the options in the home page at www.popfly.ms is to "Create a Mashup", and is kindly enough to remind us the definition of a mashup.

    Building a mashup with Popfly is just a matter of using at last two existing blocks and link them together.

    So here we go, click on "Create a mashup" !!

     

    1. From the Blocks list on the left pane, drag and drop the Blaugh block on the work surface.
    Note: the list is already impressive, an easy way to find a block is to begin typing letters in the search box and results appears live in an AJAX way.

    The block appears with a 3d effect (Silverlight), and can be configured with the wrench icon (but we do not even need that now).

    Click on the bulb icon to get a list of blocks which would work well with the current one.

    2. Add a Carousel block.

    3. Link both blocks together by clicking on the blue disc:


    4. You are done!
    Note that the work area's background displays a preview of your mashup :

    Click on preview to test your mashup : the page shows a 3d carousel displaying last 20 Blaugh pictures!

     

    Advanced steps ;-) click on the wrench to configure a block :

    You can customize inputs (parameters) of each available operations (web service). By default, you see that my carousel's parameters has been filled with data output from the Blaugh's block : very smart!!

    Also hungry coders will be happy to read that you can add custom code in your mashup, so you can tweak the generated JavaScript to fit your needs.

    See you on a next post to learn what you can do with your mashup.

  • Popfly: Let's have fun!

    I've received my invitation for Popfly, so here we go!
    This is a private alpha and you can store up to 25 Mb, request your invitation at www.popfly.ms

    Popfly is a fun, easy way to build and share mashups, gadgets, Silverlight experiences and web pages using pre-built “Blocks” that connect to online services. Popfly consists of two parts:

    • Popfly Creator is a set of online visual tools for building Web pages and mashups.
    • Popfly Space is an online community of creators where you can host, share, rate, comment and even remix creations from other Popfly users.

    Read the full announcement on Soma Segar's blog.

    Not only you can build power Mashups in seconds, but NON-DEVELOPERS DO!

    There is a 15 minutes screencast to learn more about using Popfly : Popfly Screencast, at the beginning they show how to build a mashup that display your World of Warcraft guild's members in a Photo Tiles in about 10 seconds!!!

     

    I built my first mashup with the online GUI without code or tools.

    Features offered by the online visual tool is just amazing, we clearly see the benefits of Silverlight.

     

    Here is another one I made following the tutorial :
    Get last 2 entries from Twitter (Twitter block) every 5 seconds (Timer block), Get GPS coordinates (GeoNames block) to display entries on a map (Virtual Earth block). 

     

    And you immediatly get the results :

     

    A feature I like is that it keeps track of your developers keys, like Flickr, Google, etc... so you set them once and they are available for all your mashups.

    Later I will make another post to show how to build a mashup in a few steps and use it in a web page without any code : that's fun!

  • AJAX loading indicator like GMail

    Simone Chiaretta wrote a very nice post about building a Gmail-like loading indicator (that means top/right corner fixed, regardless of how the users scrolls or sizes the window) with an AJAX UpdateProgress control, an animated gif and some CSS; you can read his great article there :

    How to make a Gmail-like loading indicator with ASP.NET Ajax
    http://codeclimber.net.nz/archive/2007/05/17/How-to-make-a-Gmail-like-loading-indicator-with-ASP.NET-Ajax.aspx


    Unfortunatly his solution don't work for the one like me who still have IE6 at work, as css position: fixed works with all major browsers except... IE6!

    Someone on his comments propose to use CSS hack and expression to make it happens in IE6, but with the magic of AJAX Control Toolkit and the AlwaysVisible control you can make it easier and cleaner!

    The final result in IE6:

    Here is the code I use:

    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
            <asp:Button ID="Button2" runat="server"
    OnClick="Button2_Click" Text="Async Postback" /> Server time: <asp:Label ID="Label2" runat="server"
    Text="Label"></asp:Label> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress DynamicLayout="false" ID="UpdateProgress2"
    runat="server"> <ProgressTemplate> <div class="Progress"> <img src="Images/ajax-loader.gif" /> Loading ... </div> </ProgressTemplate> </asp:UpdateProgress> <asp:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1"
    runat="server" TargetControlID="UpdateProgress2"
    HorizontalSide="Right" VerticalSide="Top" HorizontalOffset="0"> </asp:AlwaysVisibleControlExtender>

     

    And the CSS: 

    .Progress
     {
       background-color:#CF4342;
       color:White;
     }
     
    .Progress img {
       vertical-align:middle;
       margin:2px;
     }


    You can download the source code here.

     

    So how does the AlwaysVisibleControl work ?
    In fact it simply use JavaScript to check browser and version :

    • If IE<=6 then it uses absolute position and internally take advantage of the Animation Framework to fix the div.
    • Else (IE>=7, FF2, etc...) it simply uses css position: fixed.


    Here is the interesting part from the AlwaysVisible control source code:

    this._animate = (Sys.Browser.agent == Sys.Browser.InternetExplorer
    && Sys.Browser.version < 7); if (this._animate) { // Initialize the animations to use the actual properties this._animation = new AjaxControlToolkit.Animation.MoveAnimation( element, this._scrollEffectDuration, 25, 0, 0, false, 'px'); // Make the control use absolute positioning to hover // appropriately and move it to its new home element.style.position = 'absolute'; } else { // Make the control use fixed positioning to keep it from moving // while the content behind it slides around element.style.position = 'fixed'; }

     

    Note: Later I found another good one from Matt Berseth :
    Using an UpdatePanelAnimationExtender to place an animated gif over a GridView:
    http://mattberseth.com/blog/2007/05/ajaxnet_example_using_an_updat.html

  • Microsoft ASP.NET Futures

    Microsoft ASP.NET Futures contains an early developer preview of features providing a wide range of new functionality for both ASP.NET and Silverlight. This comes from the latest announcements :

    • ASP.NET Ajax futures
    • Silverlight Controls for ASP.NET
    • Dynamic Data Controls for ASP.NET
    • ASP.NET Application Services
    • Dynamic Languages Support in ASP.NET

    Download materials : http://www.asp.net/downloads/futures/

    There is already a Quickstart : http://quickstarts.asp.net/futures/

    Very exciting news for an ASP.NET developer !!!!!

  • Cool tool: AjaxTrans

    AjaxTrans is a free online translator. It automatically translates words while you are typing (AJAX) in the language of your choice.

    www.ajaxtrans.com

    Ok it has nothing to do with .NET, but it is a really nice tool, very efficient.

    It sits on top of my IE favorites links and I use it every day, to write on this blog for example, because english is far from my mother tongue...

  • Flash Control for ASP.NET 2.0 and AJAX

    FlashControl is an ASP.NET 2.0 server control that allow you to add Flash movies (swf files) in your aspx pages. It removes the "Click to activate and use this control" message.

    This control has some great features:

    • Remove "Click to activate and use this control" message
    • ASP.NET AJAX enabled! (works inside an AJAX UpdatePanel)
    • Auto detect browsers and render proper client code
    • Enable full screen Flash movies
    • Support all Flash properties (Width, Height, Src, FlashVars, PluginsPage, Loop, Menu, Scale, BgColor, SwLiveConnect, Quality, Play, Base, Align, SAlign, WMode, etc...)
    • FlashVars GUI editor
    • XHTML compliance mode
    • Support ASP.NET 2.0 Theme and skins
    • Full Visual Studio designer support (Smart tag, Custom Designer, Custom Editors)

    FlashControl is available at www.flash-control.net