Archive for January, 2012

Ext Js 4: Merging store data

In a project I’ve been working on I needed to get a bunch of different stores of data and then have a separate store that would contain all of them combined. This was to save on ajax calls. I couldn’t find anything as far as native methods that would merge stores but I did come up with a solution.

var emptyArr = [];
 
var aggregatedStore = new Ext.data.ArrayStore({
		data: emptyArr,	
		fields: [{name: 'field1'},{name: 'field2'}]
	});
var singularStore = new Ext.data.JsonStore({
		autoload:true,
		proxy: {
			type: 'ajax',
			url: '/getDataPlease',
			reader: {
				type: 'json',
				root: 'fieldRoot'
			}
		},
		fields: [{name: 'field1'},{name: 'field2'}]
 
	});

So what I want to do here is push the contents of singularStore into aggregatedStore. What I ended up doing is adding a listener on singularStore load to accomplish this:

var emptyArr = [];
 
var aggregatedStore = new Ext.data.ArrayStore({
		data: emptyArr,	
		fields: [{name: 'field1'},{name: 'field2'}]
	});
var singularStore = new Ext.data.JsonStore({
		autoload:true,
		proxy: {
			type: 'ajax',
			url: '/getDataPlease',
			reader: {
				type: 'json',
				root: 'fieldRoot'
			}
		},
		fields: [{name: 'field1'},{name: 'field2'}],
                listeners: {
			'load': function(store, records, successful) {
				aggregatedStore.loadData(records,true);
			}
		}
 
	});

Now I can use singularStore to get just the data from that url. I can then add that load listener to any other store and use aggregatedStore to show the combined data.

How do I use traits in PHP 5.4

The biggest change in PHP 5.4 is the addition of traits to the object-oriented programmability. Traits prevent code duplication by allowing multiple classes to include a collection of methods implemented as a trait. This means multiple classes can include the same method implementations without duplicating code.

Traits improve on interfaces because they include not only the function definition, but also the implementation. Traits can also use other traits, meaning that one trait could be a collection of others. So, if you had traits Roll and Bounce, you could have trait Movements that used both Roll and Bounce.

trait HelloWorld {
    public function sayHello() {
        echo 'Hello ';
    }
 
    public function sayWorld() {
        echo 'World!';
    }
}
 
class MyClass {
    use HelloWorld;
    public function sayHelloWorld() {
        $this->sayhello();
        $this->sayWorld();
    }
}
 
$h = new MyClass();
$h->sayHelloWorld();      // outputs "Hello World!"

In implementing traits, the keywords trait and insteadof were added to PHP. Usage of trait is outlined above. The PHP keyword insteadof is used for conflict resolution. Here’s an example of how to use insteadof:

trait A {
    public function smallTalk() {
        echo 'a';
    }
    public function bigTalk() {
        echo 'A';
    }
}
 
trait B {
    public function smallTalk() {
        echo 'b';
    }
    public function bigTalk() {
        echo 'B';
    }
}
 
class Talker {
    use A, B {
        B::smallTalk insteadof A;
        A::bigTalk insteadof B;
    }
}
 
class Aliased_Talker {
    use A, B {
        B::smallTalk insteadof A;
        A::bigTalk insteadof B;
        B::bigTalk as talk;
    }
}

How to Fix Text Links in the iPhone-Slide Plugin

On a previous post I told you all about this amazing plugin I found that would create a slider that takes advantage of the iPad’s touch and drag functionality.

However, if you didn’t use it just for images and had the slides contain text, you may have noticed that the links within the slides would not work. This plugin appears as it was mainly created to swipe through images, and not necessarily for content with text links.

I went into the plugin (jquery.iphone-slide.js) and changed a few things so it would do my bidding:

OLD CODE:

helpers.goto_url(thislink);

NEW CODE:

var thislink = $(event.target).parent("a").attr("href");
if(!thislink){var thislink = $(event.target).attr("href");}
if(thislink){
   window.location(thislink); //similar behavior as clicking on a link
}

Turns out the __mouseup function was preventing the default action and the “helpers.goto_url” function only opened image links. But now it’s set up to do everything, Cheers!

Simple CSS gradient

CSS has continued to simplify common design operations and CSS3 doesn’t show any signs of that trend changing. Gradients, which have been around for awhile now have commonly replaced the old way of creating custom images for a couple quick css lines of code.

.orange-gradient
{
background: #f78d1d; /* initial background for default */
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20)); /*Webkit Chrome/Safari etc.. */
background: -moz-linear-gradient(top,  #faa51a,  #f47a20); /*mozilla*/
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20'); /* IE */
}

This would make a great orange gradient for a background. Another great trick is to reverse the gradient on hover

.orange-gradient:hover
{
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

Add this class to a button or link, add some padding and you have a quick and great-looking button.

How Can I Make a Div Slider that is iPad Friendly?

There are a lot of sliders that can cycle through content that will work on the iPhone.  Many of these being powered by some kind of jQuery plugin.  However, I only found one that will actually include the functionality for the iPad to be able to use it’s swipe based interface. (click and drag to see more content)

Here is a link to the jQuery Simple iPhone-Slide plugin.  It has an excellent tutorial for such an awesome plugin.

http://jquery.hinablue.me/jqiphoneslide/

After including all the needed files, setting up the slider was as easy as the following function.  This is what I used for initialization:

$(document).ready(function() {
 
	$('#album').iphoneSlide({
		handler: "#slidePaging",
		pageHandler: ".slidePage",
		nextPageHandler : '.nextPage',
		prevPageHandler : '.prevPage',
		autoPlayTime: 9000,
		bounce: false,
                autoPlay: false,
		pager: {
	        pagerType: "dot",
	        selectorName: ".banner_pager",
	        childrenOnClass: "on",
	        slideToAnimated: true
	        },
		autoCreatePager: true,
                onShiftComplete: function(elem, page) {
                }
	});
});

Creating a simple jQuery slide-down login form

jQuery can really add some great touches to a website and one that is easy to do is a slide-down form.

<div id ="login_container"> 
<a href="#" onClick="openForm()">Login</a>
<div id="login_form">
<form action="" method="post" name="form1">
Username: <input type="text" name="username" /><br />
Password: <input type="password" name="pword" /><br />
<input type="submit"  /><br />
</form>
</div>

Obviously we want to initially hide the form and display it on the “Login” link:

#login_container
{
    position:absolute;
    top:100px;
    left:300px;
}
#login_form
{
    display:none;
    background:#FFFFFF;
}

There is a very important part lying in that CSS and that is the container needs to be absolutely positioned. Otherwise it will push all other block elements down when the form flies open.

Finally, we need the jQuery to make it all happen

function openForm()
{
	 if ($("#login_form").is(":hidden")){
              $("#login_form").slideDown("slow");
	}
	else{
		$("#login_form").slideUp("slow");
	}
}

Now you have a great UI component that gives a user access to the login form at anytime but doesn’t clog up the design.

How Do I Add Data to a Spark DataGrid in Flex Mobile?

When coding for mobile developments in flex (Flash Builder), I had a hard time populating the dataGrid element because it doesn’t use arrayCollections like lists do.  The data source is actually bounded to the IList data type.  An example of setting it up is listed below.

<s:Application
    <fx:Script>
        import mx.collections.IList;
        [Bindable] public var dataGrid:IList = new ArrayList([
            {firstName: "John", lastName: "Doe", phone: "1231231234", email: "test@test.com"},
	    // ... whichever variable names in the DataGrid
        ]);
    </fx:Script>
    <s:DataGrid id="dataGrid" dataProvider="{dataGrid}" width="100%" height="100%">
        <s:columns>
            <s:ArrayList>
		<s:GridColumn dataField="firstName"/>
		<s:GridColumn dataField="lastName"/>
		<s:GridColumn dataField="phone"/>
		<s:GridColumn dataField="email"/>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>
</s:Application>

This DataGrid example has a column per property( GridColumn) and dataField attribute is used to select the dataProvider object property to display in that column.  The dataProvider is  a list of the object properties that are defined in the dataGrid (firstname, lastname,phone, email) and their values for that row.