Databases
StackOverflow2013
Postsdbo
PODojo widget controller
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODojo widget controller
    primarykey
    data
    text
    <p>I am working on a new project and have been trying to get a JS controller to decide which dojo widgets are needed for any particular page.</p> <p>I have this working, but only when I inject / hardcode the dojo widget's JS into the page. As soon as I try to get it working with dojo's provide and require mechanisms, everything stops working and I get the following error:</p> <pre><code>Could not load 'pf.PasswordStrength'; last tried '../dojopf/widget/PasswordStrength.js' http://pf-dev-ad/wcsstore/js/dojo131/dojo/dojo.js Line 16 </code></pre> <p>Firebug shows this error right after it includes the file!</p> <p>I am having real problems with this as dojo 1.3.1 (which I'm not allowed to upgrade) is very poorly documented and there aren't many tutorials.</p> <p>The requirement is as follows:</p> <ul> <li>1 site-wide JS controller (lib.js)</li> <li>1 widget specific JS file (PasswordStrength.js)</li> <li>1 widget template file (PasswordStrength.html)</li> <li>1 pointer node</li> </ul> <p>The file structre is setup as follows:</p> <pre><code>js dojo131 dijit dojo dojotest widget templates PasswordStrength.html PasswordStrength.css PasswordStrength.js dojox </code></pre> <hr> <p>//JS controller (lib.js):</p> <pre><code>if(!ad){ var ad = {} } ad.base = new (function(){ // init function will run on page load. Called by dojo.addOnLoad this.init = function (){ /* This function acts as a controller for Dojo widgets. // it uses a variable ('pageName') set by the JSTL in the parent JSP of a particular page switch(ad.pageName){ case 'Home': _getTemplateAssets('PasswordStrength'); break; } } var $ = dojo.query; var templatePath = 'js/dojo131/dojotest/widget'; var debug = false; // This should be set to false when on production /*** PRIVATE FUNCTIONS ***/ function _getTemplateAssets(templateName){ // Injects the JS and CSS template assets into the page head dojo.registerModulePath("ad", '../dojotest/widget'); // relative to dojo.js //dojo.provide('ad.' + templateName); dojo.require('ad.' + templateName); //var headTag = document.getElementsByTagName('head').item(0); //dojo.create("script", { src: templatePath + '/' + templateName + '.js', type: 'text/javascript' }, headTag); //dojo.create("link", { href: templatePath + '/templates/' + templateName + '.css', type: 'text/css', rel: 'stylesheet' }, headTag); } }); /*** ONLOAD ***/ dojo.addOnLoad(ad.base.init); </code></pre> <hr> <p>// Widget JS (PasswordStrength.js)</p> <pre><code>if(!ad){ var ad = {} } ad.passwordCheck = new (function(){ // init function will run on page load. Called by dojo.addOnLoad this.init = function (){ _temp_addPasswordCheck(); } /*** PRIVATE VARIABLES ***/ var $ = dojo.query; var templateName = 'PasswordStrength'; var insertPointID = 'ins_passStrength'; var minLength = 6; var objAdvice = { enterPass: 'Please enter a password', addChars: 'Add more characters (min ' + minLength + ')', addSpecials: 'Use special characters (!@#$%^&amp;*)', addUppers: 'Use some upper case characters', addLowers: 'Use some lower case characters', addNums: 'Use some numbers', remRepeats: 'Too many repeated repeat characters', passPass: 'Your password has been verified as Excellent!' }; var complexity = ['Bad', 'Very weak', 'Weak', 'Good', 'Strong', 'Excellent']; var content = { titles: { h1: 'Password Strength' }, labels: { password: 'Password:', confirmPassword: 'Confirm Password', obscure: 'Obscure:', strength: 'Password strength:', advice: 'Advice:' }, content:{ advice: 'Please enter a password', strength: 'None' } } /*** PRIVATE FUNCTIONS ***/ function _temp_addPasswordCheck(){ // Include extras dojo.provide("ad.PasswordStrength"); dojo.require("ad.PasswordStrength"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.require("dojo.parser"); dojo.declare(templateName, [dijit._Widget, dijit._Templated], { // calls the HTML template to be used templatePath: dojo.moduleUrl ('dojotest.widget','templates/' + templateName + '.html'), // Content (titles, labels and general content) label_password: content.labels.password, label_confirmPassword: content.labels.confirmPassword, label_obscure: content.labels.obscure, label_passwordStrength: content.labels.strength, label_advice: content.labels.advice, title_passwordStrength: content.titles.h1, content_advice: content.content.advice, content_strength: content.content.strength, obscurePassword: function(){ if(this.obscurePass.checked){ dojo.attr(this.passwordValue, 'type', 'password'); } else{ dojo.attr(this.passwordValue, 'type', 'text'); } }, checkPassword: function(){ // This function checks the password strength on keyup and alters the passwordAdvice div to reflect the strength of the password entered // Runs the password through a validation function which returns the results var results = _checkPassWord(this.passwordValue.value), score = results['score']; var ele = dojo.byId('passStrength'); // Update the markup to inform the user of their passwords score if(results['count'] == 0){ this.complexity.innerHTML = 'None'; ele.className = ''; this.advice.innerHTML = _doInsert([objAdvice.enterPass]); } else if(score &lt;= 50){ this.complexity.innerHTML = complexity[0]; ele.className = 'bad'; this.advice.innerHTML = _doInsert(results.advice); } if(score == 60){ this.complexity.innerHTML = complexity[1]; ele.className = 'veryWeak'; this.advice.innerHTML = _doInsert(results.advice); } if(score == 70){ this.complexity.innerHTML = complexity[2]; ele.className = 'weak'; this.advice.innerHTML = _doInsert(results.advice); } if(score == 80){ this.complexity.innerHTML = complexity[3]; ele.className = 'good'; this.advice.innerHTML = _doInsert(results.advice); } if(score == 90){ this.complexity.innerHTML = complexity[4]; ele.className = 'strong'; this.advice.innerHTML = _doInsert(results.advice); } if(score &gt;= 100){ this.complexity.innerHTML = complexity[5]; ele.className = 'excellent'; this.advice.innerHTML = _doInsert([objAdvice.passPass]); } } }); // Calls the template into the right ID defined as the insert point as the first child if(dojo.byId(insertPointID)){ var passStrength = new PasswordStrength().placeAt(insertPointID); } }; function _doInsert(arrInsert){ var content = ''; dojo.forEach(arrInsert, function(item, i){ content = content + '&lt;p&gt;' + item + '&lt;/p&gt;'; }); return content; } function _checkPassWord(strPassword){ // Grades the password string and returns the results var objResults = {}, scoreFactor = 10, score = 0, advice = [], lengthPass, alphaLCpass, alphaUCpass, numPass, specialsPass, repeatPass, count = strPassword.length; // Check password string for uppercase alphas, lowercase alphas, numerals, special characters and repeated characters alphaUCpass = strPassword.match(/[A-Z]/g) ? true : false; alphaLCpass = strPassword.match(/[a-z]/g) ? true : false; numPass = strPassword.match(/[0-9]/g) ? true: false; specialsPass = strPassword.match(/[^a-zA-Z0-9]/g) ? true : false; repeatPass = strPassword.match(/(.)\1\1/g) ? false : true; lengthPass = count &gt;= minLength ? true : false; // Score the password based on the results of the check if(alphaUCpass){ score += scoreFactor; } else{ advice.push(objAdvice.addUppers); } if(alphaLCpass){ score += scoreFactor; } else{ advice.push(objAdvice.addLowers); } if(numPass){ score += scoreFactor; } else{ advice.push(objAdvice.addNums); } if(specialsPass){ score += scoreFactor; } else{ advice.push(objAdvice.addSpecials); } if(repeatPass){ score += scoreFactor; } else{ advice.push(objAdvice.remRepeats); } if(lengthPass){ score += scoreFactor * 5; } else{ advice.push(objAdvice.addChars); } // Inserts the results into object to be returned objResults = { 'alphaUC': alphaUCpass, 'alphaLC': alphaLCpass, 'numerals': numPass, 'specials': specialsPass, 'length': lengthPass, 'repeat': repeatPass, 'count': count, 'score': score, 'advice': advice } // Return results to parent function return objResults; } /*** PUBLIC FUNCTIONS ***/ }); /*** ONLOAD ***/ dojo.addOnLoad(ad.passwordCheck.init); </code></pre> <hr> <p>// Widget HTML template (PasswordStrength.html)</p> <pre><code>&lt;div&gt; &lt;h1&gt;${title_passwordStrength}&lt;/h1&gt; &lt;form method="post" action=""&gt; &lt;fieldset&gt; &lt;div class="formFields"&gt; &lt;label for="password"&gt;${label_password}&lt;/label&gt; &lt;input type="password" name="password" id="password" dojoAttachPoint="passwordValue" dojoAttachEvent="onkeyup: checkPassword" /&gt; &lt;/div&gt; &lt;div class="formFields"&gt; &lt;label for="confirmPassword"&gt;${label_confirmPassword}&lt;/label&gt; &lt;input type="password" name="confirmPassword" id="confirmPassword" dojoAttachPoint="passwordConfirmValue" dojoAttachEvent="onkeyup: checkPassword" /&gt; &lt;/div&gt; &lt;div class="formFields"&gt; &lt;label for="obscurePassword" class="wAuto"&gt;${label_obscure}&lt;/label&gt; &lt;input class="wAuto" type="checkbox" value="true" checked="checked" name="obscurePassword" id="obscurePassword" dojoAttachPoint="obscurePass" dojoAttachEvent="onchange: obscurePassword" /&gt; &lt;/div&gt; &lt;div class="formFields"&gt; &lt;label&gt;${label_passwordStrength}&lt;/label&gt; &lt;div dojoAttachPoint="strength" id="passStrength" class=""&gt;&lt;/div&gt; &lt;div dojoAttachPoint="complexity" id="passStrengthCaption"&gt;${content_strength}&lt;/div&gt; &lt;/div&gt; &lt;div class="formFields"&gt; &lt;label&gt;${label_advice}&lt;/label&gt; &lt;div dojoAttachPoint="advice" id="passAdvice"&gt;&lt;p&gt;${content_advice}&lt;/p&gt;&lt;/div&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;/form&gt; </code></pre> <h2> </h2> <p>The parent file has a HTML pointer in it as follows:</p> <pre><code>&lt;div id="ins_passStrength" dojoType="PasswordStrength"&gt;&lt;/div&gt; </code></pre> <hr> <p>If I change the following function in parent controller (lib.js):</p> <pre><code>function _getTemplateAssets(templateName){ // Injects the JS and CSS template assets into the page head dojo.registerModulePath("ad", '../dojotest/widget'); // relative to dojo.js //dojo.provide('ad.' + templateName); dojo.require('ad.' + templateName); //var headTag = document.getElementsByTagName('head').item(0); //dojo.create("script", { src: templatePath + '/' + templateName + '.js', type: 'text/javascript' }, headTag); //dojo.create("link", { href: templatePath + '/templates/' + templateName + '.css', type: 'text/css', rel: 'stylesheet' }, headTag); } </code></pre> <p>To:</p> <pre><code>function _getTemplateAssets(templateName){ // Injects the JS and CSS template assets into the page head dojo.registerModulePath("ad", '../dojotest/widget'); // relative to dojo.js dojo.provide('ad.' + templateName); dojo.require('ad.' + templateName); //var headTag = document.getElementsByTagName('head').item(0); //dojo.create("script", { src: templatePath + '/' + templateName + '.js', type: 'text/javascript' }, headTag); //dojo.create("link", { href: templatePath + '/templates/' + templateName + '.css', type: 'text/css', rel: 'stylesheet' }, headTag); } </code></pre> <p>The error goes away but the widegt JS isn't included.</p> <p>And if you change it to:</p> <pre><code>function _getTemplateAssets(templateName){ // Injects the JS and CSS template assets into the page head dojo.registerModulePath("ad", '../dojotest/widget'); // relative to dojo.js //dojo.provide('ad.' + templateName); //dojo.require('ad.' + templateName); var headTag = document.getElementsByTagName('head').item(0); dojo.create("script", { src: templatePath + '/' + templateName + '.js', type: 'text/javascript' }, headTag); dojo.create("link", { href: templatePath + '/templates/' + templateName + '.css', type: 'text/css', rel: 'stylesheet' }, headTag); } </code></pre> <p>It works fine but this is a dirty sidestep... I need to use dojo's prescribed methods.</p> <p>Any help greatly appreciated.</p> <p>Thank you!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USGetafixIT
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload