Hello Alex, my example uses QxBuilder and the qooxdoo data manager extension:
http://qooxdoo.org/documentation/developer/phpqxbuilder_and_data_manager_extensions which can be used without PHP QxBuilder (You can use the slower client-side QxBuilder instead). If you look at the source code of http://m15s08.vlinux.de/~cboulanger/QxBuilder/tests/login.php you can see that it is plain javascript that PHP QxBuilder produces, which you can code by hand also. I plan to write more documentation, but at the moment you need to look at the javascript source code to see how it is done. The data manager extensions takes care of many problems you have listed, although you can also solve them with native qooxdoo methods. > - How can i fill and get Values out of Elements (no big task). if you have any form element attached to the datamanager, you can set and get its value by doing var tf = new QxTextField(); tf.set({dataManager:myDataManager,name:"myTextField"}); dataManager.getChildElement("myTextField").setLocalValue("My new text"); dataManager.getChildElement("myTextField").getLocalValue(); or, natively, tf.getValue(); tf.setValue("My new text"); the "[s|g]etLocalValue" functions were introduced to provide a uniform interface for all widgets (which have "value", "html", "label", "caption" etc. etc. getter/setter properties). > - How can i set proper focusing even when the User press the Enterkey and > Password/Username is not entered (more complex). you can attach event listeners to your textfields. // untested code which might contain errors.. tf.addEventListener("keydown", function(e){ if ( e.getKeyCode() == 13 ) { myOtherTextfield.setFocused(true); // or: MySubmitFuntion(); }; return true; }, tf ); > - How can i set the focus on load (trial and error solution). attach an "appear" event to your textfield // untested code which might contain errors.. tf.addEventListener("appear", function(e){ this.setFocused(true); }, tf); > - How do i press the Login-Button programaticaly when Username and Password is provided and one press the Enterkey. see above > is such funcionality available in QXML and does it work out of the box or > do you need PHPQxBuilder (unfortunately i use asp.net, though managing controls via XML would be way more comfortable)? As I said, you can use plain old javascript for any of these functionalities, or use the client-side QxBuilder (I haven't tested it lately, though). It is lacking documentation, but the documentation referred to above covers the basics. Cheers, Christian > -----Ursprüngliche Nachricht----- > Von: [EMAIL PROTECTED] > [mailto:[EMAIL PROTECTED] Im Auftrag von Christian Boulanger > Gesendet: Samstag, 5. August 2006 14:18 > An: qooxdoo Development > Betreff: Re: [qooxdoo-devel] Small Loginbox-Example > > If you're interested, you can find a similar login-box in QXML here: > > http://m15s08.vlinux.de/~cboulanger/QxBuilder/tests/login.php > > Cheers, > Christian > > Alexander Braitschev schrieb: >> Hi List, >> as i'm also new with qooxdoo and have had a hard time exploring how to use it and getting things running (the best thing around, i've tested most of them, congratulations). >> Though browsing through the Mailinglistarchives, the api and the sources took long enough i want to contribute my insights as a small working snippet to all starters. I just registered myself at the Wiki but im not sure wether this example is good enough for the Page (it works but is everything done as it has been meant to be done in qooxdoo?). >> It shows generation and combining of Objects, handling some events, interacting with objects, fire events and even the "set first focus on load" problem is solved. Just some things one could use for starting off (i wish i had some sort of this even the demos/tests are showing many aspects). >> Please review the code and post your thoughts about wether stuff can be done better or if its good enough to post it on the Wiki. There's way more code at my final playground (serverinteraction, updating of fieldgrids after getting xmldata) but that could be another step to contribute later on. >> Sample expects to be loaded in an working qooxdoo-html-environment (0.5.2/0.5.3). >> Cheers, >> Alex >> ---------------------------------------------------------------------- -- >> window.application.main = function() { >> // getting document to be able to add elements >> var d = this.getClientWindow().getClientDocument(); >> // define a QxCanvasLayout which holds all clients (so you can >> set the >> box to any place) >> var loginBox = new QxCanvasLayout(); >> loginBox.setBorder(QxBorder.presets.black); >> loginBox.set({ width: 200, height: 140, top: 10, left: 10}); >> loginBox.setBackgroundColor("#474747"); >> // define username inputfield >> var userName = new QxTextField(); >> userName.set({ width: 150, top: 30, left: 25}); >> userName.setValue(""); >> // define password inputfield >> var userPass = new QxPasswordField(); >> userPass.set({ width: 150, top: 60, left: 25}); >> userPass.setValue(""); >> // define statusfield >> var loginStatus = new QxAtom(""); >> loginStatus.set({ top: 95, left: 25, color: "#ff0000" }); >> // define loginbutton >> var loginButton = new QxButton("Login"); >> loginButton.set({ width: 50, top: 90, right: 23}); >> // --------- EVENTHANDLING >> // add eventhandling for enterkey >> userName.addEventListener("keyup", function(e) { >> if (e.getKeyCode() == QxKeyEvent.keys.enter) { >> // we need focus on the loginbutton for >> focusing either the >> username/password field from the event >> loginButton.focus(); >> loginButton.dispatchEvent(new >> QxEvent("execute",loginButton)); >> } >> }); >> userPass.addEventListener("keyup", function(e) { >> if (e.getKeyCode() == QxKeyEvent.keys.enter) { >> // we need focus on the loginbutton for >> focusing either the >> username/password field from the event >> loginButton.focus(); >> loginButton.dispatchEvent(new >> QxEvent("execute",loginButton)); >> } >> }); >> // add eventhandling for loginbutton >> loginButton.addEventListener("execute",function(e) { >> // as on new submit clear resultatom >> loginStatus.setLabel(""); >> //if values are not empty do request to server >> if (userName.getValue() != "" && userPass.getValue() != >> "") { >> // user+pass provided - do validatingstuff >> (don't trust the client) >> or preferabily send to server >> alert("User/Pass not empty! Sending to >> Server..."+userName.getValue()+"/"+userPass.getValue()); >> // only for demo purposes, don't validate on >> clientside! >> if (userName.getValue() == "admin" && >> userPass.getValue() == "pass") >> { >> // set label of QxAtom to succeed or do >> other stuff >> loginStatus.setLabel("Login Succeed!"); >> loginStatus.set({ color: "#00ff00" }); >> } else { >> // set label of QxAtom to failed, clear >> textfields and focus on >> username >> loginStatus.setLabel("<strong>Login >> Failed</strong>"); >> loginStatus.set({ color: "#ff0000" }); >> userName.setValue(""); >> userPass.setValue(""); >> userName.focus(); >> // update screen immediately >> QxWidget.flushGlobalQueues(); >> }; >> } else { >> // values empty, focus first on username, then >> on passwordfield if (userName.getValue() == "") { >> userName.focus(); >> loginStatus.setLabel("Provide >> Username"); >> loginStatus.set({ color: "#ffffff" }); >> } else { >> userPass.focus(); >> loginStatus.setLabel("Provide >> Password"); >> loginStatus.set({ color: "#ffffff" }); >> } >> } >> }); >> // now add controls to loginbox, add loginbox to document >> loginBox.add(userName,userPass,loginButton,loginStatus); >> d.add(loginBox); >> }; >> window.application.post = function () { >> //set focus to first widget (in our case the username) after >> Domcreation >> var d = >> window.application.getClientWindow().getClientDocument(); d.getFocusManager().getFirstWidget(d).focus(); >> } >> ---------------------------------------------------------------------- -- >> ---------------------------------------------------------------------- --- Take Surveys. Earn Cash. Influence the Future of IT Join >> SourceForge.net's Techsay panel and you'll get the chance to share your opinions on IT & business topics through brief surveys -- and earn cash >> http://www.techsay.com/default.php?page=join.php&p=sourceforge&CID=DEV DEV >> ---------------------------------------------------------------------- -- >> _______________________________________________ >> qooxdoo-devel mailing list >> [email protected] >> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel > > > ------------------------------------------------------------------------- Take Surveys. Earn Cash. Influence the Future of IT Join SourceForge.net's > Techsay panel and you'll get the chance to share your opinions on IT & business topics through brief surveys -- and earn cash > http://www.techsay.com/default.php?page=join.php&p=sourceforge&CID=DEVDEV _______________________________________________ > qooxdoo-devel mailing list > [email protected] > https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel > > ------------------------------------------------------------------------- Take Surveys. Earn Cash. Influence the Future of IT > Join SourceForge.net's Techsay panel and you'll get the chance to share your > opinions on IT & business topics through brief surveys -- and earn cash http://www.techsay.com/default.php?page=join.php&p=sourceforge&CID=DEVDEV _______________________________________________ > qooxdoo-devel mailing list > [email protected] > https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel > ------------------------------------------------------------------------- Take Surveys. Earn Cash. Influence the Future of IT Join SourceForge.net's Techsay panel and you'll get the chance to share your opinions on IT & business topics through brief surveys -- and earn cash http://www.techsay.com/default.php?page=join.php&p=sourceforge&CID=DEVDEV _______________________________________________ qooxdoo-devel mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
