Google analytics code

Wednesday, September 17, 2014

Sencha Touch: Android Halo Light Theme

One of the things I love about Sencha Touch is the built in themes. Android has 4.x has two themes: Halo Dark, Halo Light.  There is only one Android theme for Sencha Touch and it's dark. I've been bugging them for awhile to include a light theme and their response was "You do it".

I googled for a long time and couldn't find a theme someone else did. I gave in and decided to make my own theme after finding this one. It's beautiful. I read his breakdown and he created a theme by copying the winPho theme and made changes until he was happy. I did something similar. I copied the Android theme and started digging in.

That's when I found it. There is a Sass variable in /[Sencha SDK folder]/resources/themes/stylesheets/sencha-touch/mountainview/var/_Class.scss called $dark-theme. If you set this variable to false in your local sass file for android it becomes a light theme.

I wish this was explained better. It's only through source code diving can we find the true answers.

Zend Framework 2: Using mysql functions in SQL classes

The built in ZF2 classes for sql queries have been wonderful to use. I like that it takes care of escaping data and saves you from messy string all over your codebase. I ran into a problem when trying to do something "complex".

Here is an example of the SQL I was trying to write.
INSERT into `table` SET `col1` = FROM_UNIXTIME(?)

When I tried running this the mysql method was quoted
I started digging around and found an extra class required if you want to use functions in the escaped data spot. It's called an expression. Here is how they're used in the insert class.

       ->values([`col` => new \Zend\Db\Sql\Expression("FROM_UNIXTIME(?)","?", [\Zend\Db\Sql\Expression::TYPE_VALUE])]);

Now the function won't be quoted and the value can be safely escaped when execute is run.

Here's some documentation on how expressions are used in a where clause.

Monday, July 28, 2014

Angular: Form element not attaching to $scope

I'm well into a redesign using AngularJS as my front-end framework. After a small learning period I'm in love. It's a fantastic way to tie your UI to your backend. That said there is still some work to be done.

I'm breaking my project into modules that are included with the ng-include tag. This helps shrink the code on the page into manageable chunks. It nice when you're using a very verbose framework like Bootstrap.

All of my forms are wired up using Angular's form validation. Once again this is fantastic. Being able to watch the inputs in real time and display helpful errors is great. I ran into an issue trying to reuse a form after I've removed it from the users view.

<form name="createUser">
    <input name="name" ng-model="" />
    <input name="email" ng-model="" />

I should be able to access the form in my angular in this fashion.

// This will reset any validation errors on the form

This wasn't working for me and I spent a lot of time trying to figure out why. Here is how my code looked.

<div ng-controller=“controllerName”>
    <div ng-include=“ ‘path-to-the-template’ ”></div>

<!—- Inside path-to-the-template -—>
<form name="createUser">
    <input name="name" ng-model="" />
    <input name="email" ng-model="" />

One thing to consider is when Angular is starting up the controller code the form isn't attached yet. When you click the button that submits the form it will be attached by that time. I was still unable to access the form element.


I submitted this as a bug to the git repo and got a response very quickly. That team is really on top of things. Turns out when you use ng-include it creates a new scope var. This is how the setup should look.

<!—- The vars should live in the controller. I placed them here for the example. -—>
<div ng-controller=“controllerName” ng-init="form={}; model={}" >
    <div ng-include=“ ‘path-to-the-template’ ”></div>

<!—- Inside path-to-the-template -—>
<form name="form.createUser">
    <input name="name" ng-model="" />
    <input name="email" ng-model="" />

Now the include can reference the variables from the parent scope. The form and it's input should now be accessible.

Friday, June 27, 2014

Zend Framework 2.x Learn ZF2 by Example: Protecting our Pages - Authentication type

I'm starting to implement authentication on my web app and I ran into a problem with the example in the book.

The example on page 146 uses MD5 as a encryption scheme.

