• Git URL : https://github.com/michaelsync/USQTweet
• Help Viewer: http://michaelsync.net/usqtweet/help/

USQTweet – Simple Twitter App

Description

USQTweet is a simple tweet client application that is created for Mobile Module in USQ. You can use this application to view the latest tweet posted by you and people that you are following on your Android phone.

Features

• Login with existing twitter account
• View the latest tweets on mobile phone

Technical

• oAuth 1.0
• Network I/O
• Dual orientation GUI
• File API: Persistent storage using File ( “Isolated storage” style)
• Web View for Twitter authentication process (oAuth) and help file viewer
• Rail-style naming conventing.
• Comment style : YUI Doc
• Titanium (I’m using 1.2)
• Android SDK

Requirements

• This application needs live internet connection.
• You need to have an existing twitter account. (Note to Examiners: I emailed my twitter account details to my teacher “Stijn Dekeyser”. If you don’t have an existing twitter account and don’t want to create new one then you can get my account from Mr-Dekeyser. Please don’t share with other.

Known issues

• If there is some errors in connection or etc, the application won’t let the users know about the problem. You will have to check the debug log in Titanium Console manully and will need to restart the application.
• If you close the web view popup, there is no way to re-open it so you will have to re-run the application.
• WebView is just a small browser in application but it’s not so easy to nevigate so it’s better not to click other links.
• Additional to #1, there is no global exception handling. 5.
• The application will store the access token once you authorized the application. So, it will not ask you to enter username/pwd or authorize again later. But the problem is that when you revoke the access from twitter site but you will have the access token that you have saved earlier in device then you will get the error. You need to clear the application data.
• access token should not be stored in plain format.
• If your tweet is so long then you won’t be able to see the completed text on the screen. I tried positing the text and alignment but using height:’auto’ in one control and specific height in another control doesn’t work well in Titanium.
• You won’t be able to post anything to twitter as well. I posted about this in forum but I haven’t received any reply on this yet.

Reference ~

• Using OAuth 1.0a (https://dev.twitter.com/docs/auth/oauth)
• Twitter REST API (https://dev.twitter.com/docs/api)
• John Kristian’s Javascript Library (http://oauth.googlecode.com/svn/code/javascript/) Note: I’m using sha1.js and oauth.js from his library.
• oauth-adapter (http://code.google.com/p/oauth-adapter/) Note: I didn’t use this library but I looked at the code to understand how things works.

Recently, I downloaded the latest version of RealPlayer and subscribed the Superpass with unlimited access. I found that Realplayer is not only a powerful player but also the downloader that can download the movie (flash version) from any website with just one click. I think Realplayer is pretty impressive. I’m kinda like it.

Okay, back to the topic, I will tell you how to download the flash movie using Realplayer..

How-to?

• Go to any movie website that you like.
• Move over the movie object then “Download This Video” link will be shown at the top-right side of media player.
• Click on this link

• RealPlayer Download and Recording Manager will be shown as the picture below.

• It will take some time depend on the internet connection that you use and other configurations.
• If the downloading is completed, “Play” and “Remove” link will be shown. If you want to play the video, just click “Play” link at the right-side of RP D&R manager.

• Realplayer will be opened and you can watch the video that you have downloaded. That’s all. Cool, isn’t it?

You can find those downloaded videos under this path “C:\Users\(Your User Name)\Videos\RealPlayer Downloads\”. And also, you are able to change the path as you like in “Preferences” dialog of Realplayer.

I hope you are gonna like it. :) btw, Real Online Movie Library is not that good (at least for me) . I was looking for something like that but the problem is that they are not able to add new movies (not episode or TV-series) in their library. So, the idea for opening online movie library with low subscription fees is good but they can’t effort to make this happen until now.

Related ~

• Downloading Flash File using DownloadHelper

Contents

1. Script#’s features
2. Writing the object-oriented code with Script#
3. Tools for generating the documentation and compressing the sourcecode
4. What we meant by Script# as a C# to Javascript Converter is ~
5. Script# as a new language
6. Debugging problem in Script#
7. Script# is not from Microsoft
8. Script# is not Opensource
9. Using the thirt-party Javascript library in Script#
10. Script# for ASP.NET Ajax developers and Vista Gadget developers

1. Script#’s features

Script# supports the compile-time checking, intelliSense, class-viewer, reflection and etc. It helps you not to have any typo-errors (e.g. calling foo’() instead of foo(); foo(arg1, arg2) instead of foo(arg1); ) that the most of Javascript developers used to make. So, the benefit of using Script# is that it will improve your productivity.

Fig: intelliSense


Fig: Tooltip


Fig: Compile-time validation

2. Writing the object-oriented code with Script#

Writing the object-oriented Javascript become so easy with Script#. As you know, writing the object-oriented code in Javascript and C# are quite different. If you are not so familiar with Javascript, you probably need to find the reference when you need to write the code with object-oriented concept. Now, it’s over. You can just write the object-oriented code in C# and Script# will convert this code to the object-oriented Javascript code.

3. Tools for generating the documentation and compressing the sourcecode

If you are using Script#, you won’t need any third-party tool (e.g. JSDoc, Javascript Compressor) for generating the documentation or compressing your javascript library. Script# already has the build-in feature for that purpose.

4. What we meant by Script# as a C# to Javascript Converter is ~

This is very important thing you need to understand before you start learning about Script#. As I said in my previous article, Script# is able to convert the C# code to Javascript. But it doesn’t mean that it can convert all C# code that you wrote in winform or webform. In order to convert the C# to Javascript via Script#, you have to write the Script#-specific code in C# then those codes will be converted to Javascript…

5. Script# as a new language

The syntax of Script# is not so similiar to the Javascript’s syntax. So, I feel like learning a new language to write the Javascript. Another problem is that it is so hard to find the equivalent syntax in Script#.

For example: How to access ‘document’ of created DOMElement??[^]

In Javascript,

var iframe = document.createElement("iframe");
var doc = iframe.contentWindow.document;

In Script#,

using System;
using System.DHTML;
using ScriptFX;
using ScriptFX.UI;

public class MyScriptlet {

public static void Main(ScriptletArguments arguments) {
DOMElement _iframe = Document.CreateElement("iframe");
DOMElementExt contentWindowElement = (DOMElementExt)_iframe.GetAttribute("contentWindow");
DOMElement doc = contentWindowElement.document;

}
}

[IgnoreNamespace]
[Imported]
public class DOMElementExt : DOMElement {

[IntrinsicProperty]
public DOMElement document {
get { return null; }
}

[IntrinsicProperty]
public DOMElement body {
get { return null; }
}

[IntrinsicProperty]
public DOMElement src {
get { return null; }
}

[IntrinsicProperty]
public DOMElement firstChild {
get { return null; }
}
}

If you look at both examples, you will understand how hard to find the equivalent syntax in Script#. It’s okay if we can find the equivalent one. But what if Script# doesn’t support something that can be done with Javascript?

6. Debugging problem in Script#

Script# does support the compile-time validation but the problem is that you won’t be able to debug the C# code that you wrote. Instead, you will have to debug the Javascript code that generate by Script#. I think that it is the big issue for web developer. I don’t feel comfortable to debug those generated code.

7. Script# is not from Microsoft

Script# is not developed by Microsoft while the GWT is developed by Google. It has too much differences. Even thought Nikhil is an architect from Microsoft, Script# is just one of his pet projects.. So, I don’t think that he is gonna support his pet project all the time.. And I’m not so sure that Nikhil will add more features to this project or not..

8. Script# is not Opensource

Script# is not an opensource project. Actually, it’s absolutely okay for me to use the non-opensource projects (I’ve been using the Visual Studio since long long ago.) but there should be a group of people who are supporting this project, right? What if we need the bug-fixed?

9. Using the thirt-party Javascript library in Script#

The most of Javascript libraries /framework (e.g. prototype, script.aculo.us, Yahoo.UI, ExtJS) are not written in Script#. So, you can’t use those libraries right away from your Script# code. I think you will have to create a wrapper class for those libraries in order to use them in your Script#-enabled projects.

10. Script# for ASP.NET Ajax developers and Vista Gadget developers

I think that Script# might be good for ASP.NET Ajax developers and Vista Gadget developers. As I’m not very familiar with those things, I’m not able to cover about this. I need your contributes for this fact.

Okay That’s all from my side. Feel free to let me know if you have any thought or comment. Thanks.

I will tell some attempts that people tried to achieve this goal and the reason why those attempts were failed.

#1. Disabling “Right Click” on webpage by using Javascript.

This is very very old trick and it’s totally useless. Don’t forget “Save As” in File menu. Plus, there are a lot of DOM manipulators (eg: Firebug) to track the path of images.

#2. Adding new transparent image over the actual image

I found some sites (including flickr) that are using this technique to protect their images from being copied. It works for normal users who only knows “Right Click” and “Save Image As”. You can still check the source to get the correct path of actual image that you want. If you are familiar with firebug, you can easily delete the transparent image that you don’t want on the fly.

#3. Using third-part tools for image protection

If you do googling about this a lit bit, you will get a ton of tools advertising that those tools will help you to protect your image from being copied (some even said that those tools are able to protect HTML code too.) Don’t even never spend your money on those tools. I mean it. As I said above, I tried already. I know those tools are not good enough since they have their own limitations. So, don’t waste your money on it.

This fact applied for code protection tool also. Those tools are going to encrypt your webpage and will add a lot of whitespace in your actual source. So, if you check the “View Source” a lit in your browser, you will see plain text or some text you write instead of HTML code. but don’t forget to scroll a lit bit.. You will see goddammed things.. and those tools will eat your bandwidth and it made your visitors to view the web page in slow motion. :)

#4. Putting images in Embedded Object (Flash or ActiveX Object)

I think this is the best way to protect the image so far. but it is possible to download the whole flash file (*.flv) to local machine by using third-party tool or firefox extensions (eg: Download Helper). So, the individual image are safe from being copied but not for flash.

UPDATED (27th August, 2007):

Watermarking (Thanks to mmhan for reminding me about this.)

AFAIK, there are two ways of watermarking. The first way is that putting a watermark simply on the image. This watermark will be visible to everybody. The second way is that putting a invisible watermark on the image by using Steganography.

Yeah. those are the ways that I remember how people tried to protect their images. If you have other ways, don’t hesitate to let me know.

Remember! All images from the webpage are already sent to the temporary internet files of user’s local machine before showing to the web browser. So, user can still copying images from Temporary Internet File folder. And, What about “Print Screen”? :)

So, if you ask me how to protect the image, I would say “don’t do that!” . :)

Fun #1:

1. Go to any website (eg: Google Personalized HomePage)
2. Delete everything in the address bar
3. paste the following code in the address bar:

   javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300;
   y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0;
   i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5;
   DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5); void(0);
   

