May 2013
1 post
2 tags
Using Gravatar with Parse
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...
April 2013
1 post
1 tag
EnyoJS Feature Request: appCache Support
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,...
March 2013
1 post
EnyoJS on Cloud9
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...
February 2013
2 posts
2 tags
Sublime Text 2 Package for Enyo
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...
2 tags
Enyo Extensions
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...
January 2013
1 post
2 tags
enyo.RemoteControl
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...
November 2012
1 post
2 tags
ViewState Framework
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...
July 2012
5 posts
3 tags
Enyo Daily #26 - Controlling Item Selection in...
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: ...
3 tags
Enyo Daily #25 - Scrollable onyx.RichText
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...
3 tags
Enyo Daily #24 - Peeking CarouselArranger
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...
3 tags
Enyo Daily #23 - Memorable Panels
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",
...
3 tags
Enyo Daily #22 - Always Focused Inputs
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...
May 2012
1 post
2 tags
Enyo Daily #21 - Enyo Style Tag
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,...
March 2012
1 post
2 tags
Enyo Daily #20 - Frankenstein and Enyo
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,...
February 2012
2 posts
2 tags
Enyo Daily #19 - Local Scrims
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,...
3 tags
January 2012
1 post
2 tags
extras.Accordion
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.
October 2011
1 post
3 tags
Enyo Daily #18 - Dynamic depends.js
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...
September 2011
2 posts
3 tags
Enyo Daily #17 - Events - Part 5
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...
4 tags
August 2011
8 posts
3 tags
Enyo Daily #16 - Events - Part 4
A question came up on the forums regarding global custom events. The use case described was the need to pass an event up or down the object hierarchy just to react to it at the appropriate level. Enyo actually can support this with the current architecture using its event dispatcher and it only requires a couple lines of code to implement.
To fire the event, use...
4 tags
Enyo Daily #15 - Canvas
Today’s been an interesting day for webOS. If you’re a webOS developer (which is probably a safe assumption if you’re reading this), you’re probably already aware of HP’s decision to jettison its hardware division. As a result, there are in effect no webOS phones or tablets to be released unless they find a suitable hardware partner. According to the fine folks...
3 tags
Enyo Daily #14 - Scroller Fades
I found it strange that the generic Scroller control didn’t have scroll fades; instead you have to use FadeScroller. Even more troublesome, if you wanted fades on a SnapScroller, for example, the framework didn’t provide for that. The solution is easy fortunately (particularly when you steal the code from FadeScroller!).
The code use is directly adapted from FadeScroller. I had...
3 tags
Enyo Daily #13 - Toolbar Controls
One of the reasons I enjoy working with webOS is its foundation of standard web technologies. In practice, this translates to the ability to customize the behavior and display of the framework in ways its creators didn’t foresee. One such mechanism is CSS — parodoxically my most and least favorite. I love that I can throw a -webkit-border-radius on a <div> rather than opening...
3 tags
Enyo Daily #12 - 3 Ways to Include Content
There are several use cases for including large blocks of content into your applications. A couple common scenarios are to include a basic help system or “About” information. I’ll cover three possible ways to do this today.
Here’s the HTML I’ll use for illustration. Note that it doesn’t include any enyo kinds, only raw HTML. If you want to include enyo,...
4 tags
Enyo Daily #11 - Animated Grid Layout
I started this post by looking through the API docs for a control I hadn’t used yet. I came across the Grid control with no documentation and thought to myself, “This could be interesting.” Turns out, not that interesting. That did lead me to something else however: an animated grid layout.
The Grid control uses simple CSS floats to align its children to a grid. Each child...
3 tags
Enyo Daily #10 - 7 Line Dashboard App
Took a couple days off from this series due to a hackathon event I attended. After writing code for that many hours, I wasn’t up to inventing and composing a blog post. I did have a chance to build an app using jQuery Mobile so perhaps I’ll post about that experience sometime in the future.
Back on topic, I have been intending to investigate dashboards in Enyo for a while but...
3 tags
Enyo Daily #9 - Stateful
I came across this interesting kind while investigating the Picker control. It’s pretty basic — 1 property and 1 method (+1 protected) — but can be a useful base class to streamline the styling of a control.
Stateful’s single method is setState() which expects attribute as a string and its state as a boolean. This method in turn adds or removes a css class with the...
July 2011
8 posts
3 tags
Enyo Daily #8 - Events - Part 3
In the exciting finale on events in enyo, I’ll cover the ApplicationEvents component. This built-in component handles the three window events (onload, onunload, and resize) as well as a host of webOS specific events.
For more background on events, check out Part 1 on custom events and Part 2 on DOM events.
The ApplicationEvents component is really just a convenience control. It contains...
3 tags
Enyo Daily #7 - Events - Part 2
In Part 1 about Events in enyo, I covered defining, triggering, and reacting to custom events for enyo Components. The other source is DOM events triggered by user interactions or window changes.
First off, here are the supported DOM events in enyo:
Document Events mousedown, mouseup, mouseover, mouseout, mousemove, click, dblclick, change, keydown, keyup, keypress, input
Window Events...
3 tags
Enyo Daily #6 - Events - Part 1
I should probably talk about the design goals addressed by events but that’s not a topic I’m up for tonight. Instead, I’ll jump into how events are handled in enyo and defer design talk for another day.
There are two kinds of events in enyo: DOM and custom. DOM events are fired as a result of user interaction such as clicking a control, changing a value in a field, or...
3 tags
Enyo Daily #5 - Lists, Repeaters, and Flyweights -...
Part 1 of this topic covered Flyweights and how they work. Flyweights themselves are a pretty low level control and not an ideal control with which to develop. There are a couple other controls one step up the abstraction hierarchy for rendering “lists” of items: VirtualRepeater and Repeater.
In my current project, I needed just such a control. Specifically, here’s the...
3 tags
Enyo Daily #4 - Box Model
The flexible box controls and layouts in Enyo are really just convenience wrappers around the standard CSS3 flexible box model. If you haven’t looked into the CSS method before, I suggest you take a few moments to look into it. Ajaxian has a post that gives you a quick intro; Html5 Rocks has another good one. W3C also has the draft spec for perusal; there’s also an earlier draft...
3 tags
Enyo Daily #3 - Ownership
Ownership in Enyo rivals function binding in Mojo for the topic most likely to trip someone up when they start development. The developer guide has a really good overview on ownership and containment but I wanted to comment on a couple additional items.
From a practical perspective, ownership affects 2 things. First, every control has a component hash (this.$) that contains references to all...
3 tags
Enyo Daily #2 - Lists, Repeaters, and Flyweights -...
The new approach for list components in enyo has proven to be a difficult topic to fully understand. I don’t pretend to have a complete grasp but rummaging through the source code has helped me immensely. Today, I want to cover the magic that is the Flyweight.
The Flyweight is appropriately described by the enyo API docs as “a control designed to be rendered multiple times.” It stands to...
4 tags
Enyo Daily #1 - Preferences
I’m planning to try a new thing here. I’m relatively active in the Palm Dev Forums and have pulled together a list of topics that seem to be relatively common. So, I’m hoping to do a daily (maybe, perhaps every few days …) post on how to solve those common issues.
To start, I’m going to cover how to store preferences using the system service. The enyo tutorial...
June 2011
2 posts
2 tags
Fun with RegExp - Removing classes from className
CSS class manipulation is more difficult than it should be. I’m not sure why the creators of the DOM specs haven’t improved this situation but, for whatever reason, we’re stuck doing string manipulation to add/remove classes. The usual approach I’ve seen for removing classes is to split the string into an array and then iterate the array. That certainly works but I...
April 2011
1 post
2 tags
Facebook Authentication for node.js
Started working on adding “Login with Facebook” to an upcoming app so I had to dive into the Facebook API tonight. They have a simple “one file” example but it’s written in PHP so I took some time to port it to node.js. The flow is virtually identical and uses express for the server (since I already had it in place for the service). It could easily be modified to...
March 2011
1 post
3 tags
Cross-VM Service Testing
I’ve been working on a new app that will leverage a server-side node.js service. I did some initial prototyping of the UI but wanted to start integration testing between the service and the UI. Because I do my development on Windows, the emulator is on Linux in a VirtualBox instance, and my node.js server is also on a Linux image on VirtualBox, I had some networking to overcome. Both VMs...
February 2011
1 post
3 tags
Debugging on the go with Homebrew
I rolled out an update to InContact and InContact+ recently and was informed by several users that there was a bug with preferences. I did some investigation the next day but was unable to reproduce the bug. The following day I was taking a couple hour train trip. I would have liked to bring my laptop along and try to nail the issue down but I didn’t have anywhere to store my laptop for...
January 2011
1 post
ProgressBar in Dashboard Scenes
If you’ve ever tried to put a ProgressBar widget in a dashboard scene, you were probably confused when it didn’t render. I was, at least, when I ran into this while writing the code for auto-save for Save/Restore for the fine folks at webosinternals. Turns out the solution is pretty simple but, unfortunately, not documented.
Step 1 was to fire up the Palm Inspector and check out the...
December 2010
2 posts
2 tags
Updated HandlerManager
Recently updated HandlerManager to be even easier to use. Now, you can create it with just the scene assistant as constructor parameter and it will iterate all of the assistant’s methods and add binds for anything matching on* or handle*. You can still call HandlerManager.bind() with additional methods (like formatters).
Here’s the updated code:
var HandlerManager =...
Ant Scripting for webOS Builds
I’ve tried several different methods for building webOS apps. When I first started, it was a shell script on my Ubuntu box. I moved to Windows laptop and wrote equivalent batch scripts. I’ve also tried out the Eclipse plug-in. While each of these worked relatively well for a basic app, I wanted something a little more powerful when I started InContact Plus.
My goal with...
November 2010
1 post
1 tag
In-App Help System
Like many independent developers, I have limited time to work on my apps. As such, I try to focus on adding features and fixing bugs and skip some important, but often less compelling features. One of these has been in-app help — until recently at least. So, this post will share how I’ve added it to InContact and InContactPlus.
The basis for the help is a .json file containing all...
September 2010
1 post
2 tags
Aptana for webOS Development
I’ve been using Eclipse for webOS development (mainly for efficiency in managing the files). I just recently (yesterday) picked up the Aptana plug-ins and am pretty happy with the enhancements. While it doesn’t have content-assist for the mojo bits, it does provide some handy features.
Syntax Highlighting
I’m not too excited about this but it is nice when scrolling through a...
July 2010
2 posts
3 tags
Scroller and horizontal-snap
I’ve started playing with horizontal scrolling, specifically horizontal-snap, for the next version of InContact. The initial code had an issue where the horizontal scrolling wouldn’t snap to each “page” until you helped it along a little. In other words, when you would flick the scroller, it would fly to the end and skip snapping to any intermediate pages.
Turns out that...
Event Handler Management
I’ve recently been reviewing the code for InContact to improve its overall performance and noticed I wasn’t managing my event handlers appropriately.If you’ve read much of the Palm dev guidance, you’ve likely ran across the article on Event Handlers. Also, if you’ve browsed any of the Palm-created apps, you may have noticed the event handler references littering...
June 2010
2 posts
4 tags
Easy App Themes for WebOS
I had a couple early reviews of InContact that requested background options. There are obviously several options to implement this. The most straightforward is to create a CSS file that overrides the relevant bits. This model works okay if you plan to always control the CSS, although is it a little cumbersome to copy and paste the CSS file/content around. I wanted something a little more...
3 tags
InContact
It’s been quite a while since I’ve posted due to being tied up between developing my app and personal affairs. But, I’m back with a quick post on said app — InContact.
InContact enables you to quickly call, email, IM, or TXT your frequently used contacts with only 2 taps. Features include grid and list views of contact photos and names, draggable photos to reorder...
