Futurescale, Inc. PureMVC Home

The PureMVC Framework Code at the Speed of Thought


Over 10 years of community discussion and knowledge are maintained here as a read-only archive.

New discussions should be taken up in issues on the appropriate projects at https://github.com/PureMVC

Pages: [1]
Print
Author Topic: ReverseText - A PureMVC JS Demo  (Read 12968 times)
puremvc
Global Moderator
Hero Member
*****
Posts: 2871



View Profile WWW Email
« on: February 25, 2012, 06:33:35 »

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.
« Last Edit: July 30, 2012, 05:00:42 by puremvc » Logged
zermattchris
Full Member
***
Posts: 35


View Profile Email
« Reply #1 on: February 27, 2012, 06:31:15 »

Thanks to all of those involved. Really looking forward to using this in our current project  :)
-Chris
Logged
saad
Sr. Member
****
Posts: 65


View Profile Email
« Reply #2 on: April 09, 2012, 02:23:29 »

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
Logged
puremvc
Global Moderator
Hero Member
*****
Posts: 2871



View Profile WWW Email
« Reply #3 on: April 09, 2012, 07:15:39 »

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>
« Last Edit: April 09, 2012, 07:17:13 by puremvc » Logged
saad
Sr. Member
****
Posts: 65


View Profile Email
« Reply #4 on: April 09, 2012, 09:20:07 »

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?
« Last Edit: April 09, 2012, 09:24:24 by saad » Logged
puremvc
Global Moderator
Hero Member
*****
Posts: 2871



View Profile WWW Email
« Reply #5 on: April 09, 2012, 11:58:37 »

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.
Logged
saad
Sr. Member
****
Posts: 65


View Profile Email
« Reply #6 on: April 09, 2012, 11:11:02 »

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();
                });   
            }

Logged
puremvc
Global Moderator
Hero Member
*****
Posts: 2871



View Profile WWW Email
« Reply #7 on: April 10, 2012, 07:42:02 »

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

Cheers,
-=Cliff>
Logged
Pages: [1]
Print