Search Results for "minimalcomps"

Jan 20 2011

MinimalComps Updates: Dark Style, HBox & VBox alignment

Published by under ActionScript,Components,Flash

Send to Kindle

A couple of updates to MinimalComps.

First, go over to soulwire and check out the great GUI tool created there. One thing that struck me about it was the dark colors on the components. I liked it and set out to create a similar theme by setting dark values on the Style class. Easy enough. But I didn’t want to go through that every time I wanted to create the same look, so I added a new method on Style, called Style.setStyle. This can be “light” or “dark” (Style.LIGHT or Style.DARK). If you don’t set it, or set it to light, you’ll get something like this:

But with one line:

Style.setStyle(Style.DARK);

you can instead have this:

I like it a lot. If you haven’t used the Style class before, It’s just a list of static vars containing colors that are used whenever a component draws itself. Setting a value on Style does NOT update anything that’s already created, until that component re-draws itself, if it ever does. You should set your style values BEFORE you create a single component, and not change them, unless your’e going to take responsibility for redrawing anything. Same goes for this new method. If anyone comes up with any other useful preset styles that look decent, send them over and if I like them, I may add them to Style. And you’ll win a free set of Minimal Components!

The other change I made is to the HBox and VBox. These have really been bugging me because HBoxes always top-align their contents, and VBoxes always left-align their contents. You can set the x position of an element in a VBox and the y position of an element in a HBox, but it was tricky and non-dynamic. Now they each have an alignment property. This can be top, middle, bottom, or none for HBox and left, center, right, or none for VBox. These are static constants on the respective classes as well (HBox.TOP, HBox.MIDDLE, etc.).

The default alignment for both is NONE, meaning that they’ll work the way they always have. Left and top aligned, unless you’ve set the x or y property of an element as just described. If you set the alignment to anything else, it will ignore the current x or y property and align them exactly as you would expect. Here’s a demo:

Get Adobe Flash player

All these changes are checked into SVN. I have one other thing that I’m working on before I go and release a new SWC though.

Send to Kindle

10 responses so far

Jan 18 2011

Introducing MinimalConfigurator

Published by under Components

Send to Kindle

This is a concept I’ve had for a while, and last week started to implement it. It wound up being orders of magnitude simpler than I imagined. The core part of it was done days ago. I cleaned things up more recently and finally checked it in and made some examples. As easy as Minimal Comps are to instantiate and set up, once you start getting into more complex layouts with lots of components, you can still wind up with a messy bunch of code. Well now you can create your layouts in an external xml file and leave your classes to handle the logic, as it should be.

The concept is to load an XML file, similar to MXML (you can call it MCML if you need a name for it), that defines what components are to be instantiated, and all their properties. In keeping with the minimal theme, it’s not as hard core as something like MXML. You won’t find data binding or in line ActionScript, or styles, etc. And ALL properties are expressed as attributes, not nested tags. But I am happy to say I worked out some pretty neat things that I originally thought would be more difficult.

One is that a component that has an id attribute will be mapped to a public variable in the parent container if such a variable exists, so you can code things around these created components. For example public var btn:PushButton; will map to < PushButton id="btn"/>.

Second is that you can nest components for those components that can have children. Some components, such as Window, Panel, ScrollPane, expect children to be added to a content property, while others, such as VBox and HBox are added directly. These are both handled correctly. So you can write:

<comps>
    <Panel>
        <VBox x="10" y="10">
            <RadioButton label="one"/>
            <RadioButton label="two"/>
            <RadioButton label="three"/>
        </VBox>
    </Panel>
</comps>

And finally, you can assign events with the syntax: event=”eventName:eventHandler”. For example:

<PushButton label="Click me" event="click:onClick"/>

This assumes that the main container class has a public method called onClick that has the signature compatible with the event that will be dispatched. If it does not, the event handler will not be assigned.

You instantiate the class like so:

var config:MinimalConfigurator = new MinimalConfigurator(this);

You pass in the DisplayObjectContainer that the components will be added to. This is also where it will look for public ids and event handlers.

Then you can parse the xml in one of 3 ways:

// 1. load the xml from a url:
config.loadXML(urlString);

// 2. parse a string containing xml:
config.parseXMLString(xmlString);

// 3. parse an xml object:
config.parseXML(xml);

You can listen for an Event.COMPLETE event which will be fired when the xml is parsed and all the components are instantiated. This is mostly useful when loading the xml from a file, as that is asynchronous, obviously, though the rest are synchronous.

Here, you can try it out for yourself. Write some xml in the text field below and press “Parse XML” and it should create the components above.

Get Adobe Flash player

Here are a few examples to try, you’ll get the idea soon enough.

One:

<comps>
    <HBox x="10" y="10">
        <PushButton label="File" width="60"/>
        <PushButton label="Edit" width="60"/>
        <PushButton label="View" width="60"/>
        <PushButton label="Settings" width="60"/>
        <PushButton label="Help" width="60"/>
    </HBox>
</comps>

Two:

<comps>
    <Panel x="10" y="10" width="200" height="200">
        <HBox x="10" y="10">
            <VBox>
                <Label text="First Name:"/>
                <Label text="Last Name:"/>
                <Label text="Address:"/>
                <Label text="City:"/>
            </VBox>
            <VBox spacing="7">
                <InputText />
                <InputText />
                <InputText />
                <InputText />
            </VBox>
        </HBox>
    </Panel>
</comps>

Three:

<comps>
    <Calendar x="10" y="10"/>
    <HUISlider x="10" y="200" label="Amount"/>
    <HBox x="10" y="230">
        <Label text="Color:"/>
        <ColorChooser usePopup="true"/>
    </HBox>
    <IndicatorLight x="200" y="10" label="Warning" isLit="true"/>
    <IndicatorLight x="200" y="30" label="No Warning" isLit="false"/>
    <IndicatorLight x="200" y="50" label="Safe" color="0x00ff00" isLit="true"/>
</comps>

Finally, here’s a code example that shows how to use ids and events:

package
{
	import com.bit101.components.Component;
	import com.bit101.components.Label;
	import com.bit101.utils.MinimalConfigurator;
	
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	
	public class MinConfigTest extends Sprite
	{
		public var myLabel:Label;
		
		public function MinConfigTest()
		{
			Component.initStage(stage);
			
			var xml:XML = <comps>
							<Label id="myLabel" x="10" y="10" text="waiting..."/>
							<PushButton x="10" y="40" label="click me" event="click:onClick"/>
						  </comps>;
			
			var config:MinimalConfigurator = new MinimalConfigurator(this);
			config.parseXML(xml);
			
		}
		
		public function onClick(event:MouseEvent):void
		{
			myLabel.text = "You did it";
		}
	}
}

There’s a public var “myLabel” of type Label. This will be assigned the Label created in the first component tag, with the same id.

Then there’s a public method “onClick”. This is mapped to the button’s click event, so it will be called as an event handler when the button is clicked.

Pretty straightforward I think.

Obviously there are some more complex actions that will still need to be done with code, such as assigning list and combobox items, probably accordions, etc. But this should handle a good bunch of use cases.

The code is currently checked in and there’s a new SWC and zip available for download at the Google Code site. The class is com.bit101.utils.MinimalConfigurator. Enjoy.

Oh, and by the way, even if you aren’t interested in the new class, there are a few fixes in this build which might make it worth updating to anyway: Change Log.

Send to Kindle

19 responses so far

Jan 08 2011

Hello DreamHost

Published by under General,Technology

Send to Kindle

As of now, this blog, as well as Art From Code, MinimalComps, Wicked Pissah Games, and my personal site (and a few sites run by my wife), are now hosted on DreamHost. Previously, I’d been using Media Temple since 2006, but it was time for a switch.

