Author Archives: Bruno Tavares

About Bruno Tavares

I am a brazilian living in California and working as Solutions Engineer at Sencha. I like all things web, specially those beautifully designed.

Adding Custom Font Icons to Sencha Touch 2.2

Posted on by
8

In Sencha Touch 2.2 instead of using icons with the -webkit-mask trick, Touch is moving to a more cross-browser solution with icon fonts. You can read more about this at Steve Drucker blog Changes to Sencha Touch 2.2 Theming Part 1: Using Iconography.

As Steve mentions on his blog, Touch SDK ships with the Pictos Font, and it already loads some basic icons for you to use directly on buttons with iconCls. 

{
 xtype: 'button',
 iconCls: 'home'
}

If you want to define more icons from the same Pictos fonts, you just have to use the mixin icon():

@include icon('network');
{
 xtype: 'button',
 iconCls: 'network',
 iconAlign: 'top',
 text: 'Net'
}

Touch Theming Layer already has a big object on SASS mapping keys into characters. So when you inform the key “network”, the theme knows that it has to use the key “J”.

Adding Custom Icons

To add more icons you’ll need to generate your own font! You might be question yourself – How do I create a new font? Sounds complicated but it’s fairly easy.

There’s a few tools, but my favorite is IcoMoon. With this tool you can select from dozens of fonts and create your own font package, or even import your own SVG vectors.

All you need to do is select your icons, click generate font, and download!

Select your icons…

..and download the font!

..and download the font!

After you have your font, it’s time to add to your project. Add the font into {touch_app}/resources/fonts/, and add this path to your config.rb:

# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
fonts_path = File.join(dir, "..", "fonts")

Hint: Because we’re defining the fonts_path I had an error like “Pictos fonts not found”. It’s also good to copy the pictos folder from touch/resources/themes/fonts to this new fonts/ directory.

For the last step you just need to include the font and use the icons on your app.scss, like this:

@include icon-font('SenchaConIcons', inline-font-files(
  'senchacon-icons/senchacon-icons.woff', woff, 
  'senchacon-icons/senchacon-icons.ttf', truetype,
  'senchacon-icons/senchacon-icons.svg', svg
));

@include icon("menu"  , "\e009");
@include icon("search", "\e000");
@include icon("star"  , "\e001");

Updated June/5: In 2.2.1 you have to specify your font along with icon() mixin. Otherwise it will fallback to ‘Pictos’

@include icon("menu"  , "\e009", "SenchaConIcons");
@include icon("search", "\e000", "SenchaConIcons");
@include icon("star"  , "\e001", "SenchaConIcons");

Recap

  • Use a tool to pick icons and generate the font (IcoMoon, Fontello)
  • Add font into new directory {your_app}/resources/fonts
  • Copy Pictos font from Touch directory to the same {your_app}/resources/fonts to avoid errors
  • Add fonts_path into config.rb so Compass finds your font
  • Import the font icon in your app.scss

What about PNG?

PNG is bitmap based, while Fonts are vectorial based. The above mentioned tools provide hundreds of icons, so it’s pretty easy to find an existent font icon pre-built. If that’s not the case, you can convert PNG to SVG and then import into IcoMoon. There are tools for that, like VectorMagic, Online Image Converter or Inkscape. I haven’t try any of these but If you have, please let us know via comment.

LinkedInDeliciousPinterestTumblrEmailShare

New routing system for Ext JS

Posted on by
Reply

Server-side MVC frameworks usually have a built-in routing system that matches URLs with pre-defined routes, and then dispatches Controller Actions, parsing parameters, doing validation, and etc. This makes very easy to architect your app defining controllers and actions and having the routing engine solving the communication between parts.

Ext JS brings MVC to the client-side, providing a solid architecture for your application, but the only missing part is the routing system. That’s why Ext.ux.Router was created.

Ext.ux.Router was released a year ago, and today a new version is coming! It has a brand new routing engine that is extremely flexible and also provides route validation. It also ships with improved docs and examples, and test cases to ensure code quality.

Check it out for free at market.sencha.com

Ext.application({
    name: 'App',
    ...
    routes: {
        '/': 'home#index',

        'users'                         : 'users#index',
        'users/:id'                     : 'users#show',
        'users/:id/:login'              : 'users#show',
        'users/*names'                  : 'users#showAll',
        'users/*ids/*names'             : 'users#showAll',
        'users/:id/*roles/:name/*groups': 'users#show',

        'search/:query/p:page'              : 'search#exec',
        '*first/complex-:part/*rest'        : 'home#complex',
        ':entity?*args'                     : 'home#base',


        'invoices/:id': {
            controller: 'invoices',
            action: 'show',
            id: /^\d+$/
        },

        'groups/:id': {
            controller: 'groups',
            action: 'show',
            id: function(value) {
                return value.match(/^\d+$/);
            }
        },

        'clients or client': {
            regex: /^(clients?)(?:\/(\d+)(?:\.\.(\d+))?)?/,
            controller: 'clients',
            action: 'index'
        }
    }
});
LinkedInDeliciousPinterestTumblrEmailShare

