Default Focus Behavior

I would love to share with you guys about Default Focus Behavior which I just created an hour ago because I thought this behavior would be very handy.

With this behavior, we would be able to set focus to any controls when we trigger any control events.

For example, whenever we click the button, we want to textbox got focused, or when we select the Option 1 for the very first time, the textbox will get focused as below image.

To set the focus for a control only once, all we have to do is set

IsOnceOff = “True”

Click the icon below for the source code, so you can have a play with it

Hopes this helpful

TextWraping in Silverlight

Just a little thing I came across when I am trying to set TextWraping property for a TextBox, but the text doesn’t seem to be wrapped. Then I realized if the TextBox is setting with TextWraping greater than 1, the text won’t be wrapped. Just a little thing to keep in mind

Datagrid Missing Binding Error

I have run into this silly mistake, and it took me 2 hours to figure it out

I  am writing it down here for my own reference, and if you ever ran into this problem, hope that this can help you fix your problem quickly.

The problem is I had a datagrid column with the Header but not the Binding, for example

<data:DataGridTextColumn Header=”MyProperty” />

This will cause the below error at runtime

To fix it, all I had to do is to put the Binding in it

<data:DataGridTextColumn Header=”MyProperty” Binding={Binding MyProperty} />

Hope this helps

UpperCase Behavior

I was asked to create a TextBox input which has only UpperCase letters. After a bit of research, I have found this article which has inspired me to come up with this solution. As we all know that Behavior is a cool stuff in Silverlight 3, so I decided to use the concept from that article and create a Behavior which detects all the key and uppercase it. Feel free to download the source code and have a play with it.

FocusManager

I’ve read this article about FocusManager. I think it could come handy sometimes when you want to know what element has focus. FocusManager class which can be found in the System.Windows.Input namespace. Below is the sample of how to use itThe FocusManager class has only one static method:

<span class="kwrd">public</span> <span class="kwrd">static</span> Object GetFocusedElement();

Using the FocusManager is easy. Here’s a small example of a possible usage:

var focusedElement = FocusManager.GetFocusedElement() as Control;
if (focusedElement != null)
    Output.Text = focusedElement.Name;

One last note: The FocusManager class is also available in the “normal” .NET Framework 3.0 or later.

Binding for Converter Parameter

I have come across the situation where I need to do some Binding for ConverterParameter. Something like

I have done lots of research, and I found out that its impossible to do binding for ConverterParameter.
So I came up with the Solution. I created the Converter but inherited from FrameworkElement

public class ShowDeleteServiceConverter : FrameworkElement, IValueConverter

In the converter class, I created a dependency property

Now, I can do the Binding as usual

And

It might not be the best solution, but it works for me so far. If you have any idea, feel free to drop me comments.

Cheers,

How to Change the Startup Class

Another great tip from Mike Snow. Read the original article here

When a Silverlight application is launched the entry point is a class that inherits from System.Windows.Application. By default, when you create a new Silverlight application project, this would be your App class which gets defined in App.xaml.cs. You can, however, change which startup class you want to use. In fact, if you do not plan to use XAML at all you can reduce the size of your application by deleting the Page and App classes including the XAML and code behind files.

To accomplish this follow these steps:

Step 1. Create a new Silverlight application project adding a new ASP.net web project to host the Silverlight app.

Step 2. Delete App.xaml and Page.xaml (the CS files will be deleted also).

Step 3. Create a new class and call it StartupTest.cs

Step 4. Modify your new class to inherit from Application as seen here:

public class StartupTest : Application

{

    public StartupTest()

    {

    }

}

Step 5. Right click on your Silverlight application project in the Solution Explorer of VS. From the context menu choose Properties. This will bring up the Properties dialog. Click on the Silverlight tab at the top-left and change the Startup object to be your class as seen circled here:

Step 6. Go back to your StartupTest class. Add an event to monitor for when the application has started. You don’t want to do anything until after this event has started.

public class StartupTest : Application

{

    public StartupTest()

    {

        this.Startup += new StartupEventHandler(StartupTest_Startup);

    }

    void StartupTest_Startup(object sender, StartupEventArgs e)

    {

    }

}

Step 7. The Application.RootVisual is root pointer to the main application UI. You will need to create this object to point an object such as a Grid or Canvas control. Once created, you can add additional controls to the children as you see fit. In the example below, I have created a Canvas as the root and configured its background color to be black, its width to be 800 and height to be 600. Also, I have added a Textbox to the Canvas control.

void StartupTest_Startup(object sender, StartupEventArgs e)

{

    this.RootVisual = new Canvas();

    ((Canvas)this.RootVisual).Width = 800;

    ((Canvas)this.RootVisual).Height = 600;

    ((Canvas)this.RootVisual).Background = new SolidColorBrush(Colors.Black);

    TextBlock tb = new TextBlock();

    tb.Foreground = new SolidColorBrush(Colors.White);

    tb.FontSize = 20;

    tb.Text = "NO XAML NEEDED!!!";

    ((Canvas)this.RootVisual).Children.Add(tb);

}

