krisrak / appframework-templates

HTML5 Mobile App UI templates created using Intel App Framework
MIT License
119 stars 100 forks source link

Modal example code end up in black screen #3

Open ttback opened 10 years ago

ttback commented 10 years ago

screen shot 2014-05-26 at 1 43 45 pm

ttback commented 10 years ago

The close button also triggers Uncaught TypeError: Cannot call method 'hideModal' of undefined index.html:1 onclick index.html:1 f.fireEvent appframework.ui.min.js:181 f.onTouchEnd appframework.ui.min.js:179 f.handleEvent

I am using the latest app framework v2.1.0 code base

krisrak commented 10 years ago

@ttback where are you getting the v2.1.0 af code? the modal windows looks like it is v2.0.x, I checked with latest appframework code, seem to be working fine.

ttback commented 10 years ago

@krisrak I created my sample app from Create new application -> From template -> Tab Template, and used your list example code to trigger a panel view, except that my panel has the modal=true property set, then it ends up like this. My XDK is at 0876. I haven't done anything custom, except I used to have an older 04..ish XDK, not sure if overwrite install on Mac worked properly.

The appframework.js in my files do say 2.1.0 at the top /! intel-appframework - v2.1.0 - 2014-04-07 /

Anyways, either way it is broken right now, so if I need to update from 2.0.x to 2.1.0 without rewriting the whole thing, what js files should i update? is it only the appframework.js?

There was also an error in debugger: calling hideModal() of undefined when clicking on close button. I traced it down to the $.ui.hideModal() on the close button, so $.ui was undefined for some reason. Could it be some conflict with jquery?

ttback commented 10 years ago

By the way, off topic question but it bothered me for hours, I have one part of app that involves an address, do you think appframework can either copy to clipboard on finger long-press (like yelp) or trigger a native map app to open up the map url? I tried the direct link way, and it didn't end up looking very pretty to show maps.google.com inside of the app wrapper.

krisrak commented 10 years ago

@ttback The template in XDK has older version of AF, Modal view was updated in AF 2.1. You have to update appframework.ui.min.js and af.ui.css files from latest AF 2.1. If you paste some of the code, I can look and tell you exactly whats needed to update.

To open google maps in iOS, you have to use the url schema example : comgooglemaps://?center=40.765819,-73.975866&zoom=14&views=traffic

Here is example: http://jsbin.com/yeyuf/1/edit

Documentation: https://developers.google.com/maps/documentation/ios/urlscheme

ttback commented 10 years ago

I overwrote the af.ui.min.css and appframework.ui.min.js, but the result seems to break things The custom list view is a bit off to the left, when i switch to new panel, the bottom shows previous panel's header, the look of the modal panel is normal now but the close button triggers same error.

These are my js dependencies:


  <script type="application/javascript" src="app_framework/appframework.ui.min.js"></script>
  <script type="application/javascript" src="js/jquery.min.js"></script>
  <script type="application/javascript" src="js/index_user_scripts.js"></script>
  <script type="application/javascript" src="js/af_subpage.js"></script>
  <!--   
   You may substitute jQuery for the App Framework selector library.
   See http://app-framework-software.intel.com/documentation.php#afui/afui_jquery
  -->
  <script type="application/javascript" src="app_framework/appframework.js"></script>

CSS


  <link rel="stylesheet" type="text/css" href="app_framework/css/af.ui.min.css">
  <link rel="stylesheet" type="text/css" href="app_framework/css/icons.min.css">
  <link rel="stylesheet" type="text/css" href="css/custom_icons.css">
  <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
    <link rel="stylesheet" type="text/css" href="css/custom.css">

The custom.css only does list item level float left and right stuff, so it shouldn't break the whole panel transition.

ttback commented 10 years ago

@krisrak Tried the comgooglemaps://?center=40.765819,-73.975866&zoom=14&views=traffic before, it stays on loading forever for some reason. Only http://maps.apple.com worked on the emulator.

ttback commented 10 years ago

@krisrak I also tried your Login example, the look is great, but when I tap on the input box, the keyboard will move everything up permanently. Any clue on this problem?