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

Discussion in 'B4J Share Your Creations' started by Mashiane, Jan 22, 2019.

  1. Mashiane

    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.

    Code:
    '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"""FalseNull)
            
    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
     

    Attached Files:

    Last edited: Jan 24, 2019
    joulongleu and Kiffi like this.
  2. Mashiane

    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...

    Code:
    '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.

    Code:
    '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
     

    Attached Files:

    joulongleu likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice