Smart link

Smart link
Ok, there is no such think as smart link (as far as I know). I’ve just made that name up. Lot’s of times, I want one link to do several things, depending on what user decides. Putting a whole lot of links that do almost the same thing, with some small difference is not an option because it a) confuses users and b) most of the time, there is not enough space on the screen to do that. So, thanks to AtlasControlToolkit HoverManuExtender this idea become very easy to implement with absolutely no need to know dhtml, which used to be the only way to do these things before (and not a very good way if I may add).

So I’ve created a small form for this example that fakes saving people you know to some list. Basically I want to give users 4 options – 1 default and 3 optional. When you enter first name, last name and email of a person that you know, you can save that to the default list “people I know” or optionally you can save it to the lists “friend”, “enemy” and “potential friend”. I know that this example is moronic in its very nature, but hey, I’m a developer, not a screenwriter.

So first I’ve added my form.

OPEN CODE IN NEW WINDOW

Then I’ve added a default LinkButton, that when clicked will add the data to the default list “people I know”. However, as soon as you hover over that link, three additional links will appear “Add as a friend”, “Add as an enemy” and “Add as a potential friend”. Clicking any of these link will invoke the appropriate method assigned to their onClick event. Pretty easy.

OPEN CODE IN NEW WINDOW

Let’s examine a bit the HoverMenuExtender or better to say it’s list of properties HoverMenuProperties. First we have TargetControlID property, which determines which control (and it can be any control, not necessarily LinkButton) when hovered over will display the additional links. You can think of this property as ID of your default link. Second, property is HoverCssClass, which basically sets the class of that default link when hovered over. I’ve tried doing this through pure css (a:hover kind of thing), but by using HoverCssClass your default link will keep the “hover” style even when you move to the submenu (not the case with doing it with pure css). So, use HoverCssClass. Next property is the PopupControlID, which simply determines which control holds your submenu. In my case it’s the pnlAddOptions panel, which holds the three additional links. Last property I’ve used is PopupPosition, which hmmm… (I feel so stupid explaining these no brainer properties), determines on which side relatively to your default link, will the submenu appear.

You can download the whole project from reBlogger lab.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


Advertisements

Back from vacation

Rab, Croatia
As you may have noticed this blog has been really quite for last two weeks. Namely, I was on a vacation at the gorgeous island Rab, Croatia. It was very relaxing… soaking up the sun and just taking it easy. I was not online nor did I bring my cell phone. So, I hope you had nice summer as well (those of you from north hempisphere at least). Anyway, as of today I’m back in the loop. Sorry for not letting you know beforehand about this. Oh… by the way this is the actual picture of the place I went to. 🙂


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


The code examples to be moved to reBlogger lab

I like wordpress… it’s nice, except when you try to post some code examples. Then it sucks, tends to drive me absolutely insane and it really shakes my decesion to quit smoking.

So, hopefully by the end of this week, all the code examples will be posted over at reBlogger Lab, and this place will be a blog. Place where I will mostly ramble about different things that are even remotely tied to Atlas and reBlogger.

The code examples will still be explained and mentioner here, but I can’t be bothered to spend 2 hours negotiating with the wordpress text editor.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


Using Atlas:AutoCompleteExtender to simplfy browsing large lists

After people started to use our application reBlogger extensively and filled it with hundred of feeds, it become quite difficult to find a particular feed if someone requested it (for example, one blogger emailed us asking to remove his feed from reBlogger). The obvious solution for this problem whas to provide users with auto complete textbox, that will let them easily find a particular feed. Here is the screenshot of this reBlogger feature :

To achieve this, you need a classic Asp.NET text box, whose functionality you will later extend with Atlas:AutoCompleteExtender. So first the textbox :

OPEN CODE IN NEW WINDOW

There are few attributes here that you need to pay attention to. First of all it is TargetControlID, where you need to set the ID of the TextBox control that you want to extend (in our case, that is txtBlogTitle). Second attribute is the ServiceMethod, which is the name of the function that will return array of type string with suggested value (I’ll explain this function later in the post, so keep reading). Then we have ServicePath, which is nothing more than relative path for the .asmx file where GetBlogTitlesForAutoComplete function is located. Lastly, we have MinimumPrefixLength attribute. Obviously, this determines how many characters need to be entered by user so that the textbox starts suggesting results. For very large lists you may want to set this even higher (3 or 4), to increase performance, but bear in mind that it’ll be less useful at the same time.Now, that’s all we need to do in the .aspx page. Now, let’s turn to the manage_blogs.asmx file that actually returns the values to the AutoComplete textbox. I’ll write the whole function here first and then explain it.

OPEN CODE IN NEW WINDOW

The code is commented so you should have no problems understanding it. This is of course, just one way of doing it. The main thing is that you return a string array back. Also, it is important to note that you need to have the function with the signature as shown. 


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


Use UpdatePanel controls to quickly ajaxify your existing Asp.NET code

When we decided that we are going to use Atlas in development of the new version of reBlogger we’ve already had 3 versions of that application after us. What we were looking for was to improve the “admin” area of application with ajax (atlas, better to say), but the idea of rewriting all that code over was quite terrifying.

Luckily, atlas:UpdatePanel control allowed us to make our application “do it’s thing” without rewriting all from the scratch.
Yes, update panel with it’s partial rendering concept is not THE BEST way performance-wise, but in most of cases if you apply it correctly it works like a charm…

So, here is a brief example of one of the functionality we were able to do without postbacks (page refreshing itself) with altas.

