Aztec Online

Web Design, Development and SEO

Archive for the ‘Web Development’ Category

May 1,2012

A problem I have come across before is when I want to include an image within a transactional email, using:

{{skin url="path/here/"}}

The problem being that by default, the transactional emails will look in the skin folder for the admin area in the base package. However if your storing images in the frontend skin folder for your package/theme, you need to be able to provide this CMS syntax additional information. You can specify the area, package and theme you wish to refer to. See the code snippet below:

{{skin url="path/here" _area="[frontend | adminhtml]" _package="[package name]" _theme="[theme name]"}}
  • Comments Off
  • Thursday
    Apr 26,2012

    I have often found the need to be able to display the name or other details about the category I am currently in. A product can obviously be included in more than one category, so figuring out which category you are currently inside would be useful. In the core catalog code in Magento, everytime you visit a category page a method is fired, setCurrentCategory(). This sets an entry in the magento registry with the current category object attached.

    Here is the code snippet to get the current category in magento

    <?php $currentCategory = Mage::registry('current_category'); ?>
  • Comments Off
  • Tuesday
    Jul 12,2011

    The all new Ext JS charting engine was completely rewritten for its latest version, Ext JS 4. The new charting system was developed by Sencha, in cooperation with the founder of Raphael JS.

    What makes this system so great is that it is able to calculate, render and animate a large array of amazing charts using JavaScript. As all modern browsers possess a build in JavaScript engine, Ext JS 4 no longer needs to rely on flash to create its charts, as it did with previous versions. Not only does this allow charts to lose any dependency with flash or external plugins, it also means that all components of the chart are rendered directly into the browsers DOM. This allows the charts with their data, fully accessible by JavaScript, making them extremely flexible and customisable.

    Creating A Simple Chart

    Creating a chart in Ext JS 4 follows the same process as creating nearly any component, using the new class system.

    <span style="color: #808080;"><em>Ext.create('Ext.chart.Chart', {</em></span>
    <span style="color: #808080;"><em>       //CHART CONFIG</em><em>

    When you first create your chart component, it has no knowledge of which type of chart it shall become. This is defined within the charts configuration using series, axes and a store. This is the same more the majority of cases in a real world scenario. When you draw your axes for a chart, that chart could potential be many different types (Line, Column, Area, Scatter etc.).

    <span style="color: #808080;"><em>Ext.create('Ext.chart.Chart', {</em></span>
    <span style="color: #808080;"><em>    animate: true,
        store: Ext.create('',{
            fields: ['category', 'data1', 'data2'],
            data: [
                {category: 'User 1', 25, 33},
                {category: 'User 2', 11, 54},
                {category: 'User 3', 46, 98}
    </em><em>    }),
        axes: [{
            type: 'Numeric',
    	position: 'left',
    	fields: ['data1','data2'],
            title: 'User Values',
            minimum: 0,
           	maximum: 100,
            grid: true
            type: 'Category',
    	position: 'bottom',
    	fields: 'category',
            title: 'User Categories'
        series: [{
            type: 'column',
            axis: 'left',
    </em><em>        xField: 'category',
            yField: ['data1', 'data2']
    }); </em></span>

    As shown in the code sample above, I have added 2 axes and a column series using the data from my store, thereby creating a Column Chart. This is a chart in its simplest form with the absolute minimum of required configuration to produce a chart.

    The data for a chart comes from a store, specifying which fields represent categories, series, axis values etc. The hardest part of creating charts for a web app that work, is getting your data right. As you can see from the previous code sample, the chart uses the fields defined within the store to specify how the chart is rendered.

    What Else Can You Do With Ext JS 4 Charts?

    Since the charts are rendered using JavaScript, manipulating the data is really easy, therefore has allowed Sencha to provide a huge amount of customisable options.

    • Legend with specified Position
    • Specify minimum/maximum axis values or leave for Ext JS to calculate for you
    • Create linear gradients to be used with chart components
    • Chart animation
    • Chart Shadowing
    • Series Highlighting, callouts and tooltips
    • Chart themes to customise the look and feel of a chart
    • Specify the size, style and rotation/direction of chart labels
    • And many more…

    What makes these additional configuration options so great, is that they all work and flow completely flawlessly, solely using JavaScript.

    In my personal opinion the Ext JS 4 Charts are one seriously amazing part of the framework, great job Sencha.

    Follow me on Twitter for more, @webdevluke


  • Comments Off
  • Ext JS 4: A Complete Review

    Jul 11,2011

    Ext JS 4 is the latest version of the popular JavaScript framework developed by Sencha, Ext JS.  Since the last version, Sencha has been boasting that Ext JS 4 will be the best, most comprehensive version of the framework to date, including many new features and performance improvements. Here is my review of their latest version.

    New Features – 4/5

    They have really gone to town, introducing new features in this latest version of Ext JS. The main features that were introduced were the following: -

    • JavaScript Charting Engine
    • MVC Application Architecture
    • Drawing Vector Graphics
    • New Class System
    • New Data Package
    • Dynamic Theming using SASS

    Sencha have made a real effort to provide a framework that has crossed all the T’s and dotted all the I’s, and I believe that it has done that. The new Charting engine works well and very fast, relieving many of us to know that we don’t need to rely on flash anymore within Ext JS to render charts.

    However, on a negative point, it seems that in order to implement so many new features, a sacrifice in attention to details was made. Although all these features work most of the time, it seems that they were rushed into the framework and not fully integrated within all other related components within the framework. This was annoying to begin with, but forgivable due to the sheer amount of changes that the development team has made in this update.

    Overall I feel that the new features really add value to Ext JS 4 and are a definite improvement upon the previous version.

    Ease of Use – 3/5

    Ext JS has never been popular for how easy it is to use. There is a steep learning curve in order to master its full potential. However, this latest release of Ext JS has made great steps into opening up the framework to a larger audience that previously were unable to pick up the complexity of the framework.

    Ext JS 4 now has more complete documentation, better guides and simpler syntax which makes the framework more attractive to new users. However, the documentation has a fair amount of mistakes and incomplete entries within the documentation which is disappointing.

    Upgrade Transition (3 to 4) – 3/5

    Due to the large amount of changes and additions to the framework in version 4, upgrading your version within existing Ext JS apps was never going to be a simple task. With syntax changing, the class system revamped and some classes condensed or removed, there was always going to be a difficult migration. The Ext JS development team did make an effort to ease the migration process by providing a compatibility layer for this transition. However, this was more of an after thought and did not work nearly as well as first hoped. The migration documentation and compatibility layer were also delayed repeatedly at the first releases of Ext JS 4 which left some of the community unhappy.

    Overall I felt that migrating a larger Ext JS 3 app over to 4 is a mammoth task, one which takes a lot of patience. I feel that Sencha should have given this a lot more thought right from the off, rather than leaving until late to consider it as an after thought.

    Performance – 2/5

    The performance is one of the biggest let downs for me. The hype leading up to the release of Ext JS 4 was promising a huge performance increase, greater than any version before. Although, after it was released, people were realising that the performance for many components and rendering had actually decreased.

    After running tests on the rendering and loading time of several components, we realised that Ext JS 4 was running at about 1/3 of the speed of version 3, which was particularly irritating because we were promised faster performance.

    Documentation – 3/5

    Another one of Sencha’s supposed improvements was that the documentation was to be more complete, easier to follow and easier to use. They did manage to achieve some of their goals, however the documentation that was released had several poor aspects.

    • Functionality was faulty
    • Missing methods and classes
    • Incorrect information and typos
    • Slow load time

    There seems to be a lot of strife within the Ext community in regards to the vital need for complete documentation. This is something that at least Sencha have admitted and are working on currently, and to give credit, when credit is due, they have made some good improvements already.

    Support – 3/5

    Obviously if you want the best support, you need to pay for it, and the paid support for Ext JS isn’t bad. However it does seem clear that the support for normal users is very limited. The community help each other overcome problems they find, but the Sencha support from these forums isn’t that great. Help being given to maybe one in ten people, and if a problem arises that is more complex than the average problem, it is discarded without response.

    Overall I think that the support is so-so. Sencha have a lot on their plate fixing and improving the framework, but the support is nowhere near what it could be.

    Updates & Patches – 2/5

    Sencha does provide relatively frequent updates to its users, providing beta and developer previews prior to the official launch of Ext JS 4. However, often the releases promising fixes and additions fail to live up to expectations, sometimes not achieving what was promised at all.

    Another issue I have personally found with updates & patches is the priority in which they are dispatched. I understand that paying premium customers are going to be given priority, but what eludes me is that when a bug is reported and solution provided to Sencha by the general population, they are not always allowed access to the fixes they have provided. Personally this seems like Sencha are happy to receive but less inclined to give back.

    Browser Compatibility – 4/5

    I know from experience of web development, how difficult it is to cater for all browsers, new and old. However I feel Sencha really do deserve credit in this department as 95% of browsers work as intended, unless users have made custom modifications. Catering for browsers back to IE 6 is a nightmare and am perfectly satisfied with the effort made here.

    Overall – 3/5

    However fond I am of the Ext JS framework which I would rate very highly compared with other JavaScript frameworks, this release has left me disappointed. Developing JavaScript frameworks is not an easy task and I feel that Sencha made a mistake by promising us a release date as soon as they did, which in turn, pressured them into making a release. I feel that the framework wasn’t ready to go and the testing run had failed to reproduce the flaws that the framework had. Given an additional couple of months development time, while taking compatibility into consideration from the beginning and giving the framework that extra polish, we would be looking at a 5/5, but instead I feel I can only give it a 3. I hope that Sencha learn from their mistake on Ext JS 4 and the next version will be an out and out success.



    Recent Comments