Hastener's Blog

Magento: Configuring Orbital Chase Paymentech Gateway

Rafeek — Sat, 23 May 2009 15:52:00 +0500

Magento Commerce, is a direct response to the emerging new needs of today's online merchants. More than any feature or functionality what our clients really needs is "flexibility" is done through the magento.

We have a lot of payment gateways today to integrate with our e-commerce application. Here we see how to integrate one of the leading Gateway providers CHASE Payment Tech Gateway with Magento Commerce.

1. Creating CHASE Payment Module

The CHASE Payment Module is included as Magento Commerce Extension, by using Magento Module Creator. Using Module Creator the Payment Module template for both Administrator and Client Section will get added.

The module will get created and integrated into our existing magento site by specifying the parameters properly as mentioned above. The parameters are Name Space, Module, Magento Root Directory, Design Interface and Design.

1.1 Installing Module Creator

In order to download, visit Module Creator page in Magento Wiki.

After dowloading, to install the Module Creator, copy the index.php file into a Blank folder on your webserver. You have to put it in it’s own folder so that the index file does not conflict with other index files. Example: mysite.com/module_creator/

Open the module creator index page in your web browser, and fill in the desired module information. If you enter your Magento directory, the module creator will attempt to install the module directly into Magento, so file permissions must be set correctly for this to happen. If your file permissions are incorrect, or you do not want the module installed right away, you can leave the Magento Directory blank, and the module creator will create the module in a folder called 'new', and place it under module creator’s folder.

Please note that if you enter in your magento directory to install to you must have the correct path. Let’s say that you have Magento installed here:
http://www.my_site.com/magento/
And you have the Module Creator installed here:
http://www.my_site.com/module_creator/
This means that the path that you would need to enter in the Module Creator is this:
../magento
The ‘..’ signifies one directory up.

The new payment gateway gets installed in the /App/Core/Code/local folder with default folder right permission without disturbing the existing payment gateways.

For more information on Module Creator visit,
http://www.magentocommerce.com/wiki/custom_module_with_custom_database_table

Note:
Once the new payment module installed properly, go to the /var/cache folder and delete all the files inside the folder and then run the application, now the new changes get reflected.

2. CHASE Module in Administrator Section

Now we will add the Chase Paymentech Module to the administration section, so that we can update the Merchant ID, Terminal ID and Gateway URL as seen in the below screen.

The fields configured in administration section can be customized in the system.xml file located at the /App/Core/Code/Local/Mage/newmodule/etc folder.

3. CHASE Module in Client Section

After the payment module is integrated in the Magento application using the Module Creator, the Orbtiz Chase Module on the Client Section will look like in the below screen.

Client section Payment Information fields can be modified directly at, App/design/frontend/default/example-module/template/payment/form/cc.phtml

4. Payment Processing with CHASE

Once the Chase module payment process is integrated in the client section, the paymentmethod.php will do the backend process like checking the card details by sending to the Chase Paymentech and return the response from the Chase.

The paymentmethod.php is located in the new module created by Module Creator, at /app/local/CHASE_Paymentech/Orbitz/Model/PaymentMethod.php,

You can download the code from the below link.

PaymentMethod.zip (2.95 kb)

The PHP code will explain you the process of reading the card information from the payment page and post it to the Chase using the payment gateway and receive the response back from the Chase.

4.1. Specifing the Payment Gateway URL

In the code we are using CURL to receive payment gateway response so we need to enable the extension=php_curl.dll in php.ini. Update the php.ini as per the requirement and restart the server.

Payment Gateway URL for Production –
'https://orbital1.paymentech.net'
'https://orbital2.paymentech.net'

Payment Gateway URL for Test –
'https://orbitalvar2.paymentech.net/authorize'

$value = Mage::getStoreConfig('payment/ Orbitz_Paymentech/cgi_url'); if (!$value || $value === false) { return 'https://orbital1.paymentech.net'; } return $value;

