Example of switching views with buttons for a carousel? - sencha-touch-2

Can any one point me to an example of changing views with buttons for a carousel ?
I would like the option to swipe or click to change views.
Thanks

You've various ways to achieve it, you can either use setActiveItem:
carousel.setActiveItem(1); // Move to the 2nd carousel's item.
or apply next and previous method on your button handler to switch to the next and previous card of your carousel:
carousel.next();
carousel.previous();
Here is a demo: http://www.senchafiddle.com/#Ukg1N

Related

Changing Container on button click in Sencha

I have Two containers in my Sencha Architect Frame work 2.0.
The first container contains a login button.
So on the click i.e. tap event of that button i want that my view changes from container1 to container2.
How can this be done.
Thanks
Abhishek
On your button's tap event, you should run something like this:
yourOuterContainer.animateActiveItem(1);
note: here I assume that your outer container contains 2 components: First Container and Second Container (so your Second Container has index 1).
Try this:
Make a Panel with layout: card, set set activeItem(0) for the panel
put the two container inside the panel, be sure, that the login container is first and the other second in order
in the tap event of the panel apply setActiveItem(1) for the panel
This way you switch between these two views.
You can use the navigation view component... Sencha Architect documentation provides a easy guide to implement this
http://docs.sencha.com/architect/2/#!/guide/navigationview

Sencha Touch 2 fixed header

Is there a way to have a fixed non animated header in a sencha app and still retain page animation and browsing history?
I need my header to not animate on a page slide. The way i tried it is:
-main container (v box)
--header container
--card container(card layout)
---card
---card2
---card3
Etc
And I manually switch the cards inside the card container with setActiveItem(index)
The header is never animated in/out but I dont have history now so the only way to have a back button is manually hard coding it with setActiveItwm(prevIndex)
Its an unfortunate and dirty solution maybe somebody else has a better one.
Yes I achieved it using sencha architect to test. From memory I created a base container that had layout vbox. Inside that I had a top tabpanel and under that a tabpanel. I then set the flex on the top panel to 0.2 and the tabpanel to 0.8. That way my header will always be 20% height on any device. I hope this helps.
You require Ext.navigation.View
Use Ext.navigation.View and create basic navigation between views...then hide the navigation view you can do that by making the navigationBar property as hidden:true
Next have a common navigation header as you have mentioned above...
Going forward using a button lets say would be by using
button.up('navigationview').push({xtype: 'card2'});
This button will be somewhere in your card which takes you to next card
Similarly for going back on button click
button.up('navigationview').pop();
button.up('navigationview').pop(2);//Will take you two views back and so on
These buttons will be on your common header

iOS layout: alternative to tabs?

I'm working on a iPhone app which shows an mobile webform in a UIWebView. I'm using a default iOS layout with a navigation and tab bar.
The mobile webform is displayed in a UIWebView in the white area. Since the webform has a lot of input fields, we really need as must space for it as possible. Because of this, we are planing to remove the tabs in the bottom. Over time, there will be more tabs/sections, so it is not a solution to just add a button for each section in the left side of the navigation bar. On a iPad a popover could easily be used to handle this.
Is there a standard iOS layout mechanism to handle this change of sections/views without using tabs?
You could do something long the lines of Path or the new Facebook app and have the "table of contents" behind the Navbar and the navbar slides away (along with the child view) to reveal it. When done right (ie smoothly) I think the effect is really cool.
This would also work great as you add more and more options, since the table could just scroll.
Here is a framework that might be you started: http://www.cocoacontrols.com/platforms/ios/controls/iiviewdeckcontroller
I would consider replacing the navigation bar's title with a control that lets you switch between tabs. You can assign the bar's titleView property to a control or a button and it will generally do the right thing.
If you're limited to 2-3 tabs, you could simply use a UISegmentedControl.
If you want more, you could use a button which, when tapped, pops up a view that allows you to select the view you want. This could be a modal table view, or you could slide up a UIPickerView from the bottom of the screen, similar to the keyboard.
I use this technique in an app of my own, screenshots here. Tapping the button cycles between views (in this case, I'm changing the contents of the table cells); tap-and-hold slides up a picker.
Another possibility would be to arrange your different forms on pages in a scroll view with a page control at the bottom, à la Weather. The best option, though, if you’re going to have a particularly long list and want to keep your screen real estate, is probably the FB/Path-style sidebar table.
I ended up using a UIActionSheet but I think it in other situations would be more stylish to use a controller like the IIViewDeckController.

Titanium Tab.open transition

When I'm opening a window in a tab, the slide animation is by default from right to left. I need to change it to left to right.
myapp.mainTab.open(window)
Is there any way how I can pass a different transition?
you could try like it is mentioned in the example:
myWindow.open({transition:Titanium.UI.iPhone.AnimationStyle.CURL_DOWN});
the transitions are specified here. in general you should pass your own animation to open.

adding an invisible button to the background in IB

I'm working with Xcode doing a Ipad app.
i simply want user to click anywhere on screen (not counting text fields) to perform some IBAction.I'm using an invisible button that covers my whole view.
Since I have some text fields in my view,i need to add this invisible button to the background of my user interface. I cant seem to find this option in the button attributes? any help?
Just set the button's type to custom.
Did you try setting the opacity of the button to zero?
I guess i got your point. You just want to put the UIButton(invisible) on the back of all the UITextField. The simple solution to this is open the Document Window in the IB. Now expand the view tree in the list view. Just drag your UIButton above the UITextFields and set the alpha value for the button in the property to be zero.
Hope this helps!!
iPad users don't "click". They "tap" or "touch".
In Interface Builder, I believe views are constructed with a z-index from top to bottom as they appear in the document window, so dragging your button so that it appears as the first subview of your main view should be a quick fix for this.
Have you considered other approaches? This doesn't sound like standard behaviour for an app and will probably cause havoc with anybody using Voice Over. What are you trying to accomplish?