Archive for February, 2010

Use syntax highlighting in WordPress

I spent more than an hour to find out how you can use syntax highlighting in WordPress. There’s tons of information around this subject, but I couldn’t find anything to get you started with a few easy steps. So….here is my attempt.

Step 1:
Install Syntax Highlighter Evolved.

Step 2:

Create or edit a post and select the ‘HTML’ tab on the top right.

Step 3. Copy your source code from your html-editor and paste into the post.

Step 4. Put code tags around the pasted code:

No Comments

Flex HSlider tooltip does not respect stage boundaries

Had some difficulty in formulating a good title. But the problem is as follows:

If you have an HSlider and the right side of the slider is close to the right side of the stage, the tooltip may ‘walk off’ the screen. See the following image.  The grey background is the standard Flex Halo background. The green background is the color of my desk top.

This does not happen at the left side of the stage. If you drag the thumb to the left end of the slider, you see some smart things happening: the tooltip gets stuck at stage.x = 0;

I set myself to solve this problem and came up with a solution, which may also be called a hack. It uses mx_internal namespace, which means that it may not work in future versions of the Flex SDK. But I don’t know a better way. You do? Please let me know!

Step 1. Extend the SliderDataTip class:

package cbs.components.sliderClasses
{
	import flash.geom.Point;

	import mx.controls.sliderClasses.Slider;
	import mx.controls.sliderClasses.SliderDataTip;

	public class MySliderDataTip extends SliderDataTip
	{
		private var _slider:Slider;

		public function MySliderDataTip(owner:Slider):void {
			_slider = owner;
		}

	 	override protected function updateDisplayList(w:Number, h:Number):void {
			super.updateDisplayList(w,h);
			// Check if the tip overlaps the right side of the slider

			if (_slider) {
				var sliderPos:Point = _slider.localToGlobal(new Point(0, 0));
				if (this.x + w >= sliderPos.x + _slider.width) {
					this.x = sliderPos.x + _slider.width - w;
				}
			}
		}
	}
}

Extend the HSlider and override the onThumbPress function.

override mx_internal function onThumbPress(thumb:Object):void {
	// Hack this function, to be able to generate our own slidertip and
	// set a parameter.
	if (!dataTip) {
		dataTip = MySliderDataTip(new MySliderDataTip(this));
		systemManager.toolTipChildren.addChild(dataTip);

		var dataTipStyleName:String = getStyle("dataTipStyleName");
		if (dataTipStyleName)
		{
			dataTip.styleName = dataTipStyleName;
		}
	}
	super.onThumbPress(thumb);
}

That’s it!

No Comments

Flexlib WindowShade does not resize dynamically

Update: See comment#1 by Justin Mclean.

WindowShades resize to their content, even if you change the content dynamically. But it only does this until the first time you close and reopen the WindowShade. The reason is that it uses an effect to close itself. And by using this effect, it sets the ‘height’ property. And because of that, the component does not automatically resize depending on its content.

You can solve this by extending the WindowShade. First you have to override ‘runResizeEffect’. The main thing is to put an event listener to the effect end event.


private var _resize:Resize;
override protected function runResizeEffect():void {
if (_resize  AND _resize.isPlaying) {
_resize.end();
}

_resize = new Resize(this);
_resize.addEventListener(EffectEvent.EFFECT_END, handleEffectEnd, false, 0, true);
_resize.heightTo = Math.min(maxHeight, measuredHeight);
_resize.duration = RESIZE_DURATION;

_resize.play();
}

Then in the effect end handler, set the height to NaN so the WindowShade can resize automatically again.


private function handleEffectEnd(event:EffectEvent):void {
// We set height = NaN so that the component resizes automatically
// to the height of its children.

     height = NaN;
}

2 Comments

Flex renders chart labels too small

Flex rendered my chart labels too about  4 pixels high. This is what the documentations says about this topic:

When positioning and sizing labels, the AxisRenderer takes a minimum amount of the chart’s available space. If labels take too much space, then the AxisRenderer scales them. However, the AxisRenderer does not scale the labels to too small of a point size.

After some trial and error, I found out that this is not true if you use the gutter properties. For my ColumnChart I used both gutterLeft and gutterRight to a fixed value. Once I didn’t set the gutterRight property, the labels were rendered to decent sizes.

No Comments

Monthly open source donation: Drupal

This month, I wanted to make my monthly donation of 10 euros to Drupal. Then I saw that you can become an individual member of the Drupal Association by contributing 22 euros. So I decided to do that. Not sure how the membership can be benicifial, but Drupal is an awesome CMS and I have made many sites based on this open source product. The contribution is very well spend.

No Comments