I already have an ExtJS app but now I'm trying to build a mobile version with Sencha Touch. I want the browser to detect if it's running on mobile or not. That works fine, but what is my next step?
I have it redirected to a /mobile folder with a new index.html and that works fine until I try to reach classes from a parent class.
Is it possible to load the mobile app.js instead of the extjs app.js in the primary index.html?
I don't think you will be able to get away with having just one application. Ultimately you would need to create two different apps - one using ExtJs framework, another using Sencha Touch.
Whether you will be able to share some code is a good question. I think you should be able to share models, but that's about it. And even though - I would not recommend doing that either. Because even if show similar information from the same back end in both full and mobile version of your application, you might not need all of it in the mobile application. And if you don't need all of it - your models will be different.
Related
is it possible to create web application using ionic or is it only for mobile ? what is the difference between Angular and Ionic
You can definitely do it. However, it's probably not advisable. Ionic just provides a bunch of directives for you to use. You can use that in conjunction with something like Cordova/Phonegap to package that up for a mobile release. Otherwise, you could just take the web parts of the project (i.e. all your html/js/css/assets) and point a web server to them and presto - you can access your ionic page with a browser.
However...
You probably don't want to do this for a few reasons.
Ionic wasn't written to target desktop pages
Ionic doesn't really provide anything for desktop pages that A. doesn't already exist in Angular or B. someone hasn't properly written for desktop solutions
My suggestion here is to just use plain Angular or another framework such as React/Vue.
To answer the last part of your question: Angular is the framework that Ionic provides bindings (and some assets such as icons) for. Those bindings happen to be optimised/targetted towards mobile devices.
Hopefully that helps out a bit.
I could not think of a better title, Please suggest one.
I am planning to work on a large web application. It will take time to load the full application before application starts functioning.
Suppose its something like asana.com. If you have a link to the task and you open the link. It loads the application first and then shows the detail of the task.
Note: I have added another example in update 2
I want to do just the opposite. Suppose if I try to open the link directly. It should show me the tasks details first and then load the whole application in background.
What development strategy should I follow to implement such feature. Will angular be good for this? I have worked with angular for small projects and am capable of think in angular :)
I just wanted to be pointed in right direction.
Update 1:
I am using Apache2 PHP5 in backing as ReST API. I am thinking to change to GoLang http server. But that does not matter in this context :)
Update 2:
I have not yet started working on the application, but I know that its size is going to be big and its going to take time to load the application. This will be a javascript application, all the communication to web will be done mostly by API. APIs will be fast and it wont be slowing down the application. My main concern is the javascript library and the approach to the issue that I want to display the content of the page before the application is loaded and load the application in background.
As second example: https://chrome.google.com/webstore/detail/a-journey-through-middle/gjgkjeheegjnnmheaflhdocglkiegoni?utm_source=chrome-ntp-icon
If you open this link in chrome, it will load the application and then load the specific content in a popup. I want to load the content of the popup first and then load the application in background. How should I write my application to achieve that.
My suggestion (and I say this as I start to do similar vs. having proven it successful) would be to make some level of framework fairly static so that users get an almost instant response to the site loaded and then start the angular app with something like this
angular.bootstrap(document.getElementById("container"), ["app"])
Ref for the api - https://docs.angularjs.org/api/ng/function/angular.bootstrap
Ref for a demonstration of this - https://egghead.io/lessons/angularjs-angular-bootstrap-app-init
My expectation then is that you will be able to
Load your static elements quickly (which will just have placeholders for your content/material)
Access the data you want in the order you want to get it to present on the screen
Release any other part of the app you need to chrome it up/decorate or populate side items.
I have a LocomotiveCMS site up and running on Heroku. I can edit my templates locally and push using Wagon. It works great!
However, I'd like to be able to serve a separate set of views for mobile devices (phones really) vs desktop/tablet. Can it be done easily? Will it require large modifications to the engine?
EDIT: I should add that I have done this before for a basic Rails app with no issues. I know how to detect a mobile device by examining the user agent and creating a separate folder (such as views_mobile) to store the mobile views. Would like to be able to do the same for LocomotiveCMS
That's a tough question. For the next version of LocomotiveCMS (v3), we'll use a full stack of middleware so that it will be easy to add your own custom behaviors.
But, for the current version of the engine, it's not that easy. However, I'm thinking about something. Perhaps you could create a Route constraint for the mobile detection (http://guides.rubyonrails.org/routing.html#advanced-constraints).
Then, you would modify your routes.rb by adding this:
match '*path' => 'locomotive/public/pages#show', page_path: 'mobile-index', constraint: MobileContraint.new
Never tested so it might not work :-) Happy patching!
Didier
I'm excited to learn Sencha Touch and improve my HTML5, CSS3, and JS skills in order to eventually program for all mobile platforms instead of focusing on one-off languages. But I'm having trouble getting started.
Here's my question:
What is actually the bare minimum required for an application?
Here's why I'm confused:
I started with the Hello World demo where they use new Ext.Application()
Then I looked at Getting Started with Sencha Touch where they use Ext.setup()
Then I look at the Intro to Panels screencast where Drew Neil didn't use either!
Why do there seem to be so many different ways to start building a Sencha Touch app? How should I start my apps?
Thanks for setting me straight in advance,
-- Miles
Ext.setup() is the minimum, I think. It merely creates a page for a mobile device.
In the Intro to Panels (or at least the version at http://vimeo.com/15879797), you can see Ext.setup() at 0:54 (?)
new Ext.Application() and Ext.regApplication(config) do what Ext.setup() does, but also create an Application object, which is required to take advantage of various utility methods and things Sencha has created.
From the API docs: "Sencha Applications provide in-app deep linking and history support, allowing your users both to use the back button inside your application and to refresh the page and come back to the same screen even after navigating. In-app history support relies on the Routing engine, which maps urls to controller/action pairs."
Creating an application also automatically registers a new namespace:
//this code is run internally automatically when creating the app
Ext.ns('MyApp', 'MyApp.views', 'MyApp.stores', 'MyApp.models', 'MyApp.controllers');
Any idea, how can we create already running website to Mobile Website?
Are there, ready made plug-ins / components available ?
I've found some like wapple.net however it is paid one, which is not feasible for client's budget.
I have found, XML creations is pretty easy in CakePHP, though your ideas would be appreciated.
Kindly share more details on the same !
Regards,
i dont think that you'll find a plugin that will transform your website for mobile. because there are too many decisions to make when creating a mobile web, for me it's like creating a completly different website with only the necessary information that your website has..
But maybe there are components that might help you with the small taks (like detecting the user agent and stuff).. here you can read two good articles about creating a mobile website:
http://www.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/
http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/
There's also a few JS frameworks that will help you with the interaction with the user, i've only used Sencha touch..
But my guess is that you'll have to adapt/create "manually" the css, html and js for mobile, and I don't think that there's a magical tool to do that, you'll have to do it yourself (or pay someone to do it =D)
Hope this helps, Good Luck!
You may be interested in my answer over here:
CakePHP v2.2.1 Solution (+ Cookies to persist mobile/desktop/other layout)
In a nutshell:
Lets you setup mobile layouts /Views/Layouts/mobile/default.ctp
Mobile views /Views/Pages/mobile/home.ctp
Sets a template variable $is_mobile
Lets you force a specific layout ?forcedLayout=desktop, and remembers this in a COOKIE
If no layout is forced it uses CakePHP's User-Agent detection to make the decision $this->request->is('mobile')
If no ../mobile/ layout or view file exists then it falls back to the default layout or view.
Typically with cakephp you want to create a separate view layout for mobile viewing. The app controller should change the default view layout to the mobile one when detecting a mobile browser.
Your mobile view layout should be made by you, only you know what data on your site is important and what is not (aka, what should be removed /kept for mobile viewing) Also your mobile layout can use alternate CSS and only load the elements you want.
To learn more about creating views in cakephp see the cookbook: