Another Mathemagical Black Hole

Read about another mathemagical black hole.. Really interesting one. 

Take any natural number, treat it as a string. For example: 24,89,62,698.

1. Count the number of even digits. In this case 7 even digits.
2. Count the number of odd digits. In this case 2
3. Count the total number of digits. In this case 9

So the new number now is 729. Repeat the above process. Even digits (1), odd digits (2), total digits (3). So the new number is 123. And now any more iterations will return 123 only. So in this case 123 is the mathemagical black hole.

 All numbers in this universe are drawn to the number 123 by this process. Never to escape. Try it out.

Mirage - Open Source CMS Based on JSR-170 Standards

I have started the Mirage Project at java.net today. Check it out here

Mirage is an open source project which aims to deliver a professional open source content management system based on the content repository Java Content Repository (JCR) viz. JSR-170.

The project deliverables will be in terms of several individual smaller sub projects some of which may be delivered via some different but related java.net project. The deliverables from this project will be consumed by the OpenPortal project to provide CMS functionality to the portal product. The current plan is to provide in terms of deliverables :

• CMS Infrastructure and Generic API based on the Apache Jackrabbit implementation of the JSR-170
• CMS Tag Libraries which developers can use to create web applications/portlets that can leverage the features offerred by the
  content repositories.
• Sample portlets which will be a part of the Portlet Repository. The sample portlets will showcase how to use CMS Infrastructure/API's to store/retrieve/update structured and unstructured content to the JCR.
• Tooling Plugins for developer IDE's which empower the developer to use the Mirage API and Tag Libraries with the greatest of ease. These will be available under the Portal Pack Project.

 More information will be available on the Mirage web site soon along with source code!

Dynamic JavaScript Loading

While developing a custom jMaki widget we came across a problem in which we needed to load a javascript dynamically from another javascript file. There are atleast 2 ways I know this can be done. Here is one such method.

function jsinclude( jscriptfile )
{

    // create a script node
    var s = document.createElement('script');
    s.src = jscriptfile;
    s.type = "text/javascript";

     // add it to the node called 'SOMEPARENT'.. it could be the HEAD node of the html page as below....  

   document.getElementsByTagName('head').item(0).appendChild(s);
}

Calling this function in your javascript you can load as many JS files as needed and embed them into your current DOM tree as follows :

jsinclude('dojofunctions.js');

A Solution: Playing with numbers

Consider the original binary bits, keep the bits in pairs of 2 for beginning. 

First set each 2-bit field equal to the sum of the two single bits that were originally in the field. Then sum adjacent 2-bit fields, putting the results in each 4-bit field, and so on. The original problem (summing 16 bits) is divided into two problems (summing 8 bits), which are solved separately, and the results are added. The strategy is applied recursively, breaking the 8-bit fields into 4-bit fields, and so on.

So solving the above problem, the original number is 0xCF39. Write it down as binary keeping adjacent bit together as below.

11 00 11 11 00 11 10 01

As indicated earlier, sum up the pairs above (binary) and put the results back in the individual two bit fields as follows.

10 00 10 10 00 10 01 01

Now combine these numbers in blocks of 4 as follows and repeate the process of summing the two two bit numbers and putting the result back in the 4 bit fields as below.

1000 1010 0010 0101
0010 0100 0010 0010

Next, repeat the process by pairing the numbers in blocks of 8 and adding the two 4 bit numbers and placing the result back in the 8 bit block as below.

00100100 00100010
00000110 00000100

And lastly repeat the process by adding the two 8 bit numbers above and placing the result in the 16 bits as below and that is the sum of all the

1's in your original number i.e 0xCF39

0000000000001010   ----> Decimal 10.

The above strategy makes the original problem of summing 1's in a 16 digit number complete in 4 discrete steps. Point to note is that each of these steps of determining adjacent bits and summing them at each step can be done in parallel. Hence making the operation an order 4 operation ( i.e Log ₂ (16) = 4 steps ).

 It should be easy to write this recursive loop in any decent high level language... give it a shot!
 

