I have adjusted the vvlogin.html file for you to move the language selector to the main login form. See the code below. The primary change is moving the vlanguage combobox from the bottom page toolbar into the login form. This is simply a case of moving that block of code to a different area. But there are also some minor changes to other areas of the code to make it look and work nice.
To apply this, copy your existing vvlogin.html out of folder /valence-2.1/html/portal/core/ and into a backup folder somewhere. Then copy and paste the code below into the vvlogin.html file to replace the existing code. When you refresh the Valence page you should see the language selector moved into the main login form.
You should look through this code and compare it to the base code and understand what is changed. When you apply Valence updates this change to the portal core will get overwritten so you will need to reapply these changes to keep the selector in the login form.
To gain a better understanding of Valence and how to maintain the front-end code, look at all the links in the portal under Development/Resources. Start with the Valence Manual. It's about 123 pages. Read it from start to finish, then go to the Valence Training Videos on the www.cnxcorp.com (http://www.cnxcorp.com) website and view all of those. Start looking through the Ext JS API documentation and Valence API documentation. The front-end coding will be clear to you if you study it well.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="Copyright" content="Copyright 2008-2010 CNX Corporation, All Rights Reserved">
<title>Valence</title>
<link rel="shortcut icon" href="/vvresources/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/valence.css" />
<div>
<table border="0" width="100%" cellspacing="1" cellpadding="0">
<tr>
<td width="100%" align="center" height="500">
<table border="0">
<tr>
<td><img src="/extjs/resources/images/default/shared/blue-loading.gif" width="32" height="32"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<script type="text/javascript" src="/vvresources/valence.js"></script>
<script type="text/javascript">
var vvlogin = function() {
// global session variable
var sid = '<%sid%>';
// activate tool tips
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'under';
// grid focus function
var focusGrid=function(grid){
grid.getSelectionModel().selectFirstRow();
grid.getView().focusEl.focus();
}
var userURL = '';
var passwordURL = '';
var environmentURL = '';
var initOpt = '';
var portal = 'true';
try {
userURL = Ext.getUrlParam('user');
} catch(e) {
}
try {
passwordURL = Ext.getUrlParam('password');
} catch(e) {
}
try {
environmentURL = Ext.getUrlParam('environment');
} catch(e) {
}
try {
initOpt = Ext.getUrlParam('option');
} catch(e) {
}
try {
portal = Ext.getUrlParam('portal');
} catch(e) {
}
// ### DATA STORES ##################################################
// environment store
var dsVVenv = new Ext.data.JsonStore({
autoLoad: false,
url: 'vvlogin.pgm',
root: 'EnvList',
fields: [{
name: 'VVREC',
convert: Valence.util.decodeUTF16
}, {
name: 'VVVALUE',
convert: Valence.util.decodeUTF16
}]
});
// ### AJAX CALLS ##################################################
// if initOpt was passed, launch the option into a new portal tab
var launchInitOpt = function() {
Ext.Ajax.request({
url: 'vvvport.pgm',
method: 'POST',
params: {
sid: sid,
action: 'getInitOpt',
initOpt: initOpt
},
success: function(response, options) {
var check = response.responseText;
if (check) {
var data = Ext.decode(response.responseText);
if (data.SUCCESS == '1') {
document.location='vvcall.pgm?sid='+sid+'&opt='+data.VVOPTID+'&pgm=vvinit';
} else {
vvShowError('vvvport_err003a', Valence.lang.msg.negativeResponse);
};
} else {
vvShowError('vvvport_err03b', Valence.lang.msg.nullResponse);
}
},
failure: function() {
vvShowError('vvvport_err03c', Valence.lang.msg.failureResponse);
}
});
}
// set Environment
var setEnvironment = function(envLocal) {
Ext.getBody().mask('<B>' + Valence.lang.msg.settingEnvironment + '</B>', 'x-msg-loading');
winSelectEnv.hide();
winLogin.hide();
Ext.Ajax.request({
url: 'vvlogin.pgm',
method: 'POST',
params: {
sid: sid,
action: 'setEnvironment',
env: envLocal,
lng: Valence.lang.getLanguage()
},
success: function(response, options) {
var check = response.responseText;
if (check) {
var data = Ext.decode(response.responseText);
if (data.SUCCESS == '1') {
if (!Ext.isEmpty(initOpt) && portal === 'false') {
launchInitOpt();
} else {
Ext.getCmp('sid').setValue(sid);
formPost.form.submit();
}
} else {
Ext.getBody().unmask();
winSelectEnv.show();
try {
Ext.Msg.alert(Valence.lang.msg.environmentNotSet, eval(data.MSG));
} catch (e) {
}
};
} else {
vvShowError('vvlogin_err01b', Valence.lang.msg.nullResponse);
}
},
failure: function() {
vvShowError('vvlogin_err01c', Valence.lang.msg.failureResponse);
}
});
};
var getEnvironments = function() {
dsVVenv.reload();
winLogin.hide();
};
// login check
var loginCheck = function() {
winLogin.disable();
Ext.getBody().mask('<B>' + Valence.lang.msg.validatingLogin + '</B>', 'x-msg-loading');
Ext.Ajax.request({
url: 'vvlogin.pgm',
method: 'POST',
params: {
action: 'login',
user: Ext.get('username').getValue(),
password: Ext.get('password').getValue()
},
success: function(response, options) {
winLogin.enable();
var check = response.responseText;
if (check) {
var data = Ext.decode(response.responseText);
switch (data.SUCCESS) {
case '1':
sid = data.sid;
dsVVenv.reload();
winLogin.hide();
break;
case '0':
winLogin.show();
Ext.getCmp('buttonLogin').enable();
switch (data.VVFIELD) {
case 'VVUSER':
Ext.getCmp('username').markInvalid(eval(data.VVMSG TXT1).replace('VAR1', data.VAR1));
Ext.getCmp('username').focus();
break;
case 'VVPASS1':
Ext.getCmp('password').markInvalid(eval(data.VVMSG TXT1).replace('VAR1', data.VAR1));
Ext.getCmp('password').focus();
break;
default:
vvShowError('vvlogin_err002d', Valence.lang.msg.unexpectedResponse);
}
; break;
case '2':
winLogin.hide();
winChgPwd.show();
winChgPwd.setPosition(150, 150);
break;
default:
vvShowError('vvlogin_err002a', Valence.lang.msg.unexpectedResponse);
};
Ext.getBody().unmask();
} else {
vvShowError('vvlogin_err002b', Valence.lang.msg.nullResponse);
winLogin.enable();
};
},
failure: function() {
vvShowError('vvlogin_err002c', Valence.lang.msg.failureResponse);
winLogin.enable();
}
});
};
// change expired password
var goChgPwd = function() {
winChgPwd.disable();
Ext.getBody().mask('<B>' + Valence.lang.msg.changingPassword + '</B>', 'x-msg-loading');
Ext.Ajax.request({
url: 'vvlogin.pgm',
method: 'POST',
params: {user: Ext.getCmp('username').getValue(), action: 'chgPassword', curpwd: Ext.getCmp('curpwd').getValue(), newpwd: Ext.getCmp('newpwd').getValue(), newpwd2: Ext.getCmp('newpwd2').getValue()},
success: function(response, options) {
winChgPwd.enable();
var check = response.responseText;
if (check) {
var data = Ext.decode(response.responseText);
if (data.SUCCESS=='1') {
Ext.getCmp('password').setValue(Ext.getCmp('newpwd ').getValue());
loginCheck();
winChgPwd.hide();
} else {
switch(data.VVFIELD) {
case 'VVCURPWD':
try {
Ext.getCmp('curpwd').markInvalid(eval(data.VVMSGTX T1).replace('VAR1', data.VAR1));
} catch (e) {
Ext.getCmp('curpwd').markInvalid(data.VVMSGTXT1);
}
Ext.getCmp('curpwd').focus();
break;
case 'VVNEWPWD':
try {
Ext.getCmp('newpwd').markInvalid(eval(data.VVMSGTX T1).replace('VAR1', data.VAR1));
} catch (e) {
Ext.getCmp('newpwd').markInvalid(data.VVMSGTXT1);
}
Ext.getCmp('newpwd').focus();
break;
default:
vvShowError('vvlogin_err03a', Valence.lang.msg.unexpectedResponse);
};
};
} else {
vvShowError('vvlogin_err03b', Valence.lang.msg.nullResponse);
};
Ext.getBody().unmask();
},
failure: function(){
vvShowError('vvlogin_err03c', Valence.lang.msg.failureResponse);
winChgPwd.enable();
}
});
};
// ### COLUMN MODELS ##################################################
// column model: environment list
var colModelEnv = new Ext.grid.ColumnModel([{
id: 'VVREC',
header: '<B>' + Valence.lang.lit.selectEnvironment + '</B>',
sortable: false,
locked: false,
width: 400,
dataIndex: 'VVREC'
}]);
// ### GRIDS ##################################################
// grid: environment list
var gridEnv = new Ext.grid.GridPanel({
id: 'gridEnv',
name: 'gridEnv',
collapsible: false,
collapsed: false,
autoScroll: true,
trackMouseOver: true,
title: Valence.lang.lit.environments,
header: false,
store: dsVVenv,
cm: colModelEnv,
frame: false,
border: false,
bodyBorder: false,
autoHeight: true,
width: 300,
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
triggerAction: 'all'
});
// ### FORM PANELS ##################################################
// login form
var formLogin = new Ext.FormPanel({
frame: true,
labelAlign: 'right',
labelWidth: 95,
width: 400,
waitMsgTarget: true,
items: [{
xtype: 'textfield',
id: 'username',
fieldLabel: Valence.lang.lit.userid,
name: 'username',
width: 220,
selectOnFocus: true,
tabIndex: 1
}, {
xtype: 'textfield',
id: 'password',
fieldLabel: Valence.lang.lit.password,
inputType: 'password',
name: 'password',
width: 220,
selectOnFocus: true,
tabIndex: 2
}, {
xtype: 'combo',
id: 'vlanguage',
fieldLabel: Valence.lang.lit.language,
width: 220,
stateful: true,
hidden: true,
stateEvents: ['select'],
typeAhead: true,
triggerAction: 'all',
mode: 'local',
tabIndex: 3,
store: new Ext.data.JsonStore({
url: 'vvlogin.pgm',
autoLoad: true,
root: 'VVLCQ100',
baseParams: {
action: 'getLanguages'
},
fields: ['VVLNG', {
name: 'VVLNGNAME',
convert: function(v) {
return Valence.util.decodeUTF16(v);
}
}],
listeners: {
load: function(store) {
Ext.getCmp('vlanguage').setValue(Valence.lang.getL anguage());
}
}
}),
valueField: 'VVLNG',
displayField: 'VVLNGNAME',
listeners: {
select: function() {
window.location.href = '/valence-' + this.getValue() + '/vvlogin.pgm';
}
}
}],
buttons: [{
text: Valence.lang.lit.login,
iconCls: 'server_go',
id: 'buttonLogin',
name: 'buttonLogin',
handler: loginCheck,
tabIndex: 4
}]
});
// hidden form post
var formPost = new Ext.form.FormPanel({
id: 'formPost',
url: 'vvvport.pgm',
method: 'POST',
items: [{
xtype: 'textfield',
name: 'sid',
id: 'sid'
}, {
xtype: 'textfield',
name: 'initOpt',
id: 'initOpt',
value: initOpt
}],
onSubmit: Ext.emptyFn,
submit: function() {
var formDom = formPost.form.getEl().dom;
formDom.action = this.url;
formDom.method = this.method;
formDom.submit();
}
});
// change password form
var formChgPwd = new Ext.FormPanel({
frame: true,
labelAlign: 'right',
labelWidth: 150,
width:415,
border: false,
margins: '0 0 0 0',
waitMsgTarget: true,
items: [
{xtype: 'textfield', id: 'curpwd', fieldLabel: Valence.lang.lit.currentPassword, inputType: 'password', name: 'curpwd', width:200},
{xtype: 'textfield', id: 'newpwd', fieldLabel: Valence.lang.lit.newPassword, inputType: 'password', name: 'newpwd', width:200},
{xtype: 'textfield', id: 'newpwd2', fieldLabel: Valence.lang.lit.retypeNewPassword, inputType: 'password', name: 'newpwd2', width:200}
],
buttons: [
{text: Valence.lang.lit.changePassword, iconCls:'server_go', handler: goChgPwd},
{text: Valence.lang.lit.cancel, iconCls:'cancel', handler: function() {winChgPwd.hide()}}
]
});
// ### WINDOWS ##################################################
// login window
var winLogin = new Ext.Window({
iconCls:'server_key',
constrain: true,
closable: false,
draggable: false,
title: Valence.lang.lit.valencePortal,
layout:'fit',
width:400,
height:185,
resizable: false,
closeAction:'hide',
plain: true,
x: 150,
y: 150,
items: [formLogin],
keys: [
{key: Ext.EventObject.ENTER, fn: loginCheck}
]
});
// hidden window for form post
var winPost = new Ext.Window({
closable: false,
title: 'Valence PostWindow',
layout:'fit',
width: 5,
height: 5,
resizable: false,
closeAction:'hide',
plain: true,
x: -150,
y: -150,
items: [formPost]
});
// environment selection window
var winSelectEnv = new Ext.Window({
title: Valence.lang.lit.selectEnvironment,
width:400,
height:300,
layout: 'fit',
resizable: false,
closeAction:'hide',
draggable: false,
plain: true,
x: 150,
y: 150,
iconCls: 'world',
items: [gridEnv],
keys: [
{key: [Ext.EventObject.ENTER], fn: function(){
var cellData = gridEnv.getSelectionModel().getSelected().get('VVV ALUE');
setEnvironment(cellData);
}}
]
});
// change password window
var winChgPwd = new Ext.Window({
closable: true,
draggable: false,
iconCls:'server_key',
title: Valence.lang.lit.passwordExpired,
modal: false,
layout:'fit',
width:430,
height:200,
resizable: false,
closeAction:'hide',
plain: true,
items: [formChgPwd],
x: 150,
y: 150,
keys: [
{key: Ext.EventObject.ENTER, fn: goChgPwd}
]
});
// ### VIEWPORT ##################################################
var getHeaderInfo = function() {
Ext.Ajax.request({
url: 'vvheader.pgm',
method: 'POST',
success: function(response, options) {
var check = response.responseText;
if (check) {
var data = Ext.decode(response.responseText);
if (data.SUCCESS == '1') {
Ext.get('vvheadertext').dom.innerHTML = data.headertext;
} else {
};
Ext.getBody().unmask();
} else {
vvShowError('vvlogin_err04b', Valence.lang.msg.nullResponse);
};
},
failure: function() {
vvShowError('vvlogin_err04c', Valence.lang.msg.failureResponse);
}
});
};
viewportBbar = new Ext.Toolbar({
height: 25,
items: [{
xtype: 'tbtext',
text: ' Copyright © CNX Corporation'
}, {
id: 'vlangseparator',
xtype: 'tbseparator',
hidden: true
}]
});
new Ext.Viewport({
id: 'viewport',
layout: 'border',
items: [{
region: 'north',
border: false,
margins: '0 0 0 0',
height: 50,
autoLoad: {
url: '/vvresources/header/header.html',
method: 'GET',
callback: function() {
getHeaderInfo();
}
}
}, {
region: 'center',
border: false,
margins: '0 0 0 0',
bbar: viewportBbar
}]
});
// render windows
winChgPwd.show();
winChgPwd.hide();
winSelectEnv.show();
winSelectEnv.hide();
winLogin.show();
winLogin.hide();
winPost.show();
// ### LISTENERS ##################################################
// set environment load parameters
dsVVenv.on("beforeload", function() {
dsVVenv.baseParams = {
sid: sid,
action: 'getEnv',
userid: Ext.getCmp('username').getValue(),
lng: Valence.lang.getLanguage()
};
});
// when environment selection window is hidden, redisplay the login window
winSelectEnv.on("hide", function() {
Ext.getCmp('buttonLogin').enable();
winLogin.show();
});
// when change password window is hidden, redisplay the login window
winChgPwd.on("hide", function() {
Ext.getCmp('buttonLogin').enable();
winLogin.setPosition(150, 150);
winLogin.show();
});
// if there is only one environment for this user, select it automatically
dsVVenv.on('load', function(ds,records,o){
if (dsVVenv.getCount()>0) {
if (Ext.isEmpty(environmentURL) && dsVVenv.getCount()==1) {
setEnvironment(dsVVenv.getAt(0).get('VVVALUE'));
} else {
// if environent was passed on url, select it automatically without showing environment selection window
if (!Ext.isEmpty(environmentURL)) {
setEnvironment(environmentURL);
} else {
winSelectEnv.show();
}
};
};
});
// focus cursor on username when login window is shown
winLogin.on('show', function() {
var f = Ext.getCmp('username');
f.focus.defer(150, f);
});
// focus cursor on current password field when change password window is shown
winChgPwd.on('show', function() {
var f = Ext.get('curpwd');
f.focus.defer(150, f);
});
// set title in environment window
winSelectEnv.on('show', function() {
if (Ext.getCmp('username').getValue() == '') {
winSelectEnv.setTitle(Valence.lang.lit.selectEnvir onment);
} else {
winSelectEnv.setTitle(Valence.lang.lit.selectEnvir onment + ' [' + Ext.getCmp('username').getValue() + ']');
};
focusGrid.defer(150, this, [gridEnv]);
});
// listen for user to click on an environment in grid
gridEnv.on('rowclick', function(grid, rowIndex, columnIndex, e) {
var cellData = grid.getStore().getAt(rowIndex).get('VVVALUE');
setEnvironment(cellData);
});
// clear all fields on change password window when closed
winChgPwd.on('hide', function() {
Ext.getCmp('curpwd').setValue('');
Ext.getCmp('newpwd').setValue('');
Ext.getCmp('newpwd2').setValue('');
});
// ### PAGE STARTUP ##################################################
// get maximum password length and set maxlength parm on fields
var getLengths = function(){
Ext.Ajax.request({
url: 'vvlogin.pgm',
method: 'POST',
params: {action: 'getLengths'},
success: function(response, options) {
var check = response.responseText;
if (check) {
var data = Ext.decode(response.responseText);
if (data.SUCCESS=='1') {
Ext.getCmp('username').getEl().dom.maxLength = data.USRLENGTH;
Ext.getCmp('password').getEl().dom.maxLength = data.PWDLENGTH;
Ext.getCmp('curpwd').getEl().dom.maxLength = data.PWDLENGTH;
Ext.getCmp('newpwd').getEl().dom.maxLength = data.PWDLENGTH;
Ext.getCmp('newpwd2').getEl().dom.maxLength = data.PWDLENGTH;
var multilingualActive = data.MULTILINGUAL;
if (multilingualActive=='Y') {
Ext.getCmp('vlangseparator').show();
Ext.getCmp('vlanguage').show();
};
if (!Ext.isEmpty(userURL)) {
Ext.getCmp('username').setValue(userURL);
Ext.getCmp('password').setValue(passwordURL);
loginCheck();
} else {
winLogin.show();
};
//Ext.getCmp('viewport').doLayout();
} else {
vvShowError('vvlogin_err004a', Valence.lang.msg.negativeResponse);
};
} else {
vvShowError('vvlogin_err004b', Valence.lang.msg.nullResponse);
}
},
failure: function(){
vvShowError('vvlogin_err004c', Valence.lang.msg.failureResponse);
}
});
};
// display login window if session id has not been set automatically by EIM, otherwise go directly to environment selection
if (sid == ' ') {
// when getLenths is finished it will display login
getLengths();
} else {
// we have a session id already, go right to selecting environments
getEnvironments();
};
};
// when document is ready, load language files and then launch the page
Ext.onReady(function() {
Valence.util.execScriptFiles({
urls: ['/extjs/src/locale/ext-lang-' + Valence.lang.getLanguage() + '.js',
'/vvresources/locale/portal/vvlang-en.js',
'/vvresources/locale/portal/vvlang-' + Valence.lang.getLanguage() + '.js'
],
callback: vvlogin
});
});
</script>
</head>
<body>
</body>
</html>