Win8 Metro IE10 Drag-N-Drop / Slider Issue - jquery-mobile

I was trying some slider / drag-n-drop demos of JQuery Mobile, Kendo UI and other javascript frameworks, but none seem to work in the Metro version of IE10 on my tablet (running Windows 8 Consumer Preview).
I remember there was a similar issue on IOS, but using most frameworks it's now working on my iPad.
Does anyone know how to solve this problem?
Is there any JS framework that has addressed this issue?
Could this be something that is still to be fixed by Microsoft before final release of Win8?
Cheers,
Ray

Internet Explorer 10 has a more abstact event model when it comes to touch, mouse, or pen events. Rather than having events like touchstart or mousedown, Internet Explorer 10 has an arguably superior model consisting of a much simpler MSPointerDown which is fired for all types of inputs, including fingers, mice, or pens.
Unfortunately, as you've noticed, there isn't a great deal of support in popular libraries and frameworks, though I suspect there are a few good reasons why this is the case:
IE10 is still technically incomplete.
IE10 is currently not available on Windows 7 (though it will be released on Windows 7 eventually)
IE10 currently requires the installation of unfinalized versions of Windows 8
These reasons, among more I'm sure, have likely caused the developers behind major frameworks and libraries to hold off on any serious investment of their time to target the new browser from Microsoft. That being said, I do know personally of some very key players from the jQuery project who have been keeping a close eye on Microsoft's new pointer model. I suspect the same can be said for other teams.

The reason is that IE10 introduces MSPointerEvents, which are probably not well supported by most frameworks, at least yet.
Update: Kendo UI supports MSPointerEvents since Q3 2012. As of Q1 2013 all framework widgets also work properly in IE10 when content is pinch-zoomed.

Related

Jquery Sortable touch funcitonality ie 11 windows 8.1

I'm having a lot of trouble getting the JQuery Sortable functionality working on my Windows 8.1 device which is running ie11.
I had this working on an iPad through the TouchPunch library, but I've had no luck with the new Dell Tablet I'm working with.
I've ran the webapp through Chrome on the tablet, and the sortable functionality works very smoothly. Does anyone have any ideas how I can get it up and running on Internet Explorer 11?
I have tried pulling down various versions of Touch Punch on GitHub, some which attempt to deal with ie10, but I've found nothing that really works with ie11, so I would be glad for some pointers. If I run the [Jquery Sortable Demo][2] on the device, I am able to drag just about by holding to the left of the table row and pulling down at the right point, but this is in no way usable.
Ideally, jQuery mobile would include the sortable functions, but it does not.
***Just to be clear, if I go to the sortable example below on my tablet:
Jquery Sortable
then I can't really get the sort funcitonality to work.
To the above source code, I have added touchpunch library, and also added
-ms-touch-action: none;
to my #sortable class.
According to some online, this should fix the issue on ie10 and ie11, but I'm not seeing it make the remotest bit of difference.
Thanks!
Okay, there was a simple answer to this in the end, although it took me a long time to find it. I started by trying to intercept touch events and failing, which eventually led me to realise that I had added the site to Compatibility View (Settings -> Compatibility View Settings), where I also had checked "Display intranet sites in Compatibility View" and "Use Microsoft Compatibility lists").
I think this reverts to the site displaying in ie7 mode. Due to this, I think there are issues with the MS-touch commands being recognised, and so -ms-touch-action: none was having no effect.
To be clear, then, referencing touchpunch, whilst also using -ms-touch-action: none, should get the jQuery sortable functionality working in ie11 - just be sure to check your compatibility settings!

PhoneGap (Cordova), with Sencha Touch 2 or jQuery Mobile?