Playing with numbers.

Consider that you have a 32 bit machine and you have a number such as say Hex CF39. How would you go about counting the number of 1's in the binary representation of this number? In other words, the binary representation of CF39 is 1100111100111001. What is needed is a way to count the number of 1's in this number i.e the answer should be 10.[ Your 32 bit machine doesn't have an instruction that can do this :-) ]

The Future, The Semantic Web

Recently at work I came across a young colleague who had done some work during his bachelors on semantic web and I kind of got involved in that discussion. During that conversation a few more folks joined in and I realized that not many were aware of the our current "not-so-semantic web". Hence this became the topic of my today's blog.

So what exactly is the "semantic web"? Let me try and explain with an example. Suppose I am wanting to buy a camcorder and I did research on the web for the camcorders and I come across the following things from different sites:

•  Model: DC220, Manufacturer : Cannon, Price: $449, Rating : 7/10, Really small and easy to hold/operate, good batter power but menu systems on the touchpanel are a little clumsy to operate.

• Checked out the latest Panasonic PV-GS300 and it has a really nice night shot feature, and I would rate it among the best camcorder. So go for it!

Even if I knew little or nothing about camcorders and its features, I can make a pretty good idea of what the web sites are talking about and what they mean when they say the things they say. But if a piece of software went through the exact same pieces of text mentioned above, it will really have problems in understanding the really straightforward language concepts.

This brings us to the main concern, people are really good at "interpreting" meaning, or semantics, from written language, and software is pretty bad at it. So when search engines go through blobs and blobs of text, what is missing is some standardized way for us to mark up our web content to help the software recognize the semantics of the content. If it is possible to mark up our web content in some way to associate the correct semantics of the page, then it helps us  move the Web beyond the current index/search/read paradigm that we are stuck with currently. And that is what is meant by "Semantic Web", on which currently there is a huge amount of research going on.

Mathematical Black Hole

A mathematical black hole is, defined non mathematically, any number to which other elements (usually numbers) are drawn by some stated process. Though the number itself is the star of the show, the real trick is in finding interesting processes which make this "star".

Following is one example of the Mathemagical Black Hole by Martin Gardner. Take any whole number and write out its numeral in English, such as FIVE for the usual 5. Count the number of characters in the spelling. In this case, it is 4 — or FOUR. Number of characters in the spelling is 4. Repeat with 4 to get 4 again. So here the number 4 is the mathemagical black hole.

Just to prove it is not a lie, Another example lets take the number 155.
ONE HUNDRED FIFTY FIVE : Number of characters = 19
NINETEEN : Number of characters = 8
EIGHT : Number of characters = 5
FIVE : Number of characters = 4

And we repeat from here. Interesting!

Flex Up Your Portlets!

As promised I started to do my Flex development, and boy I found it really amazing. Flex based UI is nothing but a SWF file that is run by the Flash VM running as a plugin in your browser, much like the Java Plugin. Personally I prefer Flex over Ajax, having tried both.

If you want to build a rich user interface web application that requires several state changes, spans multiple business processes and requires complex data handling at the back-end and still want to give the users a really rich and consistent experience (no refreshes!) then I think Flex definitely is the better choice.

By the way, Flex provides a platform/browser independent virtual machine in which your web application user interface runs (as long as there is a Flash VM for that browser/platform, and for most OS'es it is there). On the other hand Ajax does depend on the browser, in the sense it relies on the browser to provide the platform to build the applications. And hence it is sensitive to the browsers interpretation of JavaScript code. That makes Ajax based code sensitive to the way the JavaScript code is written and interpreted by the browser.

Another point I noticed in Flex, is that the scripting language used is ActionScript, which happens to be a much more strongly typed language as compared to JavaScript, so I believe this is in favor of Flex as well.

It has the pretty good concept of,

Application = Code + Markup.

Where Markup is provided by the declarative MXML syntax, code is provided by ActionScript. ActionScript is Object Oriented as well, that is, if you are familiar with Java, learning ActionScript is pretty much a breeze.

Flex provides inbuilt support for making calls to the backends using HTTP (GET/POST) as well as native support to make webservices Calls via the <mx:HTTPService> and the <mx:WebService> tags respectively. Using the <mx:WebService> tag to make web services calls was so easy, that it felt like reading WebServices for Dummies!!

I believe it is possible to make calls into EJB's also, but I haven't yet explored that possibility. Still in my learning phase!.

The first application I did was an application that shows the user a drawing board in which the user can draw pictures. To do this it was a breeze in Flex Builder. Opened up the 'Design' view, dropped in a panel, a canvas object and then trapped the mouse clicks in ActionScript, and made sure that lines were drawn between the mousedown's and the mouseup's. Real Simple!

Anyway, being in the portal world, I wanted to make use of the Flex Application Platform in my portal. In other words, I wanted to 'Flex Up my portlet'. This would not only involve building the user interface in Flex, but would also get me to test the webservices support in Flex. Nice!

So now I needed a nice enough usecase. After thinking for a while, I thought that maybe a E-Signature portlet would really be nice. The portlet will present a user with a document (a NDA, EULA etc) that traditionally the end users would have signed/accepted. The portlet would provide a canvas wherein a user can actually sign the document. And then this signature is posted back to the server as a bitmap and saved. Basically, this portlet could leverage my initial work on the simple standalone 'canvas board' flex application. With this idea in mind, was all charged up to flex up my portlet.

 Tools Used

• Flex Builder from Adobe as a plugin for Eclipse.
• Portal Pack for Eclipse : It helps when both plugins are in Eclipse ;-)


• Open Source Portlet Container

So my E-Signature portlet is done. I put up a small screencast of it for download. If you are interested then you can view it here.

In my next blog, I will post instructions on how to actually integrate Flex applications into your portlets. So keep posted!

UPDATE: I didn't get time to post the entry on how to create a portlet out of the Flex application, but I helped my colleague Murali on getting his Flex app as a portlet and he has been prompt enough to post the instructions on his blog here. Thanks Murali.

Personal Blog Site

I added a bookmark for my personal blog at the right of the page. Visit it here

Explanation of the Pythagoras Therom Proof

The proof actually was "Look". Don't just see, but rather "Look". Carefully that is.

It took me a while to figure this out as well.

The picture shows two squares equal in area. Each square has 4 similar triangles albeit placed differently in the two figures. So removing these 4 triangles from each of these pictures should leave behind the same area. And now if you "look" that is the proof right there.

Comments!

One line Twelfth Century Proof of the Pythagoras Theorem

Look!

Percentages Applied Successively ...

Came across a nice simple problem but an alternative insightful solution to it as well. I quite liked it. So posting it here.

Wanting to buy a coat, Lisa is faced with a dilemma. Two competing stores next to each other carry the same brand coat with the same list price, but with two different discount offers. Store A offers a 10% discount year round on all its goods, but on this particular day offers an additional 20% on topof its already discounted price. Store B simply offers a discount of 30% on that day in order to stay competitive. How many percentage points difference is there between the two options open to Lisa? Which one should she go for?

Discussion

Assume the cost of the coat to be 100,calculate the 10% discount,yielding 90 as the price,and an additional 20% on 90 (or 18) will bring the price down to 72. In store B, the 30% discount on 100 would bring the price down to 70,giving a discount difference of 2,which will be 2%.

Correct procedure. But came across another insightful way :

Here is a mechanical method for obtaining a single percentage discount equivalent to two (or more) successive discounts.

1. Change each of the percentages involved into decimal form: .20 and .10.
2. Subtract each of these decimals from 1.00: .80 and .90
3. Multiply these differences: .8 * .9 = .72

4. Subtract back from 1.00: 1.00-.72 = .28

5. Convert it back to percentage i.e 28%

So the store A's successive discounts of 20% and 10% is actually a cumulative discount of 28%. The store B's discount is 30%. The difference again as proven earlier is 2%.

This procedure not only streamlines a typically cumbersome situation,  but also provides some insight into the overall picture. For example,the question "Is it advantageous to the buyer in the above problem to receive a 20% discount and then a 10% discount,or the reverse,a 10% discount and then a 20% discount?". Since the procedure shown above clearly indicates that the calculation is merely multiplication, a commutative operation, we can immediately tell that there is no difference between the two. 

Rich Internet Applications (RIA)

I am a strong proponent of having a nice user interface, since it is the first thing the end users see about your product. I feel that we must have a strong understanding on the importance and effectiveness of a user-experience that enables our consumers/customers/users to perform their tasks with applications that are not only useful, but usable and desirable. In my opinion the same, if not more amount of time MUST be spent on designing the UI of your application, as the backend. So as the web has evolved over the past few years a lot of importance is being given to rich and responsive user interfaces. So essentially what I am talking about is the world of Rich Internet Applications (RIA) and that is the topic of today's blog.

In my previous blog entries I talked about using the Google Web Toolkit modules in your portlet projects. GWT comes with a very capable rich set of user interface widgets and you can add responsiveness to your application by AJAX enabling them. GWT provides you AJAX functionality by writing absolutely 0 JavaScript code. You write your code in Java, and the GWT toolkit comes with a compiler which compiles your java code to JavaScript. Now that was cool!

What is a RIA?

Let us understand using an analogy. My car insurance had expired and I called up the insurance company to find out how I could pay the renewal premium. I was very happy when I was told that they had an online payment facility wherein I could just fill in my details and renew my policy. So i started the process, I was taken through a set of
4 pages, at each stage asking me to fill in details and then pressing the next button to go to the next page. Each refresh taking some time, I couldn't go to the next page till I completed what I was asked for on the current page.

It asked me stuff like my VIN number, License Number etc, which I didn't have handy at that moment. What I would have really liked is to go through all the pages finishing the entries for which I had answers at the moment and then go back and fill up all the "hard" ones. ;-) But tough luck there. There are other issues with typical web interfaces, losing data due to back navigation or re-POST of data, losing data due to session timeouts etc etc. These are all problems being caused due to technical limitations of the 'typical' web.

RIA typically tries to solve this problem from the end user's perspective. Rich Internet Applications replace these multi-step, complex processes with simpler, easier, more effective singlescreen or guided-completion processes.

As I am talking about rich internet user interfaces, another one I had been wanting to try my hands for a long time was Macromedia's Flex and ActionScript. Ofcourse, now it is Adobe Flex after the acquisition but I was and still am impressed with Macromedia. That was one great company with some amazing products. With the version 2.0 of Flex now available and lots of new cool stuff added, I thought of giving it a try. For begining your Flex journey all you need is

• Eclipse


• Flex Builder 30 day trial which can be downloaded from Adobe.

Flex Builder installs as a plugin for Eclipse and hence the need for Eclipse. The Flex Builder provides you with a Flex Development , Flex Debug perspective and a Visual Designer for building Flex Applications. Ofcourse there is the Flex compiler which will compile your Flex application from within the IDE.

As an alternate you can also download the Flex SDK and use that to compile your Flex Applications, but you won't get the many benefits of using an IDE... Choice is yours.

I have worked a lot with Macromedia ColdFusion (Adobe now!) earlier and being a ColdFusion developer I know how powerful rapid development can be and how much of a difference that makes when building dynamic Web applications. That is exactly what Flex brings to you for developing user interfaces for the Web. Really nice looking widgets and containers, very easy to build using the Flex Builder, pretty much drag and drop.

I don't know about you, but I am off to building my Flex Application!

Google Web Toolkit (GWT) modules as Portlets In the Open Source Portlet Container

For developing GWT modules and creating web applications from these module projects see this entry from my blog.

There are so many of these GWT modules out there, and being involved in portal technologies, what I wanted to do is, see if I can convert those modules to portlets and have them work on my portal server. I wanted to get this done, and so I dived into it equipped with the following tools.

• GWT toolkit


• Portalpack Plugin for Eclipse ( Since I used Eclipse, if you use Netbeans you can use the Netbeans Portal Pack )


• Open Source Portlet Container.This comes with a lightweight 'driver' which emulates a very basic portal.

With the above tools in my toolkit, I was prepared to convert my sample GWT LiveSearch Module into a JSR-168 Portlet. I talked about the sample LiveSearch in my previous blog entry

How it works?

When you create a new GWT module, the entry point to that module is defined in the GWT module definition file. For the example LiveSearch module that I described in the previous blog it is in the file LiveSearchPanel.gwt.xml and is as follows:

<entry-point class='com.sun.portal.gwt.poc.client.LiveSearchPanel'/>

The above class com.sun.portal.gwt.poc.client.LiveSearchPanel will be the one that will setup the UI in its onModuleLoad() method. In this method one typically gets a handle to the RootPanel and then adds GWT UI widgets to this panel. The RootPanel is retrieved by making a call to RootPanel.get() function. The interesting part is, that the get() method is overloaded and takes a String parameter. This String parameter needs to be a DIV ID, which needs to be defined in the page hosting this GWT module. The UI that you define in the entry point class for the module then gets placed under this DIV.

So we will setup the view of our GWT portlet to have a unique DIV ID in its view mode HTML. We will modify the GWT entry point class to add the UI under this unique DIV ID.

Having known that, this is how we proceed.

1. Create a Portlet Web Application Project project and add a portlet to this project. You can use the Eclipse Portalpack or the Netbeans Portalpack to achieve this.


2. If you followed my previous blog entry and ran the make-war-from-gwt.xml ant build file to generate a web application project then you should have a "dist" folder under your module project directory. Copy the contents of this directory (dist) to your portlet projects web source directory. If you used Eclipse PortalPack this would be a directory called "web" under your project root.


3. In your portlet class'es doView() method, have a simple RequestDispatcher call to include the view JSP page. So if your view.jsp is the view page the doView() method would be like :
   

   
   

   
   

   
   

   PortletRequestDispatcher dispatcher = context.getRequestDispatcher("/view.jsp");
   try {
      dispatcher.include(portletRequest, portletResponse);
   } catch (IOException e) {
      e.printStackTrace();
   }
   

   
   

   
   

   
   

   
   

   The view.jsp looks like this. Note the DIV ID we defined here, this is where we want the GWT to put the UI we built in the com.sun.portal.gwt.poc.client.LiveSearchPanel class. This was explained above.

   
   

    <meta name='gwt:module' content='/TestPortlet/com.sun.portal.gwt.poc.LiveSearchPanel'/>
    <div id="TEST_PORTLET_DIV"> </div>

   
   

   
   


4. 
   Lastly, the glue that holds the whole thing together is the gwt.js file that was generated by the LiveSearchPanel-compile.cmd (see previous blog entry) and can be found in the www directory of the module project. This file is common across all the GWT modules and contains code that loads the GWT modules from your view.jsp file. Typically you want this gwt.js file to be accessible to all the GWT portlets that are there on your portal. So you can make this gwt.js file a part of the portal. For our case I am using the Open Source Portlet Container, and I will add a reference to the gwt.js file in the desktop.jsp file of the Open Source Portlet Container Driver(OSPC) . If you deployed the OSPC on Glassfish in the default domain (domain1) on Windows then you can find the OSPC Driver desktop.jsp under GLASSFISH_HOME\domains\domain1\applications\j2ee-modules\portletdriver.



Remember that the call to gwt.js file needs to be made after all the GWT modules are defined using the <meta> tags as shown in point 3 above. desktop.jsp iterates over all the portets and many of them could be GWT portlets ( I hope after reading this article ;-) ) so you need to make a call to gwt.js right at the end of calls to all these portlets. So, copy the gwt.js file into the portletdriver directory at GLASSFISH_HOME\domains\domain1\applications\j2ee-modules\portletdriver and add the following line to the end of desktop.jsp right above the </body> tag.




