[sixtosantos]

Hello guys,

I’m new here and this is my very first post. I’ve been playing with MobiOne for a couple of weeks now, and find it absolutely fantastic. I really love this thing.

Anyway, I just wanted to share a small demo I made to showcase a new technique to create dynamic tableview lists.

This is a multi-page demo with a different list in each tab. The list rendering routine is very flexible as it uses the list that is already in the page as the template (as shown on the first screen). The rendering function takes the container (a page or a panel) and the list of items as parameters. This demo uses data from RSS feeds to demonstrate the concept, but it could just as easily use any other source.

It operates within the confines of the container, allowing you to have multiple lists in your app, all rendered with the same routine. Although the demo is a multi-page app, the same routine works as is in a stand-alone page, you just need to specify a scrolling-panel as the container.

Also included in the demo is a nice routine to read and parse RSS feeds without an external library. Implemented here are parsers to read the iTunes top 25 songs feed (second screenshot), the top iphone app feed (the third screen), and a YouTube RSS feed (the fourth). Each feed uses its own particular format, and we use different techniques to extract the image and the relevant info.

The detail pages are being populated from the same feed as the lists. The fifth screenshot shows the detail page for the top song list. By the way, I’m using CincyPlanet’s trick to embed a youtube video within a page for the MobiOne videos. Very nice, thanks!

Download the project files here..

Find the webapp demo here.

If you have any question, feel free to post it here.

Cheers,
Sixto

[colsta]

Much appreciated help. Always looking to style up existing app dynamics.

[Brandon]

Great looking sample. I will check it out later today.

[Brandon]

The demo looks great though I havent had much time to mess with it.

It would be nice if it had more notes on how to assign content, find the RSS items, and pass the content to the view screen, for example passing encoded content to the html container.

[nvts]

Sixto,

Thanks for posting. I have looked at your code and implemented the case statement in the prePageTransition area for my SQLite test app.

Also, CincyPlanet has some great code examples that I have used in the learning of MobiOne and creating apps.

It is members like you and especially CincyPlanet that will make MobiOne a better product for newbies like myself.

Cheers…

[Brandon]

I tried implementing it and it seems to work fine in the test center but not online. I have it on the same domain so I know its not a cross domain issue. Just wondering if you ran into the same problem.

Thanks

[sixtosantos]

@CincyPlanet wrote:

I tried implementing it and it seems to work fine in the test center but not online. I have it on the same domain so I know its not a cross domain issue. Just wondering if you ran into the same problem.

Thanks

Strange. I’ve tested on both an iPhone and an Android and it is working all right. I even tried on a Galaxy Tab and it appears to be working well.

I published the project on the internet (http://goo.gl/DmN3L), have you tried if this works on your phone?

Cheers,
Sixto

[Brandon]

Yeah, the demo seems to work fine on my phone. Thats why I thought it was strange it was working in the test center, but not online.
Online it just shows the loading activity but never finishes loading.

[Brandon]

I got it working, had to rewrite it, which looks just like the previous code…not sure what the problem was.

[ehpdesigns]

Would it be possible to get an overview for instructions to tweak/customize this?

[WiseMan]

Hi there.

This is really a great share. Thanks Sixto.
Since that I lack the sufficient experience, I just was wondering if it’s possible to tweak the app to make it read my own RSS feed and how, if you please.

I’d be very appreciative if anyone would help me on this.
WiseMan

[sixtosantos]

I’m documenting the code and will be releasing an update soon.

Cheers,
Sixto

[ehpdesigns]

Thanks for doing that Sixto. This is a great addition to the MobiOne library of scripts, etc. Being able to have a few “How To’s” for tweaking would def help out a lot of people.

[poisom]

Hello, i have almost complete my progect with your xml guide, but i have a little problem to finish it.

From my xml i get a tag <url> and i want to implemented in the article view (=after a user hit a listitem from the main list of the xml feed)

I made a hyperlink but i cannot change the attribute of the href, please could you help me?

my setup is

var $this = $(this),
            item = {
                title: $this.find("title").text(),
                url: $this.find("url").text(),
                image: $this.find("image").text(),
                content: $this.find("fulltext").text()
        }

how it should be?? i know that the url: $this.find(“url”).text(), is wrong 😀

Thank you!

[jim]

WOW ! Thank you very much for sharing this excellent example Sixto. Your code is organized and beautiful and I learned much reading through it. Now I understand a few important programming concepts that had previously eluded me. Your example made my day. I was wondering what the purpose is of phoneui.forceLayout(); after the preprocessDOM ?

A few other pieces of code I kind of understand but I’m still wrapping my brain around are:
var xxxxx = $(event.srcElement).closest(‘li[data-listitem-index]’); I guess it figures out what was clicked. Very slick

and the use of $(“:root”).data – still a little fuzzy here

and last but not least the very cool way of determining active_page:
var tab_controller = $(“div[id*=tabBar1]”);
var active_page = $(“div[class*=m1-selected]” , tab_controller).attr(“data-attached-multiboxpage”);

To say the least, I’m in awe of this code and will be analyzing it until I figure it all out. Thanks again !

[Author]

Posts