Ext JS - Grid - Fetch Website Information into Tabs - Task Reload

To reload a task periodically is pretty easy. Add the following in the js\grid.js.

Ext.TaskMgr.start({
        run: storeprice.reload,
        scope: storeprice,
        interval: 120000 // 1000 = 1 second
    });

    Ext.TaskMgr.start({
        run: storeah.reload,
        scope: storeah,
        interval: 120000 // 1000 = 1 second
    });

Ext JS - Grid - Fetch Website Information into Tabs - Information Grouping

json\stockprice.php
Create another Json file to fetch stock price from hk.finance.yahoo.com.

<?php
require('../phplib/simple_html_dom.php');

// Create a DOM object
$html = new simple_html_dom();

$codearray = array(
   '0005' => 'Banking', '0011' => 'Banking', '0066' => 'Utility',
   '0368' => 'Resources', '0410' => 'Property', '0669' => 'Misc',
   '0826' => 'Misc', '0939' => 'Banking', '0968' => 'Property', '0998' => 'Banking',
   '1398' => 'Banking', '1893' => 'Resources', '2318' => 'Insurance', '2628' => 'Insurance',
   '2778' => 'Property', '2827' => 'Index', '2880' => 'Utility',
   '3328' => 'Banking', '3377' => 'Property', '3938' => 'Resources',
   '3968' => 'Banking', '3988' => 'Banking', '2366' => 'Misc'
);

// Load HTML from a URL
$domain = 'http://hk.finance.yahoo.com/q?s=';

$resultarr = array();
foreach ( $codearray as $code => $industry ) {
   $url = $domain.$code.'.HK';
   $html->load_file($url);
  
   $coretable = $html->find('div[id=quote-bar-latest]',0);
   $name = $coretable->find('h2',0)->plaintext;
   $price = $coretable->find('div.price',0)->plaintext;
   $sign = $coretable->find('div.price-sign-down',0);
   $pricechangearray = explode(' ', $coretable->find('b',0)->plaintext);
   $pricechangearray[1] = substr($pricechangearray[1], 1, strlen($pricechangearray[1])-3);

   if ($sign) {
           $pricechangearray[0] = '-'.$pricechangearray[0];
           $pricechangearray[1] = '-'.$pricechangearray[1];
   }
   array_push($resultarr,
       array (
           'code' => $code,
           'name' => $name,
           'price' => $price,
           'pricechange' => $pricechangearray[0],
           'pricechangepercentage' => $pricechangearray[1],
           'industry' => $industry
           )
       );
};

// Json_encode - PHP 5.2+ built in function to return the Json object
echo json_encode($resultarr);
?>

js\grid.js - Modify the file and add the following

    // create the data store - Stock Price
    var storeprice = new Ext.data.GroupingStore({
        url: 'json/stockprice.php',
        reader: new Ext.data.JsonReader({
        fields: [
           {name: 'code'},
           {name: 'name'},
           {name: 'price'},
           {name: 'pricechange'},
           {name: 'pricechangepercentage'},           
           {name: 'industry'}
        ]
        }),
        sortInfo:{field: 'code', direction: "ASC"},
        groupField:'industry'
    });

    // create the Grid - Stock Price
    var gridprice = new Ext.grid.GridPanel({
        store: storeprice,
        columns: [
            {id:'code', header: "Stock Code", width: 80, sortable: true, dataIndex: 'code'},
            {header: "Company Name", width: 250, sortable: true, dataIndex: 'name'},
            {header: "Price", width: 50, sortable: true, dataIndex: 'price'},
            {header: "Price Change", width: 80, sortable: true, renderer:  change, dataIndex: 'pricechange'},
            {header: "Price Change %", width: 100, sortable: true, renderer:  pctChange, dataIndex: 'pricechangepercentage'},
            {header: "Industry", width: 100, sortable: true, dataIndex: 'industry'}
        ],
        view: new Ext.grid.GroupingView({
            forceFit:true
        }),
        stripeRows: true,
        collapsible: true,
        title:'Stock Price'
    });

    // Load the store
    storeprice.load();

    // Add the grid for the tab
    tabs.add(gridprice);