The Authorize and Capture event is done on the each order process. The Credit Card is get processed the specified amount sent as XML Request. The xml request was constructed as below,

$xml="";

$xml .= "";

$xml .= "";

$xml .= "EC";

$xml .= "AC";

$xml .= "".htmlentities(trim($this->getConfigData('bin_no')),ENT_QUOTES, 'UTF-8')."";

$xml .= "".htmlentities(trim($this->getConfigData('merchant_id')),ENT_QUOTES, 'UTF-8')."";

$xml .= "".htmlentities(trim($this->getConfigData('terminal_id')),ENT_QUOTES, 'UTF-8')."";

$xml .= "".htmlentities(trim($payment->getCcType()),ENT_QUOTES, 'UTF-8')."";

$xml .= "".htmlentities(trim($payment->getCcNumber()),ENT_QUOTES, 'UTF-8')."";

$xml .= "".htmlentities(trim($exp),ENT_QUOTES, 'UTF-8')."";

if(($payment->getCcType()=='VI') || ($payment->getCcType()=='DI')) {

  $xml .= "1";

}

$xml .= "".htmlentities(trim($payment->getCcCid()),ENT_QUOTES, 'UTF-8')."";

$xml .= "".htmlentities(trim($billing->getPostcode()),ENT_QUOTES, 'UTF-8')."";

$xml .= "".htmlentities(trim($billing->getStreet(1)),ENT_QUOTES, 'UTF-8')."";

$xml .= "".htmlentities(trim($billing->getCity()),ENT_QUOTES, 'UTF-8')."";

$xml .= "CA";

$xml .= "".htmlentities(trim($billing->getFirstname()),ENT_QUOTES, 'UTF-8')."";

$xml .= "".htmlentities(trim($order->getIncrementId()),ENT_QUOTES, 'UTF-8')."";

$xml .= "".htmlentities(trim($amt),ENT_QUOTES, 'UTF-8')."";

$xml .= "AC"; 

$xml .= "";

$xml .= "";

$xml .= "";

The request is sent as CURL post to Chase is as follows,

$http = new Varien_Http_Adapter_Curl();

$config = array('timeout' => 30);

$http->setConfig($config);



$header= "POST /AUTHORIZE HTTP/1.0\r\n"; // HTTP/1.1 should work fine also

$header.= "MIME-Version: 1.0\r\n";

$header.= "Content-type: application/PTI40\r\n";

$header.= "Content-length: " .strlen($xml) . "\r\n";

$header.= "Content-transfer-encoding: text\r\n";

$header.= "Request-number: 1\r\n";

$header.= "Document-type: Request\r\n";

$header.= "Interface-Version: Test 1.4\r\n";

$header.= "Connection: close \r\n\r\n"; 

$header.= $xml;

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL,$this->getApiGatewayUrl());

curl_setopt($ch, CURLOPT_HEADER, false); 

curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $header);

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 1);

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec($ch);

The Chase response will get parsed from xml to array format and validate the response by each parameter as per the Chase Certification_WS document.

Chase will request you the code to scrutinize before approval. They will look through the parameters that you are sending in the Request, and how you are parsing their Response & its error codes.

Knowing which PORT is using by which APPLICATION

Ramana — Mon, 20 Apr 2009 07:49:00 +0500

Recently for a client need to install our SilverLight application on his laptop for demo over GotoMeeting. The laptop is having Vista 64 bit Windows OS. After installing IIS 7 on it, the webserver's Default Website was not starting. So checked everything - Services, Installed Apps in Programs & Features etc, to see whether Apache or Tomcat or any other webserver is running and blocking 80 port. But couldn't see any of those applications.

Then started hunting to know who is blocking 80 port on that machine. Did little googling and found following 2 commands to know which app is listening to the 80 port.

Through these commands you can know easily which application is listening to a particular port. As well you can see all ports that are exposed and applications that are using them. This is a 2 step process. First we will see ,what are the ports that are listening by different Process Ids. Next using that PID we will get the Application name.

