Designing an ExtJS user login panel

  • 33,048 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
33,048
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
687
Comments
8
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. A simplified guide By NithyaVidhyaarthi
  • 2. Purpose & Pre-requisites
    • This tutorial is intended to help developers who would like to take up ExtJS as their major tool for web application development.
    • This tutorial uses Ext 3.3.0 version for visual clarifications. While most contents are still appropriate, it is strongly suggested for the observer to pay attention to the “changes.html” bundled with every release to cross-verify new updates/ deprecation(s) if any.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 3. Author notes…
    • Hi there, we now begin with designing a user login panel with ExtJS. Through out this lesson, I’d delivered much like, I sit beside you in your living room and we jointly design the login panel.
    • I also make an assumption that, you have the idea of configuring ExtJs in your application. In case if you don’t, kindly take a look at “Beginning ExtJs with ASP.NET – Part two”, for gaining the basics with ExtJS.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 4. Our Roadmap
    • Create a form element.
    • Create three controls (2 input fields & a button).
    • Validations: fields should not be left blank, minimum of three characters and a maximum of thirty characters.
    • Provide intimation using tooltips when validations are violated.
    • The authentication process should begin only if the above regulations are observed.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 5. Points to remember…
    • Ext coding should be within the Ext.onReady() function.
    • Ext coding uses "name : value" approach extensively.
    • A collection of these can be called as configuration (or) config (or) config objects (or) config elements.
    • Config objects can be nested.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 6. Setting the basic platform…
    • Launch the Visual Studio 2008 IDE and add the ExtJS core files.
    • Add a page named “Loginpage.aspx”.
    • Within the “Scripts” folder, add a js file named “loginpage.js”.
    • Tip: Though its not mandatory to have identical names for aspx page and js file, following this can be a better option when the project volume grows.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 7. Designing text box with Ext 10 - April - 2011 Designing a User-login panel with ExtJS
  • 8. How to define a textbox in ExtJS? TIPS 10 - April - 2011 Designing a User-login panel with ExtJS
  • 9. Coding the first step…
    • Lets have a look at code of user name field first.
    xtype: 'textfield' , fieldLabel: 'User name' , width: 150 , id: 'txtUserName' , allowBlank:false , minLength:3 , maxLength: 30
    • fieldLabel: Specifies the text that appears to the left of the textbox.
    • width & id are self-explanatory.
    • allowBlank: Instructs Ext that this control should not be left blank .
    • minLength: Specifies the minimum no of chars to be filled in.
    • maxLength: Specifies the max no of chars allowed.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 10. Designing the password field
    • Lets have a look at code of user name field first.
    xtype: 'textfield‘ , fieldLabel: ‘Password' , inputType: 'password‘ , width: 150 , id: 'txtUserName' , allowBlank:false , minLength:3 , maxLength: 30
    • inputType: Specifies the text should be interpreted as password.
    • Note: Other than this property, rest of properties are the same like any textfield.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 11. Creating a form.
    • Now lets create a form panel. This would be a bit different from defining a control. Lets create a variable named "myform" .
    • It is to the items config, we need the place the controls
    var myform = new Ext.form.FormPanel({ width:400 , height: 250 , renderTo: document.body , items:[] /* this is an empty items collection. */ }); 10 - April - 2011 Designing a User-login panel with ExtJS
  • 12. Form + Textbox
    • Add the textbox to the items config. Kindly note the opening curly braces enclosing the control.
    • Each control would be enclosed within curly brackets.
    • var myform = new Ext.form.FormPanel({
    • width:400
    • , height: 250
    • , renderTo: document.body
    • , items:[ {
      • xtype: 'textfield'
      • , fieldLabel: 'Password'
      • , width: 150
      • , id: 'txtPassword'
      • , inputType: 'password'
      • , allowBlank:false
      • , minLength:3
      • , maxLength: 30
    • } ]
    • });
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 13. Additional Info…
    • Brackets define the boundary between controls, or they isolate the items from neighboring controls.
    • Note the “renderTo” property. It instructs Ext as where the display the form.
    • In our example, we had rendered it to the document body. We can render the form to any “div” element, by specifying the “id” of div.
    • Example: <div id=“divFormContainer”></div>
    • In Ext – renderTo: ‘divFormContainer’
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 14. Additional Info
    • Only one items collection can exists at a single root level.
    var myform = new Ext.form.FormPanel({ width:400 , height: 250 , renderTo: document.body , items:[] /* this is an empty items collection. */ , items:[] /* this cannot exist */ }); 10 - April - 2011 Designing a User-login panel with ExtJS
  • 15. Additional Info
    • However, items collection can exists at different levels.
    var myform = new Ext.form.FormPanel({ width:400 , items:[{ items:[{ /* this nesting is permitted */ }] , items:[{ /* this is not permitted, because */ }] /* it is nesting at same level */ }] }); 10 - April - 2011 Designing a User-login panel with ExtJS
  • 16. Other Observations…
    • Camel-Casing is followed most extensively through out Ext.
    • e.g. : minLength:
      • firstLetter in lowercase, and the first letter of second word in Caps.
            • This is a part of coding standards followed almost universally. It is not that one over-weighs the other, but following a uniform method, makes the going smooth in long run.
            • Camel Casing, Pascal casing are to name a few.
    INFO 10 - April - 2011 Designing a User-login panel with ExtJS
  • 17. Building the form further…
    • Now lets add the password field:
    • var myform = new Ext.form.FormPanel({
    • width:400 , height: 250
    • , renderTo: document.body
    • , items:[ {
    • xtype: 'textfield', fieldLabel: 'User name’, width: 150, id: 'txtUserName', allowBlank:false, minLength:3, maxLength: 30
    • } , { / * Mind the curly braces, the second control is appended with first */
    • xtype: 'textfield', fieldLabel: 'Password’, id: 'txtPassword', inputType: 'password’, allowBlank:false, minLength:3, maxLength: 30 , width: 150
    • } ]
    • });
    • Now lets run the form
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 18. First look at screen…
    • Pretty simple, huh! Lets style it a bit…
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 19. Styling the form a bit…
    • Lets add a title and give it a good background, add the properties title & frame
    • var myform = new Ext.form.FormPanel({
    • /* rest of config remains the same */
      • , renderTo: document.body
      • , title : 'User Login : XYZ Solutions Login Portal‘
      • , frame :true
    • }); //Now run the form again…
    • document.body can also be replaced by Ext.getBody()
    INFO 10 - April - 2011 Designing a User-login panel with ExtJS
  • 20. The styled login form.
    • Hmm… better than before… 
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 21. A close look…
    • Title appears here.
    • frame : true causes the blue background and the curved edges.
    Try it yourself: Try changing the frame value (between true & false) , refresh the screen & observe the changes yourself. 10 - April - 2011 Designing a User-login panel with ExtJS
  • 22. What about the button?
    • Yes of-course. For placing the button we have two choice.
      • Option 1: To add the button along with existing controls.
        • The button would appear below the last control.
      • Option 2: To add at the bottom of FormPanel.
        • The button would appear just above the end of form.
    • Lets prefer Option 2.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 23. Code to button
    • var myform = new Ext.form.FormPanel({
    • width:400
    • , frame:true
    • /* rest of code remains the same */
    • , buttonAlign: 'center' /* default is 'right', another option is 'left' */
    • , buttons: [{text:'Login'},{text:'Reset'}]
    • });
    • Add the yellow highlighted code at the bottom and refresh the screen.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 24. And, here we go… 10 - April - 2011 Designing a User-login panel with ExtJS
  • 25. Observance
    • A close observation would reveal you that, the controls specified in the items collection appear one below the other .
    • But, the buttons appear left to right . This is the nature of “group controls”. Lets return to this a bit later.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 26. Planning the second phase…
    • Well, now that we had designed the form, and the form is complete in its visual appearance.
    • Next is user-interaction, i.e., performing the form validation and proceeding with mock user authentication once the form is valid.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 27. Validation criteria, & process.
    • We, already had defined the validation criteria to the input fields, (allowBlank, minLength, maxLength).
    • Now they need to checked.
    • Ext, by default, checks the control’s validity during the blur (lost focus) event.
    • Try it yourself: Refresh the form, click upon the user name field, and click anywhere outside the form. You would see, as in the next screen.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 28. The ExtJS default validation
    • Ext indicates, the control with invalid state, with the rose-background and with red squiggly line.
    • Note: The rose background might be visible/hidden depending upon browser & browser versions, Ext versions, Ext Themes used.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 29. Ok fine, but where’s tooltip?
    • Well, now that the end-user can identify that the form contains some invalid data or at least in an invalid state.
    • But the user has no idea about what caused the form to be invalid and he/she can be totally clue less about what is happening.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 30. Coding the tooltip…
    • Ext.QuickTips.init();
    • Ext.form.Field.prototype.msgTarget = 'side';
    The first line enables displaying the tooltips, the second line instructs that the error message to be displayed at the right of the “invalid-stated” control. Add these lines of code above the Ext.onReady() line. Now again, lets run the form, and manually cause the blur event for the username field. 10 - April - 2011 Designing a User-login panel with ExtJS
  • 31. Having a look at tooltip…
    • What we see here, is the default text shown when the “allowBlank” property is violated.
    • To customize the default text, use the property “ blankText ”.
    • Yeah, but we can’t really see the cursor here…
    • Try it yourself: Add this code to the textbox, and check the output.
    • blankText: ‘User name field is mandatory’ (or) your custom text here..
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 32. Other validations and text…
    • Likewise try for the “maxLength” and “minLength”. To customize the message, use the “ maxLengthText ” and “ minLengthText ” respectively.
    • These validations are applicable for all textfields. Combo, time fields have their own validations & validation texts, apart from common validations like “allowBlank”, minLength etc.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 33. Firing the validation at our will
    • So far, we had tested the validation during the blur event, and the validation occurs only for a single control at a time.
    • Now we need the fire the validation process for the entire form (which then includes all controls within the form) at our will (that’s to say, at the click of button).
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 34. Firing the validation at our will
    • In our form, we had already set up all validation criteria to both input fields.
    • Ext has a method named “isValid()”. This method is available to individual controls and also for the form.
    • Now checking the validity for the form, will internally check all validations within the contained elements and then return “true” or “false” value based on the validity of the controls.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 35. Coding the form validation
    • Remember the variable “ myform ” we declared earlier?
    • We gotta fire the isValid() for this form variable.
    • Add this function within the Ext.onReady block, not external to it.
    • function CheckValid()
    • {
      • if ( myform.getForm(). isValid() == true){
        • /* form is valid. We can proceed with authencation */
      • }
      • else{
        • /* form contains invalid values . Now error message placeholders would be shown immediately right to the invalid controls. When hovered, would show the tooltips.*/
      • }
    • }
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 36. Wiring form validation & button TIP 10 - April - 2011 Designing a User-login panel with ExtJS
  • 37. Handlers and Listeners
    • There are occasion where we need to fire methods on events. In Ext, we need to use the config “listeners” to listen to events and fire appropriately.
    • Syntax: listeners:{eventName: YourMethodName}
    • Example: listeners:{click: CheckValid}
    • handler wires the default event with the control.
    • For example., the default event for button is click event.
    • In such cases, listeners:{click: CheckValid} = handler: CheckValid. i.e., they are identical and mean one and the same.
    • For more info upon the events available for controls, kindly refer the ExtJS documentation.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 38. What a listener does?
    • Ext listeners keeps vigil upon the specified event for the associated control (e.g., keypress for textfield), it immediately fires the associated method, with default parameters.
    • Do not specify the brackets for the method names.
      • E.g., handler : CheckValid
            • Alternatively we can also specify inline function .
            • E.g., handler: function(){ /* lines of code here*/ }
    TIP 10 - April - 2011 Designing a User-login panel with ExtJS
  • 39. Linked listeners
    • For some controls & cases, there are pre-listeners, post listeners.
    • The sequence goes like so
        • Before event – Event – After event
    • Example:
            • beforerender – render – afterrender
      • You can prevent/disable the successive events by returning false from the previous event.
      • e.g., by returning “false” in beforerender, we can prevent the render event from firing, and same goes with render - afterrender.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 40. Clarification INFO 10 - April - 2011 Designing a User-login panel with ExtJS
  • 41. Reading the values… TIPS 10 - April - 2011 Designing a User-login panel with ExtJS
  • 42. Beginning authentication…
    • Now that we had seen how we can read value from Ext controls, lets code the authentication part. Lets continue with the previous method “CheckValid()” , within the true block.
      • var userName = Ext.getCmp(‘txtUserName’).getValue();
      • var pswd = Ext.getCmp(‘txtPassword’).getValue();
      • if(userName == ‘ExtJS’ && pswd == ‘excellent’){
        • Ext.MessageBox.show({title: ‘Hurray’, msg: ‘You had scaled the first step in Ext’, icon:Ext.MessageBox.INFO});
      • }
      • else{
        • Ext.MessageBox.show({title: ‘Gosh!!!’, msg: ‘You need help’, icon:Ext.MessageBox.WARNING});
      • }
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 43. Final destination…
    • So well so far, all that is to be done is to launch the application in browser.
    • Once the Ext message box is displayed (that within the true block of course) , we can be sure that we had achieved our estimated target.
    • For now, I leave it to you to see the output by yourself.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 44. Past & Present
    • I had concentrated much upon the designing and had thrown light upon comparatively less “other related info”. The reason being, this is vast enough to deviate from original track and I might end up discussing too lot and this tutorial would end up as a beginners nightmare. There by I myself had cut short certain discussions.
    10 - April - 2011 Designing a User-login panel with ExtJS Past: “Beginning ExtJS with ASP.Net” “ Beginning ExtJS with ASP.Net” (Part two) Present: “Designing a User Login panel with ExtJS”
  • 45. Author epilogue
    • However, this journey is similar with the origination of a river. Small, humble at the origination, However with time, would gain mass, depth & volume discussing more & more substance, talk, sharing, with & only with readers response
    • Response in any form would be highly appreciated and welcomed.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 46. With Thanks…
    • Hi, I’m happy to have you attention till now and am all the more happy if you let me know me how far this tutorial had helped you grasp the designing basics of ExtJS, and just let me know how the information can be conveyed in an improved, easy-to-read & understand format, how can I adjust my way of conveying information so that no vital information is missed.
    • Thank you once again.
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 47. Contact me via
    • Mail:
    • [email_address]
    • [email_address]
    • Social network(s) / Services:
      • arunprasadvidhyaarthi – skype, slideshare.com
      • Arun85prasad – twitter, gmail, live, yahoo.com
      • Arun Prasad - facebook, orkut
      • Arunprasad – scribd.com
    • Mobile:
    • +91 978 979 6615
    10 - April - 2011 Designing a User-login panel with ExtJS
  • 48. Disclaimer
    • The names of Technologies, Product(s), Companies, Application(s), Tool(s), Utilities, etc provided with this material are intended to reference only. The name(s), brand name(s), trademark(s), registered trademark(s), logo(s), slogan(s) belong to their respective owners in the respective countries.
    10 - April - 2011 Designing a User-login panel with ExtJS