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