To know the listening ports on your machine type the following command in CMD prompt

netstat -ano | find /i "listening"

Fist column will show you the protocol TCP or UDP, next IP & PORT numbers of Source, next IP & PORT numbers of Destination machine, next State (that we needed to filter the list), and finally the Process Id (PID).

From the last column we will take the Process Id and find the Application of it.

So for that lets Google and download a small application named PUList. The Windows 2000 Resource Kit Tool needs you to go through Genuine OS check, and then you can download the PULIST.EXE. After downloading & installing PUList, navigate to the installed directory in CMD prompt. Run the following command in there,

pulist |find /I "6372"

or just

pulist

will list all the processes that are running.

Finally we found that Skype is using the port 80. So after exiting it the IIS Default website started working.

Magento Menu Customization with Product List

Rafeek — Tue, 03 Feb 2009 06:02:00 +0500

Magento main menu is construed based on the hierarchy like,

Root Category → Category → Sub-Category

We will customise the menu to show the Products of a category/su-bcategory along with its hierarchy in dropdown menu as seen below.

This is a good feature if you have less products in a website.

In order to implement the above structure, we need to modify the navigation.php file of drawItem() function like below. The navigation.php is available in the following location,

app/code/core/Mage/Catalog/Block/Navigation.php

The code is,

Public function drawItem($category, $level=0, $last=false){ $html = ''; if (!$category->getIsActive()) { return $html; } $children = $category->getChildren(); $hasChildren = $children && $children->count(); /***** Getting Product List Start ******/ $cur_category = Mage::getModel('catalog/category')->load($category->getId()); $_productCollection = Mage::getResourceModel('catalog/product_collection')->addCategoryFilter($cur_category)->setOrder('position', 'ASC'); $cnt=1; $hasProduct1=$_productCollection->count(); $phtmlChildren=''; if($hasProduct1>=1){ $l=$level+1; foreach ($_productCollection AS $_product){ $cur_product = Mage::getModel('catalog/product')->load($_product->getId()); if ($cur_product->getStatus()){ $phtmlChildren.= '<li'; if($cnt==$hasProduct1) { $phtmlChildren.= ' class="level'.$l; $phtmlChildren.= ' nav-'.$this->htmlEscape($cur_product->getName()).' last'; } else { $phtmlChildren.= ' class="level'.$l; $phtmlChildren.= ' nav-'.$this->htmlEscape($cur_product->getName()); } $phtmlChildren.= '">'."\n"; $phtmlChildren.= ' <a href="/'.$cur_product->getUrlPath() . '.html">'. $this->htmlEscape($cur_product->getName()) . '</a>'."\n"; $phtmlChildren.= '</li>'; $cnt=$cnt+1; } } } /***** Getting Product List End ******/ $html.= '<li'; if ($hasChildren || (!empty($phtmlChildren))) $html.= ' onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"'; $html.= ' class="level'.$level; $html.= ' nav-'.str_replace('/', '-', $category->getRequestPath()); if ($this->isCategoryActive($category)) $html.= ' active'; if ($last) $html .= ' last'; if ($hasChildren || (!empty($phtmlChildren))) { $cnt = 0; foreach ($children as $child) if ($child->getIsActive()) $cnt++; $html .= ' parent'; } $html.= '">'."\n"; $html.= '<a href="'.$this->getCategoryUrl($category).'"><span>'.$this->htmlEscape($category->getName()).'</span></a>'."\n"; $htmlChildren = ''; if ($hasChildren) { $j = 0; foreach ($children as $child) if ($child->getIsActive()) $htmlChildren.= $this->drawItem($child, $level+1, ++$j >= $cnt); } if ((!empty($htmlChildren)) || (!empty($phtmlChildren))) $html.= '<ul class="level' . $level . '">'."\n" .$htmlChildren .$phtmlChildren .'</ul>'; $html.= '</li>'."\n"; return $html; }

