In a basic application you have a main vaadin-app-layout with <slot>s where the router places child components. But what if such a child component has itself child components and I want to use routes to route between them? Can I have a nested vaadin-app-layout with slots? And how would the router know in which of the slots to fill a component for any given URL path?
As a concrete example, imagine a typical application layout with header, navigation bar on the left, and a main view right to it. Loading different views to the main view pane works alright with Vaadin router. But now imagine that one of the components loaded to the main view is itself a Vaadin tab view with two tabs, and I want to be able to route to each of these tabs from anywhere within the application, bookmark them, asf.
Vaadin Router supports this by specifying the component property both in parent and child route objects.
See "Nested Components" section at https://vaadin.github.io/router/vaadin-router/#/classes/Router/demos/demo/index.html
There should be no problem using 2 or more levels of nested layouts. For example:
router.setRoutes([
{path: '/',
component: 'x-main-layout',
children: [
{path: '/', component: 'x-home-view'},
{path: '/subsection',
component: 'x-subsection-layout',
children: [
{path: '/', component: 'x-other-view'},
{path: '/list', component: 'x-list-view'},
]
},
]
}
]);
When navigating to /subsection/list you would end up with:
<x-main-layout>
<x-subsection-layout>
<x-list-view></x-list-view>
</x-subsection-layout>
</x-main-layout>
The view components are simply added as children according to your route hierarchy so when you have a shadow root on the component the contents will be slotted into the default slot.
Related
I have some controller classes with own implementations. Is it possible to insert one to another as view in viewgroup?
Yep, this is what child controllers are. From the readme:
getChildRouter can be called on a Controller in order to get a nested Router into which child Controllers can be pushed. This enables creating advanced layouts, such as Master/Detail.
With angular js, How can I manage an complex view layout that allows the hiding and showing of windows (and so on.) I need to do so without loosing any state or scope while reopening windows if the same url-path will be used. This is like showing a list of items, and opening each in a window parallel to the others. With angular and routes, the previous scope will be destroyed.
(#/itemlist -> #/itemlist/item/1 and #/itemlist/item/2)
One item opens multiple components (two windows; please move them around) with the same state, manged by the angular ui states.
Each state has its own controller and each controller has its own scope.
Scope inheritance can be designed later in an extended prototype, but should be independent of the view hierarchy.
Controller and views will be destroyed by scope destruction or if all views are destroyed the controller and scope must be also destroyed (not completely implemented yet.)
If a route is recalled and a scope exists the correlated view(s) will be reactivated.
The idea is to use two services that manage/stores the controllers and, via scope, the associated views. To shadow the management of both components, a generic controller $stateProvider is used to resolve the controller / view injection:
$stateProvider
.state({
name : 'item',
url: '/item/:id',
views:{
'genericCtrl' : {
resolve : {
views : function() { return ['TestView', 'TestView']; },
ctrl : function() { return 'TestCtrl' ; }
},
controller : 'GenericCtrl'
}
}
})
See this fiddle example
I dont know if the concept works, or if angular has its own means (which I haven't found yet) or if another, better solution exists. Please write your thoughts, improvements and so on down. This should be the base concept of our big application.
I'm creating a single-page web app that has one controller for the overall page (PageController) and separate child controllers for two views (ViewController and EditController).
ViewController needs a button called "Edit" in the titlebar of the app, EditController needs a button called "Save". The buttons occupy the same space, but have different labels and different on-click handlers. The titlebar belongs to the parent template/controller (i.e. PageController) scope.
One way to accomplish this is to create the button in the parent scope and let the child controllers change the text and override the ng-click handler - but I'm thinking there's probably a better way with Angular. I'd like some way for the child controllers to "inject" (not sure if this is the proper use of the word here) their button into to the parent template and handle the onclick locally, making the parent agnostic of what goes on in the child controllers...
I would think about your "views" differently. To me, titlebar is a view, just like your View and Edit views. It should therefore either contain all of the HTML it needs to render whatever you might want to show in that view, or it should know which files to ng-include.
Views are driven by models. The View and Edit controllers should call methods defined on whatever controller (or service) contains the titlebar model to set some state/properties appropriately. The titlebar view/HTML would use ng-show/hide or ng-include directives to show/include the appropriate HTML based on the current state of the model/$scope.
To be notified of a button click, the View and Edit scopes could $watch a model/$scope property for a change. E.g., <a ng-click="buttonState.clicked=true">...</a> I'm using an object with a clicked property so that the child controllers can reset the value inside their $watch callbacks (if a primitive was used, resetting would not work -- a new child scope property would be created):
$scope.$watch('buttonState.clicked', function() {
buttonState.clicked = false
... handle button click here ...
}
I would like to make a layout with a sidebar that can have widgets from different modules. Lets say there shall always be a login widget at the top if the user isn't logged in then it shall show user info. The getting started album guide could use it to display the latest albums and so on, i hope you understand how i want to use the sidebar.
Could it be done with a config file in autoload and a small code that read that config and calls the widgets on every page load?
There are several ways of page composition in Zend Framework 2:
1. Switching between Layouts
By default, ZF2 provides you with a single layout template layout.phtml.
In real-life applications, you will probably need to have several layouts
and switch the layout for certain controller/action. In each of your layouts, you will be able to show different widgets/sidebars.
2. Partial Views
A partial view is a .phtml view template file which can be rendered by another
view template. Partial views allow to compose your page of pieces and reuse pieces
of view rendering logic across different view templates. This is accomplished through the Partial view helper.
3. Placeholder View Helper
The Placeholder is another useful view helper allowing for capturing HTML
content and storing it for later use. Thus, analogous to the Partial
view helper, it allows to compose your page of several pieces.
4. Forward Controller Plugin
With the Forward controller plugin, you are able to call an action (for example, the action rendering some widget) from another module/controller from your controller and grab the output of that action. Then you are able to incorporate that output into your page.
5. Use View Models for Page Composition
When you write action methods for the controller classes, you use the ViewModel
class as a variable container for passing the variables from controller to view template,
and for overriding the default view template name. But, actually the ViewModel class is more than just a variable container plus view template name. In fact, it is closely related to the layout and page composition.
The third big capability of the view model class is that it allows for combining several
view models in a tree-like structure. Each view model in the tree has the associated
view template name and data variables that can be passed to the view template to control
the process of rendering.
This feature is internally used by Zend Framework 2 when "combining" the layout view template and the view template associated with the controller's action method. ZF2 internally creates the view model for the layout template and assigns it with layout/layout view template name. When your controller's action method returns the ViewModel object, this object is attached as a child to the layout view model.
So, you can attach your own view models to the default view model to render the page of pieces that you want.
I'm trying to accomplish switching views without using a navigation controller, tab bar controller etc. I am currently accomplishing this using Cocos2d director class replaceScene method. My application will need to have around 40 view controllers, each with a few UIButtons that could take them to any other view controller.
For instance View controller 1 may have buttons that take you to view controller 2
View Controller 2 may have buttons that link to 3,4,5,12
view controller 4 may need to link to view controller 17, 5 and 3
Every tutorial and bit of documentation I've read only discusses using Navigation Controllers, Tab bars or pushing views modally. None of these solutions fits my particular requirements.
Cocos2d has the "replaceScene" method which does exactly what I need, but mixing the many UIKit controls that I need makes developing this entire project in Cocos2d a nightmare.
I'm looking for something where I can have the user tap a button which will load a specified view controller/view transition to that view, and unload the previous view controller from memory. Any ideas?
Have a root view controller which has references of your view controllers. Also make a weak reference to the root view controller in each view controller, as in a delegate pattern. If one of the view controllers wants to make a view transition, send a message to the root view controller. Let the root view controller hide the current view and unhide the next view, using an animation if you want.
Basically you are implementing a view container much simpler than UINavigationController and UITabBarController. You could probably achieve the same thing using the tab bar controller and hide the tab bar view, but I would implement a custom one.