|
|
Some other items that will be making an appearance in this tutorial include TextRange, css, embedding images, and more. Some or all of these features have been touched upon in earlier tutorials but don't worry, I won't skip over explaining them here. For example, we are going to use TextRange to handle changing the selected text in our TextArea, which I wrote a tutorial on earlier, check it out here.
The first item of business is checking out the example application of the day. This application shows off only the tip of the iceberg when it comes to pop ups. It has a text box which can be typed in and is also pre-populated with some text. If you simply highlight some text the pop up menu should jump up at you (note - selecting text using "Shift" key doesn't work). On the menu you have the option to change the selected text to bold, italic, change the color, increase font size, and decrease font size. Also the X in the right hand corner will close the menu. One added perk is the far left side of the menu, it has a couple little circles, can be used to move the menu; you can simply click in that side area and drag around the menu. Well that is enough talk - so it check it out:
Now that you have played for a minute - on to the code. As usual we will start by setting up the initial application interface. Again it is initialized to a very simple interface to start off with. The basic application with a panel and a TextArea - the text area you see in the example has some more text in it but that is all that is different. The only other item that might catch your eye is the tag, this just says we are going to use a style sheet to style the application.
We now create the actionscript function, where we first throw some tags under our opening application tag. The first thing inside the script is importing the two items we will be using then we create a private variable for the pop up menu that is being created and used. Next we actually create the function. The function takes no arguments and returns nothing. Inside the function we are going to check a couple things first to make sure we are actually going to create a pop up and that one is not already in use. The first check is checking to make sure some text is actually selected. Then if that is the case we then check to see if the pop up has never been made or that it is not in use (don't worry we will go over the in use in a minute). If we get through all that then it is time to create a pop up.
To do this we call PopUpManager.createPopUp with the arguments this and TextModPopUp. The first parameter is the parent class and the second is the class name of the pop up we want to create. With this we cast it as a TextModPopUp because the function returns an IFlexDisplayObject. That pretty much takes care of the heavy lifting. After that function call we set a couple parameters of our pop up and move it close to the cursor. The important parameter is setting the current text which again we will see here in a minute. The final product is some actionscript that looks very much like what is below.
import mx.controls.textClasses.TextRange;
import mx.managers.PopUpManager;
private var textPopUp:TextModPopUp
private function popUpTextMenu():void
{
if(txtMain.selectionEndIndex != txtMain.selectionBeginIndex)
{
if(!textPopUp || !textPopUp.inUse)
{
textPopUp =
TextModPopUp(
PopUpManager.createPopUp(this, TextModPopUp));
textPopUp.inUse = true;
textPopUp.currentText =
new TextRange(txtMain, true,
txtMain.selectionBeginIndex,
txtMain.selectionEndIndex - 1);
textPopUp.move(mouseX + 10, mouseY + 10);
}
}
}
Next we are going to create the functions to modify the text. These functions don't do any crazy heavy lifting or anything so I am going to just throw them out there. Each will modify the current text in a different way, they are very self explanatory. These also go in the script tag.
private function increaseFontSize():void
{
currentText.fontSize++;
}
private function decreaseFontSize():void
{
currentText.fontSize--;
}
private function boldFont():void
{
if(currentText.fontWeight != "bold")
currentText.fontWeight = "bold"
else
currentText.fontWeight = "normal";
}
private function italicFont():void
{
if(currentText.fontStyle != "italic")
currentText.fontStyle = "italic";
else
currentText.fontStyle = "normal";
}
private function changeFontColor():void
{
currentText.color = butColorPick.selectedColor;
}
The last function we are going to write up is going to take care removing the pop up. This will call PopUpManager.removePopUp which will remove whatever pop up is passed into the function. Also in this function we set the inUse to false because we aren't using it any more. And the final actionscript function looks like:
private function closeMe():void
{
inUse = false;
PopUpManager.removePopUp(this);
}
The final addition to the custom component is hooking up the buttons to the correct functions. We use the click event for the buttons and the change event for the ColorPicker. And finally we hook up click and release on the canvas to start and end dragging of the pop up. Again nothing special is going on so lets get to the code. This is actually the final iteration of the file so I will throw the whole thing out there.
/* CSS file */
.textPopUp
{
background-color: #F5F5F5;
horizontal-gap: 0;
}
.textPopUpDragArea
{
background-image: Embed("assets/popup_handle.gif");
border-style: solid;
border-color: #868686;
border-thickness: 1;
}
.textPopUpButtonArea
{
vertical-gap: 0;
border-style: solid;
border-color: #868686;
border-thickness: 1;
}
.boldButton
{
up-skin: Embed("/assets/but_bold_up.gif");
over-skin: Embed("/assets/but_bold_hover.gif");
down-skin: Embed("/assets/but_bold_down.gif");
}
.italicButton
{
up-skin: Embed("/assets/but_italic_up.gif");
over-skin: Embed("/assets/but_italic_hover.gif");
down-skin: Embed("/assets/but_italic_down.gif");
}
.fontUpButton
{
up-skin: Embed("/assets/but_fontup_up.gif");
over-skin: Embed("/assets/but_fontup_hover.gif");
down-skin: Embed("/assets/but_fontup_down.gif");
}
.fontDownButton
{
up-skin: Embed("/assets/but_fontdown_up.gif");
over-skin: Embed("/assets/but_fontdown_hover.gif");
down-skin: Embed("/assets/but_fontdown_down.gif");
}
.closeButton
{
up-skin: Embed("/assets/close_up.png");
over-skin: Embed("/assets/close_over.png");
down-skin: Embed("/assets/close_over.png");
}