The below lines in drawItem() function will fetch the current sub-category's product list based on the sub-category id. The $_productCollection has the list of product of selected subcategory by getting the id as $category->getId() function.

 $cur_category = Mage::getModel('catalog/category')->load($category->getId());

 $_productCollection = Mage::getResourceModel('catalog/product_collection')->addCategoryFilter($cur_category)->setOrder('position', 'ASC');

We will loop through them and generate the menu structure using <li></li> tag.

WebEx Meeting Integration Steps

Madhu — Wed, 05 Nov 2008 12:18:00 +0500

In order to integrate WebEx into web application we need to complete the following steps:

Create a developer account on WebEx developer community
We need to create a developer account in the sandbox environment. The credentials identify and authenticate your web application request when you make an API call to WebEx.
Request & Response
Make the API calls, check the response and save to database or send the meeting details to participants via email

Creating WebEx Developer Account

You will have to create a Developer Account on the WebEx developer environment in order to test your application. Following are the steps:

Sign up at http://developers.webex.com/ with a valid email id to recieve your credentials to the WebEx system.
After signing up, account information will be sent to your mail id. It may take more time, as each application will be manually reviewed by WebEx team.
Email will have the SITE ID and PARTNER ID of your account.
You have to use the above account information (USERNAME, PASSWORD, SITE ID, and PARTNER ID) in all the requests to authenticate your web application with WebEx.
Check API Reference Guide to understand more on Parameter nodes and Key Words for the requests to be made to organise meetings.
http://www.webex.com/pdf/white_paper_integration_APIs.pdf page number 14 onwards.

Creating Meeting (Sample Code)

In ASP.NET page, the following function will be called to schedule a meeting. The parameters will be Meeting Name, its Date and Time. In this example WebEx ID (Email Id), Password, Site Id, and Partner Id is hardcoded.

    protected void SendCreateMeetingRequestToWebEx(string MeetingName, string MeetingDate, string MeetingTime)

    {

        string strReq = @"<?xml version=""1.0"" encoding=""UTF-8""?>" +

                      "<serv:message xmlns:xsi=" + "\"" + 

                              "http://www.w3.org/2001/XMLSchema-instance" + "\"" + ">" +

                        "<header>" +

                            "<securityContext>" +

                                "<webExID>xxx@xxx.xxx</webExID>" +

                                "<password>xxxxxx</password>" +

                                "<siteID>000000</siteID>" +

                                "<partnerID>XXXX0000</partnerID>" +

                            "</securityContext>" +

                        "</header>" +

                        "<body>" +

                          "<bodyContent xsi:type=" + "\"" +

                             "java:com.webex.service.binding.meeting.CreateMeeting" + 

                             "\"" + ">" +

                            "<metaData>" +

                              "<confName>" + MeetingName + "</confName>" +

                            "</metaData>" +

                            "<schedule> " +

                              "<startDate>" + MeetingDate + " " + MeetingTime + ":00" + "</startDate> " +

                            "</schedule>" +

                          "</bodyContent>" +

                        "</body>" +

                      "</serv:message>";

        HttpWebRequest hwrRequest = ((HttpWebRequest)(HttpWebRequest.Create(" https://apidemoeu.webex.com/WBXService/XMLService"))); 

        hwrRequest.Method = "POST";

        hwrRequest.ContentType = "text/xml";

        UTF8Encoding encoding = new UTF8Encoding();

        byte[] postBytes = encoding.GetBytes(strReq);

        hwrRequest.ContentLength = postBytes.Length;

        Stream postStream = hwrRequest.GetRequestStream();

        postStream.Write(postBytes, 0, postBytes.Length);

        postStream.Close();

        HttpWebResponse hwrResponse = ((HttpWebResponse)(hwrRequest.GetResponse()));

        Stream responseStream = hwrResponse.GetResponseStream();

        StreamReader sr = new StreamReader(responseStream);

        string respString = sr.ReadToEnd();

        respString = respString.Trim(); 


        /*Here we are writing to a directory as XML file to check*/

        /*Instead you read the XML nodes and find, is it success or a failure*/

        /*If success, you will have Host meeting URL and Attendee meeting URL in the Response*/

        TextWriter res = new StreamWriter(Server.MapPath(@"WebExReqRes\CreateMeeting.xml"));

        res.WriteLine(respString.ToString(), true);

        res.Close();

    }

