the singularity of being and nothingness
Posts tagged Sencha Touch
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:
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 >
Sencha Touch Theming: 1.1.0
Apr 23rd
In my last article, I showed how to get setup and started with creating custom stylesheets. After a significant release (1.1.0) and several reader requests, Iām updating the walkthrough with screenshots and instructions for v1.1.0. This version will be strictly business: for discussion about the more interesting points of whatās going on, refer back to the original post š
Step 1: Install RubyTo get SASS setup, youāll first need to install Ruby and Ruby Gems (SASS is bundled with something called āCompassā, and Compass is a āGemā that can be added into Ruby). You can go the painful route and install Ruby and then add Gems into it. However, if youāre stupid about these things, you can do what I did and just grab the Ruby 1.92 installerāit comes pre-built with Gems already configured.
Get the Ruby 1.92 Installer When prompted, choose āāAdd Ruby executables to you PATHāI installed to the default directory on Windows (C:\Ruby192\)
Step 2: Setup CompassNow that Ruby is installed, the next step is to get Compass (e.g., SASS) setup. This step actually took me the longest, simply because Iām stupid about command-line stuff. So hereās a play-by-play of what to do (this is for Windowsā¦I assume Mac More >
Sencha Touch Theming: Building Our Custom Stylesheet with SASS
Mar 7th
Ok, letās recap. So far, weāve looked at some basic concepts related to how to approach modifying a Sencha Touch app theme, as well as walked through exactly how all the pieces fit together in the SASS magic. With all this behind us, itās finally time to create a custom .scss file-letās get started!
Setting Things UpIn the following example, weāll be doing some minor riffs on the standard sencha-touch.css file. If youāre in the mood for a super-customized theme of your own, well, youāve got a lot of work ahead of you. Instead of jumping headfirst into something like that, why not start with some small changes, and build from there?
First things first, we need to decide where we want our new .scss file to live. While we can put it in the /resources/sass/ folder where the other core ones are, for this example weāll create a new folder at the same level…just to keep things straight. Iām going to call mine “custom” (pretty creative, eh?).
Now, in order for us to let Compass know where our .scss file lives, we need to create our own config.rb file (check out the last post for more info about this). Iāll create that file, and hereās More >
Sencha Touch Theming: The Lay of the Land
Mar 6th
If you followed the steps in the last post on setting up your development environment to leverage SASS, you should be all set to start rocking some seriously awesome custom themes for your Sencha Touch app. But before you dive in, you might take a few moments to take a deep breath and survey all thatās going on to build out the default Sencha Touch theme.
Itās not that you couldnāt immediately jump in and produce something awesome-you definitely could, and it would be pretty simple. I suggest browsing the default theme, however, because despite how easy it is to being customizing your own .scss file with new colors, icon masks, and whatever else strikes your fancy, actually understanding (if even in a very preliminary sort of way) whatās going on will help prevent future frustrations that may dampen your sudden excitement to start theming.
With that thought in mind, letās take a few moments to peek around the default theme to see how the magic happens.
config.rbIn your Sencha Touch installation, browse to /resources/sass/. In this folder, youāll see a file named config.rb. This file, written in Ruby, is one of those “setup it up and leave it alone” kind of files. More >
Sencha Touch Theming: Getting Started
Mar 5th
If youāve worked with Sencha Touch for more than 5 minutes, you have GOT to appreciate the aesthetics which the framework brings out of the box. You literally have to do nothing at all in order to get a slick, polished looking interface that works in webkit browsers and on iPhone and Android devices.
However, if youāre like me, you probably get to the point with your apps where you want to customize the look and feel. I mean, while the Sencha Touch default palette is nice, itās pretty generic, so before long youāll need to start developing a custom theme for your app.
An Abortive StartInitially, this can be a challenge with Sencha Touch apps. The challenge stems not from the fact that anything magical is happening behind the scenes: itās just JavaScript, CSS3, and HTML after all. Rather, itās the way that itās all packaged up.
If you take a look at one of the stylesheets, youāll notice how crazy complicated they are. Letās say you wanted to change the color of all the navigation backgrounds, for example. Well, you could use Chromeās developer tools to inspect each and every interface, grab the selectors, and then try to overwrite them with a More >
My First Sencha Touch App
Feb 21st
As readers of this blog know, Iām a pretty big Sencha fan. I <3 ExtJS…seriously, I love pretty much everything about it, from how great the default UI is, to how ridiculously easy it is to build awesome applications in zero time. So when I heard a while back that Sencha was combining ExtJS, jQTouch, and Raphael to create a mobile framework (Sencha Touch), I knew it was something Iād have to try.
And try I did…well, really, it was more like dabbling. I had ideas that I wanted to test out, so over the last few months Iāve been experimenting in between life and other projects. But no matter how hard I tried or how good my ideas were, I couldnāt really find the motivation to bring anything to completion…or even to a real start. Until this weekend.
The CatalystYou see, my darling 5-year old daughter is valiantly learning to read. But like a lot of kids (I think), she has trouble staying motivated and gets frustrated easily when sheās not able to hit a home run with the new things that she tries.
As Iāve been working with her on reading, I have reflected on my own experiences. While Iāve always loved More >