Ext JS - Grid - Fetch Website Information into Tabs

Prerequisite:

• Apache + PHP
• PHP Simple HTML Dom Parser - Very good library to parse HTML Dom object like JQuery.
  
• Ext JS

Folder Structure (bold files are we are going to construct):

• js\grid.js
• jslib\ext-all.js
• jslib\adapter\ext\ext-base.js
• json\ah.php
• json\stockprice.php - in subsequent post
  
• phplib\simple_html_dom.php
• resources\css\ext-all.css
• grid.php
  

grid.php - The Grid will render to tabs1

<html>
<head>
<meta equiv="content-type" content="text/html; charset=utf-8">
<title>Information</title>

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="jslib/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="jslib/ext-all.js"></script>
<script type="text/javascript" src="js/grid.js"></script>

</head>
<body>
<div id="tabs1"></div>
</body>
</html>

json\ah.php
Json - Javascript Object Notation
Ext JS has JSon data store so Json can be easily included.

<?php
require('../phplib/simple_html_dom.php');

// Create a DOM object
$html = new simple_html_dom();

// Load HTML from a URL - In this case is a page from AAStocks
$html->load_file('http://www.aastocks.com/apps/web/content/ah.aspx?aalanguage=chi');

// Define which stocks you want to get
$arr = array(
'000300.HK', '000317.HK', '000358.HK', '000386.HK', '000390.HK', '000763.HK', '000874.HK', '000914.HK',
'001088.HK', '001186.HK', '001766.HK', '002600.HK', '002727.HK',
'000939.HK', '001398.HK', '003328.HK', '002628.HK', '002318.HK', '003968.HK', '003988.HK', '000998.HK'
);

// Array to store the result
$resultarr = array();

// Loop through all the table rows that you want
foreach ($html->find('tr') as $tr)
{
 $name=$tr->find('a', 0);
 $code=trim($name->innertext);

 if (in_array($code, $arr)){
   array_push($resultarr,
       array(
           'company' => $tr->find('td', 0)->innertext,
           'hkstockcode' => $tr->find('td', 1)->children(0)->innertext,
           'shstockcode' => $tr->find('td', 2)->children(0)->innertext,
           'hkprice' => $tr->find('td', 3)->children(0)->innertext,
           'shprice' => $tr->find('td', 6)->children(0)->innertext,
           'diff' => $tr->find('td', 9)->children(0)->innertext)
   );
 }
};

// Json_encode - PHP 5.2+ built in function to return the Json object
echo json_encode($resultarr);
?>

js\grid.js

