DeanLogic

Well, I figured out how not to only add buttons for my WP People plugin but to have it popup with a window to select from the WP People list and then select a person and have it insert back into the Page or Post. And, I got it to work with both the tinyMCE (the pretty WYSIWYG editor) and basic editors. Yippee!!! Of course, IE is a piece of junk, so it doesn’t work 100% with IE. A couple of errors appear when it loads the list popup, but you can just click through those and the insert still works.

On top of getting this to work, I reduce the number of pages used in another example I saw. In the other examples, it looked like they had to create one popup page for each of the editors. I managed to make it work with just one page (i.e. regardless of what IE says). I also eliminated some other side files that the examples were using. However, my plugin is much simpler and didn’t need a lot of other things.

Of course, as I sit here writing this, I realize that I didn’t restrict the WP People list to the owner, so I guess I’ll be making a quick change. A geek’s work is never done.

After looking over a few examples of adding a button to the Post/Page editor, I found Deanna Schneider’s blog about adding a button. And, I got it to work! Woo hoo!

Through her example, I was able to figure out how to create a page that would be called when the button is clicked. The popup page lists the WP People available, with their picture, an abbreviated version of their bio, name and nickname. Next to each person is a button to insert them into the post. When you click the button, the full name of the person is inserted into the post. Simple as that.

Now, I just have to figure it out on the basic Page/Post editor. I figured out how to add the button.

However, I’ve only been able to pull up a separate window with the list in it. This really doesn’t work for what I want to do. I want to have the popup that allows me to interact with the page that pulled it up. I’m sure it’s something simple and hopefully I’ll figure it out soon and then I’ll be done with my WP People upgrade.

Well, in an attempt to add a button to the editor menu so that a user could easily add people from the WP People list to a post, I managed to go through and update the code to make it compatible (upgradeable) with earlier version of WP People, just in case. I also figured out how to copy WP People from the table to the XFN database. The biggest annoyance was adding the category after inserting the record in the to table. But, after figuring it out, I trucked along and made it possible to edit, add, and delete WP People XFN Links. Woo hoo!! So now, if someone adds uses WP People, they can easily edit the information without going to the Links page and find their WP People.

The next step is to finally add that button to the Post and Page editor. Hopefully it won’t take me too long to figure it out. I will later have to add some error checking to the Add/Edit forms and get the Delete button to popup an alert again, but that’s not really too important at the moment.

Hopefully, when I get this button part done, I might get back to either doing more working on the Meetup Organizer Tool or adding a FAQ plugin to WordPress. Most of the FAQ plugins I see are for overall FAQs, but I want to make one that can be link to a particular item or page. This way, I can write a different FAQ for each plugin, widget, or application that I do.

Small things in programming have been annoying me the last couple of days.

WordPress has started using svn (Subversion) as a method of version control for plugins. What this does, is allow the developer to upload version of the plugin to a database and then the plugin will automatically be updated on the download page. Also, it will alert anyone who has the plugin that there is an update to the plugin. From there, the user of the plugin can easily install/update it through the Admin panel. It’s actually very useful.

Well, I just recently updated my WP-People plugin to be compatible with WordPress 2.7.1 and also use the XFN database used in WordPress. As part of this update, I submitted the plugin to the svn database. After trying to find some easy instructions on how to use Subversion, I found some instructions on Designpraxis. The first time through was easy. But, the display on the download page was not exactly 100%. Only a short description was showing, even though I added the information for the other areas in the readme file. However, I didn’t have the readme file named correctly. So, I changed the name of the readme file and tried to up the versions to 3.01. Well, I did something wrong and ended up with a sub-folder of my plugin under the plugin directly. This caused errors, because it tried to load the plugin twice. After trying a few ways to update it to 3.02 without the sub-folder, I finally got it to work with version 3.03.

I think I have the steps for updating:

1. Create a folder under the tags with the version number.
2. Update your plugin in the Trunk directory. Make sure to update Version information in the main php file and the Stable Tag in the readme file.
3. Copy the files into new folder under the tags directory and commit the changes.

After a bit, the updates will pass through on the download page. I guess after I make some updates, I can determine if these are the correct steps. The trunk folder lost it’s green check mark symbol, that’s probably not a good thing. Also, I am still not sure where I put the version release notes, I guess I can put them at the end of the main description. I add them to the log when I do the commit, but they don’t show on the download page.

I plan on including the relationship values from the XFN and a better layout on the WP People Admin page of those who are part of WP People. I might eventually include an easy way to edit the XFN data from the WP People Admin page.

In my never ending desire to learn something new every day, RegEx (Regular Expression) has brought me my “ah ha!” moment of the week.

As part of my Meetup Organizer Tool application, I am providing an editable area for the Event description. This will allow the Organizer to view the current description and make some changes using a WYSIWYG tool. Flex provides the RichTextEditor control for easily creating rich text and converting it to HTML. Meetup provides a limited set of BBCode on their site for creating Event descriptions. In fact, the description area is even more limited than the Message Board area. The first thing I had to do with the RichTextEditor is only provide the functionality allowed on Meetup. This wasn’t too difficult to do, I just removed all the button controls and added the ones I needed. I even limited the number of colors to just those used by Meetup.
Plus, I added a new button for clipping the BBCode to the user’s clip board in order to paste it into Meetup Event edit page. The biggest issue with this was formatting the text from the Meetup BBCode into HTML and then turning it back into BBCode when it was clipped.

If you have ever worked with RegEx, you know that it is a pain in the behind. To most people it just looks like a bunch of slashes and characters without any particular meaning. Trying to test RegEx in your code almost makes it seem like there isn’t any rhyme or reason as to why it works. And, to make things worse, ActionScript 3 has a slightly different RegEx syntax.