Decouple Controller and View in Sencha MVC

Posted on by
16

The MVC Architecture for Ext JS and Touch provides a solid foundation for building large and scalable apps; but if you follow the guides and implement in the way described you’ll notice that controllers and views are highly coupled. Controllers associate listeners to view events using component queries, thus making them aware of how the view is composed. As result we have a MVC architecture where the view is very light and does nothing but define components, and controllers will do all the heavy lifting by responding to user gestures, updating the view, dealing with models, business logic and more.
Continue reading →

LinkedInDeliciousPinterestTumblrEmailShare

Native Mobile to Web #2: Path Menu

Posted on by
2

Original iOS Interface

Here it is, another post where I take some cool native UI and reproduce using only HTML5 technologies. The first one was the Facebook Login page. The result was a pixel perfect UI, just as nice as the native one. Now I’m taking the Path animated menu!

For those who don’t know Path, it’s a social network for connecting with family and close friends, available for iOS and Android. It has very interesting features, but the thing that really caught my attention was their “fan-out animated menu”. When you tap the menu, the options fan out, with a nice circular animation. It’s so cool that I had to take this UI and port it. I translated <divs> to Ext.Buttons, created the CSS3 animation and calculations, so everything works properly with Touch components.
Continue reading →

LinkedInDeliciousPinterestTumblrEmailShare

Advanced CSS3 animations with Sencha Touch

Posted on by
5


Touch has some nice CSS3 animations like slide, flip, fade, pop and cube…but what if you need something different, like a custom slide-fade animation?

I’ve covered how to use animations in Using CSS3 animations on Sencha Touch and Animate components in a view, but I didn’t cover the internals of the framework, nor how can you create a custom animation. So let’s take a look at it, step by step.
Continue reading →

LinkedInDeliciousPinterestTumblrEmailShare

Sencha Performance Tips #1: Avoid Overnesting

Posted on by
5

As a member of the Professional Services Team here at Sencha, we are often asked for fix problems in our client’s apps. And the number one issue we can immediately detect is overnesting. But what’s overnesting, why it’s bad and how can we avoid it? Let’s check it out!

What is overnesting?

I’ve picked some quotes from our Sencha Forum users trying to verbalize what it is:

Overnesting is using an additional container that doesn’t actually do anything besides containing another component.

It adds no extra functionality, it’s a useless container…

Overnesting refers to nesting without reason.

Again, useless container…

Overnesting means have redundant panels in the hierarchy.

Good, has to do with the hierarchy…

Maybe it’s still not very clear…let’s see some code:
Continue reading →

LinkedInDeliciousPinterestTumblrEmailShare

Animate components in a view

Posted on by
3

Since the last post (Using CSS3 animations on Sencha Touch) was about animations, and I stumbled upon this question at Sencha’s forum, I thought I would develop a simple demo showing how to take a view, and animate random components inside it.

Obviously there are simple page animations, such as with a card layout, but I’m looking for the right approach to animate an object like a button – for example to get it to fly in from the side after a delay, after the view is loaded.

Here’s hoping someone will take pity on me, and spell it out!

Allister

Continue reading →

LinkedInDeliciousPinterestTumblrEmailShare

Using CSS3 animations on Sencha Touch

Posted on by
2

So you’ve seen all those cool animations on Touch demos right? Cards with slide effect, Message boxes that pop or fade out, etc… Here are some quick examples and tips on how you can change default animations and add more style to your app.

There’s basically 3 ways you can embed animations in your views:

  1. show(animationCfg) method: pass an individual config with show/hide methods
  2. showAnimation & hideAnimation configs
  3. animations with card layout

Continue reading →

LinkedInDeliciousPinterestTumblrEmailShare

How to create a mobile Flickr app with Sencha Touch 2

Posted on by
5

Touchr App

The best way for developers to learn new technology is definitely coding. For learning the new changes introduced with Touch 2, I created this little app that I called Touchr. It features some common components and basic filtering interaction, but also a customized proxy with YQL integration to consume Flickr. Check the list:

  • MVC architecture
  • Customized JSONP proxy that consumes YQL queries
  • Use of sencha.io service to resize images, optimizing for mobile screens.
  • Use of controller listeners to filter data stores
  • Use of TabPanel, DataView, Buttons, Toolbar, TextField
  • Use of custom theme to define new color, new icons and css optimizations

In this post I’ll share some details so you can also exercise some Touch skills as well!
Continue reading →

LinkedInDeliciousPinterestTumblrEmailShare