nettigkeiten

Wie versprochen hier also der zweite Teil meiner “Introducing Atlas” – Serie: AutoCompleteExtender

Google Suggest, Gmail und und und… alle haben sie so ne nette Autovervollständigung an. Das heisst, ich tippe Text in eine TextBox und unten dran werden Vorschläge angezeigt, was vielleicht gemeint sein könnte.

Atlas bietet hier also mit dem AutoCompleteExtender-Control ein fix-fertiges Control, dass dies bereits kann.

Die Beispiel-Applikation
Als Beispiel erstellen wir eine kleine Bilder-Upload – Seite. Neben dem simplen Upload kann auf der Seite auch noch nach bereits upgeloadeten Bildern gesucht werden. Und in dieser Suche werden wir versuchen zu “erraten”, welches File der User gerade sucht und ihm unsere Vorschläge entsprechend anbieten.

Die Zutaten
Vieles brauchts nicht um so eine AutoComplete-Textbox hinzuzaubern:

• Eine TextBox
• Das AutoCompleteExtender-Control
• Ein WebService, der die anzuzeigenden Daten bereitstellt

1. WebService
Das AutoCompleteExtender-Control benötigt als Source zwingend einen WebService. Dieser muss eine WebMethod die zwei Parameter aufnimmt: prefixText und count.

In unserem Fall werden wir auf die Namen der Files zugreifen, die im Upload-Folder liegen und diese gemäss den übergebenen Parametern filtern.

2. AutoCompleteExtender
Das MarkUp des Controls gibt Aufschluss über die Möglichkeiten:

<atlas:AutoCompleteExtender runat="server" ID="autoComplete" DropDownPanelID="panWordList">
   <atlas:AutoCompleteProperties       TargetControlID="fileSearch"       Enabled="True"       ServicePath="DataAccessorService.asmx"
      ServiceMethod="GetFiles" MinimumPrefixLength="1" />
<!--atlas:AutoCompleteExtender>

Im Property “DropDownPanelID” kann das Panel angegeben werden, welches benutzt werden soll, um die AutoComplete-Daten einzublenden. Das Property ist allerdings optional, wenn nichts angegeben wird, kümmert sich der AutoCompleteExtender selber darum.
Leider kann man das Aussehen dieses Panels nur sehr beschränkt beeinflussen. Die Properties visibility, background-color, color, border, cursor, overflow, width, und height werden vom AutoCompleteExtender überschrieben und können so nicht beeinflusst werden!

Das wars
Ein nettes Feature, dass superleicht einzubinden ist – und trotzdem absolut flexibel ist. Einzig die eingeschränkten Möglichkeiten in der Darstellung sind etwas lästig.

Die Beispiel-Applikation gibts natürlich zum Download:
AutoCompleteExtender.zip (392.35 KB)

“Atlas Control Pack: In addition to shipping the core Atlas framework and
runtime, we are also going to soon release the first drop of a new Atlas Control
Pack that leverages the Atlas framework to deliver a suite of cool re-usable UI
controls to make common Ajax scenarios super easy (cascading dropdown lists,
drag-panels, collapsible panels, etc, etc). We’ll be posting more
details on this project shortly.”
Gelesen bei Scott Guthrie

Da sag ich nur: :-):-)

Zuerstmal: Willkommen in meinem neuen Blog – werde zu einem späteren Zeitpunkt etwas mehr von mir preisgeben. Herzlichen Dank noch an Chris, der dieses Blog hier bereitstellt!

Zum Thema: Vorgestern ist die March CTP von Atlas erschienen und wieder sind einige Unzulänglichkeiten behoben worden und natürlich auch das eine oder andere Feature dazugekommen – und das schönste: die Doku umfasst endlich etwas mehr als nur super-simple Einstiegs-Skripts.

Da das ganze mit diesem Release nun definitiv den Status “Spielerei” verlassen hat, möchte ich mein Blog mit einer kleinen Serie über Atlas und seine Möglichkeiten eröffnen – und so vielleicht dem ein oder anderen den Einstieg erleichtern.

Let’s get started

Als allererstes muss man sich den Installer für die March-CTP besorgen und das ganze installieren.

Wenn man nun eine neue WebSite erstellen will, erwartet einem auch schon das entsprechende Projekt-Template:

