PDA

View Full Version : Login screen before actual app



GertBoers
26 Aug 2011, 1:08 AM
I'm creating a demo app and i want a login screen to appear (username field, password field, loginbutton) before actually going to the app itself.

Whenever someone clicks the login button (regardless of username and password, i'll finetune that later) the user should be redirected to the app's main viewport.

The app contains a tabbar at the bottom, which should not be visible before 'logging in'.

I figure this can't be too hard, but since i'm new to sencha (started using it about 2 weeks ago) i haven't got a clue...

I've got a loginscreen setup, but right now it's one of the toolbar items at the bottom...:


ToolbarDemo.views.Morecard = Ext.extend(Ext.form.FormPanel, { title: "more",
iconCls: "more",
scroll: "vertical",
initComponent: function() {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
title: "User login"
}],
items: [
{
xtype: 'fieldset',
title: 'Details',
items: [{
xtype: 'textfield',
name : 'name',
label: 'Username'
},{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}],
},{
xtype: 'button',
text: 'login',
ui: 'confirm'
}]
});
ToolbarDemo.views.Morecard.superclass.initComponent.apply(this, arguments);
}
});


Ext.reg('morecard', ToolbarDemo.views.Morecard);




Thanks!

jcoenrae
26 Aug 2011, 4:50 AM
Hi,

I do a similar thing. Before users reach my menu, I check whether they were logged in last time or not (local storage). If they were not logged in I show a login-panel, so the rest of the app is not visible until they logged in.

This is the starting point of my app in which I call the loadLogin method.


Ext.regApplication({ name: 'movemeapp',
launch: function() {
this.launched = true;
this.mainLaunch();
},
mainLaunch: function() {
if (!device || !this.launched) {return;}
this.views.viewport = new this.views.Viewport();
movemeapp.controllers.profileController.loadLogin();
}
});

The viewport is just a panel with a cardlayout that has different panels on it (in items), for example the login panel and the menu panel. The menu panel is shown by default, but if loadLogin() detects that the user wasn't logged in it shows the login panel. In this way the user doesn't get a chance to see the menu before he is actually logged in.

GertBoers
26 Aug 2011, 6:08 AM
Mercikes Jolien, ik zal maar in het engels verdergaan zeker? :)

but i'm really a novice,

i don't even really know how to set the starting screen to the login form...

this is what it was:

ToolbarDemo = new Ext.Application({
name: "ToolbarDemo",


launch: function() {
this.views.viewport = new this.views.Viewport();
this.views.homecard = this.views.viewport.getComponent('home');

}
});



but when i change it to this:

ToolbarDemo = new Ext.Application({
name: "ToolbarDemo",


launch: function() {
this.views.viewport = new this.views.Viewport();
this.views.logincard = this.views.viewport.getComponent('login');

}
});


my app stops working. Where is the 'home' coming from? I thought it was the id given in the Viewport.js file:

ToolbarDemo.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,


initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'homecard', id: 'home'},
{ xtype: 'ideascard' },
{ xtype: 'teamcard' },
{ xtype: 'brandbookcard' },
{ xtype: 'logincard' }

]
});
ToolbarDemo.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});




so i thought i just had to give the logincard an id 'login' and change the app.js file. Guess i was wrong.

Plus, i don't want my logincard to be in the tabBar like it is now, but if just create a logincard.js file where should i put my id?
Another basic thing, should i always use Ext.extend(Ext.something ?


ToolbarDemo.views.LoginForm = Ext.extend(Ext.form.FormPanel, {
scroll: "vertical",
initComponent: function() {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
title: "User login"
}],
items: [
{
xtype: 'fieldset',
title: 'Details',
items: [{
xtype: 'textfield',
name : 'name',
label: 'Username'
},{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}],
},{
xtype: 'button',
text: 'login',
ui: 'confirm'
}]
});
ToolbarDemo.views.Morecard.superclass.initComponent.apply(this, arguments);
}
});


Ext.reg('loginform', ToolbarDemo.views.LoginForm);

This is probably all just basic stuff. But i just need an example i think.
What should my app.js look like if i want loginform.js to be my startup.
And what should the button handler look like in the loginform file to redirect me to my homecard?

Thank you!!

GertBoers
26 Aug 2011, 6:13 AM
If it's easier, the loginscreen may also be some kind of overlay mask kinda thing. If it's a hassle, forget i mentioned it.

x

jcoenrae
27 Aug 2011, 2:45 AM
First thing: with Ext.extend you create a new class, which you will usally do if you create panels or buttons that you will need more than once. If you create something that you will only need once you can just do new ... . But it is not really a mistake if you use extend even if you only use it once.

Second thing: if you have a panel with a layout with multiple items, the item that is shown by default is the first item. So if you want that some tab is shown by default, you just put it first in the item list. Of course you can still change this with other techniques and methods.

If I understand it correctly you want a page with tabs and all kinds of things on it, but first a logiin screen that is of course not shown in the tabs. I would do it as follows:

You create a panel (the viewport) with a card layout and two items in it: a panel for the login stuff and a panel for the tab stuff. You make sure the login panel is the first in the list.
The first panel (login) is just a formpanel (you can use the xtype thing, but you can also just create a panel, give it a name and add it to the items list in the viewport).
The second panel (tabs) is a TabPanel in which you put all the code of the tutorial tab panel, which is now in your viewport.
On your login panel you have some kind of 'Log in' button. In the handler of that button you change the panel of the viewport with the setActiveItem method. As argument you use the name of the panel.
I would save all my panels, so you just can use the name and you can reach every information easily. So it would become something like
ToolbarDemo.view.loginForm= new Ext.form.FormPanel(...);
ToolbarDemo.view.tabPanel = new Ext.TabPanel(...);
ToolbarDemo.view.viewport = new Ext.Panel({
layout: 'card',
fullscreen: 'true',
items: [
ToolbarDemo.view.loginForm,
ToolbarDemo.view.tabPanel
]
});

GertBoers
29 Aug 2011, 12:48 AM
Thank you for this very understandable reply!

I think i'm almost there, i just can't get the handler to work...
I've tried a few things, but it won't switch to the other card.

This is what i got:



handler: function() { ToolbarDemo.views.Viewport.setActiveItem(1);
}


but i've tried it without the 1 and with tabpanel or ToolbarDemo.views.TabPanel instead, but it still didn't work.
Any idea why?

This is the viewport.js (with error):

27740