芳草苑

Author: 芳草苑主

  • Feed ThemeRoller with current theme parameters

    If you are working on jQuery UI site to roll your own theme, you can always load your theme parameters by copying and pasting a long string into address bar, such as:

    ThemeRoller

    But, when you are working on your own site, using ThemeRoller Dev Tool for FireFox, you can not load the current page’s theme parameters into ThemeRoller easily. I find two workarounds. I must admit the workarounds are not easy either. There must be some easy “click-to-load” method, but I did not figure it out.

    My solutions require FireBug.

    Solution One.
    1. Copy your theme parameters string to clipboard. The string is as you see before:

    ffDefault=Lucida+Grande,+Lucida+Sans,+Arial,+sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=5px&bgColorHeader=5c9ccc&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=55&borderColorHeader=4297d7&fcHeader=ffffff&iconColorHeader=d8e7f3&bgColorContent=fcfdfd&bgTextureContent=06_inset_hard.png&bgImgOpacityContent=100&borderColorContent=a6c9e2&fcContent=222222&iconColorContent=469bdd&bgColorDefault=dfeffc&bgTextureDefault=02_glass.png&bgImgOpacityDefault=85&borderColorDefault=c5dbec&fcDefault=2e6e9e&iconColorDefault=6da8d5&bgColorHover=d0e5f5&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=79b7e7&fcHover=1d5987&iconColorHover=217bc0&bgColorActive=f5f8f9&bgTextureActive=06_inset_hard.png&bgImgOpacityActive=100&borderColorActive=79b7e7&fcActive=e17009&iconColorActive=f9bd01&bgColorHighlight=fbec88&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=55&borderColorHighlight=fad42e&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px

    Please do not include “#” or “?” at the beginning, because when you paste, sometimes it requires a hash separator, sometimes a question mark separator. You’d better enter the separator separately at the time it requires.

    2. Launch FireFox, Go to the web page to custom a theme for, Launch ThemeRoller, Launch FireBug

    3. Find ThemeRoller <iframe> element, which is inside <div id=”inline_themeroller”> element, change <iframe> src by appending a hash and pasting theme parameters string. In another words, change src from

    http://jqueryui.com/themeroller/developertool/appinterface.php

    to

    http://jqueryui.com/themeroller/developertool/appinterface.php#ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=6px&bgColorHeader=138b14&bgTextureHeader=01_flat.png&bgImgOpacityHeader=75&borderColorHeader=138b14&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=138b14&fcContent=138b14&iconColorContent=222222&bgColorDefault=138b14&bgTextureDefault=03_highlight_soft.png&bgImgOpacityDefault=7…=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=ffffff&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=05_inset_soft.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px

    4. By now, you will see ThemeRoller “Roll your own” tab has loaded your custom values. However, the page appearance does not change until you enter any value box and hit Enter out.

    Solution Two. It enables you to add your customised theme to ThemeRoller Gallery (temporarily), so you can switch and compare.

    1. Same as Solution One

    2. Same as Solution One

    3. Find an <a> element of a Gallery theme and change its href. For example, the first theme in Gallery, its href is

    http://jqueryui.com/themeroller/css/parseTheme.css.php?ffDefault=Trebuchet+MS,+Tahoma,+Verdana,+Arial,+sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=02_glass.png&bgI…gOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=08_diagonals_thick.png&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=08_diagonals_thick.png&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=01_flat.png&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px

    Change to

    http://jqueryui.com/themeroller/css/parseTheme.css.php?ffDefault=Lucida+Grande,+Lucida+Sans,+Arial,+sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=5px&bgColorHeader=5c9ccc&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=55&borderColorHeader=4297d7&fcHeader=ffffff&iconColorHeader=d8e7f3&bgColorContent=fcfdfd&bgTextureContent=06_inset_hard.png&bgImgOpacityContent=100&borderColorContent=a6c9e2&fcContent=222222&iconColorContent=469bdd&bgColorDefault=dfeffc&bgTextureDefault=02_glass.png&bgImgOpacityDefault=85&borderColorDefault=c5dbec&fcDefault=2e6e9e&iconColorDefault=6da8d5&bgColorHover=d0e5f5&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=79b7e7&fcHover=1d5987&iconColorHover=217bc0&bgColorActive=f5f8f9&bgTextureActive=06_inset_hard.png&bgImgOpacityActive=100&borderColorActive=79b7e7&fcActive=e17009&iconColorActive=f9bd01&bgColorHighlight=fbec88&bgTextureHighlight=01_flat.png&bgImgOpacityHighlight=55&borderColorHighlight=fad42e&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px

    The thumbnail of the theme won’t change unless you change the src of <img> inside <a>. I assume you won’t bother about changing the thumbnail as long as you know which thumbnail represents your theme.

    You can change more than one theme in Gallery to various versions of your theme, so you can click and switch between them quickly.

  • YouTube full screen mode bug with dual displays

    When I use dual displays watching YouTube video, it can not switch to full screen mode correctly. I assume it is because YouTube flash client calculate width and height based on the total of dual displays, and render the video into one display. So it is only displayed in 1/4 size of one display (my two displays are of same resolution).

    I have tested how videos from 163.com and sina.com are rendered in full screen mode with dual displays. I find both of them are fine. So it eliminates the possibility that bug is in Flash Player.

    BTW, I did not find a way to stretch the video into two displays.

  • Lack of jQuery menu UI

    I started coding for jqol – thoughts from last week. But I ran into some dilemma.

    A very important UI of an eshop is the menu. However, I do not have a mature jQuery UI menu (jQuery menu) widget to use. jQuery menu widget is only available from jQuery UI 1.9, which is still in a stage of milestone 3. The most recent jQuery menu can only theme a flat menu. It can not theme nested (or so called hierarchy) menu. In short, it is useless.

    Luckily, Filament Group contributed a very sophisticated jQuery menu UI plugin (fg menu). It can theme flat or hierarchy menu into different styles – flat, flyout, ipod. However, when I try to use it, I find fg menu is based on a different concept to jQuery menu. Fg menu is simulating an OS start menu, and the object being menued is the start button, i.e. use the following code to initialise a menu.

    jQuery("button").menu({options}); //menu content inside options

    While jQuery menu is exactly a Magento menu, i.e. use the following code to initialise a menu.

    jQuery("#nav").menu({options}); //jQuery("#nav").html() itself is the menu content

    I am more comfortable taking jQuery core team’s logic, specially in the case of converting Magento menu to jQuery menu widget. Someone from jQuery team has clarified they are of different structures. The status quo is Magento core team’s menu is not completed, but fg menu is something I can use now. So my decision is –

    Stay with fg menu for now, and change my code when jQuery menu is mature with all the options I want.

  • White Rabbit Creamy Candy is available from Tesco

    好久不逛 Tesco 了，昨天发现 Tesco 开卖大白兔奶糖。

    White Rabbit Creamy Candy
    White Rabbit Creamy Candy

    不光有大白兔奶糖，还多了一些以前只有在中国店才能买到的食品。我有种莫名的兴奋，虽然大白兔奶糖本身不代表什么，而且自从冠生园月饼事件以后我很少吃大白兔奶糖，但它口味还是我喜欢的，我也希望老外喜欢。我的兴奋，深究一下，大概是因为这些货品的包装跟在中国的销售包装基本保持一致，预示着中国货从 OEM 里走出来了？

    Tesco 一向对市场的反应很灵敏。这次 Tesco 又做了一件了不起的事情，在四大超市中首先销售这些货品。我的购物多了一个选择，但中国店主们听了可能会不高兴。

  • Go to messages inbox back to work

    Magento 1.5.0.0 各测试版的发布很紧密，我有些应接不暇。新功能来不及去试，倒发现一个老功能不灵光了，就是 Magento admin panel 里显示来自官方的 notifications 的 “Go to messages index” 的链接地址不正确，点了仍是当前页面。

    因为我有个 fpcp 模块改动了一些 global messages 和 messages 的显示逻辑，是基于 Magento 1.4.2.0 开发的，一开始我还以为是我的改动与 1.5.0.0 不兼容。但我把 fpcp 整个 disable，”Go to messages index” 也同样不工作，这下我才想到是 Magento 1.5.0.0 bug。

    还没来得及 report bug to Magento，我又发现 Magento 1.5.0.0 rc1 版已经修正了这个 bug。去看了 release notes，果然提到 Fixed “Go to notifications” link works improperly。

    Go to messages inbox Latest Message: Magento Preview Version CE 1.5.0.0-rc1 is now available Read details
    Go to messages inbox Latest Message: Magento Preview Version CE 1.5.0.0-rc1 is now available Read details

  • What does backend type static mean in Magento?

    About a year ago, I noticed some category or product attributes, for example, sku, path, etc., were given backend type “static” in class Mage_Catalog_Model_Resource_Eav_Mysql4_Setup. But I failed to find out what static meant here, or I did not know what the difference was between static and datetime/decimal/int/text/varchar. All I knew at that time was if I gave my user defined attribute a “static” type, the attribute values were stored in _varchar table.

    Recently, I dived deeper into Magento EAV module. Now I can answer my question.

    An entity can have some “static” attributes, whose values are stored in entity main table. Take sku for example, sku values are stored in catalog_product_entity table. Although sku is varchar type, its values are not stored in catalog_product_entity_varchar. Magento does not lookup catalog_product_entity_varchar for sku values because in eav_attribute table, sku backend type is defined as “static”.

    It also explains why I can get sku values without add it to select, but I can not do the same with non static attributes.

    $collection = Mage::getModel('catalog/product')->getCollection();
