Board index JavaServer Faces Mobile Primefaces icons not shown when using Primefaces mobile

Primefaces icons not shown when using Primefaces mobile

Mobile UI Kit

ket

Posts: 4
If I use primefaces only I have access to all icons that are bundled with primefaces. Hoever if I add primefaces mobile then I have only access to primefaces mobile icons and the "old" icons of primefaces are not longer shown. This should be after the following page possible with only the use of jquery and jquery mobile:

http://www.andymatthews.net/code/jQuery ... index.html

For demonstration purposes I just want mention the two following links:
1) http://www.hascode.com/2012/01/create-mobile-websites-using-java-server-faces-and-primefaces-mobile/
If you go down on the page you'll find an calendar component. If you look closer at the image you will find two plus (+) symbols instead of the icons < and >.
2)http://thomkerle.blogspot.ch/2012/07/problems-with-jquerys-fullcalendar-and.html

The second example is from myself and I tried to integrate the fullcalendar (which uses icons from jquery standard css) with mobile components. It's not possible to integrate with primefaces the two icons sets.

My question: Have I something done wrong?


Posts: 15080
Location: Cybertron

jQuery Mobile has a Mobile Themeroller which surpasses desktop ThemeRoller. I think that's the reason. Not all components are mobile optimized, e.g. calendar.

This is expected.
PrimeFaces Lead

ket

Posts: 4
Hi Optimus Prime - Thanks for your fast reply but...
I'm not so shure about: I think if I take for example a <p:commandButton> - and the command button is often used in mobile applications - then the command button allows to set the icon. If you add primefaces mobile this is no longer possible (or even worser you get a wrong icon). After the first link I mentioned this should be alway possible also for other jquery components to have access to the basic icon set. Until know I have no other solution as to add command links where you can set explicitly the image. I think this is really related to primefaces. I will now try to make an example with jquery and jquery mobile where both components will be used...
Hope this will give us more progress on this subject..

ket

Posts: 4
Optimus Prime you was 100% right! I just tried out it with pure jQuery. It doesn't work.
Thanks for your answer:

http://thomkerle.blogspot.ch/2012/07/jquery-mobile-conflicts-with-jquery.html

ket

Posts: 4
In fact I have now found a workaround to modify the icons with jquery to use the schedule component on mobile devices:
First: Don't try to overwrite with

$(document).ready(function(){
  $('.ui-icon.ui-icon-circle-triangle-e').css('background-image', 'url(images/back.png)');
});


This approach doesn't work because the jquery mobile components are visible before the scheduler is visible (the scheduler is ready but not rendered!).

Solution: I fire an ajax event on the schedule component and there I change the css with jquery:

$(document).ready(function() {
    $("#absenceScheduleDay").ajaxSend(function(r, s) {
        $('.ui-icon.ui-icon-circle-triangle-e').css('background-image', 'url(images/back.png)');
    });
   
});


This works fine and the schedule component can be used with basic events (no special events for mobile devices) on mobile phones! :D

dss

Posts: 4
Hello, I have a workaround to set the icons of calendar to < and >. Here go my solution:
You just need to add this css to your page... tell me if this work for you...

Note: Change in the url <sgcc-web-app> by your project name.

/*icon > */
#ui-datepicker-div .ui-icon-circle-triangle-w {
   background-image:
      url("/sgcc-web-app/javax.faces.resource/images/icons-18-white.png.jsf?ln=primefaces-mobile");
   background-position: -144px 40%;
   width: 18px;
   height: 18px;
}

/*icon < */
#ui-datepicker-div .ui-icon-circle-triangle-e {
   background-image:
      url("/sgcc-web-app/javax.faces.resource/images/icons-18-white.png.jsf?ln=primefaces-mobile");
   background-position: -108px 70%;
   width: 18px;
   height: 18px;
}


Posts: 1
I try with p:commandButton setting ajax=false and I have the same result, the login page is sowed again.


Return to Mobile