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

Mashiane

Expert
Licensed User
Download Source Code

Download BANanoJQM

Actually, this is rather a weird one...

Decided to experiment with JQuery Mobile framework to explore a movie database rest api.


This was a quick implementation for the UX though just for what I needed. I guess because I initially started with JQ with my mobile app development it has been a comfort zone, besides its very well documented and easy peasy..

Tried to simplyfy things for myself as much as I can.

B4X:
'Static code module
Sub Process_Globals
    Public BANano As BANano
    Public App As JQMApp
    Public Page As JQMPage
    Public ID As String = "index"
    Public URL As String = "http://api.themoviedb.org/3/"
    Public Mode As String = "search/movie?query="
    Public MovieName As String
    Public Key As String = "&api_key=5fbddf6b517048e25bc3ac1bbeafb919"
    Dim ml As JQMListView
End Sub
'create the page
Public Sub Create(thisApp As JQMApp)
    App = thisApp
    'create the page
    Page.Initialize(ID)
    Page.Title = "Movie List"
    Page.Header.Fixed = True
    Page.Header.AddRightButton("mi","Movie Info", "#" & headline.ID,App.EnumIcons.camera,App.EnumIconPos.notext,App.EnumTransition.slide,False,"")
    'add a heading
    Page.Header.AddH1("", Page.title)
    'add a search box
    Page.Content.AddTextBox("txtsearch","Name of Movie to search for:","",False,True,True)
    'add a search button
    Page.Content.AddButton1("btnsearch","Search","#",App.EnumIcons.search,App.EnumIconPos.right,"","")
    Page.AddClickedEvent("btnsearch")
    'will tell user of movies found
    Page.Content.AddParagraph("moviesfound","")
    Page.Content.AddParagraph("moviesfound1","")
 
    'list movies
    ml.Initialize("movie-list")
    ml.Inset = True
    Page.Content.AddListView(ml)
    'add a footer
    Page.Footer.Fixed = True
    Page.Footer.AddH1("","Copyrights 2019")
End Sub

'the seach button has been clicked
Sub btnsearch_click(event As BANanoEvent)
    'clear the form contents
    BANano.GetElement("#moviesfound").SetText("")
    ml.Clear
         
    'get the entered search value
    Dim txtsearch As BANanoElement = BANano.GetElement("#txtsearch")
    Dim ssearch As String = txtsearch.GetValue
    If ssearch.Length = 0 Then Return
    'define the move name
    MovieName = "&query=" & ssearch
    'lets check the internet connection
    If BANano.CheckInternetConnectionWait Then
        Dim getStr As String =  URL & Mode & Key & MovieName
        Dim res As String = BANano.CallAjaxWait(getStr,"GET","jsonp", "", False, Null)
        If res.Length > 0 Then
            Dim moviesM As Map = Page.Json2Map(res)
            Dim total_results As String = moviesM.Get("total_results")
            Dim resultsx As List = moviesM.Get("results")
            BANano.GetElement("#moviesfound").SetText($"${total_results} movie(s) have been found..."$)
            'add movies to the listview
            For Each movie As Map In resultsx
                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")
             
                'create a listitem
                Dim isec As String = $"Vote Average: ${sva} / Votes: ${svc}"$
                Dim imgP As String = "https://image.tmdb.org/t/p/w300_and_h450_bestv2" & spp
             
                Dim li As JQMListItem
                li.Initialize("movie-" & sid, "","", "" )
                li.Anchor.AddImage1("img-" & sid, imgP, stit,"80","80",False)
                li.Anchor.AddH3("h3-" & sid, stit)
                li.Content.AddAsideItem("si-" & sid, isec)
                li.Content.AddParagraph("p-" & sid, sov)
                ml.AppendHTML(li.ToString)
            Next
            ml.refresh
        End If
        shared.Ajaxresult = res
    Else
        Log("There is no internet connection..." & shared.Ajaxresult)
    End If
End Sub
#IHaveSoMuchToLearn

Original Source Code
 

Attachments

Last edited:

Mashiane

Expert
Licensed User
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
 

Attachments

Top