New Era;
Friday, 12 February 2010Coolite, yet another Ajax based .net 3rd party component
Saturday, 6 February 2010I’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.
Hi all..
Friday, 5 February 2010Before I begin writing next chapter of posts. I’d like to share about embedding code.
We’ve known that despite writing bunch of lines it’s better to use picture. Pictures means a lot bro
First, embedding code.
Embedding information (in text) can use one of this method: blockquote and embedding code. Blockquote which is use couple of ~ ” ~ double quote characters in front of your text information and at end of your information. I’m going to write Hi, hello world! using blockquote and this gonna be like this:
Hi, hello world!
Preety nice, but become not nice if I want to share my piece-of-code (script). To handle this, let’s move to next method by using code tag.
Hi, hello world!
Seems different right? Thus I’m gonna use source-code tag.
Hi, hello world!
you can use any of them based on your purpose
Second, embedding Video.
I’m using youtube for this example. Simply when typing new post, click the ‘Add video’ above editor toolbar.
or you can type:
[ youtube=http://www.youtube.com/watch?v=zJFgkRtJJn4 ]
without <space> character before and after link from your video. That’s all folks.
Happy Blogging
