adminfaces / admin-template

JSF responsive admin template based on Bootstrap and AdminLTE
https://adminfaces.github.io/docs/latest/#admin_template
MIT License
212 stars 101 forks source link

Template resources are not loaded in NetBeans based projects #69

Closed cvetan closed 6 years ago

cvetan commented 6 years ago

I am using admin-template outside of maven project, in regular netbeans web app project with jar files of the template loaded as libraries.

Template resourses such as style, labels from properties are not loaded.

As fas as i can see template is working, because if i reach some endpoint which doesn't exist it loads 404 page as defined in template as you can see in the image.

AdminFaces version: 1.0.0-RC15 PrimeFaces version: 6.2 OmniFaces version: 2.6.9

I use this in wildfly application server version 12.0.0 adminfaces-404 BookstoreWEB.tar.gz

cvetan commented 6 years ago

It might be relevant, here is the error from the wildfly log:

WARNING [com.github.adminfaces.template.config.AdminConfig] (default task-1) Could not load user defined admin template properties.: java.lang.NullPointerException

rmpestano commented 6 years ago

Hi @cvetan,

your main problem is in web.xml where you're mapping faces servlet to /faces/*. By default 404 error page is configured to /404.xhtml so when a page is not found user will be redirected to /404.xhtml and this request will not be processed by faces servlet because it doesn't start with /faces/.

The easiest way to solve that is to map faces servlet as *.xhtml:

  <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.xhtml</url-pattern>
    </servlet-mapping>

Another way is to declare error pages in your web.xml in order to match your faces servlet mapping, e.g:

 <error-page>
        <error-code>404</error-code>
        <location>/faces/404.xhtml</location>
    </error-page>
    <error-page>
        <error-code>500</error-code>
        <location>/faces/500.xhtml</location>
    </error-page>

I've configured this and other small things on your project. Following are some screenshots:

netbeans-sample1 netbeans-sample2 netbeans-sample3

You can download it as zip on this link.

I hope it helps.

cvetan commented 6 years ago

I can see the page now. With the changes to Faces Servlet pattern. However i think it doesn't render font awesome. See picture. The menu icon in the top left corner is not rendered. Neither the logo part.

screenshot_2018-05-13 screenshot

rmpestano commented 6 years ago

You need to enable It on web.xml, compare with the example in the link, basically these two entries:

    <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>admin</param-value>
    </context-param>
    <context-param>
        <param-name>primefaces.FONT_AWESOME</param-name>
        <param-value>true</param-value>
    </context-param>

And also on web.xml you'll need to add these mime-types.

These configurations are already declared on admin-theme web.xml fragment here and shouldn't be needed on applications, font awesome and the mime-types should be enabled when admin-theme is on classpath.

cvetan commented 6 years ago

OK, i figured almost all out. Only thing that isn't all clear to me is how to override properties file relative to adminfaces-template maven project, it looks structure is not the same as regular web project. I copied your admin-config properties from the project you attached to me, but what for the other properties such as those labels in pages etc?

And one more thing, admin.xhtml template uses primefaces extension? Which jar should i download from Maven central repository?

And thanks, you helped a ton. :)

rmpestano commented 6 years ago

Hi, everything is on the project here: https://drive.google.com/open?id=1bDhnVo1OF2E6zcM3xjSt00uWvlCEdh6T

Please download It and open on NetBeans and compare with your setup. The screenshots above were taken on top of It.

Note that adminfaces doesn't depend on primefaces extensions, It is used on the sample project because of gravatar component.

cvetan commented 6 years ago

I am making some progress. screenshot_2018-05-13 dashboard bookstore

What i meant in the last post, how does path in my project relate to src/main/resources/admin.properties which contains labels i can customize?

Where in my project should i put properties file to override those values there? I've tried putting one in web/resourses directory but it isn't right i think, it doesn't read properties i defined there.

cvetan commented 6 years ago

OK. I figured it out. All properties file, should be placed inside default package in src folder.

I managed to get it changed, but can i put those properties file to some other location? Where is it configured location from which application loads those translation files? I would like to have some dedicated place or package, for keeping all labels, message properties etc.

rmpestano commented 6 years ago

I see, It needs to be a file named "admin.properties" on default package, It is standard Java internacionalization mechanism so It can be "admin_LOCALE.properties" on default package.

O hope it helps.

cvetan commented 6 years ago

Yes it does. Thank you very much. :beer:

rmpestano commented 6 years ago

Can we close this issue @cvetan?

cvetan commented 6 years ago

Yes, if i need anything again i will ask.

cvetan commented 6 years ago

Are there semantic classes for the grid layout, such as in bootstrap and aminlte so i can compose my grid in responsive columns?

I've used adminlte in plain html for a while, so i know those classes. Is there something like that here? col-md-12, col-xs-6, etc? I kind find that mentioned in showcase.

rmpestano commented 6 years ago

Yea, that should work, see buttons page source.

Also the PrimeFaces grid css will work.

cvetan commented 6 years ago

Do you know why inputSwitch component isn't working well?

I've put one in the page, and set value to the boolean propert of the object in ManagedBean. It is boolean that says if user is active or not. First it is not rendered properly, and after couple of clicks, i set it to active, i think but value hasn't changed.

Also can i use different custom jsf style in front of the application and separate those settings from the adminfaces? For instance welcome files, exception handling etc. Can i separate those? Because i see now adminfaces takes over application wide.

rmpestano commented 6 years ago

Hi, style is done by admin-theme, if you have problems please open an issue on admin-theme project with sample code.

rmpestano commented 6 years ago

I didn't understand your second question, what you need to separate from adminfaces? For example the error page can be overriden If you put a file named 500.xhtml in root of the web folder (in maven It is webapp folder)

cvetan commented 6 years ago

I use adminfaces for developing backend of application. I am building a bookstore web app.

But in the frontend i will develop probably some custom theme based on the bootstrap, that will be suitable to ecommerce. So for instance, can i separate that, so there is 404 in the front of the app, it doesn't display adminfaces 404 defined in web.xml.

In plain words, can i have config separate for those two main parts. Let's say i want anything in url pattern admin/* to be managed by adminfaces but all other with custom jsf.

rmpestano commented 6 years ago

Well it depends on what you mean by "managed by adminfaces". For instance the error pages in web.xml are configured by http status codes so you can only map one page per status, e.g whenever a 500 status code is raised on your application the user will be redirected to the page you've configured in web.xml.

Of course you can have a filter on your application which would check the status code and redirect user to a custom page depending on current url but that is something you need to create on your application.

cvetan commented 6 years ago

I have some error when i load edit form from datatable.

I have two pages for list, and page with form. And two managed bean classes for this two pages. You can see it on the image. You can see the white space in the bottom of the screen.

Also i see browser console warning, about syncronous ajax request, so i think that could be related.

I've attached .xhtml files and managed bean classes, if you can take a look, it would mean a lot.

screenshot_2018-06-09 edit administrator bookstore

code.tar.gz

rmpestano commented 6 years ago

Hi, without a running project I'll not be able to reproduce. Can you reproduce it on admin-starter project? Do you see any server side errors?

Also, can you try to change the scope of your beans to @ViewScoped from OmniFaces?

rmpestano commented 6 years ago

Another hint, on your list page you have two manage beans adminListMB and adminFormMB. Use one manage bean per page whenever you can.

For your case you can go to form page via GET and passing the resource you want to edit via viewParam.

Instead of having:

  <p:commandLink action="#{adminFormMB.edit(admin)}">
                                            <span class="fa fa-pencil text-warning"></span>
                                        </p:commandLink>

Replace by

Edit this row And on form page you can have a viewParam which reads the ID param from the request from list page and sets it on adminFormMB on preRenderView event. ``` {carFormMB.init()}"/>--> ``` ``` @Named @ViewScoped public class AdminFormMB implements Serializable { private Integer id; private Administrator administrator; public void init() { if(Faces.isAjaxRequest()){ return; } if (has(id)) { administrator = findById(id); } else { administrator = new Administrator(); } } ``` This pattern is called PRG, post redirect GET, see here: https://stackoverflow.com/questions/23936733/how-does-the-post-redirect-get-works-in-jsf-on-commandbutton
rmpestano commented 6 years ago

Having said all of the above I think you can solve your issue by running this remote command:

<h:form>
            <p:remoteCommand autoRun="true" process="@none" global="false" partialSubmit="true" update="@none" oncomplete="$('body').layout('fix')"/>
</h:form>

This will recalculate template height.

cvetan commented 6 years ago

Thanks for the advices i will look into it.

I also thougt maybe doing it like this, put editing admin object in Flash, so when i load adminForm i check if it exists and set it's data if not i regulary load new admin form. What do you think of this approach?

cvetan commented 6 years ago

It works fine like that, and it look pretty clean to me. What do you think?

I've added PostConstruct method in adminFormMB to get edit Admin and load data.

rmpestano commented 6 years ago

If you're using viewParam I don't think the viewParam (id property on the AdminFormMB) is populated when PostConstruct is called.

cvetan commented 6 years ago

No i didn't use viewParam, i've set editing object into Flash and loaded it in PostConstruct method of form bean.

cvetan commented 6 years ago

When I try your example with viewParam and viewScoped bean, I get error and can't deploy application.

There error says Bean declaring a passivating scope must be passivation capable.

rmpestano commented 6 years ago

The bean needs to implements serializable.

Take a look at admin-starter project as reference

cvetan commented 6 years ago

How do i refresh data if i use ViewScoped bean? As per your suggestion i used ViewScoped, and if i delete entry from datatable and redirect to same page with "faces-redirect=true" the data is not refreshed. I need another reload for it to refresh.

Also i have another form with some hierarhical list of categories which i format in recursive method upon loading page, it doesn't refresh even though i close the form and open it again?

cvetan commented 6 years ago

Since this was rather general topic i decided to ask you here without opening issues since it isn't one. I want to add my custom image to user menu in top right corner, but image doesn't align with menu. In your example you used primefaces gravatar component, and i am trying with plain h:graphicImage. Is there a way tho aligh this? screenshot_2018-08-25 administrator list bookstore

rmpestano commented 6 years ago

Hi, please open a new issue because:

1 - It is easier to find It later so others can benefit from the solution 2 - A closed issue will hardly receive contribution 3 - the subject of your latest comment is not related to the title of this issue, this makes things a bit confusing

Yes, I know It takes more time to create a new issue than just commenting in a random issue but It helps keeping things organized.

Also please follow the issue template with at least issue overview, current behavior and expected behavior.