I don’t want to totally tear apart my former host, but I will explain the reasons why I chose to switch. I had signed up for the Grid Server on MT, paying $170 per year, or about $14.17 per month, though it’s currently advertised as $20 per month. For that, you get 100 GB storage, 1 TB transfer per month, 100 domains, 1000 email addresses. It sounds like that should be enough to handle just about anything I could throw at it. And per actual stats, I had at the peak, less than a dozen domains, most of which had little or no traffic, and a couple of email addresses, only one of which was really used. I used an average of 5 GB storage, and 60 GB bandwidth, with a peak month of 150 GB bandwidth (my iPad vs Kindle display post). So for all stats, I was way, WAY below any limits. Really just a small fraction of the limits. And that pretty much worked up until the beginning of 2010.

Occasionally I would get a message about a “MySQL Container Burst” but never got charged anything for whatever that was. Then in February of 2010, without my really noticing, I got put on a “MySQL Container Lite”. I’m not sure if I was not informed of this, or I just didn’t take notice, thinking it was the same as the container burst. But later in the year, I realized that I was being charged an extra $20 a month for this lite container. I finally found out what this means. When your databases start doing too many queries, they get switched out of the shared container so they don’t slow everyone else down. This is free. After a few days, they check again and if it’s back to normal, you go back to normal. But it they’re still using a lot, you get automatically switched over to the $20 a month lite container. Once you are switched to that, it’s permanent.

I also started getting the occasional “GPU overage” alert. This means that your “grid processing unit” on the grid server is using more than it’s share of processing power. At first it was just a few dollars here and there. But with the iPad vs. Kindle post, it started going out the roof, peaking at $186 in September. Since August alone this year, I’ve paid over $267 in GPU overages, in addition to $220 for the SQL container.

In short, my hosting bill went from exactly $170 the previous three years, to almost $700 this year ($676.61 to be exact), all while staying within a small fraction of the advertised limits. When I contacted Media Temple about this, they explained the container stuff, and suggested I look at a document about optimizing database tables. That was it. At that point, I started looking for other hosts.

I finally settled on DreamHost. I’ve spent the last couple of weeks transferring 7 domains, cancelling several others. So far, I really like DreamHost. I feel like I have a lot more control over virtually every aspect of server administration.

I really learned a lot in the whole switching process. Perhaps the biggest one was the final switch over of bit-101.com itself. With the other blogs, I used the WordPress export feature to save out an xml file, and when I had the new one set up, imported that xml file in. Worked like a charm. But this blog has been around a lot longer and the database was a lot bigger. No matter what I tried, the import failed. I was almost ready to just trash the old posts and start over. But I decided to roll up my sleeves and directly export the MySQL database and import it into a database on the new server. I couldn’t get this to work through phpMyAdmin, so I rolled up my sleeves even further, and SSHed into each server and did it all by hand. After many failed attempts, I got all the permissions and syntaxes right and here we are, like nothing ever happened. I was pretty proud of myself for pulling that off.

After 4 years on one server, there was a hell of a lot of garbage on there. All kinds of folders with files, many of which I have no idea what they are for. In order to not break any links, I just uploaded the whole damn thing to the new server. I’ll be going through and cleaning it up bit by bit, so if you notice any dead links, let me know.

Send to Kindle

36 responses so far

Dec 20 2010

Using MinimalComps’ Scrollbar

Published by under ActionScript,Components

Send to Kindle

The scrollbar component in minimalcomps was never really meant to be used as a standalone component. This is not to say that it can’t be, it’s just that the interface doesn’t really have the same simplicity and ease of use as the other components. However, a few people have asked about it, so here’s an example of how to use it.

First we’ll need something to scroll. We’ll create a sprite with a bunch of random lines and give it a scrollrect so that it has more content than it can show.