4. Press enter and have fun! :)

Thanks to Grim.

Fun #2:

1. Go to Google Classic Homepage (*NOT Personalized Home.*))
2. Delete everything in the address bar
3. paste the following code in the address bar:

   javascript:i=100;void(setInterval("i++;document.images[1].width=i",5),setInterval("i++;document.images[1].height=i",5),setInterval("i++;document.images[2].width=i",5),setInterval("i++;document.images[2].height=i",5),setInterval("i++;document.images[3].width=i",5),setInterval("i++;document.images[3].height=i",5),setInterval("i++;document.images[4].width=i",5)
   ,setInterval("i++;document.images[4].height=i",5) )
   

4. Press Enter

Thanks to Harpreet and Philip(Ye Maung).

Fun #3:

1. Launch Internet Explorer
2. Delete everything in the address bar
3. paste the following code in the address bar:

   javascript:function flood(n) {if (self.moveBy) {for (i = 15; i > 0;i--){for
   (j = n; j > 0; j--){self.moveBy(1,i);self.moveBy(i,0);self.moveBy(0,-i);self.moveBy(-i,0);
   } } }}flood(6);{ var inp = "MIKE morf ,ecnavda ni RAEY WEN YPPAH ,iH"; var outp
   = ""; for (i = 0; i <= inp.length; i++) {outp =inp.charAt (i) + outp ; }
   alert(outp) ;}; reverse
   

