Search Results for "minimalcomps"

Jan 27 2011

More MinimalComps updates

Published by under ActionScript,Components,Flash

Send to Kindle

A couple of things today.

First is on adding content to Windows and Panels. By default, if you added a child to one of these, it would just add it like any other child, positioning it from the top left of the parent’s position. In particular on the Window, this forced you to reposition your content so it wasn’t on top of the title bar. Also, in either case, if your content was larger than the parent, it would march on outside of the bounds of the parent.

To handle this, I created a content property on these components, which was positioned correctly, and masked the children added to it, so it looked correct. The recommended way of adding children to Panels or Windows was thus:

window.content.addChild(btn);
panel.content.addChild(myRadioBtn);
// etc.

or…

new PushButton(mywindow.content, 10, 10, "click me");
new RadioButton(mypanel.content, 10, 10, "option 1");
// etc.

Unfortunately, this just wasn’t very obvious, and in retrospect, pretty stupid. The proper way would be to override addChild to add the child to the content automatically. So, that’s what I did. I also added a new addRawChild method to each of these components, in case you are doing some custom hackery that really required adding children to the component itself. The following should illustrate the change:

If you were already using content, you won’t see any changes, but you don’t need to use it any more. If you were adding children with addChild and repositioning manually, you’ll probably need to adjust your code to remove those manual adjustments, again, particularly on the Window.

This change also applies to Accordion and Scrollpane, which are based on Panels and Windows.

I also adjusted MinimalConfigurator to account for this, which mainly means I was able to remove the code that checked if the parent had a content property. Now it can always just addChild.

The next change was something else that’s been bugging me for a long time – the PushButton down state. It added an inner drop shadow, but otherwise was not very visible, particularly when using toggle = true. It wasn’t very obvious when a button was toggled in the down state.

So I added a new property on the Style class: Style.BUTTON_DOWN, which is used to redraw the button face when it is down, making it slightly different and much more noticeable. I added values for this to the light and dark themes. If you’ve created custom themes, you can add this to it.

SVN has been updated, and a new SWC and zipped source package have been uploaded to Google Code.

ps. If you used MinimalComps and want to join the conversation, check out the new Google group.

Send to Kindle

2 responses so far

Jan 22 2011

MinimalComps Google Group

Published by under ActionScript,Components,Flash

Send to Kindle

As suggested by Vic C, I’ve set up a Google Group for MinimalComps. Discuss, request, share.

http://groups.google.com/group/minimalcomps

Send to Kindle

One response so far

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

« Newer posts Older posts »