Instead of just plopping out a bunch of RegEx into a replace string, I figured it would be easier to the String method. String by declaring variables for the pattern and the returnString. I passed in either the HTML or BBCode to the returnString and started working on patterns from there.

var pattern:RegExp;
var returnString:String;

For each tag, I created a new RegExp pattern and then passed that into the replace method for the String. In this example, I am finding all the bold tags and replacing them with the BBCode version. As you can see, the RegExp starts with a \ instead of a /. And then you need to make sure the special characters (,/) don’t cause issues with the search. I found most of the RegEx in a forum somewhere, but in the end, I had to change those codes in order for it to work with AS3.

// format the bold tags: <b></b>
// becomes: [b][/b]
pattern = new RegExp("\\<b\>\(.+?)\\<\\/b\>", regExFlags);
returnString = returnString.replace(pattern, "[b]$1[/b]");

Here is the code for turning the BBCode back into HTML code.

// format the bold tags: [b][/b]
// becomes: <b></b>
pattern = new RegExp("\\[b\]\(.*?)\\[\\/b\]", regExFlags);
returnString = returnString.replace(pattern, "<b>$1</b>");

The issue I had the biggest problem with is the list format from the BBCode. A list item is represented as [*]. Which is all fine and dandy until you try to convert it using RegEx. The main issue is that the [ and the * and also the ] are all special characters that you have to cancel out in order your you to search on them. And, to top things off, the list item from the BBCode doesn’t have a closing [/*] tag, which also caused issues. Well, after tying to get it to work on multiple RegEx evaluators, I finally by chance figured it out.

// format the center tags: [*]List Item
// becomes: <li>List Item
pattern = new RegExp("\\[[*\]\]", regExFlags);
returnString = returnString.replace(pattern, "<li>");

If you look at the RegExp, you will see that I have two [ characters, where as in the previous example I didn't need an extra one. I also have another ] character to end the expression. The second [ character makes the * part of the search string. Honestly, it was just by accident that I figured that out. I'm sure there is some obvious text in the manual that points to this, but all I could find was that the \ character would cancel any special characters.

To make the fun continue, when the HTML is passed back during the clip board process, the RichTextEditor adds extra format tags and doesn't include a <ul> tag. Instead it just wraps each bullet point in <li></li> tags. Luckily, that is all that is needed when pasting the BBCode back into the Meetup Event editor on the site.

As I mentioned at the start, I set the Color Picker button to only use the colors that Meetup allows. Part of making this work was creating an array of color names (used by Meetup) and color Hex values (used by Flex).

// Color list used by Meetup
public static const DARKRED:String = "darkred";
public static const DARKRED_VALUE:String 	= "0x8B0000";
public static const FIREBRICK:String = "firebrick";
public static const FIREBRICK_VALUE:String	= "0xB22222";
public static const CRIMSON:String = "crimson";
public static const CRIMSON_VALUE:String	= "0xDC143C";
public static const RED:String = "red";
public static const RED_VALUE:String = "0xFF0000";
public static const TOMATO:String = "tomato";
public static const TOMATO_VALUE:String = "0xFF6347";

[Bindable]
public static var colorArray:ArrayCollection = new ArrayCollection([
 {label:MeetupUtils.BLACK, color:MeetupUtils.BLACK_VALUE, hex:MeetupUtils.flashToHex(MeetupUtils.BLACK_VALUE)},
 {label:MeetupUtils.WHITE, color:MeetupUtils.WHITEVALUE, hex:MeetupUtils.flashToHex(MeetupUtils.WHITEVALUE)},
 {label:MeetupUtils.DARKRED, color:MeetupUtils.DARKRED_VALUE, hex:MeetupUtils.flashToHex(MeetupUtils.DARKRED_VALUE)},
 {label:MeetupUtils.FIREBRICK, color:MeetupUtils.FIREBRICK_VALUE, hex:MeetupUtils.flashToHex(MeetupUtils.FIREBRICK_VALUE)},
 {label:MeetupUtils.CRIMSON, color:MeetupUtils.CRIMSON_VALUE, hex:MeetupUtils.flashToHex(MeetupUtils.CRIMSON_VALUE)},
 {label:MeetupUtils.RED, color:MeetupUtils.RED_VALUE, hex:MeetupUtils.flashToHex(MeetupUtils.RED_VALUE)},
 {label:MeetupUtils.TOMATO, color:MeetupUtils.TOMATO_VALUE, hex:MeetupUtils.flashToHex(MeetupUtils.TOMATO_VALUE)});

I created a little function that works inside of the replace method. All I do is use the Filter method on an Array and find either the color name or Hex value and return the other. All I have to do with the RegEx is find the color value, which is passed into the function with the string value between the color tags. If I ever need to add more colors, I just add them to the constants and the array.

pattern = new RegExp("\\<FONT COLOR=\"(.+?)\\\"\>(.*?)\\</FONT\>", regExFlags);
returnString = returnString.replace(pattern, replaceHexPattern);

I was trying to add a FAQ to my blog for the Meetup Organizer Tool I am working on and then I got side tracked updating my WP People Plugin.

The WP People Plugin basically takes the Name value from Links added to the blog and replaces it with a nick name and a link to more information about the person. I originally had created a database table to hold the people and an admin screen to add, edit and delete. Then I saw the XFN option in WordPress and figured it would be much easier to use that information.

Apparently I tried to do this update a while back and stopped development on it. Well, now I am close to being done and I will store it on the WordPress Plugin Database. Woo hoo!!

Of course, I need to get back to what I originally planned, taking a FAQ script and making it a Page plugin for WordPress.