[ 9 posts ]

Khael

  • Joined: Tue Apr 19, 2011 2:18 am
  • Posts: 7
  • Offline
  • Profile

App pageView change without re-rendering subviews

Post Posted: Mon Jun 11, 2012 6:05 am
+0-
So I am trying to port our companys main web app to the new app framework, because in many ways I feel it would be a great benefit to use the mvc approach used, to separate data and views.

But I also find the concept of pageView and activeView on the app level to be somewhat a wrong approach, at least for our app. I have thought this over for many days now, and I just can't seem to get my head around, how to do it the optimal way.

So perhaps someone here can give me some advice.

Our webapp is build over a traditional UI setup with left, main, and right columns.

These 3 columns each need to be able to switch between multiple views.

So by reading the examples here on YUI I am told that I have to create a pageView for each possible combination of the 3 columns, using nested views for each columns view.

But alot of different combinations are possible, the 3 columns are almost like separate entities. The left column has perhaps 12 different possible views, the maincolumn has perhaps 7 and the right column also has quite a few.

So is the only way to do this really to setup 50+ different pageViews or can anyone suggest a better approach?


Last edited by Khael on Mon Jun 11, 2012 1:54 pm, edited 1 time in total.

Eric Ferraiuolo

YUI Developer

  • Username: ericf
  • Joined: Mon Jan 12, 2009 8:26 pm
  • Posts: 380
  • Location: Boston, MA
  • Twitter: ericf
  • GitHub: ericf
  • Gists: ericf
  • IRC: eric_f
  • YUI Developer
  • Offline
  • Profile
Tags:

Re: How do I best structure app with multiple views

Post Posted: Mon Jun 11, 2012 7:26 am
+0-
I don't think you'll have to build out every possible combination into different View subclasses. Using the approach outlined in the GitHub Contributors example app ( http://yuilibrary.com/yui/docs/app/app- ... page-views ), you could parameterize the main/page views to take subviews during instantiation.

Khael

  • Joined: Tue Apr 19, 2011 2:18 am
  • Posts: 7
  • Offline
  • Profile
Tags:

Re: How do I best structure app with multiple views

Post Posted: Mon Jun 11, 2012 8:23 am
+0-
Hey Eric,

Thanks for your reply ;)

I have looked and mulled over this example for almost a week now.

If I use this approach, then whenever I change active view, then the top level app container, will be replaced, meaning all my three columns will be refreshed.

I know that I can set it up so the view is preserved and can be restored quick again, but still then i have multiple instances of the same subview where I would rather share this subview, so that updates to one subview will be made on all different pageviews that use this particular subview.

The thing is, often I would need to change view only on the left column, and keep the maincol and rightcol as they are.

So why does the app component assumes you want to always rerender the whole main container when you switch views? It seems to me that in alot of apps you want to only change part of the interface, and I am sure there is a way to do this, I just don't seem to be able to figure it out from the given examples on the documentation.

I wonder what I am missing here? :/


Last edited by Khael on Mon Jun 11, 2012 2:40 pm, edited 2 times in total.

Khael

  • Joined: Tue Apr 19, 2011 2:18 am
  • Posts: 7
  • Offline
  • Profile

Re: How do I best structure app with multiple views

Post Posted: Mon Jun 11, 2012 9:15 am
+0-
I think I have found my main concern here about subviews.

I would like to share a sub-view instance between different pageViews.

Is that possible?

The way the examples are setup, when you change a top-level pageView, the previous pageview along with all subviews are removed from the dom, or saved, and the app container is re-rendered anew with a new pageView containing new subview instances.

But is it possible to preserve some of these subviews so I don't have to rerender them for each pageView change, instead sharing them between different pageViews?

Edit: right now I am considering just rendering all possible views in left, main, and right columns of my app, and using Router callbacks to change (hide/show) between active views for each column.

But this means I wont be using the App part of the framework at all ;(

Edit 2: Hmm unless I've misunderstood something, it seems like the App component is best suited to handle simple webapps/widgets or mobile phone apps where you usually need to change the whole app UI (the whole screen) for each view, but not so well suited for desktop webapps where the screen is larger and you usually split the screen into independent parts, like the traditional left-/main-/right-column setup i described earlier.

Eric Ferraiuolo

YUI Developer

  • Username: ericf
  • Joined: Mon Jan 12, 2009 8:26 pm
  • Posts: 380
  • Location: Boston, MA
  • Twitter: ericf
  • GitHub: ericf
  • Gists: ericf
  • IRC: eric_f
  • YUI Developer
  • Offline
  • Profile
Tags:

Re: App pageView change without re-rendering subviews

Post Posted: Mon Jun 11, 2012 4:34 pm
+0-
You can setup Y.App to do what you want. Checkout out this working example:
http://jsbin.com/3/ojalij/#/

Here's the code:

Y.App with Composite View

Click here to see the revision history on this Gist.

Khael

  • Joined: Tue Apr 19, 2011 2:18 am
  • Posts: 7
  • Offline
  • Profile
Tags:

Re: App pageView change without re-rendering subviews

Post Posted: Tue Jun 12, 2012 12:52 am
+0-
Ok, this example was somewhat of a revelation for me.

Thanks a lot for taking time to give me an example. I appreciate it. \o/

I guess this is not so much different from what is being shown in the examples in the documentation, but maybe it was because it was more simple that I finally get it this time.

Eric Ferraiuolo

YUI Developer

  • Username: ericf
  • Joined: Mon Jan 12, 2009 8:26 pm
  • Posts: 380
  • Location: Boston, MA
  • Twitter: ericf
  • GitHub: ericf
  • Gists: ericf
  • IRC: eric_f
  • YUI Developer
  • Offline
  • Profile

Re: App pageView change without re-rendering subviews

Post Posted: Tue Jun 12, 2012 7:31 am
+0-
Cool, I'm glad this helps!

I specifically chose to take a more consecrative/general approach to Y.App's view management features for the first release of the component (which was for 3.5.0). That way I could get feedback from developers, like what you're providing, to help determine the direction I should take Y.App's features.

Khael

  • Joined: Tue Apr 19, 2011 2:18 am
  • Posts: 7
  • Offline
  • Profile
Tags:

Re: App pageView change without re-rendering subviews

Post Posted: Tue Jun 12, 2012 9:40 am
+0-
Seems to be great work you guys are doing!

I am really excited about porting our webapp Filecamp - http://filecamp.com - over to using the new App framework - hope it wont change too much during beta, heh ;)

Once I'm done in a couple of months I'll be much more experienced in using it, and will provide you with some feedback if I feel I have anything relevant to suggest/comment on.

Thanks again.

Szymon J

  • Username: szym
  • Joined: Thu Jun 14, 2012 7:03 am
  • Posts: 6
  • GitHub: sjuchno
  • Gists: sjuchno
  • Offline
  • Profile

Re: App pageView change without re-rendering subviews

Post Posted: Fri Jun 15, 2012 6:51 am
+0-
Could you please provide a similar example of multiple views that renders both on server and client?
Thanks in advance.
  [ 9 posts ]
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum