Kendo UI with FirefoxOS... Should it work?

[Jan-Dirk]

I was wondering if anyone can confirm whether Kendo UI Mobile works with FirefoxOS?

I am currently testing on a device (through CLI) and it seems that some components (header) are not rendering well and that listview is not being rendered after data has been loaded. This happens with code that works on Android.

[Kamen Bundev]

Hello Jan-Dirk,

Currently we don't support Firefox OS officially. However, it should run okay on it - I've just tried with the Simulator (in a browser) and it autodetected the OS and changed to the Flat skin. Also I didn't notice any issues with our demos.

Can you send me a sample cordova project where I can reproduce the issues you have? I can't promise that we can fix them, but we want to have them in mind if there are some critical issues or limitations. Thank you in advance.

Regards,
Kamen Bundev
Telerik

 

 

[Jan-Dirk]

Hello Kamen,

Please feel free to have a look into my project 'K1ckstart3r for Kickstarter'. That is what I have been trying to convert.

When I opened the 'prepared' package in the FirefoxOS simulator (probably the same you are using with Firefox) then I see the loading icon almost instantly. This happens after a webservice has been called (as far as I can see successfully). The listview is not populated with the data retrieved from the web service.

This project runs successfully on Android devices.

Thank you for your help, it is much appreciated!

[Kamen Bundev]

Hi Jan-Dirk,

I'm not sure if I reproduced the same problem - for some reason Cordova's deviceready is not firing for me in the FirefoxOS simulator. When I invoke the handler myself, I get the following error several times (only in FFOS Simulator 1.3, 1.2 reports an error, but doesn't say what it is):
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at [an web service URL at your site]. This can be fixed by moving the resource to the same domain or enabling CORS.

Which means that FirefoxOS is blocking the request, because your server is not sending a CORS header. You can read more about Access-Control-Allow-Origin header at MDN.

If your problem happens to be why the deviceready event is not firing - unfortunately I have no idea, maybe you should check the Cordova bug tracker.

Regards,
Kamen Bundev
Telerik

 

 

[Jan-Dirk]

Kamen,

Thank you very much for taking the time to check this.

I have enabled CORS for my webservices that are written in .net and now the page loads correctly when I use fiddler and force fiddler to add the following header:

oSession.oResponse.headers.Add("Access-Control-Allow-Origin", "*");

Without fiddler, it still doesn't work so I am not sure if my changes in the web.config helped (have no access to the server to remove them and test again). Probably I need to extend the web services themselves and add CORS support. I don't think I can add that header to my request to the webservice in my javascript right?

As expected, the rendering of my pages is not correct. It will never find any Firefox OS specific css rules. Can I force Kendo to use ios or android rules?

For anyone else who wants to enable cors for .net web services, see below:

<system.webServer>
 <httpProtocol>
  <customHeaders>
   <add name="Access-Control-Allow-Origin" value="*" />
  </customHeaders>
 </httpProtocol>
</system.webServer>

I found the settings above on this website: http://encosia.com/using-cors-to-access-asp-net-services-across-domains/

[Kamen Bundev]

Hello Jan-Dirk,

Yes, you need to modify the headers that are returned by the web services, it won't work through JavaScript (after all this was made to prevent other people to use your web services for free).

As for the rendering - Kendo UI Mobile automatically switches to the Flat skin in Firefox OS. You can still force the other platform themes by using the skin property (don't use platform as it will force some WebKit styles which you should avoid in FFOS). Also don't use iOS7 theme as it would probably be problematic in FFOS.

Regards,
Kamen Bundev
Telerik