I have some small bits of HTML that are used in nearly all of my views. I would like to be able to abstract these out of the views so that when I make changes to one view I don't have to update it in everyone of my views. I am not sure how to achieve this. I have tried the following via the MVVM declarative syntax.
<div id="toolbar" class="pull-right" data-role="view" data-template="edit-tool-bar"> </div>
But this doesn't do anything. I do not want to add code to push the HTML into the view if I can avoid this, that is the entire point of MVVM, right? I would be very thankful for any help.
The standard seems to be to use the source binding and specify a template. Since the main view is already bound to a VM telling I set the source binding to this.
<div id="toolbar" class="pull-right" data-bind="source: this" data-template="edit-tool-bar"></div>
Related
I am trying to find out if anyone has an approach to automated UI testing on Material UI components.
Material UI elements are rendered as nested divs with very little unique id information, for example:
<div data-reactroot style="...">
<div style="...">
<div style="...">
</div>
</div>
</div>
The nested div structure makes using traditional location methods difficult if not impossible - (Selenium and Watir), id, name, class, etc.
Using react devtools, one can see a much clearer picture of how the page is structured, but I am not yet able to access the React "DOM" to locate elements.
Any ideas or help would be appreciated.
Added example:
Sliders
I can't come up with an example that is more descriptive than the one above, could literally be 10 layers of nested divs without any text.
There is no general method I'm aware of, unfortunately.
Some of the components already have ids, which allows you to use a css selector like #my-component input (which is usually enough to get an exact field), others have custom class names to be added (like AutoComplete - popoverProps) which allows you to use a similar selector.
Good news is that every MaterialUI component provides className, which can be used to locate elements (at least partially) - details can be found at http://www.material-ui.com/#/customization/styles
Also id field works quite often, even when not documented.
At the last resort (if detection by class + other css selector parts is not sufficient) you can fall back to XPath expression using element text - for example, I use //span[#class="menu-item"][.//div[contains(text(),"${itemName}")]] for matching menu items. It matches things declared as <MenuItem primaryText={itemName} className="menu-item">
I would like to ask how I can block richText from changing html text under source view.
I'm using Blossom module and defined richText as #Chris J advised me to do:
Add source button to Magnolia CMS richText control
Whenever I put html code in source code, switch to normal view and get back to source view the code is changed. For example the following part of code is missing :
<div class="components"> <div class="product col img-slider"> <div id="product-image" class="royalSlider productImage rsDefault"> <div class="rsContent"> <div class="rsTmb"><img src="/magnoliaPublic/resources/XXX/products/product_7.jpg" alt="">
and is replaced with folowing
<p><img alt="" src="/magnoliaPublic/resources/XXX/products/product_7.jpg" /></p>
I need to provide the possibility for the user to put html code and next to see in on the web page.
Regards
Jan
Jan. I'd ask why you are using a rich text area if you are entering HTML. It is not really designed for this usage. Would you be better off with an ordinary text field? In the STK (you mentioned this in your previous question) you will find a component that serves exactly this purpose.
Under "Configuration" you will find it at /modules/standard-templating-kit/templates/components/content/stkHTML
You will see that the template script is simply:
[#if content.editHTML?has_content]
${cmsfn.decode(content).editHTML}
[/#if]
If you want to stick with a purely Blossom approach, you may need to recreate this but it is an incredibly simple component.
Incidentally, in Magnolia 5.4 there is a code editing field used in a similar component that offers syntax highlighting. You can see this by logging into the demo site and trying to add an HTML component to the main area of the page travel/contact.
I am new to GWT and can not find an answer to this: I have got a nice UIBinder for a TextBox, it works, I have UIHandler working with it, ok. But what if I want to show a value from this TextBox all over my HTML? Is there a way to declare one variable to reuse this value all over HTML, or should i declare new Label with new ui:field name every time I want to show the value on one html page, and fill every such a Label with UIHandler (wich I could do right away, but this seems really boring)?
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
<g:TextBox ui:field="myField"/><br/>
<div>
<p>
What do I need to put here if i want to see **myField.getValue()** in html, may be even multiple times?
And **here**?
I want to avoid creation of new and new objects in back-end class for just one value, multiple labels here are ok. How to push one value in all of them, when myField content is changed?
</p>
</div>
</g:HTMLPanel>
There are two approaches to designing GUI in code in MVC (whatever that means) way:
GUI is smart and pulls data from model, usually when certain events happen (data binding falls into this category),
GUI is stupid, so the data is pushed into view by a controller (it is sometimes called a passive view).
Both have their pros and their cons, but the important thing is: when you try to combine them, the pros cancel each other, and cons - accumulate. That is you end up with disadvantages of each pattern and a big mess.
UIbinder is a tool that helps you build a stupid view, as used in MVP pattern. It helps you easily create a bunch of objects that will redraw parts of view when you push data into them. They are not supposed to be intelligent entities. So the boring way seems to be the way to go.
Not wanting to use a label is, btw, a little strange: you need an object to update parts of the ui (it's Java, using objects is what we do!). It just so happens that such type of object exists and is called Label. Would you like it more if the very same class was called AnAutomaticHtmlUpdaterThatRequiresNoLabelWhatsoever?
My (MVC2) application displays several addresses in a View.
Each address contains just a subset of information, like first- and lastname. The request is that the complete address information should be displayed when the mouse is over a result.
An html template should be used therefor.
This template defines how(!) the complete address should be displayed – but it doesn’t defines what(!) should be displayed.
Means it can be assumed that the complete address is always “firstname“, “lastname”, “street”, “zipcode” and “city” (for example and to keep it simple). This will never be changed.
But for example the background color can be changed in the html template from white to green or the size of the lastname can be changed from <h1> to <h2> …
What is the best way to solve it?
I would prefer to write some shared code (keyword: ascx).
This shared code should wrap the template, would be very easy and would look like this:
<div id=”mouseOver” style="display: none;" >
X_REPLACE_X
</div>
The template would look like this simplified example:
FirstName: {Name}<br/>
Lastname: <h1>{Lastname}/<h1><br/>
ZipCode: {ZipCode}<br/>
I would then render the ascx code via “Html.RenderPartial” on the View and map each address to a javascript mouseover function.
The javascript function would replace the placeholder (like {FistName}, {LastName} , etc.) in the template, position and display it.
And thats my problem:
The template should NOT be put directly in the wrapper (ascx - code)!
Means at runtime must “X_REPLACE_X” be replaced with a somewhere on the server stored template.
Because this gives me the ability to change the template without changing and publishing the code!
How can this be managed?
Is there a much better way to solve it? Should I use instead ajax calls to get the template in a variable?
Any help would be really great!
thxs in advance!
It sounds like the best way to accommodate your display differences is to simply use different css classes. The html template used for the full information does not change and can be used for all addresses, while the differences between background colors and text size can be handled by different css settings.
Relatedly, I wouldn't handle the different text sizes by using <h1></h1> and <h2></h2> but rather a common tag (such as <span></span>) whose text size is handled via css.
Ok, I have a master page which I include an ascx...
<%# register tagname="header" tagprefix="vb" src="~/Views/Controls/Header/Header.ascx" %>
<vb:header id="pageHeader" runat="server" />
The ascx has a site map which uses the MvcSiteMapProvider...
<asp:SiteMapDataSource id="SiteMapDataSource1" sitemapprovider="Secure" showstartingnode="false" runat="server" />
<asp:menu id="headerMenu" DataSourceID="siteMap" orientation="Horizontal" staticenabledefaultpopoutimage="false" runat="server" IncludeStyleBlock="false"></asp:menu>
Everything works nicely and then I needed to pass the model into the control so changed the master page to
html.RenderPartial("~/Views/Controls/Header/Header.ascx", Model)
Now I get a runtime error "Control '2_headerMenu' of type 'Menu' must be placed inside a form tag with runat=server." and Yes I do have a Form tag with runat=server in the master page.
Therefore does anyone know the render differences between these two approaches or any other pointers??
Thanks in advance.
Didn't think MVC will automatically find the ascx in that directory will it?
Yes pretty sure the Control is set up properly and loads OK until it tries to render the asp:menu
Try to not use the relative path but just the name of the partial view
html.RenderPartial("Header", Model);
Now, another important point is to specify what kind of object you are using in your partial view. The first line should be:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<OBJECT-TYPE>" %>
Replace OBJECT-TYPE by the object type.
The problem as one commentor noted is that you are mixing a WebForm control in an MVC view. As the error you are receiving states, the Menu has to be within the child control hierarchy of a <form runat="server"/> control. The MVC helpers such as Html.RenderPartial do not do anything with the control tree. Ideally you should not mix MVC and WebForms controls. It can work in certain situations but fails in others.
I have the same trouble! just posted a question like that! In my opinion the partial rendered page is not aware of the parent page and that's why you get an int instead of the address of the parent page!
In case you want to generate a Static ClientID you can use this feature in .NET 4! It will be easier to code your JavaScript code knowing that the value won't change!