Colt Pinithe stuff of Colt Pini

update: Dyanmic Linq library

So I realized that, even though I do a lot of back end work, I haven’t put any of it here. So I am going to. I don’t really know why I don’t put much in here. I guess maybe because I don’t think many people actually look at this site, maybe I am just poor at writing stuff down and taking the time to document. Regardless I think this may be a good place for me to reference stuff so I am going to put stuff here and if other people see it then fine.

Anyway I was thinking a little about linq in c#. Now I spent a little bit of time in Java and really like some of the hibernate stuff there. So here is something that was typical. I used the stripes framework and had a little bit (OK a lotta bit of) from my brother in law. He really knows his stuff. You could say he wrote part of the book on stripes. Anyway. In stripes there is a DAO object. A really great generics dao. the great part of this is that it is built from a string so

Really great stuff, making sql calls from the code with no sql, just objects. So when I went into linq I thought it would be similar but it isn’t.

There is some great stuff with linq but until I can figure out this problem it will be a little more cumbersome than I want it to be. So here is what is great about the hibernate stuff. Let’s look at that call again but add something else.

That is dynamic. I can look for any column with any variable because it is a string. I just need to find someway to submit the linq statement as a string and I would have it. For example in my last project I was in a position where I needed to filter a grid. There were a lot of filters going on at once so instead of having filters trump other filter I decided to put everything in one method call and use session to store all the filters. This solved everything but one little detail, the linq to do it with.

There are 8 columns and each has a set of filters, this was modled after the filter that excel does. So I can filter by the values in the cells as well as sort ascending and descending. The Grid that was used was very complex and so I built a simple gridview and added all the features myself with javascript. So again the problem. I am filtering all at once and I have 10 columns that can have filters. The linq looked like this. ‘columnName’ is the commandArgument and direction is the ‘commandName’ from the grid.

Of course that isn’t the end of the statement, but enough to get the picture. It is a switch for each of the columns. This had to be done this way because I don’t have the ability to pass the column as a string. that would have helped like this:

That would have reduced about 100 lines of code. I am still trying to figure out how I could do that, feed linq as a string. Later on the same project I used something that was a little better but still not a string.

This was a little better at doing dynamic linq, it allowed for logic inside of the linq statement and a much needed addition, but I really would like to see linq have a string feed. I think I am going to keep working on that, maybe I will have to create, somehow, one of those generic doa objects, who knows.

This is a really good system for managing system wide css. CSS_Management_standards

I have a few alternates to it in the form of putting page specific css. In the standard, for organization sake, I am including page level css in the head of the document. An alternate to this is to move it to an external page. Both have large benefits. The first deals with organization, with lots of files comes lots of management needs. The second allows for caching and more granular @imports.

Anyway. This has proved very well through my projects and thought I could offer some Ideas out there.

Update: did a little more research and found this email archive that has this idea but a little different syntax using a :matches pseudo class.

(Just for the sake of those who are looking for information on parent selectors, they do not currently exist in css selectors. This is based on some thought on how the syntax might be for them.)

Well, First I thought I would put this here on my blog because I was pa-roozing around and had been thinking a bit about parent selectors in css. Thinking about how I would like a parent selector to work this is what I came up with, if you like it let me know, if you don’t let me know too.

When I am selecting an element in css I want to be as specific and necessary but not more so. Sometimes when I select something, like say, ul > li ul li a:hover span { … }, I want to change the li of the hovered a, but I can’t. I would only be able to specify the hover state of the li then override that later or use javascript. What I would like to be able to do is to do this, and I am going to provide a few different ways that it could be done:

ul > li ul this(li) a:hover span {…}
ul > li ul li a:hover span this(4) {…}(I don’t like this on anymore. It would be different to implement and not what I was going for.)
or it could be specified using a symbol
ul > li ul $li a:hover span {…}

This is not a discussion about what symbol or word should be used, it is mearly for the concept. So what happens is you type your full selector, then you specify which element you want the style to apply to.

The way that I see it working, in concept, is to select to the this() to get all the, in this case, ‘li’s then select again after to return a bool, if the li meets the rest of the condition. It doesn’t seem like that would take much more than running two selection rules. But I could be wrong and I can’t overemphasis how much I don’t know how this would work for the people who develop the browsers, ie what it takes to code it up and how many recourses it takes.

Chances are not many people will read this, but there is my two cents on the matter .