var sprite:Sprite = new Sprite();
sprite.graphics.beginFill(0xeeeeee);
sprite.graphics.drawRect(0, 0, 100, 500);
sprite.graphics.endFill();
sprite.graphics.lineStyle(0);
sprite.graphics.lineStyle(0);
for(var i:int = 0; i < 100; i++)
{
	sprite.graphics.lineTo(Math.random() * 100, Math.random() * 500);
}
sprite.scrollRect = new Rectangle(0, 0, 100, 100);
addChild(sprite);

I'm omitting all the imports. If you're attempting this, I assume you know how to import classes. If not, stop now and learn some AS3. :)

OK, now we'll create our scrollbar and put it just to the right of the sprite, and give it an event handler for the scroll event.

var scrollbar:VScrollBar = new VScrollBar(this, 100, 0, onScroll);
function onScroll(event:Event):void
{
}

This should look right, but won't do anything. We need to do 4 things to make it functional:

1. Set the thumb percent - i.e. how big the sliding button is, as a percentage of how big it could possibly be. By default it's 1.0, meaning it fills the whole area. You'll need to calculate this yourself, and it's generally the visible area of the thing you're scrolling, divided by the total size of it. In our case, we can see 100 pixels of the sprite, but it's height is 500. So we can say:

scrollbar.setThumbPercent(100 / sprite.height);

2. Set the maximum value of the slider. This is the most you want the object to scroll. Again, this takes come calculation. Generally, it's the total size minus the visible area. The sprite is 500 pixels high and we can see 100 pixels. So 500 - 100 = 400.

scrollbar.maximum = sprite.height - 100;

3. Customize how much you want the scrollbar to move when you click on the buttons or the back. The lineSize property controls how much it will move when you click on the up or down buttons, and the pageSize controls how much it moves when you click on the back. Generally lineSize is fine at 1, but you can bump it up to make things scroll more. And pageSize is usually the same as the visual area, so 100 in this case. In some cases you might want to make pageSize a bit less, so you have some overlap. This is up to you.

scrollbar.pageSize = 100;
scrollbar.lineSize = 1;

4. Finally, you have to implement the event handler for the scroll event to make use of the new scroll value. In this case, we're changing the scrollrect to make it's top value equal the value of the scrollbar:

function onScroll(event:Event):void
{
	sprite.scrollRect = new Rectangle(0, scrollbar.value, 100, 100);
}

See what I mean? Not exactly rocket science, but not exactly "minimal" either. But there you have it. If you need to use it, go for it. Here's all the code together:

import flash.display.Sprite;
import flash.geom.Rectangle;
import com.bit101.components.VScrollBar;
import flash.events.Event;

var sprite:Sprite = new Sprite();
sprite.graphics.beginFill(0xeeeeee);
sprite.graphics.drawRect(0, 0, 100, 500);
sprite.graphics.endFill();
sprite.graphics.lineStyle(0);
for(var i:int = 0; i < 100; i++)
{
	sprite.graphics.lineTo(Math.random() * 100, Math.random() * 500);
}
sprite.scrollRect = new Rectangle(0, 0, 100, 100);
addChild(sprite);

var scrollbar:VScrollBar = new VScrollBar(this, 100, 0, onScroll);
scrollbar.setThumbPercent(100 / sprite.height);
scrollbar.maximum = sprite.height - 100;
scrollbar.pageSize = 100;
scrollbar.lineSize = 1;

function onScroll(event:Event):void
{
	sprite.scrollRect = new Rectangle(0, scrollbar.value, 100, 100);
}
Send to Kindle

6 responses so far

Nov 07 2010

MinimalComps 0.9.6

Published by under ActionScript,Components,Flash

Send to Kindle

It’s been a while, but I finally got around to doing some work on MinimalComps. I went through all the issues that people had entered in Google Code. Some were older and already handled. Some were requests for new features, which I’ve noted, but am not acting on just now. Several I could not reproduce and closed. But if you entered one of those and are still seeing an issue and can give reproduceable steps for it, please reopen it with those steps. And then there were a fair amount of real bugs. Many of these were related to the List and ComboBox controls. These wound up showing up several issues in lower level controls, down to PushButton. I think I have them pretty well cleaned up.