Ext.onReady(function(){

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

// example of custom renderer function
function change(val){
   if(val > 0){
       return '<span >' + val + '</span>';
   }else if(val < 0){
       return '<span >' + val + '</span>';
   }
   return val;
}

// example of custom renderer function
function pctChange(val){
   if(val > 0){
       return '<span >' + val + '%</span>';
   }else if(val < 0){
       return '<span >' + val + '%</span>';
   }
   return val;
}

// create the data store - AH Stock
var storeah = new Ext.data.JsonStore({
   url: 'json/ah.php',
   fields: [
      {name: 'company'},
      {name: 'hkstockcode'},
      {name: 'shstockcode'},
      {name: 'hkprice', type: 'float'},
      {name: 'shprice', type: 'float'},                
      {name: 'diff', type: 'float'}
   ],
});

// create the Grid - AH Stock
var gridah = new Ext.grid.GridPanel({
   store: storeah,
   columns: [
       {id:'company',header: "Company Name", width: 160, sortable: true, dataIndex: 'company'},
       {header: "Stock Code (HK)", width: 100, sortable: true, dataIndex: 'hkstockcode'},
       {header: "Stock Code (SH)", width: 100, sortable: true, dataIndex: 'shstockcode'},
       {header: "HK Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'hkprice'},
       {header: "SH Price",width: 85, sortable: true, renderer: 'usMoney',    dataIndex: 'shprice'},
       {header: "Difference", width: 85, sortable: true, renderer:  pctChange, dataIndex: 'diff'}
   ],
   stripeRows: true,
   autoExpandColumn: 'company',
   height:350,
   width:600,
   title:'AH Stock'
});

// Load the store
storeah.load();

// Define the tab
var tabs = new Ext.TabPanel({
   renderTo: 'tabs1',
   height:600,
   width:800,
   activeTab: 0,
   frame:true,
   autoScroll: true
});

// Add the grid in the tab
tabs.add(gridah);
// Set which tab as the active tab
tabs.setActiveTab(gridah);
});

Ext JS - Introduction

Ext JS is a cross-browser JavaScript library for building rich internet applications. It includes:

• High performance, customizable UI widgets
• Well designed and extensible Component model
• An intuitive, easy to use API
• Commercial and Open Source licenses available

Ext JS supports all major web browsers including:

• Internet Explorer 6+
• FireFox 1.5+ (PC, Mac)
• Safari 3+
• Opera 9+ (PC, Mac)

Rank #3 with 8% market share according to the Javascript Framwork Survey.

Easy to use, comprehensive examples, impressive layout, easy to extend, ...

Download

Memcached - Distributed Memory Object Cache System

Memcached is a high performance, distributed memory object caching system. This caching system running primarily in Linux/Unix and there are various port in Windows, Mac OS X and Solaris.

Setting up the memcached in windows is easy, download the Win32 binary and put it somewhere. Fire the following commands:

memcached.exe -d install
/* Install the memcached as windows service */

memcached.exe -d start -m 512
/* Start the memcached instance with maximum memory 512M */

Configuring PHP using the Memcached:

1. Download php_memcache.dll in Google as pecl4win.php.net was down in 2008.
2. Copy the php_memcache.dll to \ext
3. Edit the php.ini to include the line
   
extension=php_memcache.dll


4. Restart Apache

Test the memcache is working through the following code.

<?php
$memcache = new Memcache;
$memcache->addServer("localhost",11211); /* Default Port */
$memcache->addServer("localhost", 22333); /* Comment this out if you are not starting multiple incidence */

print "Server's version: " . $memcache->getVersion() . "<br />\n";

$tmp_object = new stdClass;
$tmp_object->str_attr = "test";
$tmp_object->int_attr = 123;

$memcache->set("key",$tmp_object,false,10);
echo "Store data in the cache (data will expire in 10 seconds)<br />\n";

echo "Data from the cache:<br />\n";
var_dump($memcache->get("key"));
?>

Read the PHP Memcache Menu

There is another key-value pair cache called Redis. Will talk more in other posts.

xChm - Another Linux CHM Reader

xCHM is a cross-platform GUI front-end to chmlib, with borrowed bits from Pabs' chmdeco project.

Originally written for UNIX systems (Linux, *BSD, Solaris), xCHM has been since ported to Mac OS X and Windows.

xCHM can show the content tree if one is available, print pages, change font face and size, remember bookmarks, display a searchable index, and search for words in the current page and the whole book.

xCHM is a freeware under GPL.





More screenshots here.

Apache + PHP (Windows) Step-By-Step

1. Download the 2.2.11 windows binary from Apache
2. Run to install Apache. Assuming you are installed to C:\Program Files\Apache Software Foundation\Apache2.2
3. Download the PHP windows binary (Zip Package) from PHP.net
   
4. Unzip the package and put everything inside c:\php
5. Copy c:\php\php.ini-recommended to c:\php\php.ini
6. Assume your web root folder is C:\WebRoot
7. Edit the php.ini


doc_root = "C:\WebRoot"



upload_max_files = 10M /* Modify the maximum upload file size to 10 megabytes, default 2 M */

uncomment the following line for using MySQL or other lines for other database

extension=php_mysql.dll
extension=php_mysqli.dll



8. Edit the Apache conf\http.conf

• Change the DocumentRoot to your webroot
• Change the <Directory "C:/Program Files/Apache Software Foundation/Apache2.2/htdocs"> to <Directory "C:/WebRoot">
• Change the Deny from all to Allow from all
• Add the following line to conf\http.conf
  
  # Configure the path for php.ini
  PHPIniDir "C:/php"
  LoadModule php5_module "C:/php/php5apache2_2.dll"
  
  
  

Javascript Framework Survey

As expected, JQuery tops the market share. But please wait and see if ExtJS will dominate in future.
JQuery: 42%
Prototype: 18%
ExtJS: 8%

ExtJS is not that easy to use but really powerful.

Ref: Kyle Hayes' Javascript Framework Survey

Will have some posts on ExtJS to show how easy to build a real life website.

Web Server Survey (2009 Mar)

A bit surprise on the strong adoption of Nginx.

Apache - 66.65%
Microsoft - 18.68%
Nginx - 3.06%

Reference: Netcraft Web Server Survey 2009 March

NetSetMan - Network Setting Manager

Are you tired of changing your network configuration on your
laptop or computer every day? Always the same procedure?

On the go: changing...
At home: changing...
In the office: changing...

Then NetSetMan is your solution. It will do the work for you.

URL: NetSetMan
Platform: Windows
Version: 2.5.4
Price: $0

NetSetMan is a network settings manager which can easily switch between 6 different, visually structured profiles including:

IP Address Subnet Mask Default Gateway DNS Server WINS Server Computer Name Workgroup DNS Domain Default Printer Network Drives NIC Status SMTP Server Hosts File Entries Scripts (BAT, VS, JS, ...)

Additionally only in the Pro version: Can be used at work Unlimited amount of profiles Network-Domain Complete Proxy Settings (Windows/Internet Explorer & Firefox) Browser Home Page (Internet Explorer & Firefox)

NetSetMan offers you what have been missing in Windows until now:
A powerful, easy-to-use interface to manage all your network settings at a glance.
Give it a try and you'll never want to be without it again.

All settings and changes are saved automatically in a separate file (settings.ini) so a backup, transfer or upgrade to another version is absolutely no problem.

KChmViewer

A CHM Viewer under Linux.

• Support CJK encoding, Espanol and Russian help files.
• Support tab browsing which can open links in new tab.
  

URL: KChmViewer
Platform: Linux
Price: $0

CentOS released version 5.3

CentOS is basically RedHat Enterprise Linux (RHEL) with the name & logo of RedHat removed from the source code. Free community edition without the option to have commercial support.

The CentOS team is pleased to announce the availability of CentOS 5.3. Major changes in CentOS 5 compared to CentOS 4 include:

These updated software versions: Apache-2.2, php-5.1.6, kernel-2.6.18, Gnome-2.16, KDE-3.5, OpenOffice.org-2.3, Evolution-2.12, Firefox-3.0, Thunderbird-2.0, MySQL-5.0, PostgreSQL-8.

Better desktop support with compiz and AIGLX.

Virtualization provided by the Xen hypervisor with Virtual Machine Manager and libvirt.

Sabayon to simplify the construction of user profiles.

Ubuntu Version Scheme

The Ubuntu version numbering scheme is based on the date we release a version of the distribution. The version number comes from the year and month of the release rather than reflecting the actual version of the software. Our first release (Warty Warthog) was in October 2004 so its version was 4.10. This version (Edgy Eft) was released in October 2006 so its version number is 6.10.

Recuva - File Recovery

Recuva (pronounced "recover") is a freeware Windows utility to restore files that have been accidentally deleted from your computer. This includes files emptied from the Recycle bin as well as images and other files that have been deleted by user error from digital camera memory cards or MP3 players. It will even bring back files that have been deleted by bugs, crashes and viruses!

URL: Recuva
Price: $0
Platform: Windows
Version: 1.25.409