Page 1 of 1
Automating Carousel
Posted: Thu Dec 01, 2016 1:25 pm
by 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
Re: Automating Carousel
Posted: Thu Dec 01, 2016 4:45 pm
by 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
Re: Automating Carousel
Posted: Thu Dec 01, 2016 5:14 pm
by 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
Re: Automating Carousel
Posted: Fri Dec 02, 2016 9:18 am
by 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
Re: Automating Carousel
Posted: Wed Dec 07, 2016 7:18 pm
by sohashi
Hi Danny
Thank you very much for the response.
It was very helpful.
I thank you.
Best Regards,
Sumpei Ohashi
Re: Automating Carousel
Posted: Wed Dec 07, 2016 7:19 pm
by 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