echo $collection->getFirstItem()->getSku();

    It will output the sku.

    $collection = Mage::getModel('catalog/product')->getCollection();
echo $collection->getFirstItem()->getName();

    It will not output the name. 

    $collection = Mage::getModel('catalog/product')->getCollection()->addAttributeToSelect('name');
echo $collection->getFirstItem()->getName();

    Calling addAttributeToSelect is a must to retrieve non static attribute values.

    For user defined attributes of existing entity, if I do not change the structure of main entity table, even I specify backend as “static” in entity setup class, Magento has nowhere to store their values to but fallback to _varchar table.

  • Establish a protocol of post tags

    尽管在 WordPress 里新增一个 post tag 是件很容易的事情，但我不想每次想到一个 tag 就增一个，上千个 posts 就有几千个 tag，搞得 posts 之间的 tag 联系很松散。所以，我很久不新增 tag 了，写完 post 就在已有的 tags 里挑一个或几个 tags 出来。

    时代在发展，新生事物不断出现，如果我老用几年前敲定的 tags 而不与时俱进，blog 就显得 out 了，也不利于芳草苑在新新名词方面的排名。比如，刚才一篇，想用 chrome，结果发现有 firefox 而没有 chrome，只好暂时 tag 一个 firefox，等我整理好一份 tag waiting list 再更新 post tags。

    初步想删 office, outlook 等，因为 windows 已经 out 了，我也没在 office, outlook 主题上浸淫许久，这类 posts 干脆合并一个 microsoft 或 windows software 得了。

    初步想增加 android, html5, css3, jquery, 因为它们或是日渐热门，或是已经热门，我三天两头都会讲到这类主题。现在统称为 google, html, css, javascript 似乎对它们不公平。

  • Dolphin does not work with HTML5 drag and drop

    I use Dolphin in the office, and Nautilus at home. I feel managing files in Dolphin is a little more efficient than in Nautilus, but only a marginal better.

    Today I find Dolphin does not support files drag and drop into browser for browser to upload. Drag and drop is an exciting feature of HTML5 and Google has implemented it to Chrome. I quite enjoy using it uploading files to Google Documents.

    I would like to use this feature as much as possible but at moment I have to use Nautilus to drag and drop to Chrome. I believe soon I can also use Dolphin to drag and drop to Firefox.

  • Update layout in Magento against a specific route

    I got some complaints to my bxgy module about reminder message is not showing in shopping cart as it supposed to be. But I checked over and over on my machine and did not find anything preventing reminder message being shown.

    By a chance I realise maybe those people changed Magento interface and theme in a not nice way. What is a nice way? By my definition, any extension or change to Magento original code should make sure

    • do as few changes as possible
    • Magento default theme can always be fallen back to

    I take it as a basic requirement of customisation, but I can not guarantee everyone else see it through. If I rely on a module layout xml file to trigger an action against a specific route, I get a higher chance of my layout xml file being bypassed by some incompatible theme.

    In bxgy module version 0.1.0 to 0.1.1, I wrote a layout handle checkout_cart_index in bxgy.xml, which is expected to add a message to the message block against route checkout/cart/index. If bxgy.xml is bypassed (when the theme settings do not take default theme fallback into consideration), nothing will happen. Do I have to use layout xml file to trigger an action against a specific route? Absolutely not. There are many ways around.

    In a newer version of bxgy module, I use an event observer to trigger “controller_action_postdispatch_checkout_cart_index” event, and add message to the message block in this observer. Because adding reminder message is something more relevant to functionality than presentation, the code’s logic is better if it is moved from design folder to app folder. And event observer is independent of theme settings.

    BTW, I finished coding this new version of bxgy, but I want to put together some other modules before release it.

  • My new thoughts about jQuery in Magento

    Today, I have two new thoughts about jQuery in Magento.

    Firstly, I will stop using a jQuery plugin called jQuery corner. It is a great plugin though. The reason of withdraw is jQuery corner plugin rounds elements with any radius I can specify on the fly. Once upon a time I thought dynamic cornering a great feature. However, jQuery UI comes with ui-corner classes. It has fixed value of radius for all round corners. It does not let me round different elements to different radius, but guarantees the consistency. In this case, consistency is much more important than flexibility. When I do want make exceptional larger or smaller radius for some kinds of elements (one or two kinds at most), I can code css just for that class.

    Secondly, I will start a new Magento module project called Jqol. It reads “JQuery themerOLler”, or “JQuery OnLine” (whatever you feel easier to remember). I am inspired by how easy it is to use jQuery Themeroller to build and change the look and feel of a website. It is a pity Magento does not come with jQuery. I keep mention it because I can not live without jQuery (for now). I implemented jQuery the very first thing when I started diving into Magento. While jQuery is getting stronger and more popular, I would like it play more important role in Magento. Therefore, I will let jQuery Themeroller control the look and feel for the top menu, buttons, accordion, tabs, etc. I can imagine a lot of benefits from this module: cleaner code, more semantic, and I (or even visitors to my sites) can switch the jQuery themes easily.