Share My Creation [BANAno] Waking the JQuery Mobile Dino for a rest api experiment

Mashiane · Jan 24, 2019

This update does what this is meant to do, show the details of the selected movie on another page.

So basically we are able to change pages with animation, dynamically update the listview contents with records from the rest api. The output ptoject is attached.

When a movie is selected from the listview...

B4X:

'click on every movie
Sub movie_click(event As BANanoEvent)
    'dont bubble events
    event.StopPropagation
    Dim mprefix As String = App.MvField(event.ID, 1, "-")
    Select Case mprefix
    Case "movie"
        'save the selected movie details
        modMovies.movieSel = event.id
        'change to the movie infor page
        App.ChangePage(headline.ID,App.EnumTransition.slide)
    End Select
End Sub

'*** css code to apply to the complete page

#if CSS
.ui-content {
    padding: 0 !important;
}
  
.ui-listview {
    margin: 0 !important;
}
  
.example-wrapper, .example-wrapper div.iscroll-scroller {
    width: 100% !important;
}
 
li img {
    height: 150px;
    float: left;
    margin-right: 20px;
}
#End If

Code to show each movie details, these are stored in a map for later retrieval.

B4X:

'Static code module
Sub Process_Globals
    Public BANano As BANano
    Public App As JQMApp
    Public Page As JQMPage
    Public ID As String = "headline"
    Private ml As JQMListView
End Sub

'create the page
Public Sub Create(thisApp As JQMApp)
    App = thisApp
    'create the page
    Page.Initialize(App,ID)
    Page.Title = "Movie Info"
    Page.Header.Fixed = True
    Page.Header.AddLeftButton("bhome","Left", "#" & home.id,App.EnumIcons.home,App.EnumIconPos.notext,App.EnumTransition.slide,True,"")
    'add a heading
    Page.Header.AddH1("", Page.title)
    
    'list movies
    ml.Initialize(App,"movie-data")
    ml.Theme = App.EnumThemes.a
    Page.Content.AddListView(ml)
    'add a footer
    Page.Footer.Visible = False
    'append page to body
    Dim pgCode As String = Page.ToString
    App.Append("body", pgCode)
End Sub

#if Javascript
$(document).on('pagebeforeshow', '#headline', function(){
  _banano_moviedb_headline.loadselectedmovie();
});
#End If

Sub LoadSelectedMovie
    'clear the listview content
    App.Empty("movie-data")
    'get list of movies map
    'get the movie that was selected
    Dim singlemovie As String = modMovies.movieSel
    'get the movie id number
    singlemovie = App.MvField(singlemovie,2,"-")
    Dim mkey As String = $"movie-${singlemovie}"$
    'get the movie record
    Dim movie As Map = modMovies.moviesList.Get(mkey)
    Dim sadult As String = movie.Get("adult")
    Dim sid As String = movie.Get("id")
    Dim sol As String = movie.Get("original_language")
    Dim sot As String = movie.Get("original_title")
    Dim sov As String = movie.Get("overview")
    Dim spop As String = movie.Get("popularity")
    Dim spp As String = movie.Get("poster_path")
    Dim srd As String = movie.Get("release_date")
    Dim stit As String = movie.Get("title")
    Dim svid As String = movie.Get("video")
    Dim sva As String = movie.Get("vote_average")
    Dim svc As String = movie.Get("vote_count")
    
    App.append("movie-data", $"<li><img src="https://image.tmdb.org/t/p/w300_and_h450_bestv2${spp}"></li>"$)
    App.Append("movie-data", $"<li>Title: ${stit}</li>"$)
    App.Append("movie-data", $"<li>Release Date: ${srd}</li>"$)
    App.Append("movie-data", $"<li>Popularity: ${spop}</li>"$)
    App.Append("movie-data", $"<li>Average Vote: ${sva}</li>"$)
    App.Append("movie-data", $"<li>Overview: ${sov}</li>"$)
    ml.Refresh
End Sub

Share My Creation [BANAno] Waking the JQuery Mobile Dino for a rest api experiment

Attachments

Mashiane

Expert

Attachments

Similar Threads