4. Press Enter

Thanks to the author of this post.

Fun #4: last but not least :)

1. Launch Internet Explorer
2. Delete everything in the address bar
3. paste the following code in the address bar:

   javascript:function reverse() { var inp = " )-: krow ru no yrrac ko.mih morf
   nraeL .seod CNYS LEAHCIM ekil krow lufesu emos oD .esnesnon siht lla gniod rof
   uoy gniyap ton si ynapmoC"; var outp = ""; for (i = 0; i <= inp.length; i++) {
   outp = inp.charAt (i) + outp ; } alert(outp) ;}; reverse()

4. Press Enter

Thanks to Eve for forwarding this code.

Cool.. isn’t it??
Happy Coding! Njoy!! :)

If you have any cool article related to this topic then please let me know. Thanks a lot.

Resources ~

• Writing Object-Oriented JavaScript Part 1
• Writing Object-Oriented JavaScript Part 2
• Writing Object-Oriented JavaScript Part 3
• AJAX in Action: Appendix B – JavaScript for Object-Oriented Programmers
• JavaScript Recommendations for AJAX Component Writers
• Javascript Conventions
• Quick guide to somewhat advanced JavaScript
• Best Practices: Implementing javascript for rich internet applications

Credits: Thanks to the original writers and Sang Shin

Source Code : http://michaelsync.net/demo/ComfirmDialogTest.zip

Introduction

This article describe how to create a Custom Javascript Dialog in ASP.NET. And also, I’m gonna tell you about my experience that I got when I was implementing this dialog in my project.