Step 8. Run the application and you will see the following image rendered in your browser: Technorati Tags: Silverlight

How to Create A Badge Of Your Facebook

Create a Badge From a Template

1. Log into your facebook account
2. Click on the “My Profile” link to view your current profile after you have logged in.
3. Select the “Create a Profile Badge” link that can be found on your profile.
4. Choose a template to help create your badge. A photo badge showcases your most recent photo uploads. The Signature Badge has your contact information and is ideal for email and forum signatures. The blog badge is a great addition to your external Web site or blog.
5. Set the preferences for your template. While they may vary slightly, you must select a layout (Horizontal or Vertical) and a format (Image or JavaScript) for each template.
6. Finish making changes to your badge and click “Save” to get directions for posting your badge. You will need to copy and paste the provided code into the Web site where you want the badge to appear.

Create a Custom Badge

1. Show your individuality by choosing to “Create a Badge” from the “Create a Profile Badge” page.
2. Set the basic layout and format.
3. Add any items from the drop-down menu that you want to include in your badge. Click the “Add Item” button to add it to your badge. You may add more than one item. With no template, you can add anything you want to your badge. It will preview as you make additions.
4. Hit the “Save” button to complete your badge and get the necessary code to post it.

Technorati Tags: Badge, facebook

Selecting a Block of text

20 Excellent Free Rich-Text Editors

Jacob Gube, a Web developer/designer and author of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter.

He has given us a list of 20 excellent Free Rich-text Editors. Thanks for his work.

Click here for the original post

<!–

Programming, Rich Text Editors

–>

Rich-text editors, also known as online rich-text editors, are web components that allow users to edit and enter text within a web browser. Rich-text editors are used in numerous ways such as in enhancing your comment input form or as part of a web application that allows entry of user-generated and formatted content. Rich-text editors are essentially web-based WYSIWYG (”what you see is what you get”) editors.

There are many rich-text editors out there. What’s even better than a lot of choices? Many of the best rich-text editors currently in the market are free.

In this article, we present 20 exceptional (and free) rich-text editors.

1. TinyMCE

TinyMCE is an open source (under the GNU Lesser General Public License) rich-text editor released and maintained by Moxiecode. As indicated by the name, TinyMCE is lightweight but highly customizable through an intuitive API. TinyMCE’s plugin system allows you to download themes and plugins to extend the core installation.

TinyMCE | Demo | Download

2. FCK Editor

FCKeditor is another wildly popular open source online rich-text editor (check out some of the websites that use it). It has a “Word clean-up” feature that automatically detects and cleans up text that’s copied from Microsoft Word documents. It has one of the best HTML table editing and creation features, making it very easy for users to create and edit tables for displaying data.

FCKeditor | Demo | Download

3. NicEdit

NicEdit is lightweight, no-fuss cross-platform rich-text editor that emphasizes user-friendliness and simplicity over barraging users with too many features. You can serve NicEdit remotely from the NicEdit website; all you have to do is copy a JavaScript code snipplet and voila – it just works (as well as saving your server some system resources).

NicEdit | Demo | Download

4. BXE

BXE is an XML-based WYSIWYG editor that allows you to change an entire web page. It has been an open source application since 2002 – and with a devout following – you might be able to quickly find some help if you run into any issues in the BXE IRC channel.

BXE | Demo | Download

5. MarkItUp!

markItUp! is a JavaScript-based markup editor built on top of the jQuery library. With markItUp!, you can easily turn any HTML textarea into a fully-featured WYSIWYG editor. It’s lightweight (the script weighs in at only 6.5kb), supports keyboard shortcuts, has a built-in Ajax live preview and many more features that make markItUp! an excellent choice.

markItUp! | Demo | Download

6. WidgEditor

The widgEditor is an open source project of Cameron Adams released under the GNU General Public License. It’s a simple and no-fuss HTML rich-text editing solution that converts regular HTML textareas into a WYSIWYG. Because it’s JavaScript-based and designed to degrade gracefully, users with JavaScript turned off will still be able to use the HTML textarea.

widgEditor | Demo | Download

7. EditArea

EditArea is a free JavaScript source code editor. It’s an excellent solution for weblogs and websites that allow developers to contribute and format their own code.

EditArea | Demo | Download

8. Cross Browser Rich Text Editor (RTE)

Cross-Browser Rich Text Editor (”RTE” for short) is a free rich-text editor released under the Creative Commons Attribution 2.5 license. It’s a work based on the designMode functionality introduced in Internet Explorer 5 and implemented in the Mozilla Rich Text Editing API. It just has basic features, so it’s perfect for individuals looking to add simple rich-text editing support.

