MonoTouch: How to Tell If The User Is Selecting Text or Tapping

Goal

Show and hide a toolbar at the bottom of the view when the user taps.

Why

Several apps, particularly those focus on reading the content in the view, offer a UIToolbar (or a custom component with buttons) at the bottom of the view that shows or hides according to the user’s taps.

What we want to detect is a single tap. Not a swipe. Not drag. Not if the user is selecting text.

How

Using a UITapGestureRecognizer we can handle taps on the UIWebView.

I setup a delegate for it and assign a Selector to handle the event.

From there we need to determine if the user is selecting text or just tapping, and show/hide the toolbar.

The Code

» continue reading
Categories: iPhoneMonoTouchPermalink

MonoTouch: Handle Events from UIWebView

Goal

Handle taps on buttons and links within a UIWebView.

Why

I really like how Readability, Pinterest and other apps hide or altogether don’t use a visible UINavigationBar on appropriate views.

image image

Instead, the view is all about the content. I suspect many are using a UIWebView for the content.

The question then becomes, how does the user navigate the view stack from within a UIWebView.

Readability has a left to right swipe gesture that pulls he page away. I suspect this may be one UIViewController that shows a UIWebView over the top of the other content instead of pushing another view onto the stack. If you take a moment in Readability to pull the article away to partially reveal the list, you can scroll the list and see the article. I could be wrong…of anyone knows different do tell. I’m sure there’s more than one way to do this.

image

In the meantime, I want to add a back image link at the top of my HTML content, and handle that action from the view code.

image

How

UIWebView provides ShouldStartLoad where we can see what the component is about to load. At that point we can intercept the request and take a different action.

The Code:

In the HTML I have a link to the anchor #back like this:

  1.  
  2. <a href="#back"><img src="Images/btn_back.png" /></a>
  3.  

To load images into the UIWebView from the local resource bundle, I set the base URL of the request to NSBundle.MainBundle.BundleUrl.

When the user touches that link the webViewShouldStartLoad handles it and pops the view controller as desired.

» continue reading
Categories: iPhoneMonoTouchPermalink

Rage Against the Framework: Flash Camp St. Louis Slides and Code

We had a wonderful turnout at Flash Camp St. Louis. Most impressive were all of the new faces. JP Revel did a fantastic job putting on the event.

In my session, “Rage Against the Framework”, I basically dumped all the tips and tricks and learning I’ve been doing over the past year of Flex 4 work. It’s been, at times, frustrating and slow. But there have also been moments of “Wow, I didn’t realize you could to THAT with Flex!”

We discussed the typical promises the Flex Framework makes to draw us in, such as data binding, components, and skins. While this gets us the majority of the way to where we want to be, we often encounter frustrating hurdles when trying to implement engaging user experiences.

Flex also provides States, State Transitions, and Layouts that, when properly understood and implemented, can help alleviate that frustration and do some really cool things.

References

Data Binding

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf64c3d-7fff.html#WS2db454920e96a9e51e63e3d11c0bf69084-7cc8

Binding Utils

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/binding/utils/BindingUtils.html

State Transitions

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7fab.html

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/states/Transition.html

Effects

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/effects/package-detail.html

Layouts

http://tv.adobe.com/watch/max-2010-develop/having-fun-with-layouts-in-flex-4/

http://www.rialvalue.com/blog/2010/11/04/slides-for-having-fun-with-layouts-in-flex-4/

http://evtimmy.com/2010/04/two-examples-of-layout-animations/

http://tv.adobe.com/watch/flash-camp-boston/creating-custom-layouts-in-flex-4-

http://miti.pricope.com/2009/05/29/playing-with-custom-layout-in-flex-4/

http://www.tink.ws/blog/carousellayout/

 

Code Demo: http://davidortinau.com/exhibits/DataBindingTransitions/index.html

Source: DataBindingTransitions.zip

» continue reading
Categories: GeneralPermalink