Automating Carousel

[sohashi]

Hi,

Our customer would like to imprement carousel in their VLWeb application.

LANSA provides demo sample(xDemoWebCarousel).
However it can be scrolled only manually.

Is it possible to make Carousel move automatically?

They would like to imprement the feature like the top image of following URL:
http://www.softbank.jp/mobile/

I appreciate your kind advice.

Best Regards,
Shumpei Ohashi

[dannyoorburg]

Hi Shumpei,

if you check out the documentation for carousel:

http://docs.lansa.com/14/EN/lansa016/PRIM_CARO.htm

You'll find several methods to control its behavior programmatically.

Regards,
Danny

[Stewart Marshall]

Hi Shumpei

A better solution that trying to make carousel work as you want is to make a simple reusable part that does the job for you. This will give you complete control over the appearance.

In the sample below I've made a webpage with 3 images and 3 round labels. As the timer ticks, the next image in sequence comes to the front while the active one fades out. You can also click the round labels to activate which ever item you want.

Regards

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Height(465) Width(857) LayoutManager(#Layout1)
Define_Com Class(#PRIM_VS.Style) Name(#Style1) CornerBottomLeft(12) CornerBottomRight(12) CornerTopLeft(12) CornerTopRight(12) BorderLeft(0) BorderTop(0) BorderRight(0) BorderBottom(0) Cursor(Hand)

Define_Com Class(#PRIM_TBLO) Name(#Layout1)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow1) DisplayPosition(1) Parent(#Layout1) Height(1.58)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn1) DisplayPosition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Row) Name(#Row1) DisplayPosition(2) Parent(#Layout1) Height(0.42)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem1) Column(#LayoutColumn1) Manage(#Image1) Parent(#Layout1) Row(#LayoutRow1) Sizing(None)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem2) Column(#LayoutColumn1) Manage(#Image3) Parent(#Layout1) Row(#LayoutRow1) Sizing(None)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem3) Column(#LayoutColumn1) Manage(#Image2) Parent(#Layout1) Row(#LayoutRow1) Sizing(None)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem4) Column(#LayoutColumn1) Flow(CenterHorizontal) Manage(#Label2) Parent(#Layout1) Row(#Row1) Sizing(None) Alignment(TopCenter) MarginLeft(4) MarginRight(4)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem5) Column(#LayoutColumn1) Flow(CenterHorizontal) Manage(#Label3) Parent(#Layout1) Row(#Row1) Sizing(None) Alignment(TopCenter)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutItem6) Column(#LayoutColumn1) Flow(CenterHorizontal) Manage(#Label1) Parent(#Layout1) Row(#Row1) Sizing(None) Alignment(TopCenter)

Define_Com Class(#PRIM_IMAG) Name(#Image1) DisplayPosition(1) Height(256) Image(#xImageCamera256) Left(300) Parent(#COM_OWNER) TabPosition(1) TabStop(False) Top(56) Width(256)
Define_Com Class(#PRIM_IMAG) Name(#Image2) DisplayPosition(2) Height(256) Image(#xImageEmployee256) Left(300) Parent(#COM_OWNER) TabPosition(2) TabStop(False) Top(104) Width(256) Visible(False)
Define_Com Class(#PRIM_IMAG) Name(#Image3) DisplayPosition(3) Height(256) Image(#xImageImage256) Left(300) Parent(#COM_OWNER) TabPosition(3) TabStop(False) Top(104) Width(256) Visible(False)
Define_Com Class(#PRIM_LABL) Name(#Label1) DisplayPosition(4) Ellipses(Word) Height(24) Left(388) Parent(#COM_OWNER) TabPosition(6) TabStop(False) Top(368) VerticalAlignment(Center) Width(24) ThemeDrawStyle('MediumTitle') Style(#Style1)
Define_Com Class(#PRIM_LABL) Name(#Label2) DisplayPosition(5) Ellipses(Word) Height(24) Left(416) Parent(#COM_OWNER) TabPosition(5) TabStop(False) Top(368) VerticalAlignment(Center) Width(24) ThemeDrawStyle('AlternateItem') Style(#Style1)
Define_Com Class(#PRIM_LABL) Name(#Label3) DisplayPosition(6) Ellipses(Word) Height(24) Left(444) Parent(#COM_OWNER) TabPosition(4) TabStop(False) Top(368) VerticalAlignment(Center) Width(24) ThemeDrawStyle('AlternateItem') Style(#Style1)

Define_Com Class(#Prim_acol<#Prim_imag>) Name(#Images)
Define_Com Class(#Prim_acol<#Prim_labl>) Name(#Labels)

Define_Com Class(#prim_timr) Name(#Timer) Interval(3000)

Define_Com Class(#Prim_nmbr) Name(#ActiveImage) Value(1)

Evtroutine Handling(#Com_owner.CreateInstance)

For Each(#Member) In(#Com_owner.ComponentMembers) Operation(*Instance_Of #Prim_imag)
#Images.Insert( #Member )
Endfor

For Each(#Member) In(#Com_owner.ComponentMembers) Operation(*Instance_Of #Prim_labl)
#Labels.Insert( #Member )
Endfor

Endroutine

Evtroutine Handling(#Timer.Tick)

#Com_owner.Iterate

Endroutine

Mthroutine Name(Iterate)

If (#ActiveImage >= #Images.ItemCount)

#Com_owner.Activate( 1 )

Else

#Com_owner.Activate( (#ActiveImage + 1) )

Endif

Endroutine

Evtroutine Handling(#Labels<>.Click) Com_Sender(#Sender)

#Com_owner.Activate( #Labels.IndexOf<#Sender> )

Endroutine

Mthroutine Name(Activate)
Define_Map For(*Input) Class(#Prim_nmbr) Name(#Item)

#Images<#ActiveImage>.FadeOut
#Labels<#ActiveImage>.ThemeDrawStyle := AlternateItem

#Images<#Item>.FadeIn
#Labels<#Item>.ThemeDrawStyle := MediumTitle

#ActiveImage := #Item

Endroutine

End_Com

[Stewart Marshall]

Hi Shumpei

I've convert the sample to a reusable part and posted it as a tip

http://vlforum.lansa.com.au/viewtopic.php?f=4&t=1154

Regards

[sohashi]

Hi　Danny

Thank you very much for the response.

It was very helpful.

I thank you.

Best Regards,

Sumpei Ohashi

[sohashi]

Hi　 Stewart

Thank you very much for the response.
Thanks for the sample.

It was very helpful.

I thank you.

Best Regards,

Sumpei Ohashi