Coolite, yet another Ajax based .net 3rd party component

Saturday, 6 February 2010

I’ve been using (at least until now) Coolite. Awesome component for developer yet for user that concern about user-interface. This component inherited from ExtJs 3.x which runs in javascript. Compiled into dynamic link library, so you can easily add into your Solution/Project but remember this component only works for web-based application. I see this component is good-in-daily use because its simplicity to embed its script in .net, using tags like <open-tag> and <closed-tag> between control you want. For example, I want to make a login dialog box like this:

Basic and simple login dialog box, which there are 3 kind of controls: Window, Textbox and Button. Now let’s see the code.

<ext:Window runat="server"
     ID="wLogin"
     Icon="Application"
     Title="Login"
     Width="300"
     Height="150">
  <Body>
      <ext:FormPanel  runat="server"
                      BodyStyle="padding:5px;"
                      ButtonAlign="Center"
                      Frame="true"
                      Height="120"
                      Width="300"
                      Header="false">
        <Body>
          <ext:FormLayout runat="server">
            <ext:Anchor>
              <ext:MultiField runat="server"
                              FieldLabel="Username">
                <Fields>
                  <ext:TextField runat="server"
                                 ID="tfLoginUserName"
                                 EmptyText="Masukkan Username..."
                                 AllowBlank="false"
                                 EnableKeyEvents="true"
                                 StyleSpec="text-transform: uppercase;">
                  </ext:TextField>
                </Fields>
              </ext:MultiField>
            </ext:Anchor>
            <ext:Anchor>
              <ext:MultiField runat="server"
                              FieldLabel="Password">
                <Fields>
                  <ext:TextField runat="server"
                                 ID="tfLoginPassword"
                                 InputType="Password"
                                 EmptyText="123456"
                                 AllowBlank="false"
                                 EnableKeyEvents="true"
                                 StyleSpec="text-transform: uppercase;">
                  </ext:TextField>
                </Fields>
              </ext:MultiField>
            </ext:Anchor>
          </ext:FormLayout>
        </Body>
        <Buttons>
          <ext:Button runat="server"
                      ID="bLogin"
                      Text="Login"
                      Icon="Lock">
          </ext:Button>
          <ext:Button runat="server"
                      ID="bCancel"
                      Text="Batal">
          </ext:Button>
        </Buttons>
      </ext:FormPanel>
  </Body>
</ext:Window>

Seems little bit long, doesn’t it? And inside the code, it does have non controls that we want. Take a look at FormPanel, FormLayout and MultiField tag, why these control must be there? Because these controls are the Container of the child control such TextField. So definition of Container must be written, it is a must. With 60 lines long, thought that you may fell uncomfortable. But in Visual Studio, once you type the opening tag <ext:FormLayout> then automatically closed tag </ext:FormLayout> will be written. So I think that’s not a big deal. When typing all of these lines of code, put simply as what kind of control/container do you want to, then type it. I’ve experienced that writing code above just consume a couple of minute, may be you do less time :)

Don’t matter what kind of language you use, c# or vb. This component have compatibility. Oh wait! I almost forgot. When you use this control below the <!DOCTYPE…> tag you must add this line:

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

And inside the body tag add this line:

<ext:ScriptManager ID="ScriptManager1" runat="server" />

Happy Coding then :)
see examples from coolite here.

Advertisement

2 Responses to “Coolite, yet another Ajax based .net 3rd party component”

  1. test Says:

    ini adalah test untuk kamu aja

  2. Idmer De la Cruz clemente Says:

    hola amigos bueno antetodo un saludo, el motivo que les escribo es para que me puedan aclarar por q soy principiante con esta nueva tecnologia. lo querio preguntar es por que cuando se pone un formpanel a un window y los objetos que estan dentro del formpanel no se ve cuando se quiere ver en diseño en asp.net, la otra pregunta es de como asigno un evento a un boton por q no ace efecto gracias..


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.