We had just a normal datagrid with list of blogs that reBlogger is “reading” every day. Alongside each blog there was a “Delete” button. What we wanted is that when user deletes a blog is for that blog to be deleted and datagrid refreshes without page flashing/refreshing. Same goes for paging and sorting of the datagrid. While that operation was happening, we wanted a little progress gif to display (  Loading Image  ).

So after setting up the web.config file for atlas (you can download the atlas control toolkit, it has an example web.config file which you can use to start out), we modified the .aspx page that contained that particular datagrid. Here are the steps you need to do :

1. In between head tags (we put it right under the title tag), you need to register atlas scripts. You do that by pasting following code :

<atlas:ScriptManager runat=”server” ID=”scriptManager2″ EnablePartialRendering=”true”>
</atlas:ScriptManager>

Make sure you have the EnablePartialRendering attribute set to true! 2. Next thing we’ve done is surround our datagrid with the atlas update panel tag

<atlas:UpdatePanel ID=”up_GridBlogs” runat=”server” Mode=”Conditional”>
… here goes the old data grid code …
</atlas:UpdatePanel>3. Last thing you need to do is add the atlas:UpdateProgress control. That control will display the “loading…” image when user presses “delete” button. What is really cool about this control is that it is damn smart :), namely it knows when there is asynchronous operation happening and it displays the image automatically. Then when the asynchronous operation is
over it hides it. Now, that’s the way all programming should be done 🙂<atlas:UpdateProgress ID=”prgs” runat=”server”>
<ProgressTemplate>
<img id=”add_blog_loading” src=”assets/loading.gif” mce_src=”assets/loading.gif” alt=”” />
loading data, please wait…
</ProgressTemplate>
</atlas:UpdateProgress>

Obviously, inside of the “ProgressTemplate” you’ll put any HTML that you want to be displayed while there asynchronous updating on your page.

Ok, that’s it. Now, since this just saved you 4 hours of coding today, turn off your computer and go to see a movie! 😉


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


Darken the page and set focus on the user input

Since the ajax/atlas days came into the play lot’s of times we need a simple input from user and don’t want to redirect user to another page. The obvious question is how to show user that his input is necessary and stay at the same page…

This is a trick I’ve seen on several web sites and I just adore it. I don’t know how other people do it, but here is my version of it.

Personally, I’ve used it while developing the upcoming version 4 of reBlogger to allow users to insert their comments on post, without leaving the page where they were reading the post.

EXAMPLE : First image is showing the page in normal mode. Second image is that same page, but user is prompted for input (her email address in this particular case). This an imaginary example, so don’t go to reblogger.com and try to see it working 🙂

Darken the page and set focus on the user input

So the basic idea here is that you have one div element that you’ll use as a screen (it’ll darken the page) and obviously, you can have any number of input panels that you’ll show when the main page darkens.

You’ll be using the same DarkenPage() javascript function every time you need some input from user and then you would show the input panel (another div element).

Let me just briefly explain the function that shows the input panel here :

function ShowNewsletterPanel()
{
var newsletter_panel = document.getElementById('newsletter_panel');
// w is a width of the newsletter panel
w = 300;
// h is a height of the newsletter panel
h = 300;
// get the x and y coordinates to center the newsletter panel
xc = Math.round((document.body.clientWidth/2)-(w/2))
yc = Math.round((document.body.clientHeight/2)-(h/2))
// show the newsletter panel
newsletter_panel.style.left = xc + "px";
newsletter_panel.style.top = yc + "px";
newsletter_panel.style.display = 'block';
}

As you can see we are first determining the coordinates that will center our input panel on the page. The width and height of the update panel can be changed to whatever suits your needs, but bear in mind that you need to change those values in CSS as well as in this function.

For the dark screen itself, the trick is to use

filter:alpha(opacity=80);
opacity: 0.8;

in css. The two values are here because of the browser issues. Obviously 100 is no opacity at all and 0 is complete opacitiy (the element is invisible). Feel free to play with those values until you find something you like.

Here is the link from reBlogger lab where you can download the HTML page example.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”


Getting a DataTable from server and working with it in Javascript (VB.NET)

For any Asp.NET developer one of the most common scenarios is retrieving data in form of a DataTable from server (unless, you are dead serious about using data reader 🙂 ). So how to do it with Atlas and avoid postback… quite simple actually.

First what you need to do is create a web service file which you will use to retrieve data. To do that, you would go to Visual Studio (assuming you have created a web site already), right-click on your web site in Solution Explorer, then click “Add new item”. Choose “Web Service”, name it GetData.asmx and make sure to uncheck the “Place code in separate file” checkbox.

Make that file look like this :

OPEN CODE IN NEW WINDOW

Now when we have our web service set up, we’ll go to the .aspx page and retrieve that data with atlas. I’m assuming here you know the basics of Atlas, so I won’t go into details. Just remember to put a script manager tag just
under your body tag… should look something like this (make sure you set the service reference to the webservice you’ve just created) :

OPEN CODE IN NEW WINDOW

…Now, we are all set to go into javascript and write the code to get the DataTable. You will basically have two functions, one that will call the function we’ve made in our web service, and other that will receive the datatable as a parameter from our web service functions. It will look something like this :

OPEN CODE IN NEW WINDOW

And that’s all there is to it. No postbacks 🙂 You may want to read this great “Quick Reference for the Atlas DataTable” by Garbin (my advice is to read pretty much anything where you see Garbin underneath, this guy rocks!).Ohh yeah, if I messed up something while writing this post or you have trouble to get it working, feel free to contact me.


This blog is being delivered to you by
reBlogger.com
“Do you know what your employees are blogging about?”