Phase V¶
Lottery Vue Module¶
- To create visual access of apis created in play module
- Open Lottery.ksmile
- Edit Lottery.ksmile and insert the below content to create a LotteryVue module Lottery.ksmile
group lottery {
vue-module/0.2 LotteryVue(LotteryPlay) at com.metastay.lotteryvue
}
- $smile
- In Eclipse refresh to see the LotteryVue.kvue
- Edit LotteryVue.kvue to create html files LotteryVue.kvue
route "lottery"
html-fragment Header
html-fragment Footer
html-fragment Home
html-fragment LotteryList
html-fragment CreateLottery
html-fragment LotteryDetails
- $compile
- open html-fragment Header.html under “/LotteryVue/src/com/metastay/lotteryvue/fragment/header.html” headerhtml
- Edit footer.html footerhtml
- Edit home.html homehtml
- Edit lottery-list.html lotterylisthtml
- Edit create_lottery.html,lottery_details.html
- Edit lotteryvue-main.html mainhtml
- Edit lotteryvue-router.js
var routes = [
{ path : '/', redirect: '/home'},
{ path : '/home', name : 'home', component: LotteryVue.Components.Home},
{ path : '/lottery-list', name : 'lotteryList', component: LotteryVue.Components.LotteryList},
{ path : '/create-lottery', name : 'createLottery', component: LotteryVue.Components.CreateLottery},
{ path : '/lottery-details/:lotteryName', name : 'lotteryDetails', component: LotteryVue.Components.LotteryDetails}
]
- Edit lotteryvue-shell.html, add the title as Lottery
- $run and access http://localhost:9000/lottery, go through all the links and they should be access right pages
- Connect with Play (Web Writer and Web Reader) edit LotteryVue.kvue
data LotteryForm (lotteryName:String, amount:Int)
data LotteryDetails (lotteryName:String"{\"link\" : \"lottery-details/:lotteryName\"}", amount:Int, participantList:String* "{\"visible\" :false}", winner:String?, status:String)
bus Lottery {
lotteryListAvailable(lotteryList:LotteryDetails*)
LotteryDetailsAvailable(lotteryDetails:LotteryDetails)
}
actions Lottery{
loadLotteryList
createLottery
loadLotteryDetails
addParticipant
runLottery
}
backend-writer Lottery LotteryPlay::Lottery
backend-reader Lottery LotteryPlay:: Lottery
- $compile
- Edit LotteryActionsCode.scala lotteryActions
- To get a better display of lottery list we need to add buter component to the project
- add-component buter-release-0.1,in ksmile file and follow the guided steps(if any)
- Edit Lottery.ksmile
import-component buter-release-0.1(ButerVue)
vue-module/0.2 LotteryVue(LotteryPlay, ButerVue) at com.metastay.lotteryvue
- $smile
- Edit LotteryVue.kvue and group-ref ButerVue::Buter (next to route)
- $compile
- Edit lottery-list.html improvedLotteryList
- $run
- http://localhost:9000/lottery#/lottery-list will display list of available lotteries.
- edit create-lottery.html improvedCreateLottery
- access the create lottery link and test by creating one lottery
- Edit lottery-details.html improvedLotteryDetails