the singularity of being and nothingness
Sencha Touch
Sencha Fiddle Documentation
Oct 10th
Yes, yes, I know. It’s been over a month now since I’ve posted anything. Life is life, and all that.
Anyway, exciting stuff–the good people over at Sencha put up some documentation for Fiddle today! If you’ve ever wanted to really dig into the features that Fiddle has to offer, be sure to check out the docs.
That’s all for now–happy fiddling!
Share this: Sencha Fiddle 1.0.0 RC
Aug 25th
Sencha recently released some nice enhancements to Sencha Fiddle, a browser-based sandbox for experimenting with the Ext JS and Sencha Touch frameworks (see my previous post about the features). The best way to learn about the new features is to experience them for yourself, but here’s a quick run-down of some of the more interesting changes:
Bug FixesA few of the more show-stopping bugs have been fixed, including:
- You can now search for your own fiddles by author (e.g., author:existdissolve)
- Creating “data” tabs now successfully save as a part of the fiddle
- Some “un-indexed” fiddles are now back into the search results
If this is your first time visiting Sencha Fiddle in a while, you’ll notice that it’s gotten a significant face-lift. Gone is the bluey-blueness of the Neptune theme, and in its place is the new-ish “Charcoal” theme. It’s still distinctively “Neptune” in the aesthetic, but the contrast of the lime and charcoal are much more tolerable, IMO, than the unrelenting blue of stock Neptune 🙂
Sharing OptionsOriginally, Sencha Fiddle beta offered sharing for Twitter and Facebook. This has now been expanded to include Google+. Hooray!
Additionally, you can now also grab an embed snipped for using on websites (see example More >
Sencha Fiddle Forum is Now Open!
Jul 28th
Hopefully, you’ve had a chance to check out Sencha Fiddle, the brand-new jsFiddle-style online tool from Sencha that makes creating an Ext JS or Sencha Touch snippet, test, or debugging script quick and easy. Since my previous post about Sencha Fiddle, the team has rolled out a number of bug fixes (data tabs save now!!), which make it that much better to use.
But even cooler, Sencha has opened up a forum dedicated to Sencha Fiddle. So if you find a bug, have a question about using Sencha Fiddle, or just want to suggest how it could be better, head on over and get involved. You can even now use BBCode to embed fiddles directly into any forum posts…pretty sweet!
See you there 🙂
Share this: Documenting ExtJS/Sencha Touch Code with JSDuck
Jan 28th
This will be a short post, I promise 🙂
Recently, I posted my version of a time picker in Sencha Touch 2. As part of this, I wanted to *really* document the component. I decided to leverage JSDuck, the tool which is currently used by Sencha to provide API documentation for…well…everything that they do.
Beyond looking pretty flipping sweet, the awesome part about JSDuck documentation is that it’s in the vein of “self-documenting” code. That is, beyond a few configuration comments you might make here or there, nearly everything that JSDuck spits out in terms of documentation (or is that duck-umentation…ugh) comes directly from the code you write anyway. Pretty nifty.
Anyway, if you’re interested, check out the documentation for JSDuck, and enjoy the screenshots of my documented component below.
Share this:
Sometimes a Forehead Smack is Warranted
Jun 23rd
Over the last several days, I’ve been trying to use Sencha Command to package a Sencha Touch 2 app as a native app. Honestly, for most of the process, everything worked perfectly…until I actually had to package the app. I ran the build command, like so:
sencha app build native
Throughout the build process, everything seemed to be going well, until the minification of the actual app.js file. Here’s the error I received:
[ERROR] Error: Command failed: [ERROR] 28305:18:missing variable name [ERROR] 28305:20:syntax error [ERROR] 28306:25:syntax error [ERROR] 28318:14:identifier is a reserved word [ERROR] 28420:21:identifier is a reserved word [ERROR] 1:0:Compilation produced 5 syntax errors. org.mozilla.javascript.EvaluatorException: Compilation produced 5 syntax errors. at com.yahoo.platform.yui.compressor.YUICompressor$1.runtimeError(YUICompressor.java:154) at org.mozilla.javascript.Parser.parse(Parser.java:392) at org.mozilla.javascript.Parser.parse(Parser.java:337) at com.yahoo.platform.yui.compressor.JavaScriptCompressor.parse(JavaScriptCompressor.java:312) at com.yahoo.platform.yui.compressor.JavaScriptCompressor.<init>(JavaScriptCompressor.java:533) at com.yahoo.platform.yui.compressor.YUICompressor.main(YUICompressor.java:131) at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39) at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25) at java.lang.reflect.Method.invoke(Method.java:597) at com.yahoo.platform.yui.compressor.Bootstrap.main(Bootstrap.java:21)
Pretty helpful, right?
Well, I *finally* figured it out. I emphasize “finally”, as the issue was actually a code error on my part. In my app, I used the word “final” as a variable in one of my controllers. Apparently, this is a reserved word (or something like that), and so the minifier blew up. Changing the variable name resolved all the issues.
So how many hours of frustration was that? I am stupid.
Share More > Quick Thoughts on Sencha Architect 2
Apr 21st
A few days ago, Sencha rolled out Sencha Architect 2, the major overhaul and rebranding of what was formerly Sencha Designer. You can check out the release blog post to get the low-down on all the new features.
When I saw the news about the release, I have to say I was a bit hesitant to look much further. I’ve tried Sencha Designer several times in the past, and I’ve been somewhat disappointed with it. Sure, it was great for laying out apps, but when you actually needed to *code*, it was lackluster at best. But even worse, I found it to be very buggy; it would crash at random times, and overall I found the process of trying to mockup an app to be more frustrating than anything else.
So initially, I wasn’t planning on even trying out the newest iteration. But then I noticed that one of the biggest additions to the product is support for creating a full ExtJS or Touch app–not just the UI. I felt I had to take a closer look, and I’m glad I did.
UIOut of the box, Architect 2 is worlds better than its previous iterations. The interface is slick and responsive, and the way More >
Sencha Touch Theming: Custom UIs
Sep 23rd
During the course of developing your Sencha Touch app, you will inevitably get around to theming…after all, while the default styles are nice, they don’t exactly scream individuality. Fortunately, Sencha Touch makes theming ridiculously easy, and there are a lot of resources available to help with getting started with that.
But let’s talk about a specific example. Let’s imagine that you want to simply change the background color on your app’s toolbars. The first thing you’ll probably do is pop open Firebug or Developer Tools to inspect the CSS that’s being applied to your toolbar. Unless you’ve already customized it, you’ll probably seem something like this:
I’ve highlighted “x-toolbar-dark”, because by default, the “UI” configuration option for Ext.Toolbar is set to “dark,” which applies the “x-toolbar-dark” class to your toolbar (it will apply “x-toolbar-light” if you specify “light” for ui…more on this later).
Here’s what the toolbar actually looks like:
If you inspect the properties of this CSS class, you should see something like this:
- background-color: #456F8D;
- background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #9cbacf), color-stop(2%, #5182a5), color-stop(100%, #395c75));
- background-image: -webkit-linear-gradient(#9cbacf,#5182a5 2%,#395c75);
- background-image: linear-gradient(#9cbacf,#5182a5 2%,#395c75);
- border-color: black;
Nothing too crazy here…just some background-image gradients to give the toolbar a nice textured feel. Now at this point, you might be tempted to do something crazy, something More >
Sencha Touch EditableList
Sep 21st
Yeah, I know, I’m not the first person to the “create an EditableList for Sencha Touch” party. In fact, if you Google “sencha touch editable list,” you’ll find a lot of really nice code that will let you pretty easily integrate basic delete/sort functionality into your Sencha Touch app.
However, none of the offerings I ran across really fit the bill of what I was wanting, in terms of interface. Plus, it’s so much MORE FUN to build your own, right? Right!
What I WantedMy wish list for my EditableList was pretty straightforward: I wanted it to behave *more or less* like my iPhone’s Mail app list editing. This includes:
- One click to do a batch deletion/archiving of list items (btw, I absolutely HATE the same interface in the default iPhone text message app…)
- The ability to swipe-delete individual messages
- Some animations to make it somewhat mimic the iPhone Mail app’s animations (think “sliding” the deletion selectors in and out)
In addition to this, I wanted more or less everything–functionality, layout, interface–to be baked into my one custom extension. One of the things I didn’t like about some of the other solutions I found is that they required a certain structure external to the list More >
Sencha Touch: JumpToNode and the NestedList
Sep 7th
Sencha Touch’s NestedList is an excellent component for creating the compact “drill-down” effect that we’re all used to on our mobile devices. It’s super-flexible, too. Whether you have a canned set of items, or need to retrieve each “level” via AJAX, it’ll handle it.
I’ve used NestedList quite a bit, and have been generally happy with it. One of the issues I’ve come across, though, is that it does not (as far as I’m aware, at least) support jumping around to arbitrary nodes with the NestedList.
Huh? So here’s an example 😉
Let’s say you have a bunch of products that exist within categories of variable depth. Once you reach the “product” level of your NestedList, you can out-of-the-box call getDetailCard(), build out your detail view, and be done with it. NestedList will take care of the navigation bits, and your site’s visitor will get a nice “back” button to return to the category list they used to get to the detail product.
Fine and dandy. BUT…what if you have links on your detail “card” to related products? Maybe these products exist in the same category, at the same “depth” in the nested list. But maybe instead they are in an entirely different category, More >