Cross-Browser Rich Text Editor (RTE) | Demo

9. YUI Library Rich Text Editor

The YUI Library Rich Text Editor is a UI control that’s part of the YUI Library. It’s a great solution for those already using YUI and individuals that want to save some server resources (since you can serve it directly from the Yahoo! servers). The YUI Library Rich Text Editor also has excellent mobile device support, making it a great web-accessible rich-text editing solution.

Yahoo! UI Library: Rich Text Editor | Demo | Download

10. FreeTextBox

Web professionals using the .NET framework that want to add editing capabilities to their web pages and web applications should check out FreeTextBox: a robust, fully-featured, and extremely popular rich-text editor for ASP.NET. It has a built-in image gallery, a helpful JavaScript API for customization, and a full list of editing controls for constructing tables, ordered/unordered lists, and even spellchecking (using the IE spellchecking engine).

FreeTextBox | Demo | Download

11. Damn Small Rich Text Editor

Damn Small Rich Text Editor (DSRTE) is a lightweight, free rich-text editor built on top of the jQuery library and a PHP backend. It’s plugin-enabled (meaning it’s highly-extensible), has image-uploading capabilities (using Ajax for responsive user interaction), and an HTML cleanup feature to tidy up messy markup.

Damn Small Rich Text Editor | Download

12. Silverlight Rich Text Editor

Silverlight rich text editor is the first rich-text editor for Silverlight. It has many useful features such as “find and replace” to quickly find specific text or to batch-replace them with something else, keyboard shortcuts support, serialization of text input for security, and much more. Note that the original creator has stopped further development (so cross your fingers someone picks up his project).

Silverlight rich text editor | Demo | Download

13. Free Rich Text Editor

Free Rich Text Editor is a free, JavaScript-based HTML rich-text editing solution released under the Creative Commons Attribution 2.5 Generic license. The interface is reminiscent of Microsoft Word 2003’s interface, so users of this desktop application will find it quite familiar. It has everything you’d expect from a robust rich-text editor, as well as a code view to preview and edit the HTML source code directly.

Free Rich Text Editor | Demo | Download

14. Dijit.Editor

The Dijit.Editor is Dijit’s (Dojo’s widget library) fully-featured rich-text editor. Built on top of The Dojo Toolkit (a popular JavaScript library/framework); it’s an excellent solution for those already using the Dojo Toolkit.

Dijit.Editor

15. WYMeditor

WYMeditor is a web-based HTML editor that emphasizes the use of standards-compliant markup. It was developed to output compliant HTML 4.01 Strict Doctype HTML, so it’s the perfect solution for the standards-aware developer.

WYMeditor | Demo | Download

16. Whizzywig

Whizzywig is a free JavaScript web-based rich-text editor. Aside from features you’d expect from a rich-text editor, Whizzywig also has a Spanish and German version, a web-safe color picker to change your text’s colors, and custom-designed UI controls.

Whizzywig | Demo

17. openWYSIWYG

openWYSIWYG is a free and feature-packed web-based content editor that’s perfect for a host of content management systems. It has a very intuitive “table creation” feature to help users construct HTML tables. It also has a wide range of browser support including IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+ and Netscape 7+.

openWYSIWYG | Demo | Download

18. XStandard

XStandard is a highly-standards-compliant rich-text editor. It comes in two versions: XStandard Lite – which is completely free, and XStandard Pro. XStandard Lite has Microsoft Word text cleanup, spellchecking, and the ability to interact with third-party applications.

XStandard | Download

19. Xinha

Xinha is an open source, community-built rich-text editor released under a BSD style license. It’s highly-configurable, extensible, and feature-packed. Xinha emphasizes on community development, and as such, you’ll find many helpful contributors in the Xinha forums.

Xinha | Demo | Download

20. Kupu

Kupu is an open source “document-centered” client-side rich-text editor released by the international association for Open Source Content Management (OSCOM). It features easy integration into a variety of content management systems including Silva and Plone, easy customization and extension, and Ajax saving for an uninterrupted user experience.

Kupu | Demo | Download

Technorati Tags: Html Text Editors, Rich Text Editors, WYSIWYG

Selecting a Block of text

If you are COPY & PASTE, the blog here is showing you a very cool trick to give you more power in term of COPY & PASTE

Below is a brief content from the original post.

By default normal text selection is line by line. For example it’s not possible to select just the items to the right of the equals sign.

 

However, Visual Studio does offer this ability using block selection. Block selection is sued to select text in a block as opposed to line by line. Essentially allowing you to select text regardless of what line you are on. For example, select the <ALT> key while selecting text to do the following.

Block selection can be used with both the keyboard and mouse. When using the keyboard hold down the <ALT> + <SHIFT> and use the arrow keys to perform the block selection.

Technorati Tags: Tricks