Smalltalk › Frameworks & Tools › AIDA/Web

ViewTabs

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

6 messages Options

Rob Rothwell

ViewTabs

Are ViewTabs meant to be used when you have several views you want to display within a single WebApplication? Does anyone have an example? When I create the following, clicking on ANY of the tabs simply takes me to #viewMain:

MyApp>>tabComponent
    | e |
    e := ViewTabs new.
    e addView: #viewMain description: 'Tab1'.
    e addView: #viewDiagnosis description: 'Tab2'.
    e addView: #viewProcedures description: 'Tab3'.
    ^ e

and

MyApp>>viewMain
    |e|
    e := WebElement newId: #content.
    e addTextH1: 'My Application'.
    e addBreak.
    e add: self tabComponent.
    e addText: 'Main View'.
    self pageFrameWith: e title: 'My Application'

MyApp>>viewDiagnosis
    |e|
    e := WebElement newId: #content.
    e addTextH1: 'My Application'.
    e addBreak.
    e add: self tabComponent.
    e addText: 'Diagnosis View'.
    self pageFrameWith: e title: 'My Application'

MyApp>>viewProcedures
    |e|
    e := WebElement newId: #content.
    e addTextH1: 'My Application'.
    e addBreak.
    e add: self tabComponent.
    e addText: 'Procedure View'.
    self pageFrameWith: e title: 'My Application'

Rob

_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida

Nicholas Moore

Re: ViewTabs

Rob

Each of my WebApp pages (viewMain) does:

viewMain
    | e |
    e := WebElement new.
    self session parent site style
        headerAddTabs: e
        selected: 1
        label: 'Home'.
etc ...

which is implemented in my subclass of WebStyle:

headerAddTabs: anElement selected: aNumber label: aLabel
    | anE newOC |
    newOC := OrderedCollection new.
    anE := WebElement new addText: aLabel attributes: #bold.
    newOC add: anE.
    anElement add: ((WebTabs new)
                addLinkTo: './centre.html' text: 'Home';
                addLinkTo: './forum.html' text: 'Forum';
                addLinkTo: './news.html' text: 'News';
                addLinkTo: './history.html' text: 'History';
                addLinkTo: './search.html' text: 'Search';
                selected: aNumber).
    (anElement elements first elements at: aNumber) initElements elements
        add: anE.
    anElement addNbSp.
    ^anElement

check out:
http://www.c4cnc.org for an example.

Nicholas

Rob Rothwell wrote:

Are ViewTabs meant to be used when you have several views you want to display within a single WebApplication? Does anyone have an example? When I create the following, clicking on ANY of the tabs simply takes me to #viewMain:

MyApp>>tabComponent
    | e |
    e := ViewTabs new.
    e addView: #viewMain description: 'Tab1'.
    e addView: #viewDiagnosis description: 'Tab2'.
    e addView: #viewProcedures description: 'Tab3'.
    ^ e

and

MyApp>>viewMain
    |e|
    e := WebElement newId: #content.
    e addTextH1: 'My Application'.
    e addBreak.
    e add: self tabComponent.
    e addText: 'Main View'.
    self pageFrameWith: e title: 'My Application'

MyApp>>viewDiagnosis
    |e|
    e := WebElement newId: #content.
    e addTextH1: 'My Application'.
    e addBreak.
    e add: self tabComponent.
    e addText: 'Diagnosis View'.
    self pageFrameWith: e title: 'My Application'

MyApp>>viewProcedures
    |e|
    e := WebElement newId: #content.
    e addTextH1: 'My Application'.
    e addBreak.
    e add: self tabComponent.
    e addText: 'Procedure View'.
    self pageFrameWith: e title: 'My Application'

Rob
_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida
  

--
NJM TSR-i

Nicholas J Moore

_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida

Janko Mivšek

Re: ViewTabs

In reply to this post by Rob Rothwell

Hi Rob,

Rob Rothwell wrote:

> Are ViewTabs meant to be used when you have several views you want to
> display within a single WebApplication? Does anyone have an example?
> When I create the following, clicking on ANY of the tabs simply takes me
> to #viewMain:

> MyApp>>tabComponent
> | e |
> e := ViewTabs new.
> e addView: #viewMain description: 'Tab1'.
> e addView: #viewDiagnosis description: 'Tab2'.
> e addView: #viewProcedures description: 'Tab3'.
> ^ e

View name is #main, #diagnosis etc, while #viewMain is a method name to
show that view. This is the reason above code don't work. Otherwise code
is correct and yes, ViewTabs are perfect for switching between views on
the same App, that is, between views of the same domain object.

Janko

>
> and
>
> MyApp>>viewMain
> |e|
> e := WebElement newId: #content.
> e addTextH1: 'My Application'.
> e addBreak.
> e add: self tabComponent.
> e addText: 'Main View'.
> self pageFrameWith: e title: 'My Application'
>
> MyApp>>viewDiagnosis
> |e|
> e := WebElement newId: #content.
> e addTextH1: 'My Application'.
> e addBreak.
> e add: self tabComponent.
> e addText: 'Diagnosis View'.
> self pageFrameWith: e title: 'My Application'
>
>
> MyApp>>viewProcedures
> |e|
> e := WebElement newId: #content.
> e addTextH1: 'My Application'.
> e addBreak.
> e add: self tabComponent.
> e addText: 'Procedure View'.
> self pageFrameWith: e title: 'My Application'
>
> Rob
>
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> Aida mailing list
> [hidden email]
> http://lists.aidaweb.si/mailman/listinfo/aida

--
Janko Mivšek
AIDA/Web
Smalltalk Web Application Server
http://www.aidaweb.si
_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida

Janko Mivšek

Re: ViewTabs

In reply to this post by Nicholas Moore

Hi Nicholas,

Good that you pointed out WebTabs too, which are more general tabs to
switch between arbitrary App and views, and even foreign pages.
Otherwise look at the WebTabs hierarcy to see them all:

Object
WebElement
WebList
WebTabs
ViewTabs

WebTabs comment: WebTabs are visual selection tool. selected tab is in
front, others are back and have url links.
By default an instance have CSS class 'webtabs' and selected tab
'webtabselected"

Usage:
self addTextBold: 'Selected without link'.
self addLinkTo: someObject text: 'not-selected with link' view: #view.
self selected: 1.

ViewTabs comment: For quick selection of App views. Just fill with view
names and descriptions, all other will be automatic. Tab for curently
shown will be colored as shown, other tabls will have links to self
observee and appropriate view

Janko

Nicholas Moore wrote:

> Rob
>
> Each of my WebApp pages (viewMain) does:
>
> viewMain
> | e |
> e := WebElement new.
> self session parent site style
> headerAddTabs: e
> selected: 1
> label: 'Home'.
> etc ...
>
>
> which is implemented in my subclass of WebStyle:
>
> headerAddTabs: anElement selected: aNumber label: aLabel
> | anE newOC |
> newOC := OrderedCollection new.
> anE := WebElement new addText: aLabel attributes: #bold.
> newOC add: anE.
> anElement add: ((WebTabs new)
> addLinkTo: './centre.html' text: 'Home';
> addLinkTo: './forum.html' text: 'Forum';
> addLinkTo: './news.html' text: 'News';
> addLinkTo: './history.html' text: 'History';
> addLinkTo: './search.html' text: 'Search';
> selected: aNumber).
> (anElement elements first elements at: aNumber) initElements elements
> add: anE.
> anElement addNbSp.
> ^anElement
>
> check out:
> http://www.c4cnc.org for an example.
>
> Nicholas
>
>
> Rob Rothwell wrote:
>> Are ViewTabs meant to be used when you have several views you want to
>> display within a single WebApplication? Does anyone have an example?
>> When I create the following, clicking on ANY of the tabs simply takes
>> me to #viewMain:
>>
>> MyApp>>tabComponent
>> | e |
>> e := ViewTabs new.
>> e addView: #viewMain description: 'Tab1'.
>> e addView: #viewDiagnosis description: 'Tab2'.
>> e addView: #viewProcedures description: 'Tab3'.
>> ^ e
>>
>> and
>>
>> MyApp>>viewMain
>> |e|
>> e := WebElement newId: #content.
>> e addTextH1: 'My Application'.
>> e addBreak.
>> e add: self tabComponent.
>> e addText: 'Main View'.
>> self pageFrameWith: e title: 'My Application'
>>
>> MyApp>>viewDiagnosis
>> |e|
>> e := WebElement newId: #content.
>> e addTextH1: 'My Application'.
>> e addBreak.
>> e add: self tabComponent.
>> e addText: 'Diagnosis View'.
>> self pageFrameWith: e title: 'My Application'
>>
>>
>> MyApp>>viewProcedures
>> |e|
>> e := WebElement newId: #content.
>> e addTextH1: 'My Application'.
>> e addBreak.
>> e add: self tabComponent.
>> e addText: 'Procedure View'.
>> self pageFrameWith: e title: 'My Application'
>>
>> Rob
>> ------------------------------------------------------------------------
>>
>> _______________________________________________
>> Aida mailing list
>> [hidden email]
>> http://lists.aidaweb.si/mailman/listinfo/aida
>>
>
> --
>
> *Nicholas J Moore*
>
>
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> Aida mailing list
> [hidden email]
> http://lists.aidaweb.si/mailman/listinfo/aida

