Ionic and Windows Phone 8 - working


#1

Hey all

I use Ionic and develop locally on my mac however when I wish to build it for IOS or Android devices (more like a final build for my users testing) I use Telerik’s AppBuilder (used to be called Icenium).
Well just last night I logged back into AppBuilder to build my updated app and saw Telerik have added support for Windows Phone 8.
Thinking I can’t bust much I enabled my project for Windows as well (so now same source for ios, android and windows - the nirvana we were promised …) and generated the windows code and ran it up in the emulator.

I was expecting it to do all sorts of strangle stuff but i basically just worked. Amazing work from the ionic guys - some very small cosmetic issues - but the app works. Needs much more testing but so far so good.

Just thought I’d let you know.

Cheers
Darren


#2

Thats great to hear! I know the ionic guys have been working at supporting windows phone 8 so I’m sure they’ll be glad to know that things work right almost completely right out of the box.

You tested this on an emulator, have you tried an actual device yet? If you can, post some pictures of some of the cosmetic issues. I know I’m hoping to get my app up on windows phone 8 as soon as possible.


Windows Phone Support
#3

Yep was just the emulator
I don’t have Windows Phone Device as yet sorry


#4

can you explain? there is no official version of ionic supporting windows phone how did you do it?


#5

using AppBuilder (look at telerik.com - note I am not pushing this product nor do i work for them - i was just using it before ionic and it help me put together the finished product)
AppBuilder is capable of generating ios, android and now windows phone apps (using html5, css, js and of course cordova - currently cordova 3.2).
Its project structure is similar to ionics seed and hence you can develop locally (i’m on a mac) and then move simply the source (html, css, js, imgs etc…) up to AppBuilder and generate. It looks after your icons, splash, configs, plugins etc…
You enable a project for the various platforms - so I enabled one of my ionic projects for Window and voila - it worked.
I’m sure you can do this locally if you dev on Windows platform.
I just like the organisation of AppBuilder - it also looks after certificates.
Note they prefer you to use Kendo Mobile I’m sure as it is their’s but anything works - even JQuery Mobile.
Also note it COSTS - not much but not free.

cheers


#6

Hi Darren, Can u attach the snapshots of the windows app


#7

sure - here are a few images - note app is still in dev mode

it makes use of sidemenu, slider, pull to refresh, list and cards, thumbnails
all working perfectly on WP8 - the emulator is a lumia 920




cheers


#8

Have you tested the app on device. I have problem with icons on device. I only see white rectangle/border instead of icon.


#9

Using a Lumia 820 there is the same issue with the icons. Additionally scrolling does not work in a tabbed interface. Instead of the ion-content the whole window (including header and tabs) is scrolled. So for me, it currently is not working.


#10

I also test on Lumia 820. When I open http://ionicons.com in IE on device iocons are displaying correctly.


#11

sorry ol3j

I don’t have WP8 device so have only run it up in the emulator (the emulator at AppBuilder (telerik.com)

Can you try other font icons like font awsome or glyphicons (with bootstrap)?


#12

I did a quick google search and this is a common problem with cordova apps on windows phone. The fonts are not loaded when the font-files are stored locally. So either host the fonts on a remote server or convert it to base64-encoded css data images.


[WP8] Ionicons not display
#13

thanks for this answer


#14

nice find

another handy resource/site

http://mobiforge.com/design-development/tips-and-tricks-developing-phonegap-apps-windows-phone-8


#15

Are you guys using a tabbed interface? Is scrolling working?


#16

Using the WP 8.1. Dev Preview my app (which kind of worked on 8.0) does not start anymore. Not sure if it’s some Angular/ Ionic thing or one the plugins used.


#17

Very cool! I did iOS and Android, and then it was time to confront Windows Phone. After messing with installing and putting my files into Microsoft Visual Studio Express 2013 for way too many hours, I decided to give Telerik Platform a try. I created an account and a project, copied my files in, and bingo! I had a Windows Phone app in less than an hour. I’m running in the emulator, next step is to build and get a friend with a Windows Phone to give her a try. (And fix the fonts.) Thanks Darren for the tip! :slight_smile:

Okay I got it onto a phone. It works pretty well except for three issues:

  1. The font/icon problem others have discussed.

  2. My HTML 5 range sliders don’t have thumb-grabs! And I’ve got a bunch of them … need to solve this. However, if you touch anywhere on the slider it changes the value. Android does this too, but not iOS.

  3. The vertical scrolling is difficult. Flicking works pretty good but dragging not so much.

BTW mine is a single-page app with vertical scrolling. It started out as a bottom-tabbed app but then I realized it would work better as a single page, so it is still structured like the bottom-tabbed app example. Screen shot attached. (If you want to compare to Android, get ixSplitZ from the Play store.)


#18

Hi All,

I have issue with windows phone 8.1. In that, Default sidemenu app is not working? I debugs using alert. I found $state.go() is not working…
Can any one tell me what is the problem??


#19

I was also running into issues similar to your 1 and 3.

For the font issue, I used the method here: https://github.com/gabrielmaldi/windows-phone-8-local-font-face
Using the ionicons, I basically had to remove the querystring from the TTF font url. The icons now show up on the emulator and device for wp8.1

For the scrolling issue, my app has a header and bottom tabs with vertical scrolling content. I had to change this:

  1. Add -ms-content-zooming: none; to body tag of my css file
  2. In MainPage.xaml, set shell:SystemTray.IsVisible=“False”. The system tray was pushing the bottom tab below the screen.
  3. In MainPage.xaml, set Margin=“1,0,0,0” in CordovaView. Without this, the device was still trying to scroll my tabs. It does leave a small white line under the tabs, but that is not something I was too worried about.

#20

Thank you for the help!

I was able to get my ionic app working mostly in WP8. There is still some weirdness with my scrolling list with the tabs at the bottom (one is missing - looks like it is pushed off the right side of the screen) and there are some weird white blocks that grow and shrink in the background as you scroll.