I just ran into a problem with the tag in Visual Studio I thought it would be worth mentioning here.

Then problem comes because VS assumed that anytime you have a requiredfeildvalidator you’ll want that inline. So the way that they hide / show that validation is by adding an inline style=”display:none;”. That part isn’t so bad, it is the next part. Instead of removing the display:none to restore the block of code, the replace display:none with style=”display:inline”. This is bad!

The inline style will always trump my style sheet unless there is am !important there. so here are a few resolution to the problem and why they are bad. and then the one that I used, why it is good, and why it is bad.

first,
<br /> after the validation. bad – this will have to be placed after every tag everywhere, and what if I want to change the validation back to inline later.

Second,
using Javascript, there are two ways to do this, one as a supplament, meaning to place javascript on the page to select what you really want to select, but that would have to be placed on every page or alternativly changing the rendering in Visual Studio. I don’t really want to open the guts of Visual studio so that is bad also.

Third,
You can create a custom control that will extend the Validation, but then you would have to use that tag instead of the one Microsoft gives you. In my case that would mean changing hundreds of tags through the web app I work on for NAU.

And Last,

Using CSS. This is not a perfect solution. but here is the CSS that worked in my case.

the [E*="foo"] selector is a new css3 attribute selector that will select the element with an attribute that matches the string “foo”. This is a really cool selector that works in IE8 > . Unfortunalty there are still quite a few people that use ie7. So this isn’t ideal but in my case it will work.

Here is a side slide jquery element I just created for Northern Arizona University. The code is pretty simple, and is pretty effective. Here is a sample page: Horizontal Slider example page. just view source to see how it works.

UPDATE : this has been accepted as a tutorial on Tuts plus!! Go here active.tutsplus.com

This actionscript class will allow you to toss any object in your flash movie! Here is the class PanAndThrow

There will be an updated post on this soon on how to use it. till then here is the new file. The old implementation is under a different blog post (http://www.coltpini.com/?p=149), that may be of some help for you until I get the new stuff up. I haven’t changed much just added some new features.

So, I have been doing a project for NAU that could benefit from the new armature for Flash. So I have been trying it out. Here is the result of some frustrating moments in flash. (move the limbs of the girl below)

What I have found about this tool is that there is a reason that all the tutorials are very simple objects. If you need some complexity it is really tough to get everything working right.

There are also some bugs that I have found with the bones tool. After converting an object to an armature you can use the transform tool to adjust and fine tune each object, but what they don’t tell you is that it will move, from slightly to dramatically, each object used in the armature.

So, to conclude, it is a great tool for simple object manipulation, don’t go and try to make an entire person with a spine and completely movable parts! (Go ahead I dare you to make a shoulder that pivots the arms and head with the spine.)

and please if anyone has suggestions, I would love to learn from you.

UPDATED AGAIN : this has been accepted as a tutorial on Tuts plus!! Go here active.tutsplus.com

Download the pan and throw class -panandthrow.zip UPDATED! Goto this blog entry. http://www.coltpini.com/?p=287

This is a small tutorial on how to make an object pan and throw in actionscript 3.0 using flex. I am going to assume that you know how to set up a project and some fundamental things about actionscript. The greatest thing that happened with actionscript 3 is that now, with the improvements, it is a lot more object oriented. That means, basically, I can create snippets of code to use again and again and package them into namespaces and classes to use again and again. What I am going to show here is a class that I created to make any object throwable.

First we are going to create an mxml and throw in some objects. I am just going to throw some up here as this isn’t the main part of the tutorial.

this is pretty straight forward, create a event box, and a child box and make the size different and we will talk about the differences a little later.

To panAndThrow the object is even simpler.

Don’t forget to import your classes.

Now we are going to look at the code that makes this all happen, this is the real meat behind this tutorial.

So lets build panAndThrow.as, the PanAndThrow Class.

I am putting this in the package called “classes” how original. lets start with at the beginning, the init.

that is a lot of overloads, but that is why this is so easy. If, when we are done you want to play and tinker, you are welcome to. (If you come up with something great, let me know about it!)

Okay so let’s look at the overloads (we’ll talk about the why’s when we discuss the code).

objectToMove – this is the object that you want to interact with the mouse.

objectToEventise – This is the event object, but I didn’t call it event because it doesn’t have to be, but most of the time it will be. this is just the object that will be receiving the events. The first variable is a little deceptive, because we don’t directly interact with it, but we interact with this one. The first one just looks like that is what we are interacting with.

DecayAmount – this is where we set up our friction. 1 is no friction and 0 is total friction.

isMoveX – this asks if you want the moving object to move in the x direction.

isMoveY – this asks if you want the moving object to move in the y direction.

OnlyMoveOnTargetClick – this asks if you want the object to move anytime the mouse is down, or just while the mouse was clicked over the object to move.

so now the init function

with the init function you need to know a couple of other things so I included them here. So the first part is just setting the overloaded values to the global vars. The only other thing done here is assigning event listeners to our eventObject. We have the MouseEvent of all varieties and a timer.

So, enough set up lets get to the meat of it now.

So here is what happens, we just set up a MOUSE_MOVE listener in the last step, so every time the mouse moves over our event object this function gets called, moveIt. This is our pan function. Lets go through this step by step.

The first if is to see if our button is down and if overTarget is true. The over target variable is a bool, you may need to refer back to the variable declarations at the beginning of our class. If the onlyMoveOnTargetClick was false in the init overload, then this will always be true. If it was false then we set it to true on an event listener.

After we go into the if we set some vars. First, because e.buttonDown was true we  set our own flag, buttonDown to true. Well use that in the throw function. MouseDragged is to test if the mouse was moved while the button was down, so here it is true because we have an on mouse move event with button down. so another flag to be use later.

Now we set our mouse cursor position and store the previous mouse position in our artificial (ar) mousePrevious. this will be used on the throw also.

Next the move math. we take the current cursor position and get the difference between that and the old position then add that to the current objects location. The reason we have the previous location is because we set it after the if else.

after we add the difference to our current position we set that equal to the target objects x and y. So really, like I said we aren’t interacting this object directly, we just make people think they are. we are just interacting with the event object.
Next we check to see which element is bigger the parent or object.
then after that we stop then start our timer. Lets look at the timer handler

we just set another flag. This is so that when someone moves the object then stops but doesn’t release the mouse our object won’t move after they let the button go. We set the time duration for 100 milliseconds so it is pretty quick. Lets look a the rest of our handler function then on to the big daddy, the throw function.

downer sets our button down flag to true when ever our button is pressed, this is a just in case thing, and it sets our overTarget flag that we test for in the drag function if we don’t care where the target click is.

This says that if, when our button is pressed we are over the target object or the target click is set to false then we set to true, we set this to false on the mouse move event.

this collects anytime the button is released, another just in case, just in case the mouse is released while the mouse isn’t moving.

this is the heart of it all. A small one but this sets our throw in place. This just tests if the mouse was dragged, if it was then we can throw it on release. The throw is like a javascript repeater function but instead of calling itself like javascript, you call a ENTER_FRAME event. This tell the app to run this function every time we enter a new frame. Default for flash is 12 fps, I like to bump it up to 24.

Ok so here is the big daddy. The throw function. The principle is really simple. When the button is let off and our enter frame event is fired we take over the position of the throw object and make it act as though the mouse was still moving, only we are feeing it artificial values. So now we create and old x and y value and get the current mouse x and y that we loaded in our mouse move event. We then get the difference between the two, (if we skip over the if and else if segment for a second) we add the difference to the x and y , set the new mouse current and reset the artificial values. Does this sound a little familiar? We are doing almost the same thing as the move function.
Now I want to explain that part we skipped over. This one is the hardest to wrap your head around, at least for me when writing it. What this does is check which side your target object wants to bounce on then bounces it when it hits the edge. when your target it larger than the event object you want almost all of the target object to disappear. I will show some examples of implementation.
There is a lot going on here so let me try and explain. If we want the opposite edge, then well take the x of the target object and see if it is smaller than -5 we will negate the xDiff to send the target object in the opposite direction. same with all sides, on the right and bottom we test if the x or y is 5 pixels less than the width of the object from the edge because the top right corner is where the x and y are registering from, not the center.

We do the same for the inside edge except we are hitting the opposite edge with our math.

last function.

This calles a stop, those buttons on the examples stop the panAndThrow, and stop it.

That is it. I know I may have not gone into so much detail but this is already pretty long. So here are some usage examples and alternate configurations. All of these changes don’t touch the class we made, just the mxml implementation.
here is one where the TargetObject is bigger than the event object.

And with this one I am moving three objects, one is moving x and y, one is moving y and one is moving x. I am using no friction in this example.