I really like the visual effect where a new element seems to push an old element out of the way. Pretty common thing recently.
here is a static example.
http://github.com/
However, I'm trying to do it with recently updated products. Also would like to use scriptaculous if at all possible with periodically_call_remote using ruby on rails.
Without writing the code for you, here are the pieces you need to build:
an action in Rails that returns the new html. This will most likely render :partial
a PrototypeJS Ajax.PeriodicalUpdater to grab the html, and update the div with new items
in the updater's success handler, you want to ease the new elements in - use a scriptaculous effect to show the new html into the div, pushing the other elements out of the way. (not sure how you want to do this - you might have to move the existing elements down to accomodate the new ones, but do it slowly. I recommend you get the first two bullets working and then worry about the effects).
There's no specific need to use periodic_call_remote, it can be done entirely with unobtrusive javascript.
Related
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.
Being relatively new to MVC I have been struggling for the past several weeks getting my layout to work.
I have managed to get myself really twisted into knots. So instead of trying to explain and unravel my mess perhaps instead someone could explain how I would accomplish the following at a high level.
_Layout this would have all the css js etc. It would also have basic structure.
Of course HTML tags not allowed in code block....each render is in a div.
#RenderPartial(Header)</div>
#RenderBody()</div>
#RenderPartial(Footer)</div>
RenderBody is Index.cshtml and it would be broken into three pieces
#
#Html.Partial(NavMenu, model)</div>
#Html.Partial(SubNavMenu, model)</div>
#Html.Partial(MainContent, model)</div>
I have this basic layout and it looks fine until you click one of the menu items.
The menu items render as:
<a class="k-link" href="/stuffroute">Stuff</a>
That route goes to a controller that returns a view and that navigates away from the above arrangement in Index.cshtml. So I end up with the header, footer, and subdash nav....
So the question is...
How do I route / orchestrate my layout to not lose the differing pieces?
Partials don't do anything for you here. You're essentially asking about how to create SPA (single page application), although in this case your application will have other pages, it's just that the index view will act like a SPA.
That requires JavaScript, specifically AJAX, to make requests to endpoints that will return HTML fragments you can use to replace portions of the DOM with. For example, clicking "Stuff 1" causes an AJAX request to be made to the URL that routes to FooController.GetSubNav([stuff identifier]). That action then would use what was passed to it to retrieve the correct sub-nav and return a partial view that renders that sub-nav. Your AJAX callback will then take this response, select a portion of the DOM (specifically the parent of the sub-nav) and insert the new HTML as its innerHTML.
If you're going to be doing a lot of this, you'll want to make use of some client-side MVC-style JavaScript library, like Angular for example. These make it trivial to wire everything up.
I have around 10 tables in my database. Building CRUD’s for these are easy with ie. reverse engineering in Netbeans, and with Netbeans 8 the pages look great thanks to primefaces.
So now I have 4 pages per entity; list, create, edit and view. Create and edit are similar except they bind to a new respective an existing entity. View is similar to edit, except it is readonly. The available buttons change too, of course, and there are probably other minor differences.
What I would like is to keep it down to 2 components per entity; 1 for the list and 1 for an instance. The latter should come in 3 flavours; editmode, createmode and viewmode. These components should be includeable in other pages, preferably both as dialogs and “raw” imports.
Anyone have an idea whether this is possible? Do I need to create my own set of renders, which can ie. render an inputText-component and a selectOneMenu as an outputText? As an example my first try with an inputText was just to write disabled=”true”, which renders the inputtext as non-editable. It becomes too greyish, but I guess that would be fixable by overriding the style. But preferrably it should render as a real outputText would when in viewmode. Maybe some clever use of css could do the job instead of renders.
Maybe the easiest way would be to store the viewmode of the composite component in the componenttree. Is this possible? I guess any component would have to look up in the tree in the render phase, to see how it should render.
For the buttons I could maybe do with just the rendered attribute.
Is it possible to go this route, or has anyone already made a framework for this? Or is it stretching JSF too far?
I've got some custom Ruby code for generating a chart (which will generally be displayed as an inline SVG in a "show" view) based on the contents of the model.
I'm wondering where I should put the drawing code. As I see it, I could:
Put it in the model, so I can call #my_object.chart_as_svg in my view ... but this would diverge from MVC
Put it in a view, like show.svg.erb, and let my controller respond to format.svg
Put it in the controller as a separate action
Put it in a helper...
What's the prevailing wisdom on this?
If you think you might reuse the charting code for other things, make it a class, put it in lib and set it up so you can do something like this in your controller:
#chart = MyChart.new(:data => #my_object.data_method, :title => 'Foo Chart', ....)
send_data #chart.to_svg, ...
..
This way you can extend it with other options, add .to_png, etc without mucking up your model.
IMO: A little bit of everything! Going down your list:
Your object has charts, so you should definitely have #obj.chart, but the chart isn't a part of the model - it may be created using model data, but it's not something that's a) restricted to that model or b) required by that model - so you do want it as part of a different package/module/object/etc
The Ruby object of the chart, IMHO, shouldn't "know" how to turn itself into an HTML view. That's the job of a partial - _chart.svg.erb, _chart_typeB.svg.erb - but it should "know" how to transform its information - counts, averages, percentages, etc etc. Partials then consume those different "formats".
I'm going to bet that at some point, you'll want to access the chart data directly via an API. Maybe you're turning your stuff into a platform, maybe you're doing AJAX updates to the current page; doesn't matter - you're going to eventually want some controller actions to directly access the chart data.
You should take anything complex out of the view partial and turn them into helpers, but the partial should still be responsible for the "styling". That is, the partial should generate the smallest atomic view of the chart - just the chart, nothing but the chart - but the partial should be whatever else you generally want to show when you want to include the chart in a web page.
Edit: Reading the other answer a bit, I've got a different assumption: I'm assuming your taking the chart information and generating the picture via Javascript on the webpage, rather than generating a picture on the server and serving it. If you are doing the latter, I'd make it as part of the chart class - it's a different "format" into which the data can be transformed.
In my Rails app, I have a view that allows user to modify the rendered HTML, such as move the buttons around, changing the colors of a DIV etc. How can I persist those changes such that when the view is rendered next time, those changes are reflected?
My first thought was to store the modified HTML into database as a text column. However I really don't like this approach since the HTML can be arbitrarily large, not to mention performance will be very bad. I dug around and so far haven't a clue, which is puzzling to me since I don't think this is that rare of a scenario: WYSIWYG type editor, website builder application should all need to solve this problem. Which makes me wonder if I'm going down the wrong track.
Any insights are greatly appreciated!
To to this you need to give some position numbers to your buttons. After moving those buttons around call the ajax request to store those positions in serialize manner in the database or in the cache.
[button3, button1, button4, button2] or "button1, button4, button3, button2"
By looping this object (convert this object into an array ) you can display those buttons when next you render the view.
Same you can do it with div's color. Give some unique ids to your divs and store those ids with color-code.
I hope this will help you a little-bit.
Sounds like the user has lots of control over the DOM, so it doesn't make sense to store changes on a per-element basis - that'd be impossibly difficult to maintain and hugely inefficient.
The user will be updating both HTML and CSS, and those are essentially just strings, so a good solution may be to render the modified HTML and CSS as strings and store them in MongoDB documents (either together or separately), then reference those Mongo documents when you want to load up the page again.
I think I have found a solution, which is:
create a model called 'Site'
break a page into multiple logical parts, such as logo/header, navigation menu, content etc.
edit the page WYSIWYG-style
save the HTML into DB via this model
when the page needs to be rendered to reflect the changes, pull out the contents from DB and render them 'raw' in the template