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?
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.
Basically ui:repeat produces a long list of divs. I would like to use something similar to jquery append() and ajax so that the entire list is not rerendered.
Basically like this:
Customer demand: CTRL + F must work so I cant lazy very well.
Render huge list as divs with panelGroup. Pay close attention to generated html because of the huge amount of data...
Get websocket call something changed and you need a new element after hugelistForm:div982. Basically jquery append would be great but not sure how to integrate it.
This will cause the List backing the ui:repeat and the view to become disconnected. However the list is updated in the "background" so F5 would make things normal...
I use latest versions of JSF, Primefaces, Omnifaces.
I'm trying to make a drop down menu that has a bunch of items (Amelia, Cerulean, Cosmo, Cyborg, Flatly, Journal). Each of these items represent a css file.
When one of them is selected I want my website to take this selected css file and apply it to the website.
I would like the drop down menu to interact with jquery, meaning when a item is selected jquery takes over and makes a asyn/ajax call to some mvc actionresult.
By the way I'm using MVC 5.
I hope someone can help me sketch the initial groundwork.
I've implemented this in my application.
I'm not sure what to tell you though. It's easier when we have an attempted solution to fix.
Here's an overview of how mine works:
I have created a controller called SharedController. The purpose of it is to contain various actions that render common actions. All of the actions are considered ChildActionOnly.
My _Layout uses RenderAction to render the action NavbarPartial which is in my SharedController.
More importantly the Navbar partial then uses RenderAction to render the action ThemeListPartial. This action is responsible for getting a list of available themes. The list of available themes is determined at applications startup. I've created a ThemeFinder class and ThemeRepository class that are responsible for finding and storing themes. The ThemeFinder finds themes by expressions that you give it. In a new class called App_Start/ThemeConfig I've given it only one expression - "~/Content/themes/{name}.bootstrap.css". This will find all themes with that naming convention in that location.
My razor code will take the ViewModel and display a dropdown menu in the navbar.
To get the themes to change my dropdown menu contains an AJAX link to an action called SaveTheme in ThemeController. This action takes a theme name as a string and tries to save it in a cookie for the user.
If the theme is found and saved successfully, the action responds with a success message.
jQuery then changes the theme by finding the associated link attribute and changing the HREF contents to the new theme. It knows the new theme relative URL because I have it stored in data attributes.
I completed this before I made the switch to AngularJs. The one thing I plan to go back and change is to cut out as much (maybe all) jQuery as possible and replace it with better code.
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
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.