The response will have the MeetingKey, Host URL, and Attendee URL if it is success. Now you have to push them to database to show respective URL to your users based on profile. And also you can frame emails and send to them handy.

Further the MeetingKey you have to use to Update Meeting or Delete a Meeting or to create Join Meeting URL for each individual attendee seperately instead of common Attendee URL.

Right Browser at Right Time Google Chrome

Ramana — Tue, 02 Sep 2008 14:45:00 +0500

Today Google has released their another beta product – a web browser Google Chrome

Chrome Team says

We improved speed and responsiveness across the board. We also built V8, a more powerful JavaScript engine, to power the next generation of web applications that aren't even possible in today's browsers.

More relief and bit tension as a development company with new Google open source web browser.

We downloaded and tested it, looks sleek and different.

Relief from current slow browsers, Google Chrome is very light weighted and faster as promised.

Tension, need one more round of testing for browser compatibility with this new browser and fix CSS and JavaScript issues if any.

We spend most of time with Internet in checking mails, searching, online shopping, reading news, office work, banking - all in a browser. Within half an hour we will end up opening a dozen web pages in couple of browsers (since we don’t know when one hangs)

Now a days, clients are looking for web applications that should work like stand alone applications in browser, with all key events and with advanced mouse events. In order to build rich AJAX based web applications we will be using dojo, extjs, jquery, mootools, scriptaculous, yui, etc JavaScript libraries and write very heavy weight JavaScripts to generate sophisticated effects.

Main hurdles with current browsers are 1) JavaScript runs very slow. 2) If we open couple of tabs, the browser hangs, since it locks up something in other tab.

Chrome mainly addresses these two issues completely. It runs complex web applications very fast, thanks for Google V8 JavaScript Engine. It creates separate process for each tab, so if a tab is busy we can still use other tabs, and if any bug in rendering we can close only that tab.

Firefox hopes to release its new version 3.1 by the end of the year, comes with JavaScript acceleration technology called TraceMonkey. Which claims much more faster than V8. Whatever may be the Browser War, ultimatly we can build faster and safer Enterprice Web Application without any second thought.

Recently we have built a very big web application with ExtJS. At times we thought of converting it to Silverlight, since the grids are not able to handle 500+ rows of data, dynamically with asynchronous reloads. Big forms were taking 6 to 15 secs to load.

Chrome really saves us from it with its fast JavaScript engine. You can check Berend’s example in ExtJS forum, it opens huge form (with 400+ fields) in just < 2 sec in Chrome, amazing. If you look at this example, of course, as said before some CSS need to be changed in skin, to align the dropdown arrow image in left properly.

Or test your browsers' performance with Dromaeo / SunSpider site . Some of Dromaeo saved test results.

So, fellow Designers and Developers modify your CSS and JavaScript to make webpages compatible for new browser, and dear Testers and Clients you too, to find more bugs.

Auto Forward Outlook 'Sent' Items for Backup

Ramana — Wed, 06 Aug 2008 10:04:00 +0500

This is third time I'm searching net for Auto BCC from Outlook. Whenever I change my laptop I forget to take the VBA script backup, and search the net again to cook the code as I need. This time I thought of posting to blog so that in future if needed i can pick it faster as well it helps lot other.

When I send an email I want a copy to be on GMail, in case if I change my PST or have to search quickly on my sent emails or to keep a backup copy or even to check whether my outlook and Norton have delivered it correctly. Sometimes Nortorn Outbound Email Scanning service won't resolve DNS properly and shows error. If we have sent 2 or 3 mails you won't know which one is delivered and which one is not. So to be on safer side GMail helps me.