OK und los

AJAX… hört sich aufwändig an

Das schöne an Atlas ist, dass es sich sauber in das Konzept von ASP.NET integriert. Das heisst, man kann auch eine bestehende ASP.NET-Seite (in der Regel) relativ einfach ins Web 2.0 hieven
Und so soll auch die erste Beispiel-Applikation ein klassisches ASP.NET-Sample sein: ein GridView mit allem drum und dran.

Das sieht dann etwa so aus:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Atlas-Sample<!--title>
<!--head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
                AutoGenerateColumns="False" DataSourceID="SqlDataSource1" EmptyDataText="There are no data records to display."
                PageSize="3">
                <Columns>
                    <asp:BoundField DataField="ProductId" HeaderText="ProductId" 			ReadOnly="True" SortExpression="ProductId" />
                    <asp:BoundField DataField="ProductName" HeaderText="ProductName" 			SortExpression="ProductName" />
                    <asp:BoundField DataField="Description" HeaderText="Description" 			SortExpression="Description" />
                    <asp:BoundField DataField="Price" HeaderText="Price" 			SortExpression="Price" />
                <!--Columns>
            <!--asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" 		ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
                ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
                SelectCommand="SELECT [ProductId], [ProductName], [Description], [Price] FROM [Products]">
            <!--asp:SqlDataSource>
        <!--div>
    <!--form>
<!--body>
<!--html>

Dank ASP.NET ist auch bereits ein simples Paging und eine Sortierfunktion integriert – alles wunderbar, wenn da nur diese Postbacks nicht wären…

Und genau da kommt Atlas ins Spiel:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Atlas-Sample<!--title>
<!--head>
<body>
    <form id="form1" runat="server">
        <atlas:ScriptManager ID="scriptMan" runat="server" EnablePartialRendering="true" />
        <div>
            <atlas:UpdatePanel runat="server" id="updatePanel">
                <ContentTemplate>
                    <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
                        AutoGenerateColumns="False" DataSourceID="SqlDataSource1" EmptyDataText="There are no data records to display."
                        PageSize="3">
                        <Columns>
                            <asp:BoundField DataField="ProductId" HeaderText="ProductId" 				ReadOnly="True" SortExpression="ProductId" />
                            <asp:BoundField DataField="ProductName" HeaderText="ProductName" 				SortExpression="ProductName" />
                            <asp:BoundField DataField="Description" HeaderText="Description" 				SortExpression="Description" />
                            <asp:BoundField DataField="Price" HeaderText="Price" 				SortExpression="Price" />
                        <!--Columns>
                    <!--asp:GridView>
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 			ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
                        ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
                        SelectCommand="SELECT [ProductId], [ProductName], [Description], [Price] FROM [Products]">
                    <!--asp:SqlDataSource>
                <!--ContentTemplate>
            <!--atlas:UpdatePanel>
        <!--div>
    <!--form>
<!--body>
<!--html>

Das untere Beispiel unterscheidet sich in genau 3 Zeilen von dem oberen (ja die fett hinterlegten  ).

<atlas:ScriptManager ID="scriptMan" runat="server" EnablePartialRendering="true" />Der ScriptManager ist das wohl wichtigste Atlas-Control - ohne ihn geht gar nichts. Das Attribut "EnablePartialRendering"muss auf true gesetzt sein, sobald mit UpdatePanels gearbeitet wird. Es sorgt dafür, dass nur einzelne Bereiche einer Seiteaktualisiert werden können.

<atlas:UpdatePanel runat="server" id="updatePanel">Der UpdatePanel umschliesst einen Teil der Seite, der selektiv aktualisiert werden soll. Das ist alles was für so ein einfaches Beispielgemacht werden muss. Die Postbacks werden "abgefangen" und in AJAX-Commands umgesetzt.Der UpdatePanel kann aber noch viel mehr, so kann er zB. auf bestimmte Ereignisse reagieren (Stichwort: EventTrigger).

In den nächsten Teilen meiner kleinen Atlas-Vorstellrunde, wird dann etwas genauer drauf eingegangen, wass denn da passiertund vorallem wo man da noch selber eingreifen kann.

Download: HelloAtlas.zip (571.17 KB)