I’d highly recommend you to download my sample before reading. There are two samples in Demo Project that you can download. The first example is for implementing Javascript Prompt in ASP.NET. Even thought using Javascript Prompt is not a big deal, you can learn how to communicate between the client-side (JS) variable and Server-side (C#) variable, how to register Javascript in Content Page and so on. The second one is the main sample for this article. This sample will show how to create a Custom Javascript Dialog in ASP.NET, some tricks and so on. All coding and issues are discussed in details very well in this article.

What you should already known

• ASP.NET 1.1 (C#) – esp: Page Template and DataGrid
• Javascript and CSS

Understanding of Current Sytem

There is one listing page in the sytem. This page allows the user to delete multiple records at a time. The user has to enter a comment for the reason why he/she wants to delete those records. It can be done very easily in ASP.NET by using DataGrid with checked boxes. ( plus one textbox for comment and one button for deleting) Unfortunetly, our client is not happy with having one extra textbox for filling a comment in this page cuz of some UI issues. They more perfer to have something like Javascript Popup window with nice UI in this page.

Our Goals

1. Showing Javascript Dialog : The Main Goal is that showing nice javascript dialog when the user click the “Delete” button. [Showing Popup in Javascript is not that difficult but we have other requirement too.].
2. Handling the sequence of the events :Since we are already written the code for Deleting the records in Server-side, this code (C#) should be executed after executing the client-script.
3. Accessing the client-side variable from Service-side, The comment text has to be accessible from Server-side code.

Javascript Prompts

var str = prompt('Please Enter the comments!');

“Prompt” is a build-in function in Javascript to show a window like that below picture. It’s extremely easy to use. Another advantage is that the Server-side won’t be executed as long as this prompt is showing. The Server-side will be executed ONLY if the user click “OK” or “Cancel” so that we don’t need to any trick or hack to pause the Server-side executing.

Okay. Let’s start coding! (I’m gonna use the basepage class that I have used in this sample (zip file no #1).) Firstly, we write a Javascript function called “AskForComment” as below.
Note that we have to check whether the user cancel the operation or not.

(Refer to Blue line. we are checking three condition in this line.

1. (str == ”) is checking whether the user fills anything or not. Actually, we should trim this variable.
2. ( str == ‘undefined’) is also checking the same thing. only different is that ‘undefined’ is the default value of prompt in IE.
3. ( str == null) is checking whether the user click “Cancel” button or not.) If the user doesn’t fill anything or click “Cancel” then our function is gonna return “false”, which means there wont be any further execution.

<script language="javascript">
function AskForComment(){
  var str = prompt('Please Enter the comments!');
  if((str == '') || ( str == 'undefined') || ( str == null))
    return false;
  else{
    return true;
  }
}</script>

Accessing the Client-side variable (variable named “str” in this sample ) from Server-side Code

Here, we have one problem in accessing the javascript variable called “str” from Server-side code. So, we need to have one inferface that can be accessible from both Client-side and Server-side. So, I decide to use a Hidden Field as an interface in this sample and named it “hiddenComment” and also change this HTML Hidden Control to Server side control by adding “runat=”server”. Now, we have a control that can be accessed from Javascript and Server-side script (C#).

The following changes (in blue color) we need to made in our Javascript for getting the object of Hidden Field. (Note that _ctl5_hiddenComment is the ClientID of Server-side Hidden Field.)

<script language="javascript">
function AskForComment(){
  var str = prompt('Please Enter the comments!');
  if((str == '') || ( str == 'undefined') || ( str == null))
      return false;
  else{
      document.forms['frmBase'].elements['_ctl5_hiddenComment'].value = str
      var obj = document.getElementById('_ctl5_hiddenComment');
      obj.value = str;
      return true;
  }
}</script>

We just finished writing the Javascript as above with the required feature. But I think that it’s better if we register this Javascript function in Page_PreRender event since the ClientId of Server-side Hidden Field might be changed anytime. (If you dont know how to register the Javascript Function in Page_PreRender Event, please take a look at SampleControl1.ascx in Sample Project. You will see the completed code in SampleControl1_PreRender Event.)

After that, there is only two things we need to do. First one is that we have to attach our Javascript Function in “Delete” button.

btnDelete.Attributes.Add("onclick", "return AskForComment();");

Note: “return” is very important here. Because we dont want any further execution in case the user click “Cancel”.

Then, the last thing is that we have to check whether we are able to get the value of Hidden Field in the Click Event of “Delete” Button.

private void btnDelete_Click(object sender, System.EventArgs e)
{
  Console.WriteLine(hiddenComment.Value);
}

Demo

Please open the page called “Sample1.aspx” from my sample. Set the breakpoint at the Click event of “Delete” button. Then, run the web project.

There are one DataGrid with Checkboxes in this page “Sample1.aspx”. If you click the “Delete” button then the Javascript Prompt will be shown for asking the comment. Type something you want and click “OK” button. Then, the Click event of “Delete” button will be fired. Now, you can check the value of Hidden Field “hiddenComment”. You will get the text that you type in Prompt.

*** Note: I didn’t use any database for the data that suppose to be in DataGrid. I have created two classes called “Person” and “Persons” in this sample. and All data from Persons class will be binded to DataGrid.

In the Click Event of “Delete” button, I didn’t put anything related to Database. But you will find the code for getting the value of hidden field and getting the selected item of DataGrid.

Okay. We have just done. But the main disadvantage that I really don’t like is that it doesn’t look good. It looks very different from the existing UI of our current system. So, We will think about other way.

Custom Javascript Dialog

As you all know, there are a lot of Opensource Javascript **box in Internet. They all have their pros and cons. Some Javascript Libraries or toolkits have a lot of features such as Ajax support, DOM, Animation, Drag and Drop and so on. but they are not Light weight. In our sample, we just need to create one Custom Javascript Dialog . We dont any other features and we dont wanna load a ton of javascript objects (which won’t be used anyway) in web broswer.

So, I’m just going though the source code of Javascript Toolkit and I come to know that Greybox Redux is pretty good toolkit and has very sample implementation.

but one thing I don’t like is that this toolkit is using IFrame. As IFrame is using in it, we might properly need to have one extra page to show in IFrame. However, we don’t like to have one extra page in our System. So, I decide to use HTML Table instead of IFrame since I don’t need to show anything dynamic on this dialog.

Okay. Let’s start!

Creating HTML Window

Before we start creating a custom dialog dynamically, we should start creating a static dialog in HTML.

In Head Tag ~

#GB_window {   top: 10px;   left: 0px;   position: absolute;   background: #fff;   border: 5px solid #aaa;   overflow: auto;   width: 410px;   height: 158px;   z-index: 150; }

#GB_caption {   font: 12px bold helvetica, verdana, sans-serif;   color: #fff;   background: #888;   padding: 2px 0 2px 5px;   margin: 0;   text-align: left; }

#GB_window img {   position: absolute;   top: 2px;   right: 5px;   cursor: pointer;   cursor: hand; }

In Body Tag ~

<div id='GB_window'>
<div id='GB_caption'>Confirm Dialog</div>
<img src='close.gif' alt='Close window' '/>
<div id='definition'>
<table border='0' width='400' height='130' cellspacing='0' cellpadding='0'
ID='Table1'>
<tr>
<td height='23' width='18'> </td>
<td height='23' width='446'> </td>
<td height='23' width='31'> </td>
</tr>
<tr>
<td height='24' width='18'> </td>
<td height='24' width='446'><font face='Verdana' size='2'>Please fill
the reason for deleting records!</font></td>
<td height='24' width='31'> </td>
</tr>
<tr>
<td height='23' width='18'> </td>
<td height='23' width='446'><input type='text' name='T2' size='57'
ID='Text1'></td>
<td height='23' width='31'> </td>
</tr>
<tr>
<td height='23' width='18'> </td>
<td height='23' width='446'>
<input type='button' value='Delete It!' name='B4' ID='Button1' ></td>
<td height='23' width='31'> </td>
</tr>
<tr>
<td height='23' width='18'> </td>
<td height='23' width='446'> </td>
<td height='23' width='31'> </td>
</tr>
</table>
</div>

</div>

Output will be as following image.

Note:

1. DIV “GB_Window” and CSS “#GB_window” is for base dialog.
2. DIV “GB_caption” and CSS “#GB_caption” is for the Caption of Dialog. For example: if you wanna have “blue color” (instead of “grey color”) for the background of capture, you can simply change the color value in CSS of #GB_caption.
3. CSS #GB_window img is for “Close” image that you can replace with any picture. The current image is not the original image of Grey Redux. I made it a lit bit smaller.
4. All tags within the div “definition” are the content of dialog. For example, if you dont want one text, one textbox and button to show in dialog, you can replace with anything you want.

Implementing Custom Javascript Dialog in ASP.NET

Please open the HTML View of TestContentPageControl.ascx from the sample project that you downloaded. (As there are a lot of code in this page, I won’t paste all coding here.)

There is one div called “div1″. This is a placeholder where our Custom Javascript Dialog suppose to be displayed. ( As I wanna use “InnerHTML” instead of using “HTML DOM”, you put this div in this page. ) You may notice that the style of this DIV.

1. DISPLAY: none; This DIV should not show until the user click the “Delete” button.
2. Z-INDEX: 111; If there are other controls placed on your page, you should set the highest value of this style. otherwise, the custom dialog will be shown behind the other controls.
3. POSITION: absolute; this is a must since we wanna show the dialog at the center of page

You may also find the hidden input called “hiddenComment” in TestContentPageControl.ascx. The main thing is that this control has to be a Server-side control. So, both client-side script (js) and server-side script (C#) are able to access this control. (I already explain about the use of Server-side Hidden Field earlier.)

After viewing the HTML view of ascx file, we should go and check the PreRender event of page “TestContentPageControl_PreRender”.

There are three javascript functions (hideWindow(), showWindow() and deleteit()) in this event. (You may notice the variable called g_IsWindowShown in this event. I will explain about it later. For the time being, we will just focos on showing and hiding the JS dialog.)

Understanding of hideWindow() Javascript Function

This function is very simple. When the user click “close” image or “cancel” button then we set the “Display” style of div1 to “none”.

Understanding of showWindow() Javascript Function

The following lines is used for getting the clientWidth and setting the dialog at the center of the page.

var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var oDiv = document.getElementById('div1');
oDiv.style.left = ((w - 410)/2) + 'px';

Then, we declare the variable called str in this function and we will append the HTML code ( that I show in “Creating HTML Window” ) to this variable.

After that, we set this varible to the inner text of div1. (oDiv.innerHTML = strWin;) then, we show this DIV in browser.

Here, we have one problem. After showing our Javascript Dialog, the execute goes to the Server-side. (It is not like that Javascript Prompt. When we are using Javascript Prompt, the execution is paused as long as this prompt is showing.) So, we need some tricks for pausing the execution and re-running the execution.

Trick #1

The javascript variable called “g_IsWindowShown” is declared for this purpose.
As the JS Dialog doesn’t show by default, the default value of this variable become “false”. When the user click “Delete” button, we show the JS Dialog and set this variable to true. **But we return “false” in ShowWindow() function. (so that the execute wont’ go to Server-side.)

If the user click “cancel” or “close” image, we call “hideWindow()” function. In this function, we hide the JS dialog and set the variable “g_IsWindowShown” to true. (We also return “false” in this function since we dont want the Server-side code to execute.)

If the user click “Delete It” button then we call “deleteit()” function. In this function, we set the text of textbox to hidden field so that this value can be read from Server-side script. then, we fire the button client event of “Delete” button (not “Delete It” button.) then, showWindow() function will be invoked again. At that time, the variable “g_IsWindowShown” will be true. After that, we just return “true” from this function. So, the Server-side code will be executed. Here is the end of our trick. :)

Demo

- Please open the Demo Project.
- Set the breakpost at btnDelete_Click.
- Please run “TestContentPage.aspx” in Demo Project.
- Select some checkedboxes in the Grid.
- Click “Delete” button
- Type the comment
- Click “Delete It” button in Javascript Dialog.
Ob: The Click event of btnDelete will be invoked and you can check the value of hidden field to see what comment you hav filled. and also, you can see which checkedboxes you have selected.

Conclusion

Sorry if you think that my article is too long.. (plus my writing is also not very interest. :) ) Anyway, I try to explain as much clear as I can and hopefully, you will find it useful.. Please let me know if you have suggestions or comments..

Using ASP.NET Calendar and Yahoo.UI.Calendar in ASP.NET 1.1

DEMO Project can be downloaded from the link above.

Introduction

The Calendar control becomes an essential control for business application developments since the most of data entry forms used to have one or more field for Date value. Let’s say! we are working on a page called “Candidate Resume Entry” of Recruitment System. There will be some date fields such as “Date of Birth of Candidate”, “Resume Submitted Date” in that page. The calendar control needed to be used in that page. Okay. Let me stop talking about this here as I know you already know how calendar control is important for your project.

There are three sections in this article and each section has two parts called “Running the demo project” and “Lab“. First, you can see how it looks like by running the demo application. Then, if you wanna use this control in your project, you can read the details in “Lab”.

The following topics will be covered in this article.

• Using ASP.NET Calendar Control in ASP.NET Project
• Showing ASP.NET Calendar Control in Popup Window
• Using Yahoo.UI.Calendar Control in ASP.NET Project

Note:

1. I’d highly recommend you to download the demo project before start reading this article.
2. Even thought there are three different sections in my article, you can feel free to skip any section and move on to the next section that you wanna read.

Thanks. Hopefully, you may find it useful.

Using ASP.NET Calendar Control in ASP.NET Project

This section is created only for beginners who haven’t used ASP.NET Calendar in Web Project. Feel free to skip this section if you already know about it.

Running the sample

1. Download and extract the zip file.
2. Set SimpleCalendar.aspx as start page.
3. Run the web application.
You will see the result as below if you click “…” button nearly Date Of Birth TextBox.

4. If you choose a date from Calendar Control then the selected date will be shown in TextBox and this calendar will be disappeared.

Do you wanna try this code in your owned project?

Lab: Using ASP.NET Control in ASP.NET Project

1. Create one ASP.NET Web Project (C#)
2. Place TextBox and Button in WebForm

<asp:TextBox ID="txtDOB" Runat="server">
</asp:TextBox>
<asp:Button ID="btnDOB" Runat="server" Text="...">
</asp:Button>

3. Add Calendar control to WebForm.
( Thanks to the Author of this article for custom style of calendar control.You can remove the style if you dont wanna customize the appearance.)

<asp:calendar id="cdrCalendar" runat="server"
backcolor="#ffffff" width="250px" height="200px"
font-size="12px" font-names="Arial" borderwidth="2px"
bordercolor="#000000" nextprevformat="shortmonth"
daynameformat="firsttwoletters"
<strong>Visible="False"</strong>>
<TodayDayStyle ForeColor="White"
BackColor="Black"></TodayDayStyle>
<NextPrevStyle Font-Size="12px" Font-Bold="True"
ForeColor="#333333">  </NextPrevStyle>
<DayHeaderStyle Font-Size="12px"
Font-Bold="True">
</DayHeaderStyle>
<TitleStyle Font-Size="14px" Font-Bold="True"
BorderWidth="2px" ForeColor="#000055">
</TitleStyle>
<OtherMonthDayStyle ForeColor="#CCCCCC">
</OtherMonthDayStyle>
</asp:calendar>

4. Add the following codes in Button Click Event

try{
if(txtDOB.Text.Trim() != "")
cdrCalendar.SelectedDate =
Convert.ToDateTime(txtDOB.Text);
}
catch
{}
//showing the calendar.
cdrCalendar.Visible= true;

5. Add the following codes in SelectionChanged Event of Calendar

//displaying the selected date in TextBox
txtDOB.Text = cdrCalendar.SelectedDate.ToString();
//hiding the calendar.
cdrCalendar.Visible= false;

Finally, run your web application. You will see the same result as the picture above. That’s. It is Simple. isn’t it?

Showing ASP.NET Calendar Control in Popup Window

Now, we have some ideas about how to use ASP.NET Calendar. we will try to improve our code more better.
So, How about showing the Calendar in pop-up window? Oki. Let’s see..

Running the sample

1. Set PopupCalendar.aspx as start page.
2. Run the web application. You will see the calendar in pop-up window as following picture.

Lab: Adding Pop-Up Calendar Control in your owned project

Here are some facts if you wanna try this code in your owned project.

1. Three things you need to copy from demo project to your project

• Calendar.aspx under Controls Folder
• Styles.css under CSS
• pdate.gif and today.png under Images

2. Two things you might need to check

2.1. Path of the CSS of Calendar

&lt;link href=<strong>"../CSS/Styles.css"</strong>
type="text/css" rel="stylesheet">

2.2. Path of the Calandar Image

<asp:imagebutton id="BtnRefresh"
runat="server" ToolTip="Refresh"
ImageUrl=<strong>"../Images/today.png"</strong>>
</asp:imagebutton>

3. Three things you need to add to the page that you want this calendar to display.

3.1. TextBox and HyperLink

<asp:TextBox ID="txtDOB" Runat="server">
</asp:TextBox><asp:HyperLink id="imgDate"
runat="server" ImageUrl="Images/pdate.gif">
HyperLink
</asp:HyperLink>

3.2. Adding Javascript function to open pop-up window

<script language="javascript"
type="text/javascript">

function calendarPicker(strTxtRef){
window.open('./Controls/Calendar.aspx?field=' + strTxtRef   +
'','calendarPopup','titlebar=no,left=470,top=100,' +
'width=300,height=250,resizable=no');
}
</script>

3.3. Calling JavaScript Function

imgDate.NavigateUrl = "javascript:calendarPicker('document.Form1." +
txtDOB.ClientID.ToString() + "');";

Note: Form1 is the name of web form that you want calendar to display on it. If you are not sure about it, go to HTML view and check it.

eg:

<form id="Form1" method="post" runat="server">
</form>

Finally, you can start running your project and check whether it’s working fine or not.
Good Luck! :-)

Using Yahoo.UI.Calendar Control in ASP.NET Project

Personally, I don’t like that much about showing something in pop-up window. So, I was looking for something better. then I came to know Yahoo UI Library which is amazing javascript library and it is compatible with the most popular browsers. Let’s take a look at the demo.

Running the sample project

1. Set YahooUICalendarSimplePage.aspx as start page.
2. Run the web application. You will see the calendar in pop-up window as following picture.

Lab: How to use Yahoo.UI.Calendar in your owned ASP.NET project

You need to add the following stylesheets,javascript files and image in your project.

1. Stylesheets

1. calendar.css
2. dpSyntaxHighlighter.css
3. fonts.css
4. reset.css

2. Javascript Files

1. calendar.js
2. dom.js
3. event.js
4. yahoo.js

3. Image

1. pdate.gif

4. In aspx file,

Add the following code in HEAD Tag~

<script type="text/javascript"
src="./JS/yahoo.js"></script>
<script type="text/javascript"
src="./JS/event.js"></script>
<script type="text/javascript"
src="./JS/dom.js"></script>
<link type="text/css" rel="stylesheet"
href="./CSS/fonts.css">
<link type="text/css" rel="stylesheet"
href="./CSS/reset.css">
<link rel="stylesheet" type="text/css"
href="./CSS/dpSyntaxHighlighter.css">
<script type="text/javascript" src="./JS/calendar.js">
</script>

<link type="text/css" rel="stylesheet"
href="./CSS/calendar.css">
<script language="javascript">
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar(
"YAHOO.example.calendar.cal1",
<strong>"cal1Container"</strong>);
YAHOO.example.calendar.cal1.title = "";
YAHOO.example.calendar.cal1.onSelect = setDate1;
YAHOO.example.calendar.cal1.render();
}

function showCalendar1(txtDateClientID,btnCalendarID) {
this.link1 = document.getElementById(btnCalendarID);
this.oTxtDate = document.getElementById(txtDateClientID);
var pos = YAHOO.util.Dom.getXY(link1);
YAHOO.example.calendar.cal1.oDomContainer.style.display='block';
YAHOO.util.Dom.setXY(YAHOO.example.calendar.cal1.oDomContainer,
[pos[0],pos[1]+link1.offsetHeight+1]);
}

function setDate1() {
var date1 = YAHOO.example.calendar.cal1.getSelectedDates()[0];
YAHOO.example.calendar.cal1.oDomContainer.style.display='none';
var formattedDate = date1;
<strong>oTxtDate.value = formattedDate.getDate()+'/'+</strong>
<strong>(formattedDate.getMonth() +1) +'/'+
formattedDate.getFullYear()</strong>;
}

YAHOO.util.Event.addListener(window, "load", init);
</script>

Note:

YAHOO.example.calendar.cal1.getSelectedDates() in setDate1() function will be returned the selected date as long date format. Even thought I have converted that long date format to short date format (DD/MM/YYYY), you can remove the last line if you wanna get long date format. “cal1Container” in init()is the id of DIV where Yahoo.UI.Calendar support to be attached.

<strong>
<div id="cal1Container"
style="DISPLAY: none; POSITION: absolute" ></div></strong>
&lt;asp:TextBox ID=<strong>"txtDOB"</strong>
Runat="server"></asp:TextBox>
&lt;a id="chooseday"
onclick="showCalendar1('<strong><% =txtDOB.ClientID %>'</strong>,
<strong>'imgCalendar'</strong>)" href="javascript:void(null)">
&lt;IMG id=<strong>"imgCalendar"</strong>
border="0" alt="" src=<strong>"Images/pdate.gif"</strong>>

Here is the discussion.

Feel free to let me know if you have any comment for this script.

<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language=javascript>
/*
Changing the image at runtime by using JavaScript.
@imgId   : ID of Image HTML Control
@strPath : The path of the image that you just browse.
*/
function changePic(imgId,strPath){
var o = document.getElementById(imgId);
var s = new String(strPath);
s = s.replace("\\","/");
alert("file:///" + s);
o.src="file:///" + s;
}
</script>
</head>

<body>

<p>
<img id=“img1″ border=”0″ src=”../sm_sunita.jpg” width=”300″ height=”225″>
</p>
<p>
<input type=”file” name=”F1″ size=”20″ onchange=”changePic(‘img1′,this.value)”>
</p>
</form>
</body>
</html>

Note: Demo Images has been removed.

OpenLaszlo is licensed under the Common Public License (Version 1.0).

OpenLaszlo is an open source platform for creating zero-install web applications with the user interface capabilities of desktop client software.

OpenLaszlo programs are written in XML and JavaScript and transparently compiled to Flash and soon DHTML. The OpenLaszlo APIs provide animation, layout, data binding, server communication, and declarative UI. An OpenLaszlo application can be as short as a single source file, or factored into multiple files that define reusable classes and libraries.

OpenLaszlo is write once run everywhere. An OpenLaszlo application developed on one machine will run on all leading Web browsers on all leading desktop operating systems.

http://www.openlaszlo.org/
http://www.laszlosystems.com/developers/