ReverseText - A PureMVC JS Demo

[puremvc]

This demo shows the most common actors and collaborations found in a PureMVC application. A simple form allows you to enter text, click a button and have the text reversed and displayed in another text box. A check box allows you to have your text reversed continuously as you type. Finally, when the text in the input box is the same as the text after reversal, the output text box's label changes to indicate that a palindrome was detected.

Demonstrated are how to...
  

• Use puremvc.define() to create pseudo-classes.
• Use a Facade to initialize and startup a PureMVC core.
• Prepare the Model, View, and Controller regions of the PureMVC core using a MacroCommand and SimpleCommands.
• Use a Mediator to forward user input from view components on to other parts of a PureMVC core for processing.
• Use business logic in a SimpleCommand that both updates data in a Proxy and conditionally notifies a Mediator with information about the process.
• Store data in a Proxy, and have the Proxy notify the rest of the core when that data is changed.
• Have a Mediator show interest in certain Notifications and handle them by updating its view component.

Internet Explorer is not supported by this demo. In order to bring you a demo that shows only PureMVC and the DOM with no other interference or abstractions, we decided to support only on W3C compliant browsers.

Twitter's Bootstrap is used only for its Base CSS, to make it look pretty.

The demo has historically been located at http://trac.puremvc.org/Demo_JS_ReverseText
It has now been moved to https://github.com/PureMVC/puremvc-js-demo-reversetext/wiki

The authors are David Foley and Cliff Hall.

[zermattchris]

Thanks to all of those involved. Really looking forward to using this in our current project 
-Chris

[saad]

Hi Guys:

Thanks for the demo, it works fine on major browsers but not working in Camino 2.1.2 (MAC), Any suggestions to work this out.

Thanks,
Saad

[puremvc]

My  guess is it has something to do with the bootstrap.css that is used. The JavaScript is all very plain vanilla. I don't have a Mac I can test this on. If you want to try and get it going on Camino, I'd try removing that CSS and any references to its class selectors in the HTML.

-=Cliff>

[saad]

Hi Cliff,

I agree it's simple plain javascript, Inside Camino the problem actually lies in DOMContentLoaded event, otherwise it's working fine in other browsers.

           if(document.addEventListener){
                alert('executes')
                document.addEventListener('DOMContentLoaded', function(){
                    alert("does not execute");
                    ApplicationFacade.getInstance(ApplicationFacade.NAME).startup();
                });
            }

Any other event I can use to test for Camino?

[puremvc]

I'm not sure about Camino, you'll have to do a little research there.

The same reasons we decided to ignore IE in this demo apply. We wanted the demo to be as clear and simple as possible at the cost of not having maximum browser coverage. So we don't test for non-standard browser environments.

[saad]

I understand your point, simplicity is the key to understanding at first,

I was testing across all browsers, a customized implementation of javascript framework, didn't change a bit on the framework itself but added a layer (UIComponent class to be inherited by all view components with event dispatcher functions plus others) on the view side to handle the browser differences, and facilitate the communication between view and it's mediator, and it works in IE too but not for Camino. I'm researching on it, will updated if I come across for a solution.

            if(document.addEventListener){
                document.addEventListener('DOMContentLoaded', function(){
                    ApplicationFacade.getInstance(ApplicationFacade.NAME).startup();
                });
            } else if(window.attachEvent) { //IE
                window.attachEvent('onload', function(){
                    ApplicationFacade.getInstance(ApplicationFacade.NAME).startup();
                });   
            }

[puremvc]

Yeah, now you're talking. If you get that working, we should think about adding it as a utility.

Cheers,
-=Cliff>