From this question (Hyperlink inside label field in Vaadin 12) I was able to use Vaadin's HTML component to create custom html code (and it worked fine, including putting in ahref links etc.)
However, Vaadin provides the "Anchor" component which appears to be the far more powerful (and potentially more secure) way of creating links that can be used to navigate to either other classes I built or to external website (or even to download dynamically generated data in a streaming fashion).
However, what if I want to have both normal "label-like" text and an achor link all appear in a single paragraph? For example, in "normal html", I could just do this:
<p>
This is my normal text.
Download <a href="/resources/excelTemplate.xlsx" download> this Excel file</a>
and follow the instructions therein
</p>
and it would create the link somewhere within my <p>...</p> paragraph. How can I do this in Vaadin with the Anchor object? The best I came up with thus far is to use Horizontal Layout and then add a label, an achor, and then another label -- but that is really really ugly and doesn't technically have the same effect (it won't wrap properly.) The other option is to NOT use "Anchor" but instead just use "HTML" component and just create ahref links everywhere, but that seems a tiny big ugly too (though I suppose it's an ok workaround.). (I'm assuming I can call any UI I build by sticking the url links in the ahref calls....) Thoughts on the "right Java Vaadin" way to do this?
Paragraph p = new Paragraph("para");
Anchor a = new Anchor("go", "www.go.com");
p.add(a);
p.addClickListener(e-> UI.getCurrent().navigate(a.getHref()));
Vaadin 10+ offers you (atleast) three ways to handle this kind of case. You mentioned two of the..
Make composition of components in Java. Instead of VerticalLayout you could wrap the content in Div and using Text component also in Div instead of Label. You can make this kind of custom component by extending Composite.
The second alternative is to use HTML component as you mentioned.
The third alternative is to create custom html polymer template and connect to it with PolymerTemplate class. That will result in custom component that behaves like the custom component of the first option. It is just different way of implementation.
Which one of the three is a correct way. From framework perspective all of them. Which one is correct for you depends on your preference and application.
I have a form that has a button next to person textbox that brings up a person Bootstrap Modal Search Window.
the html I put in a partial page and reference it
#{await Html.RenderPartialAsync("_PersonControlPartialHtml","PersonControl1");}
#{await Html.RenderPartialAsync("_PersonControlPartialHtml","PersonControl2");}
which adds a textbox and button.
Then I add a bootstrap modal html to the page that only has to appear once per page
#{await Html.RenderPartialAsync("_PersonControlModal");}
Then the javascript event code and css for the above.
#section Header {
<script src="~/css/personcontrolscript.css"></script>
}
and
#section Scripts {
<script src="~/js/personcontrolscript.js"></script>
}
The html I could put in an htmlhelper but I still need to add 3 references to the page if I want to add it to a page.
Is there not an easier way?
There are ways to reduce this but those ways come with trade offs. So it really depends on which approach best fits your needs.
So for example you could eliminate adding the .css reference in the header section via two different approaches:
1) you could place those styles in a global.css file that is already loaded for ever page; or
2) you could use inline styles on you html and eliminate these css classes.
Both of these solutions of course have downsides. Approach one means that the size of the global.css styles will be larger and take a bit more time to load even if the first page used on the site doesn't need them. Approach 2 seems to fly in the face of conventional wisdom that you should almost never use inline styles and it will make the markup more verbose. But either solution would allow you to eliminate the need for including a seperate ~/css/personcontrolscript.css reference every time you have a person control on the page.
As for the need to include ~/js/personcontrolscript.js, that could be solved one of two ways:
1) include the javascript code in a global.js file that is loaded for every page; or
2) put that javascript code inline in the _PersonControlPartialHtml and add code to it to make sure that it only gets injected the first time the partial is used on the page.
As for the bootstrapModel, I'm a little less clear on what that code looks like so I can't say for sure but probably it could leverage an approach similar to one mentioned for css or js.
With regard to rendering your partials, I don't think there is any way to eliminate that given that it's the primary representation of the functionality you are adding to the page.
I am working with Umbraco 7.5 grid and I've created some macros that work with javascript. I need a javascript array on the page on top of my grid so I can add my items to it.
<script>
if (!_components) _components = [];
</script>
I can do it on the normal view since I have access to master page. but how can I do it in the back office?
It will be easier to maintain if you will create separated, custom grid property editor for your control / macro. Then you'll be able to add anything you want in the output of the editor and it will be included only when the specific control will be used in backoffice.
Check documentation here: https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/grid-layout/build-your-own-editor
You can also check LeBlender package - https://our.umbraco.org/projects/backoffice-extensions/leblender/. I've used it to play with the Grid a couple of times. It's giving you a visual UI to create and manage those custom editors with params and anything you need there.
In Sitecore 7 MVC, my understanding is that partial views are represented by using Razor declarations such as #Html.Sitecore().Placeholder("some_thing") in a .cshtml file.
In this context, what does the argument "some_thing" actually represent - is it something located in the Sitecore instance? If so, how can I locate the thing that "some_thing" represents within the Sitecore database?
In the shortest way: Sitecore Placeholder is a place where you can add your components.
The argument some_thing in #Html.Sitecore().Placeholder("some_thing") is the name of the placeholder.
You can have multiple placeholders on your page. When you add a component to a page, you tell Sitecore "Put in in placeholder some_thing and that's how Sitecore knows where to place it.
Read Presentation Component Reference for more information (yeah this document is years old, but the idea is still the same).
#Html.Sitecore().Placeholder("some_thing") is typically in a layout page such as your DefaultLayout page. Like Marek said it is a place that you put components. If you log into Sitecore and look into at a page, under the Presentation tab, there is an icon that says Detail. Click that. A pop-up will open (I think it still did in version 7, I dodn't have an instance running. On that popup, select a component or add a new component to the Default Layout. In the settings for the component will be a field called Placeholder. Put the text "some_thing" in there without the quotes. I think this is what you are asking what this is the placeholder representing.
Or, should I rather ask, when will VS code formatting work properly for Razor markup? The formatting works for most structures, but it seems to choke on 'if' blocks. The code below is as it is formatted by VS. It is very easy to fix this case, with one more indent, but I nicely accepted the formatting in everyday use, and like to use it often for the bulk of my code, so I'd rather avoid manual formatting if possible. Right now I just leave it as VS formats it.
#{
if (User.Identity.IsAuthenticated)
{
<text>Hello </text>
#Html.Display("#ViewBag.UserName") <text> - </text>
#Html.ActionLink("Sign Out", "LogOff", "Account", null, new { style = "font-weight: bold;" })
}
}
I think it's important for readability that, e.g. in the above, the body of the if block is indented, besides just looking nicer.
Be sure to set the editor to use space characters and not tabs. The editor seems to completely lose its mind when tabs are used. This is a shame because all those space characters end up in the actual HTML output, greatly increasing the data transfer size.
What I do is manually supplement the automatic formatting as I type. Not ideal, but hopefully Microsoft will have this figured out for the next service pack.
I found one "solution" that allows you to continue using tab indentation and have correct formatting. It's more of a pattern. The key is to use razor code blocks instead of inline code.
So for example, replace the following:
<div>
<div>
#if (true)
{
<b>Hi</b>
}
</div>
</div>
with:
<div>
<div>
#{
if (true)
{
<b>Hi</b>
}
}
</div>
</div>
The latter will format correctly, but the former won't.
Keep in mind, the formatting isn't perfect, but it's better than before.
It does not work correctly in all cases because it's a difficult problem to solve. Essentially you have 3 different editors (HTML, C#, and Razor) all interacting over the same text buffer. There are some cases (like this one) where the interactions have bugs. But we are working on improving the editor for the next release of Razor.
A better alternative here(rather than using spaces for tabs), is to change the block indenting for HTML and C#/VB to "Block" instead of "Smart". This isn't a full solution, but IMO is a far less painful work-around than using spaces!
In my case it was resharper overriding formatting options.
If your using reshaper and getting this issue try this...
Resharper >> Options >> Razor >> Editor & Formatting >> Untick “Auto-format on enter”
I found another solution for this. Just select all code in file, click Shift + tab to remove all tabs before code, copy and paste it. Visual studio automatically format code. Work on VS 2013 .cshtml file
I know it's not really the answer you're looking for but I've used WriteLiteral to get around my formatting issues.
For example, when I write:
<div>
#foreach (var item in Model) {
if (condition) {
#:</div><div>
}
#item.Label
}
</div>
Visual Studio tries to change it to:
<div>
#foreach (var item in Model) {
if (condition) {
#:
</div><div>
}
#item.Label
}
</div>
Which causes the page to throw an error.
If you use WriteLiteral you can fool the formatter into ignoring the line but it ain't pretty:
<div>
#foreach (var item in Model) {
if (condition) {
WriteLiteral("</div><div>");
}
#item.Label
}
</div>
Right now I'm on VS2013 ASP.NET MVC 5 and I still have that problem. What I found to be a lot helpful is to put the first expression on the same line where the opening block symbol is (#{). That way razor code formatting produces a far better result. Here are the before and after cases:
BEFORE
AFTER
I work with VS2017 15.9.2 and still have the problem.
After change the editor settings to use spaces instead of tabs, the behavior in editing (e.g. copy - paste code lines) is way better, but "Format Document" still add wrong indents by every call.
No solution, but a short update:
It seems as the issue is solved partial in Visual Studio 2019 version 16.0 Preview 2.1
Link to MS for the issue
Further short update:
I have found a (bad and ugly) workaround (to write the whole code to a razor control in ONE line.
You can find the details here Workaround to wrong indentation Razor Controls
You might want to try Improvements to the new Razor editor in Visual Studio - it has greatly improved the formatting quality (still imperfect, though).
I recommend you prevent automatic formatting to trigger by commenting the piece of code where you paste. This way things don't get broken on paste.