Rob Rothwell

Re: ViewTabs

Thank you all for all of the Tabs-tutelage!

The only thing I have found today to be "weird" is that if the LAST tab is the unselected tab, I had to add a space after it for it to show up right:

tabComponent

| e |

e := WebElement new.

e add: (WebTabs new

selected: 3;

addLinkTo: self observee patient text: 'General';

addLinkTo: self observee patient diagnosisList text: 'Diagnosis';

addText: 'Procedures' attributes: #bold;

addSpace).

^ e

Without the "addSpace" all I got was a single text bullet "Procedures."

Maybe this is because I have subclassed WebStyle and have messed something up...

Anyway, it turns out the ViewTabs were EXACTLY what I was looking for to catagorize information for a single domain object!

Thank you both again,

Rob

On Thu, Mar 13, 2008 at 9:00 PM, Janko Mivšek <[hidden email]> wrote:

Hi Nicholas,

Good that you pointed out WebTabs too, which are more general tabs to
switch between arbitrary App and views, and even foreign pages.
Otherwise look at the WebTabs hierarcy to see them all:

Object
WebElement
WebList
WebTabs
ViewTabs

WebTabs comment: WebTabs are visual selection tool. selected tab is in
front, others are back and have url links.
By default an instance have CSS class 'webtabs' and selected tab
'webtabselected"

Usage:
self addTextBold: 'Selected without link'.
self addLinkTo: someObject text: 'not-selected with link' view: #view.
self selected: 1.

ViewTabs comment: For quick selection of App views. Just fill with view
names and descriptions, all other will be automatic. Tab for curently
shown will be colored as shown, other tabls will have links to self
observee and appropriate view

Janko

_______________________________________________
Aida mailing list
[hidden email]
http://lists.aidaweb.si/mailman/listinfo/aida

Janko Mivšek

Re: ViewTabs

Rob Rothwell wrote:

> The only thing I have found today to be "weird" is that if the LAST tab
> is the unselected tab, I had to add a space after it for it to show up
> right:
>
> tabComponent
> | e |
> e := WebElement new.
> e add: (WebTabs new
> selected: 3;
> addLinkTo: self observee patient text: 'General';
> addLinkTo: self observee patient diagnosisList text: 'Diagnosis';
> addText: 'Procedures' attributes: #bold;
> addSpace).
> ^ e
>
> Without the "addSpace" all I got was a single text bullet "Procedures."

Yes, because you again forgot to add #youself at the end of cascade.
Most adding methods in Aida return added element, not an element where
you added. That's the same as Set add: or Dictionary at:put:

Janko

>
> Maybe this is because I have subclassed WebStyle and have messed
> something up...
>
> Anyway, it turns out the ViewTabs were EXACTLY what I was looking for to
> catagorize information for a single domain object!
>
> Thank you both again,
>
> Rob
>
> On Thu, Mar 13, 2008 at 9:00 PM, Janko Mivšek <[hidden email]
> <mailto:[hidden email]>> wrote:
>
> Hi Nicholas,
>
> Good that you pointed out WebTabs too, which are more general tabs to
> switch between arbitrary App and views, and even foreign pages.
> Otherwise look at the WebTabs hierarcy to see them all:
>
> Object
> WebElement
> WebList
> WebTabs
> ViewTabs
>
> WebTabs comment: WebTabs are visual selection tool. selected tab is in
> front, others are back and have url links.
> By default an instance have CSS class 'webtabs' and selected tab
> 'webtabselected"
>
> Usage:
> self addTextBold: 'Selected without link'.
> self addLinkTo: someObject text: 'not-selected with link'
> view: #view.
> self selected: 1.
>
>
> ViewTabs comment: For quick selection of App views. Just fill with view
> names and descriptions, all other will be automatic. Tab for curently
> shown will be colored as shown, other tabls will have links to self
> observee and appropriate view
>
> Janko
>
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> Aida mailing list
> [hidden email]
> http://lists.aidaweb.si/mailman/listinfo/aida