When you want to use images in the Interface Builder and you are programming with XCode, all the images you added to your project in XCode, will be available to you in the Interface Builder under Library. Now, of you are using MonoDevelop and MonoTouch, images used in these kinds of projects will not be available in the Interface Builder.
In this short article I will show you how you still can use images but do it partially by code.
1. Add an UIImageView to your design
Open your main window and drag an UIImageView on it. Create on outlet for it and connect the outlet with this control.
2. Add an image to your project
Add an image to your project but make sure to, at the bottom, override the 'Default Build Action'. Change it to 'content'.
3. Put this image into the image view
Use this code to show the image:
UIImage spLogo = UIImage.FromFile(@"Images/spLogo.jpg");
imgMainLogo.Image = spLogo;
where 'imgMainLogo' is my outlet. Also make sure you use the correct relative path to the image itself. I created a folder 'images' and put my picture in there.
maandag 28 december 2009
vrijdag 25 december 2009
Creating a custom table cell
In the previous post we saw how to use the tableview. It's one of the most used things while developing for iPhone so I really suggest you learn how to use this.
When you progress in your developments, there will probably be a moment where you will want to create a custom table cell because the default one can only show text. So if you want to do fancy stuff with logo's, different backgrounds, cell properties, ... this is your guide.
1. Create a new 'View interface definition with controller'
In MonoTouch, go to File->New->File, choose 'iPhone' and then 'View interface definition with controller'. Give it a new, for example 'CustomTableCell'.
MonoTouch will now create a new xib file and the necessary cs files for you.
2. Adding an empty view cell to the design
Double click the xib file to open the Interface Builder. First of all, remove the 'View' because we will not need it here. Now drag a 'Table View Cell' in here. This will be our base table view cell from which we will create our custom cell.
3. Customizing the table cell
Now double click the table cell you just dragged in. You can now start dragging in other controls. I used an image and a label.
4. Create your outlets
We will now create the correct outlets so we can access the labels and the other controls from in our code. If you create the 'File Owner', change the classname to 'CustomTableCell' as well. Now on the right, in 'classes', create the necessary outlets for the cell itself and all its controls.
Then, in connections, create the actual connections between the outlets and the controls by dragging the outlet to the correct control.
5. Set the table cell identifier
Select the table cell and set the identifier to 'CustomCell'. This identifier will later be used in our code.
6. Adding the correct properties
Open the CustomTableCell.cs file and add the following code to it:
public string ContentText
{
get { return lblText.Text; }
set { lblText.Text = value; }
}
public UIImage ImgIcon
{
get { return imgIcon.Image; }
set { imgIcon.Image = value; }
}
public UITableViewCell Cell
{
get { return viewCell; }
}
Of course this code depends on with kind of controls you dragged onto the cell because this will determine the return type. You must also use the correct outlet names to access the controls.
7. Using the custom table cell
As you can read in my previous post, there is a function called 'GetCell' that you can override.
private Dictionary controllers = null; // Holds custom controllers
In this 'GetCell' function, you can use your custom cell.
ITableViewCell cell = tableView.DequeueReusableCell("CustomCell"); // Call your custom table cell
CustomTableCell cellController = null;
if (cell == null)
{
cellController = new CustomTableCell();
NSBundle.MainBundle.LoadNib("CustomTableCell", cellController, null);
cell = cellController.Cell;
cell.Tag = Environment.TickCount; // Identify this cell
controllers.Add(cell.Tag, cellController);
}
else
{
cellController = controllers[cell.Tag];
}
// Label text
cellController.ContentText = "Data";
// Icon
string iconPath = "http://www.ardella.be/iphone/siteicon.jpg";
NSUrl nsurl = new NSUrl(iconPath);
NSData data = NSData.FromUrl(nsurl);
UIImage icon = UIImage.LoadFromData(data);
cellController.ImgIcon = icon;
8. The result
If all goes well, you could end up with the following result depending on your data to fill up the table cells.
When you progress in your developments, there will probably be a moment where you will want to create a custom table cell because the default one can only show text. So if you want to do fancy stuff with logo's, different backgrounds, cell properties, ... this is your guide.
1. Create a new 'View interface definition with controller'
In MonoTouch, go to File->New->File, choose 'iPhone' and then 'View interface definition with controller'. Give it a new, for example 'CustomTableCell'.
MonoTouch will now create a new xib file and the necessary cs files for you.
2. Adding an empty view cell to the design
Double click the xib file to open the Interface Builder. First of all, remove the 'View' because we will not need it here. Now drag a 'Table View Cell' in here. This will be our base table view cell from which we will create our custom cell.
3. Customizing the table cell
Now double click the table cell you just dragged in. You can now start dragging in other controls. I used an image and a label.
4. Create your outlets
We will now create the correct outlets so we can access the labels and the other controls from in our code. If you create the 'File Owner', change the classname to 'CustomTableCell' as well. Now on the right, in 'classes', create the necessary outlets for the cell itself and all its controls.
Then, in connections, create the actual connections between the outlets and the controls by dragging the outlet to the correct control.
5. Set the table cell identifier
Select the table cell and set the identifier to 'CustomCell'. This identifier will later be used in our code.
6. Adding the correct properties
Open the CustomTableCell.cs file and add the following code to it:
public string ContentText
{
get { return lblText.Text; }
set { lblText.Text = value; }
}
public UIImage ImgIcon
{
get { return imgIcon.Image; }
set { imgIcon.Image = value; }
}
public UITableViewCell Cell
{
get { return viewCell; }
}
Of course this code depends on with kind of controls you dragged onto the cell because this will determine the return type. You must also use the correct outlet names to access the controls.
7. Using the custom table cell
As you can read in my previous post, there is a function called 'GetCell' that you can override.
public override UITableViewCell GetCell (UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath)Add this to the global variables:
private Dictionary
In this 'GetCell' function, you can use your custom cell.
ITableViewCell cell = tableView.DequeueReusableCell("CustomCell"); // Call your custom table cell
CustomTableCell cellController = null;
if (cell == null)
{
cellController = new CustomTableCell();
NSBundle.MainBundle.LoadNib("CustomTableCell", cellController, null);
cell = cellController.Cell;
cell.Tag = Environment.TickCount; // Identify this cell
controllers.Add(cell.Tag, cellController);
}
else
{
cellController = controllers[cell.Tag];
}
// Label text
cellController.ContentText = "Data";
// Icon
string iconPath = "http://www.ardella.be/iphone/siteicon.jpg";
NSUrl nsurl = new NSUrl(iconPath);
NSData data = NSData.FromUrl(nsurl);
UIImage icon = UIImage.LoadFromData(data);
cellController.ImgIcon = icon;
8. The result
If all goes well, you could end up with the following result depending on your data to fill up the table cells.
zaterdag 19 december 2009
Using the UITableViewDataSource class
In this article I will explain you how to use the UITableViewDataSource class. This class you will use when integrating a Table View into your iPhone application. The Table View is one of the most used objects.
If you own or used an iPhone, you've probably seen it multiple times when looking at your notes or contacts.
We will first start with creating a new iPhone project in MonoTouch.
As you can see, I choose the iPhone MonoTouch project and I also gave it a name (iDemo).
Double click the xib file. This is the file which holds the user interface. This will start the 'Interface Builder' which is part of Apple's iPhone development environment. It's comparable with the Visual Studio interface builder in this way that you can drag and drop controls to the window and link outlets to them. MonoTouch will pick up these outlets so you can access the objects in your code. More about that in a minute.
In the empty window, I dragged a Table View. You will end up with the view above.
Now it's time to create an outlet and link it to this table view. In the following screenshot you can see where you can create a new outlet.
On the right, go to 'classes -> other classes -> AppDelegate' and then below you can select outlets. Create a new one with a good describing name as you will have a lot of these when building bigger solutions.
You now have to hook this outlet to the table view itself. Select the MainWindow.xib window like shown below. Select 'AppDelegate' and on the left in the other window, select the outlets tab which has the arrow icon.
Now you must drag the outlet you just made to the table view in the window. A blue line will make the connection.
Save this user interface. If all goes well, MonoTouch will pick up the changes you made. In particular, the outlet and its connection with the table view.
Go back to your code. We will create a new class which will inherit from the UITableViewDataSource class. Create a new empty class file called TableDatasource. First of all, don't forget to add a new using statement 'using MonoTouch.UIKit'.
Then let the class inherit from UITableViewDataSource. This will allow us to override some necessary functions which will help us to get this table view to work.
When you are used to program in .NET, this way of working with lists might not be what you are used to. In short what we will do in the coming minutes, is to create a class which will give back the size of the dataset we want to appear in the table view and override a function which will create a particular cell and return it to the table which will place it in the correct place.
First of all create a new ArrayList variable. In the constructor fill it up with some data. For example:
data = new ArrayList();
data.Add("Data1");
data.Add("Data2");
data.Add("Data3");
Then we will override the RowsInSection function. This function will return the size of the list in the current section. This actually means you can make a two dimensional datasource but for now we will just use a one level list.
public override int RowsInSection (UITableView tableview, int section)
{
return data.Count;
}
This override will simply return the length of our arraylist with data.
Next we will override the GetCell cell. This function will create a new cell, fill it up with the correct data and return it.
public override UITableViewCell GetCell (UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath)
{
UITableViewCell cell = new UITableViewCell();
cell.TextLabel.Text = data[indexPath.Row].ToString();
return cell;
}
This function creates a new cell, gets the correct data from our arraylist using the indexPath variable and then return the newly created cell.
To test your application, set the environment to Debug/iPhoneSimulator and run the application. If all goes well, it will compile and run the application in the simulator. As you can see, the data will be loaded into the table.
This concludes this tutorial. Keep in mind that this table view is used in a lot of the solutions you might want to build. This example showed you how to use it but of course you can go as far as you want with this. Also try to take a look at the other overrides to make use of all the options that are offered to you.
If you own or used an iPhone, you've probably seen it multiple times when looking at your notes or contacts.
We will first start with creating a new iPhone project in MonoTouch.
Double click the xib file. This is the file which holds the user interface. This will start the 'Interface Builder' which is part of Apple's iPhone development environment. It's comparable with the Visual Studio interface builder in this way that you can drag and drop controls to the window and link outlets to them. MonoTouch will pick up these outlets so you can access the objects in your code. More about that in a minute.
In the empty window, I dragged a Table View. You will end up with the view above.
Now it's time to create an outlet and link it to this table view. In the following screenshot you can see where you can create a new outlet.
On the right, go to 'classes -> other classes -> AppDelegate' and then below you can select outlets. Create a new one with a good describing name as you will have a lot of these when building bigger solutions.
You now have to hook this outlet to the table view itself. Select the MainWindow.xib window like shown below. Select 'AppDelegate' and on the left in the other window, select the outlets tab which has the arrow icon.
Now you must drag the outlet you just made to the table view in the window. A blue line will make the connection.
Save this user interface. If all goes well, MonoTouch will pick up the changes you made. In particular, the outlet and its connection with the table view.
Go back to your code. We will create a new class which will inherit from the UITableViewDataSource class. Create a new empty class file called TableDatasource. First of all, don't forget to add a new using statement 'using MonoTouch.UIKit'.
Then let the class inherit from UITableViewDataSource. This will allow us to override some necessary functions which will help us to get this table view to work.
When you are used to program in .NET, this way of working with lists might not be what you are used to. In short what we will do in the coming minutes, is to create a class which will give back the size of the dataset we want to appear in the table view and override a function which will create a particular cell and return it to the table which will place it in the correct place.
First of all create a new ArrayList variable. In the constructor fill it up with some data. For example:
data = new ArrayList();
data.Add("Data1");
data.Add("Data2");
data.Add("Data3");
Then we will override the RowsInSection function. This function will return the size of the list in the current section. This actually means you can make a two dimensional datasource but for now we will just use a one level list.
public override int RowsInSection (UITableView tableview, int section)
{
return data.Count;
}
This override will simply return the length of our arraylist with data.
Next we will override the GetCell cell. This function will create a new cell, fill it up with the correct data and return it.
public override UITableViewCell GetCell (UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath)
{
UITableViewCell cell = new UITableViewCell();
cell.TextLabel.Text = data[indexPath.Row].ToString();
return cell;
}
This function creates a new cell, gets the correct data from our arraylist using the indexPath variable and then return the newly created cell.
To test your application, set the environment to Debug/iPhoneSimulator and run the application. If all goes well, it will compile and run the application in the simulator. As you can see, the data will be loaded into the table.
This concludes this tutorial. Keep in mind that this table view is used in a lot of the solutions you might want to build. This example showed you how to use it but of course you can go as far as you want with this. Also try to take a look at the other overrides to make use of all the options that are offered to you.
donderdag 17 december 2009
Getting started: buy your IDE
As a first article on this blog, I will talk about how you can start developing for the iPhone using nothing but .NET.
As we all know and just can't deny, the iPhone is one hell of a smart phone. I myself am now owning my second iPhone, since the first one took a plunge into the swimming pool together with me. Although it was funny the first few minutes, a little bit later I realized that the good smartphone days were over. For a few weeks I used my old smart phone (no details here) before running to the store and almost bagging him to sell me a new iPhone... . (Yes, the other smartphone was that bad and for some reason I found that it wasn't that 'smart' at all ... )
Anyway, back to business. I'm having interests in developing for the iPhone for some time now and therefore I started to investigate how to do this. You basically have two choices:
1. You use Apple's IDE called XCode. This is a very good IDE but also requires you to program in objective C if you want to do iPhone development. 'Problem' is I didn't had the time to learn this language and, more important to me, in my opinion objective see is not easy to read and use.
2. You use Novell's MonoTouch. MonoTouch is a commercial product based on mono which allows .NET development for all kinds of none Microsoft platforms. You can download a trail version here. Read the instructions on this page carefully because you will also need to download and install the Apple iPhone SDK, Mono for OS X and MonoDevelop for OS X. And as you have probably figured out right now, you will also need a Mac. I'm currently working on my Macbook Air, which is a very (VERY) nice notebook.
So if you want to develop for the iPhone using .NET, option 2 is the way to go. As far as I know, at this moment only OS X Leopard and Snow Leopard are supported. For the iPhone itself, OS 3.0 and 3.1 (or higher) are supported.
The MonoTouch trail version will only let you run your applications on the iPhone Simulator and you cannot debug. This last obstacle was the main reason for me to buy the full version which cost me around 400 euro.
The MonoTouch IDE is a slim version of Microsoft's Visual Studio so if you are familiar with this tool, MonoTouch will not seem very different to you.
As we all know and just can't deny, the iPhone is one hell of a smart phone. I myself am now owning my second iPhone, since the first one took a plunge into the swimming pool together with me. Although it was funny the first few minutes, a little bit later I realized that the good smartphone days were over. For a few weeks I used my old smart phone (no details here) before running to the store and almost bagging him to sell me a new iPhone... . (Yes, the other smartphone was that bad and for some reason I found that it wasn't that 'smart' at all ... )
Anyway, back to business. I'm having interests in developing for the iPhone for some time now and therefore I started to investigate how to do this. You basically have two choices:
1. You use Apple's IDE called XCode. This is a very good IDE but also requires you to program in objective C if you want to do iPhone development. 'Problem' is I didn't had the time to learn this language and, more important to me, in my opinion objective see is not easy to read and use.
2. You use Novell's MonoTouch. MonoTouch is a commercial product based on mono which allows .NET development for all kinds of none Microsoft platforms. You can download a trail version here. Read the instructions on this page carefully because you will also need to download and install the Apple iPhone SDK, Mono for OS X and MonoDevelop for OS X. And as you have probably figured out right now, you will also need a Mac. I'm currently working on my Macbook Air, which is a very (VERY) nice notebook.
So if you want to develop for the iPhone using .NET, option 2 is the way to go. As far as I know, at this moment only OS X Leopard and Snow Leopard are supported. For the iPhone itself, OS 3.0 and 3.1 (or higher) are supported.
The MonoTouch trail version will only let you run your applications on the iPhone Simulator and you cannot debug. This last obstacle was the main reason for me to buy the full version which cost me around 400 euro.
The MonoTouch IDE is a slim version of Microsoft's Visual Studio so if you are familiar with this tool, MonoTouch will not seem very different to you.
Abonneren op:
Reacties (Atom)