Posts
-
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 purpose. I've done just that by extending the enyo.Panels control.
-
Enyo Daily #25 - Scrollable onyx.RichText
Here’s a quick and easy way to make a scrollable multi-line input field.
-
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.
-
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.
-
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 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 #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, tablets, and desktop) using media queries.[[MORE]]
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 #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, 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 #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.
[[MORE]]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); -
Pirate's Dice
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
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.