Jun 06

UITextView has square edges, and looks ugly compared to a UITextField!

Screen shot 2010-06-06 at 20.22.29

Unfortunately, there isn’t an option to give the UITextView a nice border. There are various ways to do this, such as creating your own background image for the UITextView, but I have found a relatively easy way to do it – and one that anyone without photoshop skills can achieve.

I achieve it by placing a UITextField behind the UITextView. However, in InterfaceBuilder you can’t change the height of a UITextField, so you have to edit the .xib file in Text Edit to change its height.

Here are the steps you need to do:

  1. Add a UITextField to your View and put a UITextView on top of it.
  2. Decide on how high you want your UITextView and resize it.
  3. Give the UITextField a tag of 999 (or whatever you want) (hit CMD-1 to bring up the attributes inspector to do this).
  4. Save the .xib file and then right click the file > Open With > Other > TextEdit
  5. Search for your tag, 999, and in the same section of the xml you will see something like: {{25, 199}, {275, 31}} (see below)
  6. You need to change 31 to the same height as your UITextView and then save the .xib file in TextEdit
  7. When you return to IB it will tell you the document has been modified, click Revert
  8. You should now see a tall UITextField behind your UITextView. Make sure your UITextView has a transparent background!
  9. <object class="IBUITextField" id="154341485">
    	<reference key="NSNextResponder" ref="774585933"/>
    	<int key="NSvFlags">292</int>
    	<string key="NSFrame">{{25, 199}, {275, 31}}</string> THIS IS THE LINE THAT YOU NEED TO EDIT.... CHANGE 31 TO THE HEIGHT OF YOUR UITEXTVIEW
    	<reference key="NSSuperview" ref="774585933"/>
    	<reference key="IBUIBackgroundColor" ref="157267157"/>
    	<bool key="IBUIOpaque">NO</bool>
    	<bool key="IBUIClearsContextBeforeDrawing">NO</bool>
    	<int key="IBUITag">999</int>THIS IS THE TAG YOU CHOSE TO HELP YOU FIND THIS SECTION IN THE XIB FILE
    

    Here is my project if you need help seeing how I did it.

    xcodeProject

    Thanks

    written by admin \\ tags: , , , ,

    Mar 25

    When you develop forms or any screens with input fields, occasionally the inputs will be obscured by the keyboard when it appears. This is bad usability for the user who now has to input data without being able to see what they have typed! One solution is to slide the whole view so that the field being edited is always visible.

    Screen shot 2010-03-25 at 20.21.31Screen shot 2010-03-25 at 20.21.41Screen shot 2010-03-25 at 20.32.47

    This solution I provide adds a few methods to UIView (yes i know, adding categories to cocoa classes is naughty) – which will determine how much to slide the view based on the inputs position on the whole screen, and then slide the view at the same speed as the keyboard slide entry. It then will slide back to where it was when you are finished editing.

    It is pretty simple to do this – here is how I calculate where to scroll the view:

    - (void) maintainVisibityOfControl:(UIControl *)control offset:(float)offset {
    	static const float deviceHeight = 480;
    	static const float keyboardHeight = 216;
    	static const float gap = 5; //gap between the top of keyboard and the control
    
    	//Find the controls absolute position in the 320*480 window - it could be nested in other views
    	CGPoint absolute = [control.superview convertPoint:control.frame.origin toView:nil];
    
    	//If it would be hidden behind the keyboard....
    	if (absolute.y > (keyboardHeight + gap)) {
    		//Shift the view
    		float shiftBy = (deviceHeight - absolute.y) - (deviceHeight - keyboardHeight - gap - offset);
    		[UIView beginAnimations:nil context:nil];
    		[UIView setAnimationDuration:0.3f]; //this is speed of keyboard
    		CGAffineTransform slideTransform = CGAffineTransformMakeTranslation(0.0, shiftBy);
    		self.transform = slideTransform;
    		[UIView commitAnimations];
    	}
    }
    

    ..and then I reset the view afterwards using:

    - (void) resetViewToIdentityTransform {
    	[UIView beginAnimations:nil context:nil];
    	[UIView setAnimationDuration:0.3f]; //this is speed of keyboard
    	CGAffineTransform slideTransform = CGAffineTransformIdentity;
    	self.transform = slideTransform;
    	[UIView commitAnimations];
    }
    

    You only need to make minimal changes to your own code, and call these methods from your UITextFieldDelegate methods (or other control delegates):

    - (void) textFieldDidBeginEditing:(UITextField *)textField {
    	[self.view maintainVisibityOfControl:textField offset:0.0f];
    }
    
    - (void)textFieldDidEndEditing:(UITextField *)textField {
    	if (textField == currentControl) {
    		//If the textfield is still the same one, we can reset the view animated
    		[self.view resetViewToIdentityTransform];
    	}else {
    		//However, if the currentControl has changed - that indicates the user has
    		//gone into another control - so don't reset view, otherwise animations jump around
    	}
    }
    

    Here is a copy of the XCode project:
    xcodeProject

    Thanks

    written by admin \\ tags: , , , ,

    Mar 13

    Of the various keyboards you can choose when developing iPhone apps, the number pad doesn’t come with a decimal point. There is a blank button in the bottom left corner that doesn’t do anything, so I’m going to show you how to put a decimal point button there to look like this:
    Screen shot 2010-03-13 at 17.40.13 Screen shot 2010-03-13 at 17.40.19

    There are a few other tutorial around that show you how to do this, but i believe mine is better….because the code is simpler to use, its more flexible, and the UI colors and button states are perfectly matched to the rest of the keyboard (unlike some of the other tutorials) The code you use to implement this will look like this:

    @interface DecimalPointNumberPadViewController : UIViewController <UITextFieldDelegate> {
    	NumberKeypadDecimalPoint *numberKeyPad;
    }
    @end
    
    @implementation DecimalPointNumberPadViewController
    - (void) textFieldDidBeginEditing:(UITextField *)textField {
    	numberKeyPad = [[NumberKeypadDecimalPoint keypadForTextField:textField] retain];
    }
    - (void)textFieldDidEndEditing:(UITextField *)textField {
    	[numberKeyPad release];
    }
    @end
    
    • it works on any number of UITextFields that are displayed on your view controller.
    • It will only add one decimal point per text field.

    To achieve this, here are the basic steps of what i do:

    1. Create a custom UIButton with clear background and dark grey text.
    2. For the highlighted state i change the background image of the button and the text color to be white
    3. I find the UIKeyboard in the application window and add the custom button at the required location
    4. I add a delegate to the button to listen for click events and pass the event to a handler which adds a decimal point to the current UITextField

    Update 5th June 2010: OS4 compatible and using only public API

    As using private API’s is against the SDK agreement, I’ve updated the code to remove references to any private API. It is also now compatible with OS 4.0.

    Update 20th July 2010: This code was part of the app I’m working on and was accepted by apple.

    A copy of my XCode project is here:

    xcodeProjectDecimalPointNumberPad-v4

    Thanks

    written by admin \\ tags: , , , ,

    Mar 03

    Here i will show you how to animate an object along a path on a UIView. I will create the path and draw it onto the UIView so that you can see it, and then use the same path for the animation.

    I’m doing all of this within a UIView that i have added to my screen…

    Animate along a path

    Firstly, we will draw a curved line on the screen….

    //This draws a quadratic bezier curved line right across the screen
    - ( void ) drawACurvedLine {
    	//Create a bitmap graphics context, you will later get a UIImage from this
    	UIGraphicsBeginImageContext(CGSizeMake(320,460));
    	CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    	//Set variables in the context for drawing
    	CGContextSetLineWidth(ctx, 1.5);
    	CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);
    
    	//Set the start point of your drawing
    	CGContextMoveToPoint(ctx, 10, 10);
    	//The end point of the line is 310,450 .... i'm also setting a reference point of 10,450
    	//A quadratic bezier curve is drawn using these coordinates - experiment and see the results.
    	CGContextAddQuadCurveToPoint(ctx, 10, 450, 310, 450);
    	//Add another curve, the opposite of the above - finishing back where we started
    	CGContextAddQuadCurveToPoint(ctx, 310, 10, 10, 10);
    
    	//Draw the line
    	CGContextDrawPath(ctx, kCGPathStroke);
    
    	//Get a UIImage from the current bitmap context we created at the start and then end the image context
    	UIImage *curve = UIGraphicsGetImageFromCurrentImageContext();
    	UIGraphicsEndImageContext();
    
    	//With the image, we need a UIImageView
    	UIImageView *curveView = [[UIImageView alloc] initWithImage:curve];
    	//Set the frame of the view - which is used to position it when we add it to our current UIView
    	curveView.frame = CGRectMake(1, 1, 320, 460);
    	curveView.backgroundColor = [UIColor clearColor];
    	[self addSubview:curveView];
    }
    

    Now we will create a keyframe animation, and a path that is the same as the line we just drew. We will also draw a circle, and animate it along that path:

    - (void) animateCicleAlongPath {
    	//Prepare the animation - we use keyframe animation for animations of this complexity
    	CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    	//Set some variables on the animation
    	pathAnimation.calculationMode = kCAAnimationPaced;
    	//We want the animation to persist - not so important in this case - but kept for clarity
    	//If we animated something from left to right - and we wanted it to stay in the new position,
    	//then we would need these parameters
    	pathAnimation.fillMode = kCAFillModeForwards;
    	pathAnimation.removedOnCompletion = NO;
    	pathAnimation.duration = 5.0;
    	//Lets loop continuously for the demonstration
    	pathAnimation.repeatCount = 1000;
    
    	//Setup the path for the animation - this is very similar as the code the draw the line
    	//instead of drawing to the graphics context, instead we draw lines on a CGPathRef
    	CGPoint endPoint = CGPointMake(310, 450);
    	CGMutablePathRef curvedPath = CGPathCreateMutable();
    	CGPathMoveToPoint(curvedPath, NULL, 10, 10);
    	CGPathAddQuadCurveToPoint(curvedPath, NULL, 10, 450, 310, 450);
    	CGPathAddQuadCurveToPoint(curvedPath, NULL, 310, 10, 10, 10);
    
    	//Now we have the path, we tell the animation we want to use this path - then we release the path
    	pathAnimation.path = curvedPath;
    	CGPathRelease(curvedPath);
    
    	//We will now draw a circle at the start of the path which we will animate to follow the path
    	//We use the same technique as before to draw to a bitmap context and then eventually create
    	//a UIImageView which we add to our view
    	UIGraphicsBeginImageContext(CGSizeMake(20,20));
    	CGContextRef ctx = UIGraphicsGetCurrentContext();
    	//Set context variables
    	CGContextSetLineWidth(ctx, 1.5);
    	CGContextSetFillColorWithColor(ctx, [UIColor greenColor].CGColor);
    	CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);
    	//Draw a circle - and paint it with a different outline (white) and fill color (green)
    	CGContextAddEllipseInRect(ctx, CGRectMake(1, 1, 18, 18));
    	CGContextDrawPath(ctx, kCGPathFillStroke);
    	UIImage *circle = UIGraphicsGetImageFromCurrentImageContext();
    	UIGraphicsEndImageContext();
    
    	UIImageView *circleView = [[UIImageView alloc] initWithImage:circle];
    	circleView.frame = CGRectMake(1, 1, 20, 20);
    	[self addSubview:circleView];
    
    	//Add the animation to the circleView - once you add the animation to the layer, the animation starts
    	[circleView.layer addAnimation:pathAnimation forKey:@"moveTheSquare"];
    }
    

    To get all this running, you can use this init method:

    - (id)initWithFrame:(CGRect)frame {
    	if (self = [super initWithFrame:frame]) {
    		[self drawACurvedLine];
    		[self animateCicleAlongPath];
        }
        return self;
    }
    

    and use something like this in your ViewController….

    - (void)viewDidLoad {
    	UIView *customView = [[Canvas alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
    	customView.backgroundColor = [UIColor blackColor];
    	[self.view addSubview:customView];
    	[customView release];
        [super viewDidLoad];
    }
    

    Also…don’t forget to add your Quartz import:

    #import <QuartzCore/QuartzCore.h>
    

    I’m sure there are lots of better ways of doing this, such as using CALayers and adding CGImage to the layers. But that’s something I haven’t tried yet. The example above should be enough to get you started with animation along a path.

    Here is a copy of the XCode project:
    xcodeProject

    written by admin \\ tags: , , , , ,

    Nov 16

    Doing some iPhone development and this error really caught me out for a while:

    2009-11-16 21:02:48.387 Pickers[3779:207] *** Terminating app due to uncaught
    exception 'NSUnknownKeyException', reason: '[<UIViewController 0x381d740>
    setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key datePicker.'
    2009-11-16 21:02:48.388 Pickers[3779:207] Stack: (

    It’s seemed fairly cryptic at the time. I had created a Tab Bar Controller and for each tab button, i hadn’t set its class identity – so each tab was still declared as a UIViewController instead of the actual Controller class that i had created.

    The error comes from the NSKeyValueCoding category which allows you to access properties via setValue: forKey:

    Person *aPerson = [[Person alloc] initWithAge: 53];
    aPerson.name = @"Steve";
    // NOTE: dot notation, uses synthesized setter, equivalent to [aPerson setName: @"Steve"];
    NSLog(@"Access by message (%@), dot notation(%@),
        property name(%@) and direct instance variable access (%@)",
          [aPerson name], aPerson.name, [aPerson valueForKey:@"name"], aPerson->name);
    

    So i guess it is just complaining that it can’t find the generated setter method named setDatePicker – because datePicker instance is not on the generic class.

    written by admin \\ tags: , ,

    Sep 24

    Wake-on-LAN is an Ethernet computer networking standard that allows a computer to be turned on or woken up by a network message. The message is usually sent by a simple program executed on another computer on the local area network.

    BIOS Setup

    You first need to enable WOL in your bios. This might be a Wake on LAN setting under power management, or it might be something like “Allow power from S5 by PME”. S5 is a power management state and PME is Power Management Event.

    Computer Setup

    You need to make sure you allow your network device to wake up your pc. In windows you can do this through the device manager for your network adapter. If you edit the properties for your network card (Control Panel > Device Manager > Network Adapters > Your Ethernet card > Properties > Power Management) – you can check a box to ‘Allow this device to wake up the computer’ and you can force it only to allow WOL magic packets to wake up the pc.

    Routers

    If your pc is behind a router, then you will need to forward all requests to port 9 to your pc that you want to wake up. Some routers allow you to assign applications to certain devices, and you may see ‘Wake On LAN’ as one of the applications.

    Java code to wake up your pc

    Below is some java code that you can use to wake up your pc using wake on lan. You will need to know your IP address and the MAC address of your network card.

    package com.devedup.net;
    
    import org.apache.log4j.Logger;
    
    import java.io.*;
    import java.net.*;
    
    /**
     * Used for waking up computers
     *
     * @author dave
     * @since 9 Apr 2009 08:00:04
     */
    public class WakeOnLAN {
    
        private final static Logger logger = Logger.getLogger(WakeOnLAN.class);
    
        public static final int PORT = 9;
    
        public static void main(String[] args) {
    
            if (args.length != 2) {
                logger.info("Usage: java WakeOnLan <broadcast-ip> <mac-address>");
                logger.info(
                    "Example: java WakeOnLan 192.168.0.255 00:0D:61:08:22:4A");
                logger.info(
                    "Example: java WakeOnLan 192.168.0.255 00-0D-61-08-22-4A");
                System.exit(1);
            }
    
            String ipStr = args[0];
            String macStr = args[1];
    
            try {
                wakeup(ipStr, macStr);
            } catch (Exception e) {
                logger.info("Failed to send Wake-on-LAN packet: + e");
                System.exit(1);
            }
    
        }
    
        /**
         * Send a Wake On LAN magic packet to ip and mac address specifed
         *
         * @param ip
         * @param macAddress
         */
        public static void wakeup(String ip, String macAddress) {
            if (ip == null || ip.length() < 1)
                throw new IllegalArgumentException(
                              "ip address cannot be null or blank");
            if (macAddress == null || macAddress.length() < 1)
                throw new IllegalArgumentException(
                              "macAddress cannot be null or blank");
    
            byte[] macBytes = getMacBytes(macAddress);
            byte[] bytes = new byte[6 + 16 * macBytes.length];
            for (int i = 0; i < 6; i++) {
                bytes[i] = (byte) 0xff;
            }
            for (int i = 6; i < bytes.length; i += macBytes.length) {
                System.arraycopy(macBytes, 0, bytes, i, macBytes.length);
            }
    
            DatagramSocket socket = null;
            try {
                InetAddress address = InetAddress.getByName(ip);
                DatagramPacket packet =
                    new DatagramPacket(bytes, bytes.length, address, PORT);
    
                if (logger.isInfoEnabled()) {
                    logger.info("Sending datagram (UDP) packet to ip["
                                       + address + "] on port[" + PORT + "]");
                    logger.info("Message bytes [" + bytes + "]");
                }
    
                socket = new DatagramSocket();
                socket.send(packet);
                logger.info("Wake-on-LAN packet sent.");
                return;
            } catch (UnknownHostException e) {
                logger.error(e);
            } catch (SocketException e) {
                logger.error(e);
            } catch (IOException e) {
                logger.error(e);
            } finally {
                if (socket != null && !socket.isClosed()) {
                    socket.close();
                }
            }
        }
    
        private static byte[] getMacBytes(String macStr)
                                         throws IllegalArgumentException {
            byte[] bytes = new byte[6];
            String[] hex = macStr.split("(\\:|\\-)");
            if (hex.length != 6) {
                throw new IllegalArgumentException("Invalid MAC address.");
            }
            try {
                for (int i = 0; i < 6; i++) {
                    bytes[i] = (byte) Integer.parseInt(hex[i], 16);
                }
            } catch (NumberFormatException e) {
                throw new IllegalArgumentException(
                                    "Invalid hex digit in MAC address.");
            }
            return bytes;
        }
    
    }
    

    written by admin \\ tags: , ,

    Sep 09

    I switched on my pc and then between 5 and 30 seconds later, before it booted into windows, it would shut down again. It would do this continuously. I disconnected everything from my pc (hard disks, usb devices, all but 1 memory module etc) so I had the bare minimum running. It still happened. So I narrowed it down to cpu, motherboard or power supply.

    Doing a search revealed others with similar problems and the most common problem was power supply failures.

    I decided to buy a new power supply and the motherboard and cpu upgrade anyway (mine was 3 yrs old). Swapped cpu and motherboard first and the problem was still there. So definitely the power supply. I swapped that, and the problem was resolved.

    I then put the old motherboard and power supply on the bench and ran the system from there. I had the power supply fan side down (yes this is bad) – and noticed the system shut down a lot quicker. So I had deduced that it could just be an air flow problem with the power supply overheating. I opened up the power supply (they recommend you not to do this, so be careful!) and there was a lot of dust in there. I vacuumed it all out, ran the system again and the problem hasn’t returned!

    So, after all that work (and £250 later) it was dust causing the problem. However, that’s 3 years of dust. I sent back the new power supply and now have put the old one back in and my system has been fine for weeks.

    written by admin \\ tags: , , ,

    Sep 09

    Cisco don’t support a 64 bit client apart from their AnyConnect client, which doesn’t support IPSec. This is a little annoying for those of us who want to run XP, Vista or Windows 7 in 64 bit.

    I’ve just installed Windows 7 64 bit and I’ve found a vpn client that is compatible with Cisco! Shrew Soft Inc

    I installed version 2.1.5-rc-3 and it works perfectly with Windows 7 and also supports importing Cisco .pcf files.

    written by admin \\ tags: , , ,

    Jul 02
    msn live cant sign in

    msn live cant sign in

    I just got this error message when I tried to sign into MSN Live  this morning:

    We can’t sign you into Windows Live Messenger. Signing in to Windows Live Messenger failed because the authentication service is not compatible with this version of the program!

    I haven’t installed a new version, so I don’t know why it’s decided it can’t sign in anymore. However, I’ve seen the error before and it’s fixed by added an entry to your hosts file. Go to the file:

    C:\Windows\system32\drivers\etc\hosts

    and add the line

    65.54.239.80    messenger.hotmail.com

    Thats it. You should now be able to sign in.

    written by admin

    Jun 11

    The ActionMapper is the component that maps a url onto one of your action classes. More information can be found about it here:

    http://struts.apache.org/2.1.6/docs/actionmapper.html

    In most applications you won’t need to change the default ActionMapper. A project I am currently working on required that I implement an API specified by a 3rd party. The requests that they send us are all POST requests over HTTPS. Nothing fancy. To determine which method/procedure that they want to call, they send a parameter on the request named ‘function’. I decided that I would implement the receiving service using Struts 2 and create a custom ActionMapper. I did a search, but the results didn’t show any examples of creating a custom ActionMapper, so I downloaded the  struts 2 source to see how the default one worked, and then I constructed mine with that as a ‘guide’.

    My implementation is rather basic, as it isn’t such a complex requirement.:

    import com.opensymphony.xwork2.config.ConfigurationManager;
    import com.opensymphony.xwork2.config.entities.ActionConfig;
    import org.apache.log4j.Logger;
    import org.apache.struts2.dispatcher.mapper.ActionMapper;
    import org.apache.struts2.dispatcher.mapper.ActionMapping;
    
    import javax.servlet.http.HttpServletRequest;
    import java.util.Map;
    
    public class SyncActionMapper implements ActionMapper {
    
        private final Logger LOG = Logger.getLogger(getClass());
    
        private static final String UNKNOW_FUNCTION_MAPPING = "unknownFunction";
    
        @Override
        public ActionMapping getMapping(HttpServletRequest request,
                                  ConfigurationManager configurationManager) {
            Map&lt;String, ActionConfig&gt; actions =
               configurationManager.getConfiguration().
                  getPackageConfig("sync-facade").getActionConfigs();
    
            ActionMapping mapping = new ActionMapping();
            mapping.setNamespace("/");
    
            String actionName = request.getParameter("function");
            if (actionName == null || actionName.length() &lt; 1) {
                LOG.error("function param no found on request " + actionName);
                actionName = UNKNOW_FUNCTION_MAPPING;
            } else if (!actions.containsKey(actionName)) {
                LOG.error("action not found in struts.xml " + actionName);
                actionName = UNKNOW_FUNCTION_MAPPING;
            } else {
                if (LOG.isDebugEnabled()) {
                    LOG.debug("function param found, "
                        + " mapping to action with the name: " + actionName);
                }
            }
            mapping.setName(actionName);
            return mapping;
        }
    
        @Override
        public ActionMapping getMappingFromActionName(String actionName) {
            ActionMapping mapping = new ActionMapping();
            mapping.setName(actionName);
            mapping.setNamespace("/");
            return mapping;
        }
    
        @Override
        public String getUriFromActionMapping(ActionMapping actionMapping) {
            throw new IllegalStateException("not implemented");
        }
    }

    I also wanted to map unknown functions to an error action. Checking the struts.xml file and returning a valid ActionMapping is not part of the ActionMapper contract (so the docs say), but I decided to add this here. After getting the function name, I check to see if this function exists in struts.xml using the ConfigurationManager (i may need to optimize this line of code, not sure yet).

    To set my custom ActionMapper to be the default I added a reference to it in struts.xml:

    <constant name="struts.mapper.class"
        value="com.devedup.sync.dispatcher.mapper.SyncActionMapper"/>

    I can now map to actions simply from the url http://localhost/myapp?function=myAction  (or similarly with the function param in the body of the POST request).

    written by admin \\ tags: , ,