In the past i've used PhoneGap (1.x) with Sencha Touch 1.x, because that was back then the best combination. Although i'm a much bigger fan of jQuery than any ExtJS library. But jQuery Mobile was really buggy back then. Page transitions caused white flashes on Android devices. Responsiveness wasn't as good as it was with Sencha Touch 1 (ST1). Eventhough ST1 also had its quirks, it was definitely the best choice.
But currently PhoneGap is at version 2 and Sencha Touch aswell. But like i said, i like jQuery more. So i'm actually wondering if jQuery Mobile is any good these days. Does it still show alot of flickering when sliding from one page to another? Or any other buggy things?
Or should i still go for Sencha Touch (version 2 in this case)?
I hope i can cut some time in testing out both of these products by the answers in this post. That's the reason i'm asking.
This really depends on what platform you are going to create the application.
If suppose you want to build an iOS app then you should go for Phonegap + sencha because sencha makes it looks like a real native app. It will work very good for iPhone. But if you want to port the same app in Android. Then its a mistake. It is very slow in android due to low hardware specs. Although it is some what better in HTC one x and S3 because of there good specs.
I would recommend for Jquery Mobile because it is improved in these years. Although its look and feel is not that much good as Sencha but it works very well in almost all the platforms i Tested(Android 2.x and later, Iphone, BB 5.x and later).
One advantage that JQM has over Sencha is that
Jquery mobile scripts can be customized and then imported in your application. It can be minified as per your needs. For furthur info look here http://jquerymobile.com/download-builder/
So JQM will be more lightweight than sencha.
This is all my personal experiences which i have. Hope it helps you
That flickering issue has been resolved in the latest version of Jquery Mobile.
http://jquerymobile.com/blog/
https://github.com/jquery/jquery-mobile/issues/4024 resolved.
#Coder_sLaY: Sencha has SDKTools and a Visual IDE that can not only create an app build, and after that they can create native android/ios builds. Sencha can be as lean as jQuery mobile.
So Sencha mobile scripts can be customised, external scripts included, and then the code is minified ready for production, removing all unused classes from Sencha touch.
If you're going to look at the Sencha route, then go to the API docs and check out the guides and videos, as there is a lot that's changed to make coding easier including the new data package which is simply amazing!
There are some discussions about this subject on Quora too.
You might want to check out this thread We're deciding between jQuery Mobile, Sencha Touch & Dojo Mobile. What are the pros and cons for each?.

Desperately trying to make Watin work with IE

I have been working with Watin for about 1 week. I really wanted to make firefox work but had to give up after a day or so when seeing there was no way i could get jSSH working with Firefox 8 etc. Really wish there was a way of using Chrome or firefox i have to say
So returning reluctantly to IE I developed some automation software using Watin, however I have a persistent problem with Goto(href) where it seems as though the page never actually gets marked as complete. And although the browser navigates to the page and I can see the page fine, the call to Goto() just times out. After that point anything I try fails and it cant find the elements in the dom and I cant click anything programmatically. So I have to solve this timeout issue
I have read various articles suggesting fixes and have tried them all as far as I can see i.e. making sure I run as administrator, making sure that internet explorer enhanced security is switched off, etc.. I would really, really like to make Watin work - but right now I am about ready to give up and create a much, much simpler class with an embedded browser in my app. So stackoverflow is my last port of call. How can I stop Watin from timing out.
I am on Windows 7 Ultimate Version 6.1.7601 Service pack 1 build 7601
Visual Studio 2010
compiling as a .net 4.0 app
IE 9.0.8112.16421 with update KB2586448
I have a console app, no threads, [STAThread] on my Main entry point
This is my Visual Studio info:-
Microsoft Visual Studio 2010 Version 10.0.40219.1 SP1Rel
Microsoft .NET Framework Version 4.0.30319 SP1Rel
Microsoft Visual C# 2010 01021-532-2002102-70185
Any help will be very greatfully received.
Regards Julian
ok, so after many months of playing and fiddling the answer to my question has several parts.
Firstly. I needed to get Watin working properly as an embedded browser in a win32 application rather than as a console app. This required me to spend a huge amount of effort getting Watin embedded the way I wanted, I had problems with STATHREAD (of course), and the pop up dialog watcher, and getting the HWND of my browser into Watin to create its browser object (I used another sample on stack overflow to do this) and then I had to ensure ScriptErrorsSuppressed=true and I finally got it working. Hoorah
However, the problem I originally had all that time ago still seems to remain with Watin.2.1.0.1196 in dealing with frame sets on asda.com.
So I have just now done a svn checkout of the watin project and I am finally hoping that the latest updates I have seen will fix this problem once and for all... and Yes I am still really looking forward to Jeroen getting IE9 or indeed any other browser working with Watin. Working with IE (any flavour) sucks
WaTiN does not support IE9 fully yet as far as I know. Jeroen (the creator) is working on getting it fully compatible with IE9, but IE9 relies on new WPF components in regards to previous versions of IE, so i'm guessing this will take some work.
We suffered from several problems as well when we upgraded our WatiN tests to IE9. In the end we force our website to render everything to IE8 standards and set IE9 to IE8 rendering mode untill there is an update from watin to fully support IE9 with all its quirkcs and features.