<script language="javascript" src="gwt.js"></script>




This will make sure that the OSPC Portlet driver will call into gwt.js after all the module definitions are loaded via their appropriate view.jsp files.




I have shown the method to add gwt.js file a part of the OSPC so that there is only one copy of this file and is accessible to all portlets. You can leave this gwt.js file in each GWT module WAR also, but in that case you will have to add the appropriate URL to call into the gwt.js from your view.jsp file. Be aware that this will make you have multiple copies of thie gwt.js file, one in each GWT module exposed as a portlet and being loaded from different URL's.




That's it. Build the WAR file for the portlet project and deploy it on your Open Source Porltet Container and you have the same GWT module that I showed in my previous blog exposed as a portlet application.

The steps I showed are for the OSPC but can be very easily adapted to any portal server in general.

Google Web Toolkit modules as Web Applications

Recently I tried using the Google Web Toolkit for leverging its rich client widgets and AJAX functionality. I use Eclipse a lot and luckily GWT comes with builtin support for creating Eclipse projects supporting GWT. I created the Eclipse project using the GWT command line utilities in a jiffy and imported it into Eclipse easily. Reading the documentation on GWT I was able to start coding my application immediately.

 I quickly put together a sample LiveSearch GWT module. This module, will present the users with a search text field, and will detect the users keypress events, and will asynchronously send the keystrokes to the server using the GWT framework. The server side code, will perform the search on these keystrokes and send the search results back to the client (browser). So you instantly see the search results without any page refreshes ( that is AJAX and you don't write any JavaScript, it is taken care for you by the GWT). Very cool indeed!.

In the first part of this blog entry I will show you how easy it is to develop the GWT module using the GWT toolkit. GWT Toolkit comes with an embedded browser and a light tomcat container on which you can test and debug your GWT module. I will talk about how to convert this GWT module app into a web application that you can deploy on a web container.

First step is to download and install the GWT.

Suppose the GWT is installed in GWT_HOME.

• GWT_HOME\projectCreator.cmd -out LiveSearch -eclipse LiveSearch
  
  This will create a directory called LiveSearch ( -out parameter ) and in this directory will create an Eclipse Project called LiveSearch ( -eclipse parameter ).


• GWT_HOME\applicationCreator.cmd -out LiveSearch -eclipse LiveSearch com.sun.portal.gwt.poc.client.LiveSearchPanel
  
  The above command will create the directory structure for GWT application module called com.sun.portal.gwt.poc.client.LiveSearchPanel in the directory called LiveSearch ( -out parameter ) and create a skeletal GWT module.


• Go ahead and create the GWT module and remote service as needed.


• Once you write your module code and write the remote service code, you can compile your application using the LiveSearchPanel-compile.cmd script and launch the module using the LiveSearchPanel-shell.cmd. Both these scripts are created by the applicationCreator.cmd script we ran in the steps above.


• Source code for this sample LiveSearch is available here.

What follows now are steps to convert this to a Web Application. I have included a ANT build file ( make-war-from-gwt.xml ) in the source code download which will convert the module into a Web Application and will allow you to deploy it to a Web Container. It includes a sample-web.xml in the root folder. The make-war-from-gwt.xml and the sample-web.xml should be pretty much usable across all the GWT modules you write and want to use them as a web applications. Just tweak the entries in these files as per needs of your new module. The entries needing modications are marked by appropriate comments.

 Now that we know how to write a GWT module and build a WAR file from it, we can easily deploy the module to a web container.