I am working on a Titanium Appcelerator iOS app that contains an initial Dashboard screen and 2 separate screens that can be accessed from the Dashboard.
I have set up my app to use a navigation controller and everything is controlled from a main.js file using custom event listeners. I do this so that I can separate the code for each screen into separate files.
The problem is that with each screen that loads, I have to open the window on the nav stack and then add all the elements to it. This is fine for one of the screens because it just contains a few views and labels. However, the other screen has a MapView and it takes 3 seconds or so to load after the user sees the screen open.
What is the right way to handle this? Is there a way to preload the window before opening but to keep my current architecture?
I asked this question in a much more confusing and specific way, here but I think that this general question is applicable to more people as the architecture style I am using is fairly common.
I think your approach is fairly typical...unfortunately I don't know of any way to preload the content of your window. You may be able to improve the user experience as the map view loads by including a static image of the map canvas (in the same way Apple's UI guidelines recommend that the Default.png be an image of the app itself's basic interface to give the impression that it's loading quickly). You can also add a loading spinner in the form of a Ti.UI.ActivityIndicator. Both of these can be added by default to the window, then hidden as you show the map on the map view's load event. I think they'd probably help make that 3 second wait seem less painful.
I noticed in your other post that you observed the map still took a long time to load even when you weren't actively getting the user's GPS location. While true, you might be able to save some time by getting the location immediately upon app launch, then passing it to your map window with the custom event you're using, so the map could then be initialized directly on the user's location, rather than a dummy location.
for the navigation controller i started using https://github.com/vuinguyen/NavController
it works very well for ios/android and the git code was straight forward and easy to follow. its an enhanced version of the one Kevin Whinnery put out quite some time ago. I have been using it in 3.0 without any specific complaints. I've added the ability to suppress native ios navigation headers but aside from that it dropped right in.
I don't think so using the exact same architecture. Upon initial load of the app, you could load all your views within one window, instead of using multiple windows. Then, modify the one that is currently being shown by altering the zIndexes
Related
So we've decided to create a down and dirty Android version to a working iOS app.
Since we don't code in Java and resources are limited, we thought of creating a responsive web version of the app, that emulates the app's environment more or less, but keeps most of the functionality.
I should note that we haven't programmed responsive web pages before. we know there are media queries and functionalities for many different devices, though.
The idea was to create an Android app that uses a webView which is hardcoded to be a responsive web page. To the user we hope the result should be app-like.
We need the screen to look like this:
so that when the user presses A - the A screen would show, and when B is pressed, B is shown.
A shows a scrollable list of items
B shows a some buttons, pressing these buttons would change a value that is sent via a web reuest.
We need something to help us come up with buttons, presses, screen resizing, events fired...
Is there any framework that we can use to accomplish a task like this?
I was thinking of using jQuery, changing the visibility of the <div>s for the main screen. Of course it would take a graphic designer to make these buttons, and writing it all.
But is there any framework that is made for this? (We need the code!).
there will also be requests that are sent to the server and responses will be in JSON, so display A can be populated accordingly.
We need an answer that would target us to a solution that fulfills this functionality so we can go ahead and code the rest of the project.
Thanks!
Have a look at Ionic, it's a framework that would be ideal for this purpose. http://ionicframework.com/
Once installed, you can use their cli tool to generate an app with an empty tabbed based application like so: ionic start {appName} tabs.
After you've completed your app you can run ionic build android to build the app.
I'm quite new of Android and during the development of one app, I have encountered the following issue:
I'm using a WebView inside my app for viewing web sites (it does not matter what kind of site, can be Google or Reddit or anything else). I know I can use a "browser Intent" with Intent.ACTION_VIEW but for the purpose of my App I must use a WebView.
So, I have enabled javascript and DOM api storage with:
getSettings().setJavaScriptEnabled(true);
getSettings().setDomStorageEnabled(true);
My problem comes after that the page has finished loading and some Javascript automatically starts. Basically if the user has already scroll down and the Javascript tells the page to hide/show some content (example a DIV) the scroll resets to top.
My question is:
how can I avoid this behavior? I want that the Javascript loads correctly but it does not interfere with the user's navigation. Is that possible?
Thanks in advance,
Best A.
I have a single-page mobile application developed with Backbone and Zepto.
It works correctly with the back/forward buttons in the browser.
When the user navigates to a page, the new content slides in from the right as the old contents slides away to the left (and out of the viewport). I want the same thing to happen if the user presses the "forward" browser button. This all works.
I've got a class that I add to the body element navigate-back that will flip this behaviour, so when the user navigates back with the browser's back button, they see the content sliding back in from the left and the other content sliding into the right. Basically just the opposite of going forward.
I need to detect if the user is navigating backwards so I can invoke the alternate behaviour. I have tried implementing my own history stack, but I've ran into lots of problems where sometimes it marks a forward as a back navigation which ruins the visual cue. It's descended into a kludge of hacks now and probably would only embarrass me if I posted it.
What is the best way to implement my own history stack so I can detect if the user is navigating forward/back in the context of a single-page Backbone mobile application?
I don't know about backbone.js1, but I have helped develop a mobile application which had to implement exactly this behavior in html5, so I should be able go give some good advice:
First of all it's good to know that the history.pushState function exists. The big problem with it though is that it is supported up to android 2.3, but not on android 3 till android 4.0.3. As kiranvj points out correctly this can be solved by using the popular history.js library which provides a polyfill solution for the lack of the history functionality.
Now, getting to your actual problem, the way I implemented the history direction animations was by adding data to the pushState function ( history.pushState(data,title,url) ) with which I identified the logical position of the page. In my application I wasn't only limited to a horizontal bar, but in your case you would keep track of position where any new loaded page get's a position which is one higher then your current page. E.g.
History.pushState({position:History.getState().data.position+1},"Your title","Your URL");
Next, when the window.onstatechange or window.onanchorchange event triggers you observe whether the position is higher or lower than your current page (e.g. by using the history.js History.getState() function which I used above) and depending on this you decide in which direction to move (lower is to the left, and higher is to the right), as is illustrated by the image below:
You will also note that I already assumed on the first page that you have {position:1}, whereas normally the first page will have no state information. The way this can be achieved is by using history.replaceState which replaces the current empty state with a more informative state. Alternatively you can also check for an empty state on any of the previously mentioned events and if it's empty you assume it to be the left most one ({position:1}).
Hope this helps and if you have any additional questions feel free to ask.
Please note that this answer assumes you are using history.js and you would need to listen to slightly different events (such as onpopstate) and use slightly different structures (history rather than History) if you would want to build your own solution.
It is also useful to note that it is possible to build this with your own queue array which gives you a lot more control, but will not work in combination with the browser's back button. This is a big issue with browser sites, however is far easier in case you are building a cordova (a.k.a. phonegap) web application.
1 Just read about it and it appears to do some history handling of its own, which might make it more complex to integrate the technique described above.
If you're working on a true single-page app, why not you set up an array to hold history urls in a js variable (as opposed to relying on something like history.pushState and its support)?
Whenever a new page is navigated to, you can push its url into the array, whenever a "back" button is pressed, you can retrieve the url needed as far back as you want. This will work perfectly as long as you correctly discard urls when the user goes back a few steps and then navigates to a new link.
I've never tried implementing this to be used for page history, but this worked perfectly well for in-page undo-redo logic.
Update:
After further research, the approach above would not work for a page reload as it would be an action occuring outside of history handling available through JS. It would still work for tracking back/forward transitions, but such history will be lost on navigating to a url external to the app or a page refresh. David Mulder's answer seems to lack this limitation by relying on browser-level history that persists outside of the page scope.
I had the same issue when working with Zepto on mobile with single page - multiple views.
Initially I used html5 statechange and onhashchange. It all have some issues in one or other mobile device. Finally I used Zepto history plugin from here https://github.com/browserstate/history.js
It somewhat solved most of the issues. Try it, it will be useful, it handle html4 and html5 features wherever possible.
Use this thing in single page mobile application this will allow to the history and move the user to back.
function onBackKeyDown() {
history.go(-1);
navigator.app.backHistory();
}
Sammy.js's v.6.x branch (the one that relies just on hash changes) is a perfect, simplest, most browser-compatible approach to tracking history. There, history is not tracked at all, as Sammy just watches for hashchange.
Relying on "#/slide/123" allows you to support hard page reloads, and simplifies the work
Peel off the last part (slide number) on each page view, push into global. On new route, see if number is more or less than what is stored in global and do the correct (left or right) animation. If global is undefined, no animation.
All,
I have a requirement to enable users of our web page to download jpeg images of the Bing maps that we have put on our forest fire simulation dot net aspx web page. The page in question presently displays a Bing map and up to 96 shapes in as many layers which can take up to 20 seconds to load completely. I could put all these shapes on one layer if it would help - but I an not sure that it would and I thought I would ask here first.
Apparently, any "complicated" client side actions (like ALT-print screen, print from the web page, mwsnap3, or other third party solutions) will not suffice, so I am told to implement a button on the page that will download (or make available) a jpeg image document/image when it is pressed on the page.
I started with a great thread at Convert webpage to image from ASP.NET. ,which is really close to what I want, but the page gets rendered on the browser.ReadyState != WebBrowserReadyState.Complete transition, which fires off before my shapes are loaded on the Bing canvas. I tried to render the page on the DocumentTitleChanged event (and then tried to change the title when my shaped completed loading), but this did not work either.
I tried to force the "Print screen" character with javascript (see Is it possible to simulate key press events programmatically?), but this translated into a comma (decimal 44) and did not work as expected.
I also see that HTLM5 has some support for this ( http://www.nihilogic.dk/labs/canvas2image ) but while this worked in FireFox, it did not work in IE, which is the browser of choice. I also want to run this on mobile devices, which might not support HTML5 for some time either.
I have a few questions:
1 - Is there another (simple) way to print the contents of the web page that I am missing?
2 - Is there some other WebBrowser event that I can fire that will make more sense)?
3 - Would it help if I stated with some other control then put the maps and shapes on this control for subsequent printing?
4 - Does this go against the grain of web browsing and is just a bad idea (seems that if I can force a 'print screen' then evil web sites could force a Ctrl-Alt-Delete button sequence)?
Thanks - Steve
It might not be an approach you want to do as it will require you to repeat alot of the functionality you already have in a different way but the only truely full proof way to do this is to get the map as an image from the bing maps static imagery service and use GDI+ to draw onto the map yourself then just serve that image direct to the user. Gets round any browser issues but a fair amount of work depending on your requirements:
http://rbrundritt.wordpress.com/2009/02/22/drawing-routes-with-the-ve-web-service/
I want to open a file dialog via FileReference.browse() but I get #2176 error which means that this action can only be invoked upon some user interaction. I'm aware of security considerations but in my scenario I have a thin flash movie which merely displays an image and the whole UI is in javascript (I heavily use javascript <-> actionscript communication).
So the question is - do you think it would be possible to invoke FileReference.browse() upon the user interaction coming from javascript?
No. If it is anything like accessing the clipboard, then you are stuck out of luck. I have tried all sorts of hacks to get around that, from setIntervals to using apply, I even tried using a ByteArray to manipulate code directly. No soap.
For that matter, you'll have to upload the file to a server using FileReference (unless you're using AIR). This is really annoying if you need to have Flash look at it.
The problem is that when Flash makes this type of decision, they are not making those aspects of the classes accessible by code directly. The code responsible for actually accomplishing these things is locked in the native code which is built into the FlashPlayer. We're black-boxed out.
Back when Adobe first updated their security model, and in turn broke quite a few running flash based upload services, there was a
pretty
big
stink.
I believe that some people were working around the new limitation by essentially creating a transparent flash movie, and overlaying on top of an otherwise normal HTML element, to 'trick' the user into giving the flash app input from which to trigger the interaction (where they think they are clicking on a simple html button labeled 'upload' they are actually clicking on the invisible flash element sitting on top of it.)
I've not tried this method myself, but it may give you a direction in which to search for a solution that might work for you.
Isn't this the purpose of object and embed tags in html? When you say the whole UI is in javascript I am assuming you are using html markup as well, though I guess this may not necessarily be the case.
How to embed a flash file in html
How to start a flash file with javascript
Ok. I've found this link: Flash Player 10 FileReference Changes. Apparently there's no workaround for this limitation. I guess I'll have to display a prompt for the user from within the flash movie, so that he/she can "interact" and allow to open the dialog.