File Manager


Concepts

  • Managing files and directories are very important tasks in a mobile application. Creo offers fully featured FileManager and File classes and in this tutorial we'll use both in order to create a simple preview app for all the assets stored within the application itself. FileManager will be used both as a DataSet and programmatically via the code editor.

Classes


Assets

  • Various resources like a jpeg image, a mp4 movie, a sqlite database, a text file and an aiff sound.

1 Create a new empty Creo project and expose Window1 as "Assets Library" in the main Navigation1: file-manager
2 Drops the content of the assets folder you just download into the Assets folder and reply NO to the object conversion question: file-manager
Once imported your Assets folder should look like: file-manager
3 Now drop a TableView into Window1 and make its height to be half the height of the window. Set its Autoresizing mask as in the screenshot: file-manager
4 Drop a FileManager from the Others objects into Window1 and set its Directory to Assets: file-manager
5 Now set TableView1 properties the following:

  • DataSet FileManager1
  • Cell Height 60
  • Cell Text name
  • Cell Detail Text typeIdentifier
  • Cell Image icon
  • Cell Identifier path
file-manager
6 If you press Run you'll see that the TaleView will be automatically filled by the content of the Assets folder. What we would like to achieve is to offer some kind of preview for the user selected file.
Drop an ImageView and a MoviePlayer into Window1 and set the Hidden property to both and the frame to be {15, 394, 348, 260}. file-manager
7 Let's start some coding now. Select TableView1, open the Code Editor and in the DidSelectCell event write the following code:

			var path = cell.identifier;
			var extension = FileManager1.extension(path);
			var name = FileManager1.name(path);
			
			ImageView1.hidden = true;
			MoviePlayer1.hidden = true;
			
			var s = "N/A";
			if (extension == "sqlite") {
				var f = File.open(path);
				s = f.readStringOfLength(13);
			}
			
			if (extension == "txt") {
				var f = File.open(path);
				s = f.readStringOfLength(50);
			}
			
			if (extension == "aiff") {
				var sound = Sound.open(path);
				s = "sound";
				sound.play();
			}
			
			if (extension == "mp4") {
				MoviePlayer1.hidden = false;
				s = "movie";
				MoviePlayer1.contentPath = path;
			}
			
			if ((extension == "jpg") || (extension == "png")) {
				ImageView1.hidden = false;
				var image = Image.open(path);
				s = "image";
				ImageView1.image = image;
			}
			
			var alert = Alert(name, s);
			alert.show();
			

This code preview the selected assets based on its extension. In case of an image it display it inside an ImageView. A movie is played inside the MoviePlayer. A sound is also played and a text file is displayed into an Alert. In case of a binary file (a sqlite database in this case), the first 13 bytes are read and displayed.

Please note that icons preview will differ between MacOS and a real iOS device.

8 That's all you need in order to have a fully functional Assets browser app. Press RUN and enjoy the app! file-manager
You can now send the app to CreoPlayer or build it and then submit to the App Store.



Project