VBA Code

Private Sub Application_ItemSend(ByVal MyMail As Object, Status As Boolean)

    Dim objEmails As Recipient

    Dim intRes As Integer

    Dim strBcc As String 

    '''' Your Bcc address ''''

    strBcc = "my.sent.item@gmail.com" 


    On Error Resume Next 


    Set objEmails = MyMail.Recipients.Add(strBcc)

    objEmails.Type = olBCC

    If Not objEmails.Resolve Then

        intRes = MsgBox("Could not able to resolve Bcc address. Do you want to still deliever the message?", vbYesNo + vbDefaultButton1, "Could Not Resolve Bcc Recipient")

        If intRes = vbNo Then

            Status = True

        End If

    End If 

    Set objEmails = Nothing

End Sub

Outlook Configuration

In Outlook open the VBA editor by pressing Alt+F11 or Tools -> Macro -> Visual Basic Editor
Open the ThisOutlookSession module, by double clicking on it.
Copy the above code and paste it into ThisOutlookSession module
Change the Bcc email address in the code
Save it
Now we need to generate the Digital Certificate:
- Click the Start button -> All Programs -> Microsoft Office -> Microsoft Office Tools, -> Digital Certificate for VBA Projects.
- In the your certificate's name box, type a descriptive name for the certificate.
- When the certificate confirmation message appears, click OK.
To verify the certificate in the Personal Certificates store:
- Open Windows Internet Explorer.
- Click on the Tools menu -> Internet Options, -> Content tab -> Certificates -> Personal tab.
- You will find recently created certificate here
Switch back to Outlook VBA editor (if closed press Alt+F11 in Outlook)
Click on ThisOutlookSession module
Click on the Tools menu -> Digital Signature
Choose the certificate and click Ok
Close the VBA Editor
Close the Outlook it may ask again for saving, click Yes
Reopen the Outlook, while opening it will prompt the 'Microsoft Office Outlook Security Notice'
Click on 'Trust all documents from this publisher'

That's it! It works smoothly. If you change the code, don't forget to re-apply the Digital Signature. If you like to test or troubleshoot in VBA Editor keep a bookmark (red dot) against a line in the code and send a test mail. Outlook will come to that point and wait. Next press F8 or F5 to continue further. Click on breakpoint (red dot) again to remove the same.

Happy forwarding!!!

Apache Windows .htaccess - Password Protect Parent and Allow Sub Directory

Ramana — Wed, 06 Aug 2008 08:10:00 +0500

To protect a directory in Apache web server, you need to create two files “.htaccess” and “.htpasswd”. “.htaccess” has to be placed under your designated directory. Once you place “.htaccess” under a directory, all its sub directories will inherit its parent properties. Each folder can have its own “.htaccess” file, if it needs to override or extend its parents’ properties.

“.htpasswd” is for storing Usernames and Passwords. It can be placed in the each directory or at a common place to maintain all logins at one place.

In “.htaccess” file you have to specify the path to “.htpasswd”. To protect a web folder the contents in “.htaccess” will be

AuthUserFile C:\wamp\passwords\.htpasswd AuthName "This is Hasten secret area" AuthType Basic <Limit GET POST> require valid-user </Limit>

To create “.htpasswd” file with Usernames and Passwords in it, you can find a utility “htpasswd.exe” under “<Apache’s installation directory>/bin” or you can create them online using Dave Child’s page.

In command prompt navigate to the above directory and type below command
htpasswd .htpasswd a-user-name

It creates “.htpasswd” file under “<Apache’s installation directory>/bin” itself. Repeat the same command to add more usernames. Cut the file from there and paste it under desired place as mentioned in the “.htaccess” – “AuthUserFile”.

If you create with Dave Child’s page, paste the text in notepad and save file as “.htpasswd” in desired directory as mentioned in the “.htaccess” – “AuthUserFile”.