So, no new features, but you should find List and ComboBox work much better now. You can get the URL to the SVN repository, or download the SWC or the zipped source here: http://code.google.com/p/minimalcomps/

A couple of other things I want to note. First I want to acknowledge that the ComboBox is misnamed. It should be a Dropdown. A ComboBox COMBINES an editable field with a dropdown list. I’m not sure the best way to handle this. I’m thinking of just changing the name to Dropdown and then creating an empty ComboBox class that extends Dropdown just to ensure I don’t break existing stuff. Does that seem like a decent fix?

The other issue to address is that several people have been bugging me to move the repository over to GitHub. I’ve personally used Git and got to like it, but despite the zeal that converts express for it, I think SVN is a much more popular method of source control. Pretty much anyone these days knows how to use SVN, either by command line or via some client. Git does have a serious learning curve, even for those who have used SVN or CVS. A lot of people have not made the jump yet. I don’t want to limit people’s access to the source and I don’t want to try to maintain two repositories. So for the near future, I’m sticking with Google Code SVN.

Send to Kindle

10 responses so far

Apr 11 2010

MinimalComps: New SWC, zipped source, updated site

Published by under Components

Send to Kindle

Backlogged on this, but I got the new SWC and zipped source uploaded, including the new RangeSlider component (HRangeSlider and VRangeSlider, actually). Has a bunch of other bug fixes in there as well.

Also updated the site, as it had a nasty bug in the WheelMenu that caused a run time error, as several as you reported. This was fixed a while back, just needed to update the site. And the site now shows the RangeSlider as well.

Send to Kindle

5 responses so far

Apr 02 2010

MinimalComps: RangeSlider

Published by under ActionScript,Components

Send to Kindle

I know I’m supposed to stop making new components and clean things up for 1.0, but this got in my head and I had to bang it out. It’s basically a slider with two handles. You get a lowValue and a highValue. Good for specifying a range with a low and high boundary. I thought it was pretty important to have labels for the two values, but wasn’t sure the best way to do it. Finally came up with these sliding labels that match the position of each handle. They can be always on, always off, or just show up when you move the handles. You can also specify the position of the label.

Get Adobe Flash player

Shown here is the HRangeSlider. There’s also a VRangeSlider which works about as you’d suspect.

The code is checked into SVN. Will update the site, SWC, docs, and code download later, probably tomorrow.

Send to Kindle

10 responses so far

Mar 27 2010

Minimal NumericStepper

Published by under ActionScript,Components

Send to Kindle

I wasn’t planning on doing this before 1.0, but I needed one and put a couple of buttons and an input text together for the project I’m doing. Then I needed another one elsewhere in the project. So I extracted what I made, cleaned it up and here you go. :)

Get Adobe Flash player

The buttons are a bit different than other Numeric Steppers, but I kind of like them. You have max, min, value, step, labelPrecision, and of course a CHANGE event.

Enjoy

http://www.minimalcomps.com

Send to Kindle

11 responses so far

Mar 26 2010

Custom List Items for MinimalComps List and ComboBox

Published by under Components,Flash

Send to Kindle

I checked in some changes to List and ComboBox that allow you to create custom list items. Here’s an example:

Get Adobe Flash player

This is enabled through the listItemClass property on List and ComboBox. In it, you pass in a class that must extend the ListItem class. Here’s the code for this example:

package
{
	import com.bit101.components.*;

	import flash.display.Sprite;
	import flash.events.Event;

	public class Playground extends Sprite
	{
		private var list:List;
		private var label:Label;

		public function Playground()
		{
			Component.initStage(stage);

			label = new Label(this, 120, 10);

			list = new List(this, 10, 10);
			list.listItemClass = CheckListItem;
			for(var i:int = 0; i < 20; i++)
			{
				list.addItem({label:"item " + i, checked:i % 2 == 0});
			}
			list.addEventListener(Event.SELECT, onSelect);
		}

		protected function onSelect(event:Event):void
		{
			label.text = list.selectedItem.label + ". checked: " + list.selectedItem.checked;
		}
	}
}