$adapter = new DbAdapter($db,

The adapter builds a simple SQL query that will check the table, match the user name and password then let you know if it's valid. The problem lies in the 5th parameter. When I tried to match an account I know works it kept saying the account wasn't valid. After digging into the documentation I found the 5th parameter wasn't configured right. It should be 'MD5(?)'.

$adapter = new DbAdapter($db,

After the change the auth adapter works perfectly. Hope this helps save you some time.

Thursday, June 5, 2014

Sencha Touch Themes: Using built-in themes for iOS and Android

One of the things I like about Sencha Touch is the built in device themes. I like being able to make a web app look native.

I found many resources that talked about the themes but none gave very good instructions on how to make them work. I finally found a video that walked you through some of the process involved in making themes work. It left out some important stuff that I found through lots of trial and even more error.

I'll show you how to apply a theme to the default sencha project. You can apply these steps to your own project.

  1. Create an example app.
    • sencha -sdk [path to sdk] generate app [AppName] [path]
  2. You'll need to create scss files for the different platforms you want to support.
    • cupertino.scss (iOS 7 styling)
    • cupertino-classic.scss (iOS 6 styling) 
    • mountainview.scss (Android)
  3. Each of these files will include two imports lines that define our theme styles.

    @import 'sencha-touch/[platform name]';
    @import 'sencha-touch/[platform name]/all';

    [platform name] is the name of the style you're including. cupertino.scss will use "cupertino" and mountainview.scss will use "mountainview". All the platform names are available here under tip 2.
  4. Next you'll need to run "compass compile" or "compass watch" in the resources/sass folder. 
  5. Now we have to update app.json to include the new css files that were generated by compass. Look for the css option and add each platform as an object to the css array.
        "path": "resources/css/cupertino.css",
        "platform": ["ios"],
        "update": "delta"

    Make sure to update the platform value with the appropriate value. The options are available here under available platforms.

    IMPORTANT NOTE: Make sure to add the "platform": ['desktop'] to the app.css entry. If you don't app.css will be included in every theme and it will break the display. 

  6. Lastly you'll need to run sencha app build to bring everything together. You can test the different templates by appending ?platform=[platform name] to your uri.
I've added the example project to github so you can pull that down as an example.

Tuesday, April 22, 2014

Zend Framework 2 & MAMP : Memory Issues

I ran into a problem working through the tutorial for Learn ZF2 for form validation. I reached the section where the form data would be inserted into a database and that wasn't possible using the command line PHP server. I decided to switch to MAMP because it has more stuff baked in.

I quickly ran into an issue that was tough to track down. After added the database code the form no longer submitted. After ripping out lots of code and not finding an answer I called it a night. The next day I figured out the problem was with MAMP not my code. If I disabled the file validation on the form everything worked fine.

This was the error I ran into
Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 32 bytes) in /Volumes/zend_framework/learnzf2/vendor/zendframework/zendframework/library/Zend/Stdlib/ErrorHandler.php on line 113

Not the most straight forward bug. Turns out the issue is the command line PHP server has a larger memory_limit size. It's 128M while MAMP is set to 32M. It overflowed after processing the file. After upping memory_limit to 128M and restarting the server everything worked fine.

The memory_limit var is stored in php.ini. It can be reached by using
File => Edit template => php => php 5.4
Find memory_limit and change it to 128M.

Wednesday, April 9, 2014

Zend Framework 2.x Learn ZF2 by Example : Unable to render template

Getting to the MVC portion of the book and ran into an error. On page 59 it shows you how to manually include a template to aid debugging. I ran into this error when trying to see my changes.

Fatal error: Uncaught exception 'Zend\View\Exception\RuntimeException' with message 'Zend\View\Renderer\PhpRenderer::render: Unable to render template "debug/layout/sidebar"; resolver could not resolve to a file' in /Volumes/zend_framework/learnzf2/vendor/zendframework/zendframework/library/Zend/View/Renderer/PhpRenderer.php:498 Stack trace: #0 /Volumes/zend_framework/learnzf2/vendor/zendframework/zendframework/library/Zend/View/View.php(205): Zend\View\Renderer\PhpRenderer->render(Object(Zend\View\Model\ViewModel)) #1 /Volumes/zend_framework/learnzf2/vendor/zendframework/zendframework/library/Zend/Mvc/View/Http/DefaultRenderingStrategy.php(102): Zend\View\View->render(Object(Zend\View\Model\ViewModel)) #2 [internal function]: Zend\Mvc\View\Http\DefaultRenderingStrategy->render(Object(Zend\Mvc\MvcEvent)) #3 /Volumes/zend_framework/learnzf2/vendor/zendframework/zendframework/library/Zend/EventManager/EventManager.php(468): call_user_func(Array, Object(Zend\Mvc\MvcEvent)) #4 /Volumes/zend_framework/learnzf2/vendor/zendframe in /Volumes/zend_framework/learnzf2/vendor/zendframework/zendframework/library/Zend/View/Renderer/PhpRenderer.php on line 498

Page 58 talks about the way templates are included. The middle of the page shows a config option called 'template_path_stack'. This is the path the PhpRender uses to find manually included templates. There is a similar line in the Application module.config.php. I thought this would be imported into the master config but that didn't happen. You have to add this.