Up to now we have seen password protecting a parent folder. Now by placing the following “.htaccess” file in sub folder will make it unprotected. The contents in “.htaccess” will be

Allow from all 

Satisfy Any

That’s it! It’s simple!

Are you facing any problem, let’s do discuss here, post your comment.
Let me know your feedback.

Configuring Apache and IIS Web Servers on Single Machine for 80 Port

Admin — Wed, 23 Jul 2008 12:10:00 +0500

Before on Windows 2003 server, this same configuration has been done successfully. Now on Windows 2008 Web edition tried today it worked too.

First need to download the Support Tools from Microsoft site. Of course it is Windows Server 2003 Service Pack 1 32-bit Support Tools, but we need “httpcfg” command mainly to do this exercise.

In order to configure IIS7 and Apache on same machine for port 80, need 2 or more IP addresses configured to your machines’ network card. So that we can use one for Apache and the other to IIS.

In windows 2008 to add more IP is to LAN card, open Control Panel → Network and Sharing Center → Manage network connections

On your ‘Local Area Connection’ right click and open properties. Double click on IP V4 option to open it properties. From ‘Advance’ dialog you can add more IPs to the machine.

To run the support tools commands, better to be in safer side, open the command prompt with administrator privileges.

Change your path to the support tools installed directory, normally

C:\Program Files\Support Tools>

Next execute these commands one after the other to set the IP

httpcfg set iplisten -i xxx.xxx.xxx.xxx

to confirm

httpcfg query iplisten

this will list the IPs that are binded to IIS.

then stop all HTTP services and restart

net stop http /y net start w3svc

This will stop

Windows Remote Management (WS-Management) World Wide Web Publishing Service Print Spooler IIS Admin Service

But it may start only ‘World Wide Web Publishing Service’, so restart your machine once the above setup is done, that will start other dependent services.

In some cases, like DotNetPanel control panel it looks for local loop back URL 127.0.0.1. So need to add the same and restart the HTTP service again.

httpcfg set iplisten -i 127.0.0.1

In Apache’s httpd.conf you can make it listen to 80 port and add IP to your web site

<VirtualHost XXX.XXX.XXX.XXX:80> DocumentRoot C:/my.website.path/ ServerName example.com ServerAlias *.example.com </VirtualHost>

If you have any queries and like to discuss please post your comments below.

ExtJS Tips for GridPanel Row - Marking, Colouring, Focusing & Special Key Event Firing

Ramana — Sun, 16 Mar 2008 12:31:00 +0500

ExtJs, a powerful library for developing web application. Bit complex to learn & start with, but once you practice some examples it becomes easy. You need to have good knowledge in Object Oriented Programming to extend & implement your own features or controls, and to see power of JavaScript & ExtJS. Working with ExtJs is really interesting!

Here listing some hints that may help you in your programming. Array-Grid example that comes with ext-2.0.2 is modified to demonstrate the same.

Focusing grid on load to activate down & up arrows
Colouring grid rows based on some criteria
Key events (especially Navigation keys) usage in grid with Internet Explorer (IE7) & Firefox
Marking selected grid row with some icon / text color change

The code in action can be seen at ExtJs Array Grid Sample
Same can be downloaded from: ExtJs Array Grid Sample - Source Code (~311 KB since extjs images & base scripts).
Main files that are modified: array-grid.html, array-grid.js & examples.css.

1. To focus the grid.

After rendering the grid

    grid.getSelectionModel().selectFirstRow();

    grid.getView().focusEl.focus();

2. Row colouring

Mainly this is CSS twist with use of getRowClass to change the text color of whole row.

    grid.getView().getRowClass = function(record, index){

      return (record.data.change<0.7 ? (record.data.change<0.5 ? (record.data.change<0.2 ? 'red-row' : 'green-row') : 'blue-row') : '');

    };

getRowClass changes the row CSS properties its applied for, but inside a row each cell element will have its own CSS class again.