Here, I'm saying list.listItemClass = CheckListItem; We'll see the CheckListItem class shortly. As I add items, I give each one a label property and a checked property, which is true or false. And when an item is selected, I read these properties and assign them to a label.

So here's my custom list item class:

package
{
	import com.bit101.components.CheckBox;
	import com.bit101.components.ListItem;

	import flash.display.DisplayObjectContainer;
	import flash.events.Event;

	public class CheckListItem extends ListItem
	{
		protected var _checkBox:CheckBox;

		public function CheckListItem(parent:DisplayObjectContainer=null, xpos:Number=0, ypos:Number=0, data:Object = null)
		{
			super(parent, xpos, ypos, data);
		}

		protected override function addChildren():void
		{
			super.addChildren();
			_checkBox = new CheckBox(this, 5, 5, "", onCheck);
			_label.visible = false
		}

		public override function draw():void
		{
			super.draw();
			if(_data is String)
			{
				_checkBox.label = _data as String;
			}
			else if(_data.label is String)
			{
				_checkBox.label = _data.label;
			}
			else
			{
				_checkBox.label = _data.toString();
			}
			if(_data.checked != null)
			{
				_checkBox.selected = _data.checked;
			}
		}

		protected function onCheck(event:Event):void
		{
			_data.checked = _checkBox.selected;
		}
	}
}

In the addChildren method, I create a CheckBox and turn the existing Label invisible.

In the draw method, I assign the _data.label value to the CheckBox and use _data.checked to set whether it is checked or not. As you can see, there is some additional testing for various possible label values that I basically just copied over from ListItem. When the CheckBox is clicked, it sets _data.checked to its own checked state.

Since data is typed as a generic object, you can pass any property to it. For instance, if you want to display an icon or image, you might pass in an icon class or a url and use that within your list item class to instantiate or load a bitmap and display it.

One thing to note is that any display objects you create in the list item may become the target of mouse click events. In checking for a list selection, the target must be the list item itself, not a child of the list item. For example, notice that when you click the CheckBox, it checks/unchecks the CheckBox, but does not select the list item. You have to click somewhere off the CheckBox to select the item. So if you have any display objects that may be capturing click events, you can set them to mouseEnabled = false, and maybe mouseChildren = false, to have them ignore clicks. The click target will then be the list item itself instead of the child. If you have children that need to be interactive, like the CheckBox in this example, make sure you leave enough space to allow for a selection-causing click as well.

Send to Kindle

9 responses so far

Mar 25 2010

MinimalComps Fixes

Published by under ActionScript,Components

Send to Kindle

As I mentioned the other day, I’m going to spend the next couple of weeks addressing any bugs or enhancements to the components. In the last few days, here are some of the things I’ve added and fixed:

- exposed numVisibleItems on ComboBox
- fix for stage click to close ComboBox
- exposed items array for List and ComboBox
- more accurate leap year calculation in Calendar
- Sliders now dispatch a change event when you set their values programmatically
- HBox and VBox now calculate their own width and height based on their contents, so you can now nest these
- Knob has 3 modes of reacting to the mouse: vertical, horizontal, and rotate
- fixed some visual jumpiness that occurred when resizing components
- made internal event listeners use weak references
- on text components, if text is set to null, it will be changed to an empty string rather than throwing an error

If you have any other bugs or enhancements, please feel free to submit them: http://code.google.com/p/minimalcomps/issues/list. I’m paying close attention to this list and addressing each item as soon as possible. Again, I’m not adding any new components in the near future, just addressing bugs and enhancement requests to existing ones.

Send to Kindle

Comments are off for this post

« Newer posts Older posts »