Today I have been using the sencha touch framework to build an mobile app. I was very impressed (like many others) with the fastbook app that they showed.
On the blog it says that sencha touch 2.2.0 uses a lot of techniques used in the fastbook app. However when I try their example they do not even come close to the responsiveness of fastbook. The transitions are not so smooth and if you tap their is the delay that most html5 apps have.
My question is can I somewhere find the sourcecode of fastbook? I would love to know how they did the "sidebar" navigation because that responds very "natively".
I am afraid that there is no way finding the sourcecode of Fastbook. Please read this link:
http://www.sencha.com/forum/showthread.php?255853-Fastbook-Source
It would have been wonderful had they released it. But, incase if you are very specific on implementing slide navigation (Facebook-like) in Sencha Touch. This link will be a great help:
http://innofied.com/simplest-slide-navigation-with-sencha-touch-2-2/
Many of the Fastbook techniques (including animationQueue) are in Touch 2.2 and more will be in Touch 2.3 - which is in beta right now. The smooth side bar animation uses multiple iframes, and that's a part of Fastbook that is not (and won't be) in Touch 2.x because the API is not compatible with Touch 2 conventions. We didn't release source because Jacky used an edge build to create the app that used an experimental MVVM. We didn't want people to use this code in their apps because it was undocumented and not production quality.
You can see a much longer description of how Jacky did Fastbook in his SenchaCon 2013 session, which we'll be posting soon.
Try this one:
Sencha Market Sidebar
Related
I have been trying my hands for POC on an idea and trying to find languages which can support Mobile app development (Android/IOS) via single source code.
I zeroed on React-Native and Flutter.
What I found that for React-Native you still have to write code which is platform specific. Components need to be written differently for IOS and Android.
Then I looked in FLutter and I found that - "Flutter's widgets, however, while there are more of them, aren't really adaptive".
I am not able to understand it and what it means.
It would be really helpful if someone can help me with example or guide me to good reference.
In Flutter you have different sets of Widget Collection:
Material Widgets: Android-style
Cupertino Widgets: iOS-style
And lots of Widgets which aren't bound to one of those styles.
With this you are able to create a application looking like any style on any of the available platform. Therefore you can also have iOS-style Widgets on Android and vice versa.
If you want to have iOS Widgets on iOS and Android Widgets on Android, you'll have to create some conditional rendering, which decides wether to render iOS or Android components.
Sidenote: The Material-style Widgets look also really good on iOS. Also you can use a ton of other Widgets to create an UI in your own style.
Some cross-platform tools (like Xamarin native and RubyMotion) allow the development of two separate views for Android and iOS, while keeping the business logic shared for both of them. Others (like Apache Cordova or Xamarin.Forms) share both UI and business layer, with the option to use platform-specific overrides when necessary.
What is the state of the interpreted JavaScript frameworks (NativeScript, React Native or Appcelerator)? Are they all focused on creating single UI with platform overrides, or do they allow creating two separate views for each platform? For example, is it possible to create a view using Fragments in Android, but a different view on iOS (since Fragments do not exist there)?
Cordova uses WebView, that mean GUI level will be the same for both Android and iOS but different per Device version. In case of Android each client has own Chronium version and it can break UI behaviour. So developers use Crosswalk to set fixed Chronium version. (extra 20M to your application).
BTW Ionic that uses Cordova architecture uses native behaviour per platform. For example for Android Tabs located at the top, on iOS - at the bottom
On other hand Xamarin (C#), React-Native(JS) and NativeScript(JS) call native APIs. They don't use WebView but generate Native code.
For example if you create button - it will look different: on Android - material theme, on iOS - iPhone theme
Anyways, the bottom line is: everything depends on resources and time. If you want to build application fast, with the same view - I would go on Ionic2+ Angular2 + Cordova.
If you you have more time - go on React-Native or NativeScript (Still has poor documentation) or Xamarin (C#).
React-native's slogan is Learn once, write everywhere. So, you can choose what suits your needs, you can:
Share UI between platforms.
Share Only business logic.
So, the answer for react-native is yes. You can create separate UIs or you can share it.
Since you are writing components, one way of separating this logic is to write component.android.js and component.ios.js and the platform loads the appropriate one for you. Note that you can also do that programmatically.
You can see that in action in the official f8 app made by facebook using react-native
I've been trying to find some info about this but the combination of words just doesn't help as it just so I figured I'd might as well ask it in here.
I'm developing a sencha touch app and I want to show the user how to use my app. But those messages should obviously only be displayed on the app's first run. Does any of you have any idea of how to achieve this in sencha touch?
Haven't tried anything as I have no idea where to start and as I mentioned earlier looking this up on google just returns tutorials about Sencha Touch.
you can set a flag and save it to the localstorage.
On every app launch you can check for that flag and only create the guide view if needed
Origami - the Facebook prototyping tool has some amazing UI effects.
Is there any way to actually use those when I'm building my app?
There's currently no way to include animations from origami into your app.
However...
Facebook announced Pop a few days ago, which is the animation engine they used in their app 'Paper'. You can hear all about it Here. And the good news is Pop integrates with Origami, making what you want possible, Pop will be open source (to be released very soon they said), so keep your eyes open for it.
You can use "Code Export" to export animation code in Origami 2.0.
Origami is for prototyping animations. If you want them to be real you have code them yourself. There is no export to code feature or something like that.
Joris Kuivers has released qc-mobile as mentioned in this blog. It is a starting point.
iOS 5 introduced Notification Center Widgets and I would like to experiment with those widgets and make custom ones (with a Jailbroken device). I couldn't quite figure out how to make such a widget. The Widgets (WeeApps) are bundles stored in /System/Library/WeeAppPlugins. It would be great if anyone has already writren a guide or could share how the principal class of a WeeApp has to look like. Ideal would be to have a WeeApp NIC template for theos :)
Note: This question is regarding so called WeeApps, system plugins for Notification Center introduced in iOS 5. Not to be confused with Today View Extensions introduced in iOS 8.
I don't want to shameless-plug in here, but I wrote a small tutorial to help you with this.
How to write Notification Center Widgets for iOS (iOS 6 and Below)
Hope it helps you!
UPDATE
Please note this is for iOS widgets running iOS 6 and below - In other words, this is for old jailbreak development. I may write an iOS 8 tutorial eventually, but this one is not it.
OK i think i have found a good way to understand it, a sample widget with full source code available on github: https://github.com/WillFour20/WeeAppTest But whats most helpful is this tutorial and the NIC template for theos mentioned in the tutorial, I already made several widgets using this method and my custom NIC templates. http://weeplugins.com/blog/?p=1