Marionette Layout object to render tab content - marionette

I have a region in which I need to have a tabbed view (simple) however if I want the tab content to be differently layout - not sure how to achieve it. I can create different layout with multiple region and corresponding view, but how do I attach this to tab content, given that applyout can only be attached to region? Or can this be attached to one of the div of tab-content using $el?? Need some pointers.

Not sure I entirely understand your question.. But here goes.
I have implemented a navigation component where I can pass a tabsCollection and region. It will set up a region for the content and a list of tabs above it. When a tab is clicked it will fire the callback on the model in the tabsCollection which can be used to display what ever content you want.
There are more complex ways to handle this to allow for caching of a tabs content. But basically using a Backbone collection for the tabs with their own function for displaying content will do the trick.

Related

CollectionViews inside a tab switching component inside a ScrollView - Xamarin Forms

I am trying to implement the following layout structure using Xamarin Forms components:
- ScrollView (which displays a sticky header when scrolling)
- Title & body text
- Tab Switching Component
- Tab 1: CollectionView of items (load new items on ItemThresholdReached)
- Tab 2: CollectionView of items (")
The desired behaviour is that when scrolling down either of the CollectionViews, the content above this (the text and tab switcher) should scroll out of view and be hidden by the sticky header. Upon scrolling back to the top of the collection view, it would scroll to the top of the page, revealing the content at the top and the sticky header would hide. Essentially, the Collection View and header content should scroll together as one scrolling view. With the above structure, the scroll isn't working because these CollectionViews are inside of an outer ScrollView.
I am using Collection View elements here because I am utilising the ItemThresholdReachedCommand to efficiently load more elements to the collection. The length of the collections will potentially be in the hundreds so performance is also important.
So far I have tried the following:
I set the header content as the header element of the Collection Views so that they would scroll as one. However this doesn't work because the header content is shared by both collection views, including the tab switcher component which wraps both Collection Views. Therefore this content cannot be placed into Collection View header elements.
I have also tried using a BindableLayout instead of CollectionView but this has none of the built-in events that Collection View has and I have read that Bindable Layout shouldn't be used for larger lists of items.
If anyone has any advice on the best way of trying to achieve this, it would be much much appreciated. At this point it feels impossible in Xamarin Forms!

Sitecore page editor dropdown

I would kindly ask for your help :) From couple of days I am trying to achieve "linked" custom field in content editor and dropdown in page editor.
Basically I want to have dropdown in page editor and content editor which are responsible for a same thing.
In my c# code i have enums which represent directions. I created custom field which accepts assembly and class with overridden onload method and successfully populate dropdown values in the content editor. So far so good but i have no idea how to create dropdown which will represent the same functionality inside page editor.
So please give me any ideas...
Judging from your reply to my comment you need to think of the following: How is my field value being rendered onto a page?
If you are always using 1 control to do this then you just need to ensure that this control has 2 different rendering modes depending on the Context.PageMode
But as I understand it you want this dropdown to also appear when someone renders your custom field using a <sc:FieldRenderer>. In this case you'll need to look into the RenderField pipeline of Sitecore. There you find a processor called RenderWebEditing. Possibly through some manipulation here you can get your dropdown appear as you wish.

AngularJS: "Global" menu buttons for multiple views

I've (very) recently dived into Angular, but I'm struggling a bit with how to design my layout.
For my site I've created a menu containing an input field and some buttons. The idea is that the input field combined with either of the buttons should service a function. So say for viewA, the input field should only act as a search bar. If the user however clicks one of the buttons the input field value should be used to as a basis to create a new item in another viewB.
The search function works great for viewA, but I'm unable to make the buttons switch views. I'm suspecting (or know, but don't know how to address it) this is because the mentioned buttons are outside the view (ng-view) and thus don't have a controller.
I've searched around for "multiple controllers / views", where suggestions vary from using the include function or create a service. Problem is I have no idea what would best practise or if it's even necessary for my case.
The menu + input field is another view. It should have its own controller. Based on the route – $on($routeChangeSuccess, ...) – you can use ng-switch to switch between the appropriate HTML/template in that view. If your templates are large, you can use ng-include inside the ng-switch directives. Otherwise don't bother, and just in-line the HTML inside each ng-switch-when.
For an example of how so use $routeChangeSuccess (but not ng-switch), see https://stackoverflow.com/a/11910904/215945

Backbone.Marionette Layouts, regions and views

In may Marionette app I do have set a layout with 3 regions
headerRegion
mainRegion
footerRegion
I am using the footer region to display detail views of my models (itemViews).
Now I do have the situation, that I want to use this region with collectionView in combination with a button-group: Add-Button (adds a model/itemView) and a OK-Button (closes/hides the collectionView and the button-group. I would like to handle these 2 itemViews as a component, showing and hiding them in 1 step.
I am not sure what the right way to do this is.
Option1:
show collection view in subregion1 of footerRegion and the button-group in subregion2 of footerRegion
Option2:
create a new Layout and nest it
Option3:
do it somehow with a compositeView?
Option4:
some combination with jquery hide/show the button-group?
My vote is for Option #2: nested layout. I do this a lot and it works very well. It's easy to manage and easy to work with, IMO.

Display part of the data from view's model at a time (ASP.NET MVC 3)

I am completely new to ASP.NET MVC, so the question might sound silly.
I have a view that should display a part of the data from it's model at a time. And there are buttons that should trigger which part of the data gets shown.
So far, I have encapsulated each part of the data into a div and added buttons. I have also added a function that returns CSS style for a given id (basically, it returns display:visible or display:none).
I assume that I'll be able to wire up event handlers for buttons. But I am completely stuck at redrawing/updating of div elements. I mean I don't understand how should I cause divs to update their style.
Could you please help me to show/hide div elements and buttons dynamically?
That should be standard javascript (or in your case jquery). It is unrelated to MVC3. Once you have the view built that includes all your divs with content, you call $('#div_id').show() or $('#div_id').hide() to show or hide. You can also use many other methods that have related animations, but that should get you started.
http://docs.jquery.com/Tutorials:Basic_Show_and_Hide
Like this:
$('buttonClass/IDhere').click(function (){
$('theDivYouWantToShowClass/IDhere').toggle();
});

Resources