Is sencha touch / jquery mobile mature enough for production?

Last week i've been busy with mobile html5 frameworks like sencha touch and jquery mobile.
I bumped into a few bugs and strange things when testing on real android phones. (from slow to missing components to even not displaying anything)
Is it correct to say that html5 frameworks for mobile platforms aren't ready for production when one of the requirements is that it must function on most android/iphones?
If you plan to support most android phones, you should be aware of that performance will not be satisfying on middle to low-end devices. This is because that both libraries depend heavily on javascript( especially sencha ), and javascript and the whole webkit performance are not great on these phones. The situation is a bit better on the iphones.
I don't know about jquery, but sencha touch sure is.
See if the android bugs you found are mention here because they will or already are solved in the next release.
http://www.sencha.com/forum/showthread.php?135798-List-of-Known-Android-Issues-Fixed-in-Upcoming-Release
The sencha touch 2 is going to have all other improvements especially, bugs and performance related to android OS. Read it here:
http://www.sencha.com/blog/sencha-touch-2-what-to-expect
In the end test and see it yourself some of the apps that are built with sencha touch:
http://www.sencha.com/apps/

Web UI framework for BlackBerry

Is there a "BlackBerry UI" CSS/JS framework available for Blackberry - Similar to IUI for the iPhone?
Hosted over on Google Code http://code.google.com/p/iui/ there is a great open source library for providing a "standard" iPhone UI for web applications.
i.e. a JavaScript and CSS library to provide:
BlackBerry look and feel
Data Binding
Curved corners etc.
DOM utilities
Handle idiosyncrasies between browser versions
Considering the fact UI changes across blackberry hardware, I guess it's difficult to create the equivalent of what is found on iOS.
I'm referring you to this forum thread you already saw for sure: Is there a "BlackBerry UI" CSS/JS framework for BB's - Similar to IUI for the iPhone
In term of compatibility and usability, I guess slightly altering a jQuery Mobile's theme would be your best option if you want to find one that is open source (unlike Sencha for example).
BB OS 6 contains a modern Webkit browser so it's easier to use standard toolkits such as Sencha.
Besides using Jquery Mobile or Sencha, you could give a try to this (official it seems) library https://github.com/blackberry/bbUI.js
I would recommend against using jQuery Mobile on a BlackBerry app.
It's slow (especially on older/less powerful devices), bloated (lots of stuff you probably won't ever need), the UI doesn't align with BlackBerry guidelines whatsoever and it doesn't play well with focus-based navigation (which is important as some current devices still don't have a touch screen and some users prefer to navigate with the trackpad).
bbUI.js (https://github.com/tneil/bbUI.js) as mentioned by Max is an official library originally developed by someone at RIM and, while it's not without its flaws and limitations, after months of working on a large WebWorks project it is still the best choice I've found to get up and running quickly.
Alas, the OS 6 browser crashes at the mere hint of javascript load (most usually the case), slightly less from having too many tabs open (by "too many", the amouny ranges between two on the lower spec models like 9300 to 4 or 5 on the 9780). This is from my experiences. Perhaps my settings are wrong - I tend to like smaller text, Arial and set the encoding to UTF-8.
However, I have never had Opera crash on the same phones - despite having at least 5 to 10 tabs open and in the background.

Resources