In CSS for ‘cell-inner’ we need to set the font color.

    .blue-row .x-grid3-cell-inner{

      color:blue;

    }

    .red-row .x-grid3-cell-inner{

      color:red;

    }

    .green-row .x-grid3-cell-inner{

      color:green;

    }

3. Key Events

While working GridPanel, along with focusing the first row we were in a need of implementing the making of rows selected by user with Left Arrow & Right Arrow, as well they can navigate up & down with Up Arrow & Down Arrow.

The below code works partially in IE. It won’t capture navigational (along with arrows, page up, page down, home, end) keys & some special keyevents. But it works perfect in Firefox.

    grid.on('keypress', function(e){

      alert(e.getKey());

    });

Whereas ‘keydown’ keyboard event works perfectly in both browsers for all keys. But the e.getKey() in IE won’t get the key code for navigational keys & some special keys. So need to change that to normal “e.keyCode”.

There maybe some property to set in ExtJS like in KeyNav -> forceKeyDown to true to make the getKey & keypress work in IE & FF. Not sure where & how exactly, but now the above quick solution worked without any problem.

So the code will be,
grid.on('keydown', function(e){ alert(e.keyCode); });

4. Marking Selected Grid Rows

In order to mark the selected rows, experimented on task example provided in ExtJs with Google Gears. Before experimenting used the data.columnName = ‘some value’ to set & gridview’s refresh() to apply. But at a time only a row used to change & previous selected rows used to change back.

In this same Array-Grid example added a new boolean value ‘true - flase’ column as first column ‘Status’. Added a ‘renderer’ to this new column, which sets a css class with empty box image if vale is false / tick mark if value true. Also 2 events, one mouse click and the other keydown event to grid to change the value of particular data element. Here the tricky point is if we change the value of it in store record, then automatically the respective CSS will be applied to it through its ‘renderer’. As said before if we change the ‘data’ in grid it won’t work, we need to apply the change of value in record of the store.

The code & css is

    grid.on('keydown', function(e){

         if(e.keyCode == 37){

           var rec = grid.getSelectionModel().getSelected();

           rec.set('status', false);

         }else if(e.keyCode == 39){

           var rec = grid.getSelectionModel().getSelected();

           rec.set('status', true);

         }

    });

 

    grid.on('rowclick', function(grid, rowIndex, e){

      var rec = grid.store.getAt(rowIndex);

      rec.set('status', !rec.get('status'));

      grid.getView().focusEl.focus();

    });

.task-completed, .task-check-over { width:16px; height:16px; cursor:pointer; background: transparent url(../images/check.gif) no-repeat center -16px; } .task-check-over { background: transparent url(../images/check.gif) no-repeat center -32px; }

The above code in action can be seen at ExtJs Array Grid Sample
Same can be downloaded from: ExtJs Array Grid Sample - Source Code (~311 KB since extjs images & base scripts).
Main files that are modified: array-grid.html, array-grid.js & examples.css.

Horizontal & Vertical – Bidirectional JavaScript Scroller with Images & HTML Content

Ramana — Mon, 03 Mar 2008 18:35:00 +0500

Here we are using Moo.fx for Mootools to do the trick of animation effect, inspiration of Fx.Scroll demo.

From Mootools, for this animation the main component is Fx.Scroll & supporting component is Fx.Styles along with other basic core modules that comes with it when we select the above two & download the script (mootools-release-1.11.js).

Programmatically if you would like to create the scrolling elements then element ids need to be created sequentially “content” + i.

The problem with mootools Fx.Scroll is, if the element is in visible area and/or hidden area is not lengthy enough then it wont move to the focused element since it is already in visible area. So we will be looping through again our content elements to produce the extra elements for scroll effect. Basically the repeated count will be number of elements in visible area plus one. If you are able to see 4 elements at a time then repeat initial 5 elements at the end again.

We can change the direction, stop & start the looping of images or html or mixed elements.

Find it action which describes you more. Its blazing fast & cross-browser.

Source of it for download: Bidirectional JavaScript Scroller (~20 KB)