jump to navigation

User front end for mlists November 9, 2006

Posted by _netoLopez in .net, c#, mlists, programming, projects, web2.0.
trackback

Ok, now to implement our MailingList class on an application…

I’ll start by showing a screenshot of my outcome,

MailingList GUI

notice I divided it by coloring some sections as follows:
Orange, active mlists
Yellow, selected mlist detail
Blue, create a new mlist
Green, subscribe/unsubscribe to an mlist
Gray, distribute some “html” content to a list

The Orange section

Here, we interact with the MailingList class by means of the GetActiveLists() static method, to get a string array of active mlists on the database. With the string array, I iterate thru it and output some more ways to interact with a MailingList object to accomplish other stuff (refer to the links).  Since I already have the active mlist codes, I also use the same iteration to populate some dropdowns on the Green and Gray sections, which we’ll see later.

mlists_orange_load

Other things that can be covered for the Orange section are the view link and the expire link.

View link: this will show us the active (not expired) email addresses that are subscribed to the mlist. On my implementation, this will popup a new window.

mlists_orange_view

This popup contains the mlist Name in bold, followed by the mlist Description, and then the list of subscribers.

This is my implementation of the View view 😛

mlists_orange_view_code

the mlist object is instantiated relying on a QueryString parameter provided by the document opener (as I used a popup). This is the url I used to load the window:
http://server/MailingLists/mlist_entries.aspx?c=Presentation. This will render the Presentation mlist detail to screen!

Expire link: clicking here, will remove the mlist from the list. I accomplished this by going to another page, doing the thing, and then coming back to the initiating page. Here’s the code:

mlists_orange_expire

Again, the mlist is instantiated relying on a QueryString parameter coming from the referer link (?c=mlist.Code).

When the flow goes back to the referer page, it will execute the Page_Load() method, which will ask the MailingList class for the active lists, the recently expired mlist will no longer be included…

The Yellow section

There’s also another user event that goes on on the Orange section, this is when the user clicks on the mlist code. Clicking on the mlist code from the Orange section, will make the Yellow section display the selected mlist detail.

I will not go into detail on my implementation, I’ll just state an overview of what I did.

Used Ajax to tell the server to make an html table with the Name and Description of a specific mlist. Put the resulting html table into the Yellow section (I may expand on the topic on a later blog entry).

The Blue section

This section will use the MailingList class to create more mlists. This is done by means of the Create() static method. The method argument values are provided on the textboxes.

mlists_blue_create

I used the Response.Redirect() to deal with the repainting of the mlist list on the Orange section.

The Green section

The subscription and removal of email addresses from certain mlist will be handled with the Green section. The user would type an email address and select the desired mlist he/she wishes to affect.

mlists_green_code

The Gray section

The last section we’ll cover is the Gray one, where you get to send the same email to all the entries in an mlist. You select the target mlist from the dropdown, and type in a subject and some content, then hit the Publish button :mrgreen:

mlists_gray_publish

… I think this wraps up the Mailing List application series (mlists), please post your comments and thoughts about the series and any suggestions for future ones…

Advertisements

Comments»

No comments yet — be the first.

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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: