technisode

Using Gravatar with Parse

Thu, 09 May 2013 09:14:00 -0500

Gravatar is an service that allows users to specify a public avatar image linked to an email address. I recently decided to allow users to use their Gravatar avatar with my Parse-backed app rather than build in my own avatar system. To simplify things, I’ve hooked beforeSave for the User object to hash the email address and add it to the object. That ensures that any email address change is automatically hashed on the server and allows me to send the hash down to clients rather than the email address to protect privacy.


function MD5(s){ /* one of many publicly available MD5 functions */ }

Parse.Cloud.beforeSave(Parse.User, function(request, response) {
    var email = request.object.get("email");
    request.object.set("emailHash", email? MD5(email) : "");
    response.success();
});

EnyoJS Feature Request: appCache Support

Mon, 22 Apr 2013 14:53:40 -0500

Obviously you can add appCache to existing apps but there are a couple things I think the framework could add here. First, let’s get the appcache events wired into enyo’s event model.

if(window.applicationCache) { enyo.dispatcher.listen(window.application, “updateReady”); // there are other cache states. updateReady seems to be the most useful one }

Second, let’s enhance bootplate to include an appcache manifest in the index.html. Open to naming preferences. Also, provide the default manifest file. Here’s a first cut

CACHE MANIFEST # these will be cached CACHE: index.html build/enyo.js build/app.js build/enyo.css build/app.css assets/* # these resources will always be pulled from the network NETWORK: # /api # these resources will be loaded if the requested fails FALLBACK: # tryFirst.html useOnFail.html

Third, let’s update the build scripts to (optionally) auto-update root/*.appcache with a build time so the manifest is reloaded whenever the app is built. Perhaps a hash of the contents of the build folder instead?

EnyoJS on Cloud9

Thu, 21 Mar 2013 15:11:04 -0500

I’ve been playing around with the Cloud9 IDE a bit recently to do some remote development. It’s come a long way from when I first used it and is quite functional. A great addition is an interactive command line with a git client. So I thought, “It’d be nice to get the EnyoJS bootplate up and running here.” Following the general instructions from the wiki, I put together a set of commands that gets everything set up.

TL; DR

Pull in bootplate, update the submodules, and “disconnect” the master branch from the bootplate repo.

git clone https://github.com/enyojs/bootplate.git; rm -rf .git; shopt -s dotglob; mv bootplate/* .; git remote rename origin bootplate; git submodule update --init; printf "\n.c9*" >> .gitignore; git add .gitignore; git config --unset branch.master.remote; git config --unset branch.master.merge;

Assuming your pushing this to a new git repo (on Github or Bitbucket for example), add the remote repo and set the master branch to track it.


git remote add origin 
git fetch origin; git branch --set-upstream master origin/master

Here’s the first command broken up for readability:


# clone the bootplate repo
git clone https://github.com/enyojs/bootplate.git

# remove the existing git config (it'll be overwritten by bootplate)
rm -rf .git

# move the bootplate contents to the root folder (including the .git directory)
shopt -s dotglob
mv bootplate/* .

# rename the origin branch so your repo can be origin
git remote rename origin bootplate

# update the submodules
git submodule update --init

# add .c9* to .gitignore so the cloud9 revision tracker isn't added to git
printf "\n.c9*" >> .gitignore
git add .gitignore

# make master not track the remote bootplate repo
git config --unset branch.master.remote
git config --unset branch.master.merge

Sublime Text 2 Package for Enyo

Tue, 19 Feb 2013 22:46:51 -0600

Since there seemed to be a little interest in my gist for create() override, I put together a few others that might be useful and dropped them into a new github repo. I also included a build system to kick off tools/deploy if you’re using bootplate.

If you have Package Control, you can add the github repo as a custom repository and then install the package. If not, you can download the source/clone the repo into your Packages folder for Sublime.

Enyo Extensions

Thu, 14 Feb 2013 09:29:31 -0600

I have a couple extensions to Enyo that are in varying degrees of maturity that could use some external feedback and development. Below is a summary of each. If you’re using these, something similar, or have some thoughts on where they should go, I’d like to work with you to improve them. Feel free to comment below, catch me on twitter @theryanjduffy or send an email to ryan@tiqtech.com.

View State Framework
The view state framework is a relatively simple but extensible mechanism to manage the state of view controls. The definition of view control is loose but is intended to represent any control on which a user might expect to be able to “go back” to a previous state.

More …

RemoteControl
Retrieves a remote JS file and attempts to instantiate the specified kind as a child component. Provides a pluggable loading spinner. Seems like a building block for a single-page app (sub)framework but that needs some more thought.

More …

Platform-Aware Controls
Pattern/framework to enable native-feeling apps across different platforms by providing generalized components for common interactions.

More …

enyo.RemoteControl

Wed, 23 Jan 2013 21:16:34 -0600

Wanted to share a preview of a new kind I’ve been working on. The idea stemmed from a recent patch I submitted to fix remote loading of js into enyo. A prime use case for that capbility is to deliver a mobile website in which the entire site could be integrated into a single enyo app without loading the entire source on load. Each view could be managed by a parent enyo.Panels and loaded as requested. To support this idea, I created a new kind called enyo.RemoteControl. In short, it has a load() method that retrieves a remote JS file and attempts to instantiate the specified kind as a child component. To configure what to load, the kind has 2 design-time parameters: href to specify the URL and remoteKind to specify the “kind” to create. It also supports fit which tells the RemoteControl to apply the enyo-fit class to the new child. Finally, it provides a scrim and spinner which displays while the script is fetched and the kind is rendered. This can be overriden through the scrimKind member.

enyo.kind({
	name:"enyo.RemoteControlScrim",
	kind:"onyx.Scrim",
	classes:"onyx-scrim-translucent",
	style:"text-align:center",
	showing:false,
	components:[
		{kind:"onyx.Spinner", style:"position:absolute;top:50%;margin-top:-30px;display:inline-block"}
	]
});

enyo.kind({
	name: "enyo.RemoteControl",
	kind: "Control",
	loadState: 0,
	scrimKind:"enyo.RemoteControlScrim",
	published:{
		animate:true
	},
	events:{
		onLoad:"",
		onLoadFailed:""
	},
	components:[
		{name:"ani", kind:"Animator", startValue:65, endValue:1, onStep:"aniStep", onStop:"aniStop", onEnd:"aniStop"}
	],
	getScrim:function() {
		// defer scrim creation ...
		return this.$.scrim || this.createComponent({name:"scrim", kind:this.scrimKind || "Control", owner:this}).render();
	},
	refresh: function() {
		this.setLoadState(0);
		this.load();
	},
	setLoadState:function(state) {
		this.loadState = state;
		if(this.loadState == 1) {
			this.getScrim().show();
		} else if(this.loadState == 2) {	// what about errors?
			if(this.animate) {
				this.$.ani.play();
			} else {
				this.aniStop();
			}
		}
	},
	load: function() {
		if(this.href && this.loadState == 0) {
			this.setLoadState(1);
			//enyo.job(this.id+"_load", enyo.bind(this, function() {
				enyo.load([this.href], enyo.bind(this, "loaded"));
			//}), 2000);
		}
	},
	loaded: function(block) {
		// should be null unless my pull is changed to always created the failed member
		if(!block.failed || block.failed.length === 0) {
			this.setLoadState(2);
			this.remote = this.createComponent({kind:this.remoteKind, classes:(this.fit) ? "enyo-fit" : ""}).render();

			this.doLoad({remote:this.remote});
		} else {
			this.setLoadState(-1);
			this.doLoadFailed({failed:block.failed});
		}
	},
	aniStep:function(source) {
		this.getScrim().applyStyle("opacity", source.value/100)
	},
	aniStop:function(source) {
		this.getScrim().hide();
	}
});

To see it in action, check out this fiddle which can remotely load several of the enyo samples as well as allowing you to provide your own details.

ViewState Framework

Wed, 14 Nov 2012 21:52:00 -0600

Update: Latest code available on github

The view state framework is a relatively simple but extensible mechanism to manage the state of view controls. The definition of view control is loose but is intended to represent any control on which a user might expect to be able to “go back” to a previous state. The framework is not a view controller in MVC fashion but can be adapted to that purpose. I’ve done just that by extending the enyo.Panels control.

The view state framework has 3 components: enyo.ViewState, an implementation of ViewStateStrategy, and the consumer control.

ViewState is the consumer API for the framework and consists of a single property, path, and two events, onSaveState and onRestoreState. Each instance of ViewState must declare a unique path (in the traditional /path/to/me format) but all paths need not be at the same depth. The intent is that you could have a view (path:”/home”) that contains additional views (path:”/home/items”) and their paths would represent that heirarchy. In addition to the semantic value, this also allows the framework to persist and restore states of any parent paths of the saved path. So, if you tell ViewState to save the state of /home/items, it will also trigger a save of /home via the onSaveState. Similarly, if the state of /home/items is restored, the state of /home is also restored (via onRestoreState).

The management of view states is done through ViewStateStrategy instances. The ViewStateStrategy kind is basically an abstract base kind. It implements the API for strategies and provides some useful boilerplate code but doesn’t store the state anywhere. The base API has three methods: push, pop, and register. As you might guess, push and pop are responsible for saving and restoring state, respectively. The register method associates a path with an instance of ViewState. This registration enables the magic of cascading save and restore described above.

To get things started, I implemented a couple ViewStateStrategy instances that work well in the browser: HashViewStateStrategy and HistoryViewStateStrategy. HashViewStateStrategy leverages the window.location.hash to store state and window.onhashchange to trigger state restoration. To accomplish this, it includes a portion of the state data (the key member) in the hash following the path. It then parses the key out onhashchange and passes it back to the ViewState owner in the onRestoreState event.

HistoryViewStateStrategy extends HashViewStateStrategy but uses the history API to store the state. This allows for more state data to be saved but still falls back to the key in the hash in absence of that state. This ensures that bookmarking the URL could still restore the application correctly.

N.B. I tried a couple alteratives that leveraged the component heirarchy before landing on the register method approach. Event bubbling seemed to be the most promising but introduced a couple problems. One, events would bubble up from a ViewState to ancestor controls but couldn’t waterfall down to aunt/uncle (to continue the metaphor) controls. It’s easier to explain with a picture but, since it didn’t work out, I won’t bother. Second, it forced the path heirachy to match the control heirarchy. That’s probably safe normally but didn’t seem like a necessary constraint.

The consumer of ViewState has very little work. It must:

create an instance of ViewState and provide it a unique path,
call enyo.ViewState.save when it wishes to save the state,
provide a handler for onRestoreState to update the control with the saved state, and
optionally, provide a handler for onSaveState if other ViewState instances have a child path defined

That’s it!

More documentation to come but check out the example to see it in action.

Thoughts/suggestions/questions? Let me know here or on twitter @theryanjduffy.

Enyo Daily #26 - Controlling Item Selection in List

Tue, 24 Jul 2012 22:24:00 -0500

By default, tapping a row in an Enyo list will “select” it. Sometime you might want finer-grained control over when selection happens and this post will offer a means to accomplish just that.

Selection is managed by an instance of enyo.Selection which is owned by the List control. You can control how selection behaves via two passthrough properties on the List control: toggleSelected and multiSelect.

toggleSelected is false by default which means tapping the row will always select it. By setting toggleSelected to false, tapping the row will toggle the selection back and forth. multiSelect is also false by default which means only one row will be selected at a time. By setting it to true, you can select multiple row (surprising, I know).

When a row is selected or deselected, it is rerendered by the List and your onSetupItem handler is called. In addition to an index property, the event will also have a selected property that reflects the current selection state of the row. Alternatively, if you need to retrieve the selection state of the entire list, you can call getSelection() on the List to get a handle on its underlying Selection instance.

Perhaps you’ve decided to include interactive controls in your list item such as a checkbox or button and have decided that tapping those shouldn’t trigger row selection. Preventing the selection can use the same technique as triggering the selection: the tap method.

FlyweightRepeater does all the work for rendering list items using the flyweight pattern. It also implements a tap() method to catch any taps on child nodes to trigger selection. So, if you want to prevent selection, all you have to do is return true in your ontap handler to cancel bubbling thereby preventing the selection trigger.

What if you had several buttons and only wanted one control (like a checkbox) to control selection? Turns out that any subkind of Control can override tap() to handle ontap events (even without specifying an entry in your handlers hash!) because Control already declares the handler. So, if you create a custom kind which implements tap() to return true, selection will never be triggered. By adding a little exception logical to tap(), you can decide when selection occurs rather than on every tap.

Here’s a working example:


enyo.kind({
    name:"SimpleRow",
    kind:"Control",
    classes:"simple-row",
    published:{
        title:""
    },
    components:[
        {name:"cb", kind:"Button", content:"Select", ontap:"cbTapped"},
        {name:"title"}
    ],
    create:function() {
        this.inherited(arguments);
        this.titleChanged();
    },
    titleChanged:function() {
        this.$.title.setContent(this.title);
    },
    cbTapped:function(source, event) {
        // nothing magical about this property, just made it up
        event.allowBubble = true;
    },
    tap:function(source, event) {
        if(event.allowBubble) {
            event.allowBubble = false;
        } else {
            // cancel bubble without my special flag
            return true;
        }
    }
});

enyo.kind({
    name:"ex.App",
    components:[
        {kind:"List", toggleSelected:true, count:25, onSetupItem:"setupItem", components:[
            {name:"sr", kind:"SimpleRow"}
        ]}
    ],
    setupItem:function(source, event) {
        this.$.sr.setTitle("Item " + event.index);this.$.sr.addRemoveClass("selected", event.selected);
    }
});

new ex.App().renderInto(document.body);

Enyo Daily #25 - Scrollable onyx.RichText

Sat, 14 Jul 2012 15:21:00 -0500

Here’s a quick and easy way to make a scrollable multi-line input field.


{kind: "extras.InputDecorator", alwaysLooksFocused:true, style:"width:100%;height:400px", components: [
    {kind:"Scroller", style:"height:100%;width:100%", components:[
        {name:"content", kind: "onyx.RichText", richContent:false, onchange: "inputChange", style:"min-height:100%"}
    ]}
]}

You have to set the height of the input decorator (either explicitly or as a fit:true child of a FittableRows instance) as well as the width (either by setting the width or changing it to display:block). By setting the min-height of the RichText control, you ensure that anywhere the user clicks in the area, the control will get focus but it will still expand if the user adds more content than the screen holds.

Live example on jsfiddle.net

N.B. I’ve used my extras.InputDecorator for the alwaysLooksFocused property but it works the same with vanilla onyx.InputDecorator.

Enyo Daily #24 - Peeking CarouselArranger

Sun, 08 Jul 2012 22:29:00 -0500

Here’s a quick way to adapt the Panels CarouselArranger to peek the previous panel. By setting peekWidth on the Panels instance, this modified arranger will offset the left by that amount. It isn’t a perfect implementation (e.g. you can see the prior panel in the background when you slide the current panel away) but it would probably work in many cases.

For simplicity, the kind inherits from CarouselArranger. I’ve only modified the arrangeNoWrap method so the contents are virtually copied verbatim. Look for peek to find the customizations.

enyo.kind({
    name: "extras.CarouselArranger",
    kind: "enyo.CarouselArranger",
    arrangeNoWrap: function(inC, inName) {
        var peek = this.container.peekWidth || 0;
        var c$ = this.container.children;
        var s = this.container.clamp(inName);
        var nw = this.containerBounds.width;
        // do we have enough content to fill the width?
        for (var i=s, cw=0, c; c=c$[i]; i++) {
            cw += c.width + c.marginWidth;
            if (cw > nw) {
                break;
            }
        }
        // if content width is less than needed, adjust starting point index and offset
        var n = nw - cw;
        var o = 0;
        if (n > 0) {
            var s1 = s;
            for (var i=s-1, aw=0, c; c=c$[i]; i--) {
                aw += c.width + c.marginWidth;
                if (n - aw <= 0) {
                    o = (n - aw);
                    s = i;
                    break;
                }
            }
        }
        // arrange starting from needed index with detected offset so we fill space
        for (var i=0, e=this.containerPadding.left + o + peek, w, c; c=c$[i]; i++) {
            w = c.width + c.marginWidth;
            if (i === s-1) {
                this.arrangeControl(c, {left: -w+peek});
            } else if (i < s) {
                this.arrangeControl(c, {left: -w});
            } else {
                this.arrangeControl(c, {left: Math.floor(e)});
                e += w;
            }
        }
    }
});

Enyo Daily #23 - Memorable Panels

Sat, 07 Jul 2012 21:03:00 -0500

This is very much beta code but wanted to share how to add history to the Enyo2 Panels control. For flavor, I even added html5 history support so if you’re using a Panels controls as the main view controller (like Pane in Enyo1), you get quick back button support.

Here’s the code as well as a quick example (full screen and in jsfiddle):

enyo.kind({
    name:"extras.Panels",
    kind:"enyo.Panels",
    published:{
        history:""
    },
    create:function() {
        this.historyChanged();
        this.inherited(arguments);
        this.createComponent({kind:"Signals", onBack:"back", onpopstate:"statePopped"});
        enyo.dispatcher.listen(window, "popstate");
    },
    historyChanged:function() {
        this.history = this.history || [];
    },
    back:function() {
        this.history.pop(); // current
        if(this.history.length > 0) {
            var last = this.history.pop();
            this.setIndex(last);
        }
    },
    indexChanged:function() {
        this.inherited(arguments);
        if(this.history[this.history.length-1] !== this.index) {
            this.pushState();
        }
    },
    pushState:function() {
        if(window.history.pushState) {
            var c = this.getControls();
            window.history.pushState({index:this.index}, "", "#"+c[this.index].name);
        }
        this.history.push(this.index);
    },
    statePopped:function(source, event) {
        if(event.state) {
            this.back();
        }
    }
});

If you’re looking to support other browsers, you might check out history.js which appears to be a nice polyfill for the history API.

Enyo Daily #22 - Always Focused Inputs

Sun, 01 Jul 2012 15:44:00 -0500

In enyo v1, making an input control appear focused was easy: simply set alwaysLooksFocused to true. In enyo v2, the styling is delegated to an InputDecorator but it doesn’t provide this same property. Fortunately, it’s easy to add to a custom subkind.

enyo.kind({
	name:"extras.InputDecorator",
	kind:"onyx.InputDecorator",
	published:{
		alwaysLooksFocused:false,
	},
	create:function() {
		this.inherited(arguments);
		this.alwaysLooksFocusedChanged();
	},
	alwaysLooksFocusedChanged:function() {
		this.addRemoveClass("onyx-focused", this.alwaysLooksFocused);
	},
	receiveBlur:function() {
		if(!this.alwaysLooksFocused) {
			this.inherited(arguments);
		}
	}
});

Enyo Daily #21 - Enyo Style Tag

Sun, 06 May 2012 00:25:00 -0500

Had a random idea to implement a <style> tag in Enyo for global runtime CSS manipulation. I’m thinking it might be handy to resize a bunch of elements as a result of window resize, for example. I wrote a quick example in enyo v1 and ported the couple differences for v2.

You can either set the entire CSS via its published css property or set individual blocks via the set(classSpec, styleObject) method.

Thoughts?

Edit: Make a quick update to enable removing CSS from a selector by passing a null. See the example below for removing the border from the children of .app.

Here it is live:

Enyo Daily #20 - Frankenstein and Enyo

Sun, 18 Mar 2012 16:15:00 -0500

CSS transitions are a really easy way to add basic animation to an enyo app. It works on (seemingly) any CSS property and takes JavaScript out of the picture. With Pirate’s Dice (which is still not fully functional …), I’m using them to zoom the background when starting a new game. I’m also trying to support multiple resolutions (phones in portrait and landscape, tablets, and desktop) using media queries.

To accomplish this, I’m scaling the background image differently for smaller screens than larger.



.animate {
    -webkit-transition:all 500ms ease-out;
}

/* portrait */

.app {
    background:#3e140c url(../image/bg.png) no-repeat 50% 100%;
    -webkit-background-size:auto 100%;
}

.app.new-game {
    -webkit-background-size:auto 200%;
}

/* landscape */
.app {
    -webkit-background-size:100% auto;
}

.app.new-game {
    -webkit-background-size:200% auto;
}

The consequence of this was that changing orientations of the phone would cause WebKit to animate the width from 100% to auto along with the height from auto to 100%. This turns out to be a rather jarring experience. To avoid this, I added a sprinkle of script to the resize handler that removes the animate class when resize starts and readds it once its complete. enyo.job does the work of ensuring reanimate only runs once. In other words, it won’t be constantly added and readded as the window is resized such as on a desktop browser.


resizeHandler:function() {
    this.removeClass(“animate”);
    enyo.job(“frankenstein”, enyo.bind(this, “reanimate”), 200);
},
reanimate:function() {
    this.addClass(“animate”);
}

Enyo Daily #19 - Local Scrims

Wed, 22 Feb 2012 16:14:42 -0600

There are two ways to create a scrim in enyo: globally through enyo.scrim or through the enyo.Scrim kind. In either case, the scrim “fades” the entire view (usually in order to show a modal dialog or a spinner). Another use case I’m currently experimenting with in Pirate’s Dice is a local scrim — one that only fades a particular portion of the app.

In my case, I’m using a scrim to disable the bid controls while other players are active. I’ve tried a few different approaches (including drawers, dialogs, and hiding the controls) but a scrim seems to be a nice and simple way to handle it.

Making a scrim local is quite easy and mostly relies on a quick CSS customization. First, create an instance of enyo.Scrim as a child of the control you wish to fade.

enyo.kind({
name:”ex.Hideable”,
kind:”Control”,
className:”extras-hideable”,
components:[
{name:”count”, content:”Click Count: 0”},
{kind:”Button”, onclick:”clicked”},
{name:”scrim”, kind:”Scrim”}
],
});

Notice I declared a className for the Control. Next, I’ll use that class name in css to limit the scrim to the bounds of my Hideable control. By default, a scrim covers the screen by settings its position attribute to fixed. To make it local, simply set the position of the parent control to relative and the scrim to absolute and you’re set!

.extras-hideable {
position:relative;
}
.extras-hideable .enyo-scrim {
position:absolute;
}

Finally, to show or hide the scrim, call the appropriate method on the scrim instance. To illustrate, here’s a silly example but it get’s the point across. Clicking on the button increments the count and changes the label. Once the scrim is active (by clicking anywhere else in the control), clicking the button is blocked by the scrim.

enyo.kind({
name:”ex.Hideable”,
kind:”Control”,
className:”extras-hideable”,
components:[
{name:”count”, content:”Click Count: 0”},
{kind:”Button”, onclick:”clicked”},
{name:”scrim”, kind:”Scrim”}
],
create:function() {
this.inherited(arguments);
this.showing = false;
this.count = 0;
},
toggle:function() {
this.$.scrim[this.showing ? “hide” : “show”]();
this.showing = !this.showing;
},
clicked:function(source, event) {
this.count++;
this.$.count.setContent(“Click Count: ” + this.count);

event.stopPropagation();

}
});

enyo.kind({
name:”ex.App”,
kind:”VFlexBox”,
components:[
{kind:”ex.Hideable”, flex:1, onclick:”toggle”},
{kind:”ex.Hideable”, flex:1, onclick:”toggle”},
{kind:”ex.Hideable”, flex:1, onclick:”toggle”},
{kind:”ex.Hideable”, flex:1, onclick:”toggle”}
],
lastRow:null,
toggle:function(source) {
if(source === this.lastRow) return;
if(this.lastRow) {
this.lastRow.toggle();
}
source.toggle();
this.lastRow = source;
},
});

new ex.App().renderInto(document.body);

Working on a new game for webOS (and possibly other platforms)...

Tue, 21 Feb 2012 22:27:36 -0600

Working on a new game for webOS (and possibly other platforms) called Pirate’s Dice. I’m hoping to support both the classic rules of Liar’s Dice as well a variation or two. I have a playable alpha build working and am working on polish. I’ll be looking for beta testers soon I hope so let me know in comments or via email [admin-at-tiqtech.com] if you’re interested.

extras.Accordion

Thu, 26 Jan 2012 23:50:44 -0600

Created a new Accordion control this evening in my enyo-extras repository. If you’re not familiar with this style control, jQuery has a similar example. Take a look and feel free to fork and make improvements!

Next iteration will support scrolling content and horizontal display.

Enyo Daily #18 - Dynamic depends.js

Fri, 14 Oct 2011 23:49:00 -0500

While it’s probably not fair to call this “daily” any longer, I’m going to stick with it anyway.

You may have heard that enyo has found its way onto the legacy devices via a new Maps application in the App Catalog. To test things out, I tried to deploy Score Keeper onto my Pre2. It deploys successfully but there are definitely some bugs to sort out. One way I intend to clean up the UI is by including a phone-specific stylesheet through a dynamic depends.js file.

The normal depends.js file looks something like this:

enyo.depends(
    “controls.js”,
    “app.js”,
    “app.css”
);

This tells enyo to load up controls.js, app.js, and app.css in the same directory as this depends.js file. But depends.js is just a regular javascript file so there’s nothing preventing you from doing something a little more robust here to select which files you want to include. Also, since the framework is the one including depends.js in the first place, all the framework functions are available during execution of depends.js.

I elected to use a closure to keep the global namespace clear and base my custom CSS inclusion on the screen width. If you’re aware of a better condition to check, please share in the comments. Inside the function, I retrieve the device info and build an array of the common files. Next, I check the device width and push the extra css if appropriate. Finally, I call enyo.depends (via Function.apply since I’m working with an array) and that’s all!

(function() {
    var di = enyo.fetchDeviceInfo();

    var paths = [“extras.js”,
                 “views.js”,
                 “app.css”];

    if(di && di.screenWidth < 500) {
        paths.push(“app-phone.css”);
    }

    enyo.depends.apply(enyo, paths);
})();

Enyo Daily #17 - Events - Part 5

Mon, 19 Sep 2011 22:40:00 -0500

I wouldn’t have expected to write so much about events in enyo but there’s a lot of depth to cover. I previously posted about an Animated Grid Layout control I created which I later used in Score Keeper for the board selection. I have a similar requirement for the main panes of InContact but also need to reorder the items.

To enable the reordering, I wanted to defer the event handling to the new grid control rather than binding them in my app. This keeps that logic contained to a separate control (one I could swap out for an alternate grid control if desired) and not muddling up my main app code. The rub with this is that is was difficult to add an event handler to an enyo instance when you’re not the owner of the control (in my scenario, the main app is the owner whereas the grid is just the container. More on ownership and containment in Enyo Daily 3).

The rather simple solution I discovered was to add an instance function to the enyo instance during creation. The function is bound (using enyo.bind) to the grid control so it can enable reordering.

One caution with this approach is that it will by default prevent calling a handler declared for the onX event for the instance. You could call dispatchIndirectly yourself in your instance method but I’ll leave that as homework. :)

Here’s a quick example. I’ll share the reorderable grid control once it’s actually complete!

var _Example = {
    name:”com.technisode.example.App”,
    kind:”Control”,
    components:[
        {kind:”ApplicationEvents”, name:”appEvents”, onUnload:”logAppEvent”},
        {kind:”EventSender”, name:”eventSender”, onSend:”sent”},
        {kind:”Button”, onclick:”clicked”},
        {kind:”ContainerListener”, components:[
            {kind:”Button”, caption:”Clicking me will be handled by my container”}
        ]},
        {kind:”Input”, onkeypress:”press”},
        {kind:”Dashboard”, name:”db”}
    ],
    create:function() {
        this.inherited(arguments);

        this.$.db.setLayers([{title:”My Dashboard”, text:”important message”}]);

        // map all ApplicationEvents to logAppEvent
        var ae = this.$.appEvents;
        Object.keys(enyo.ApplicationEvents.prototype.events).forEach(function(key) {
            //enyo.log(“setting handler for “,key);
            ae[key] = “logAppEvent”;
        });

        enyo.dispatcher.rootHandler.addListener(this);
    },
    logAppEvent:function(source, e) {
        enyo.log(“logAppEvent”,e.type);
    },
    resizeHandler:function() {
        enyo.log(“dimensions”,window.document.body.offsetWidth,window.document.body.offsetHeight);
    },
    captureDomEvent:function(e) {
        enyo.log(“A DOM event occured”, e.type);

        // returning true would indicated the event is captured and prevent the bubble phase
        // thereby preventing the declared handlers (clicked in this case) from being called

        // returning false (or no explicit return) lets things continue
        return false;
    },
    dispatchDomEvent:function(e) {
        // like any other method, you could override dispatchDomEvent and implement custom routing
        e.myCustomField = “This is a custom field”;

        return this.inherited(arguments);
    },
    press:function(source, event) {
        enyo.log(source, event);
    },
    clickHandler:function(source, event) {
        enyo.log(“bubbled up to me”, event.myCustomField);

        // calling event.stopPropagation() or returning true will end the bubble phase
    },
    clicked:function(source, event) {
        // trigger my custom events
        this.$.eventSender.go();

        // toggles event handler between send and secondSent … just because …
        this.$.eventSender.onSend = (this.$.eventSender.onSend === “sent”) ? “secondSent” : “sent”;

        // calling event.stopPropagation() or returning true will end the bubble phase
    },
    sent:function(source, one, two, three) {
        enyo.log(“sent”, one, two, three)
    },
    handleOnAlert:function(source, obj) {
        enyo.log(“alerted”, enyo.json.stringify(obj));
    },
    secondSent:function(source, one, two, three) {
        enyo.log(“secondSent handles onSend now”, one, two, three)
    },
    customGlobalEventHandler:function(sender, param) {
        enyo.log(“customGlobalEvent”, param.data);
    }
}

var _ContainerListener = {
    name:”ContainerListener”,
    kind:”Control”,
    createComponent:function() {
        var o = this.inherited(arguments);
        o.clickHandler = enyo.bind(this, “childClicked”);
        return o;
    },
    childClicked:function(source, event) {
        enyo.log(“one of my child nodes was clicked!”)
    }
}

var _EventSender = {
    name:”EventSender”,
    kind:”Component”,
    events:{
        onSend:”handleOnSend”,
        onAlert:{value:”handleOnAlert”, caller:”sendAlert”}
    },
    create:function() {
        this.inherited(arguments);

        enyo.dispatcher.rootHandler.addListener(this);
    },
    go:function() {
        this.doSend(1,2,3);    // dispatchIndirectly
        this.sendAlert({a:1, b:2});
        window.enyo.dispatch({type:”customGlobalEvent”, data:”something to pass”});
    },
    customGlobalEventHandler:function(sender, e) {
        enyo.log(“also caught customGlobalEvent”);
    }
}

enyo.kind(_ContainerListener);
enyo.kind(_EventSender);
enyo.kind(_Example);

Score Keeper Had to take some time away from my Enyo Daily...

Tue, 13 Sep 2011 21:38:00 -0500

Score Keeper

Had to take some time away from my Enyo Daily series to actually finish up my first Touchpad app!! It’s called Score Keeper and, as the name implies, it helps you keep track of the score for a game or activity. I just submitted it to the catalog and should be available soon. You’ll find it here once it’s available.