Páginas

viernes, 25 de abril de 2014

Directory Finder Widget

v2.1          Available in Unity Asset Store.

Directory Finder Widget is a widget created to NGUI and Unity UI. This is a file explorer which searches folders and files.

You can use to find certain files such as text, xml, audio, video, etc., and save the file path to load the same next time.

For NGUI: Next-Gen UI

How to use?

Exist one prefab to use, the DirectoryFinderWidget_NGUI prefab. This prefab is the widget that you will use.

Using the prefab

The prefabs are a shortcut to use the widget a very fast way, or to find out how the widget is done and make your own widget with an appearance different and/or with other disposition.

DirectoryFinderWidget

The DirectoryFinderWidget_NGUI prefab is the window or dialog that you will use in the scene. Has as component the following script.


The NGUIDirectoryFinderController script is a controller of the widget, in this version are not the necessary component properties, now set by script, don’t worry it's very simple. Left me explain you.

You have access to properties end events by ListenerFinder class. Between the properties you can set a initial location using the initialPath property:

ListenerFinder.initialPath = Application.dataPath;

Also if it wants looking for the files, you can set the findFiles property:

ListenerFinder.findFiles = true;

To show the path on the interface, you can set showPath property:

ListenerFinder.showPath = true;

Between the events you have at your disposal the following methods listeners:

// The listener of the back button event.
public void OnBack (string previousPath, string pathToLookFor) {
   // previousPath : the previous path prior to the event.
   // pathToLookFor : the new path after to the event.
}

// The listener of the open button event.
public void OnOpen (string previousPath, string pathToLookFor) {
   // previousPath : the previous path prior to the event.
   // pathToLookFor : the new path after to the event.
}

// The listener of the choose button event.
public void OnChoose (string name, string path) {
   // name : the selected item name.
   // path : the selected item path.
}

// The listener of the drive selection.
public void OnSelectedItemDrive (string name, string path) {
   // name : the selected drive item name.
   // path : the selected drive item path.
}

// The listener of the item (file or folder) selection.
public void OnSelectionItem (string name, string path) {
   // name : the selected item name.
   // path : the selected item path.
}

However, to that this methods work it's necessary assign them in the following properties to execute them, you can locate them in the Start method:

public void Start () {
   // The listeners of the buttons
   ListenerFinder.OnBack = new ListenerFinder.ListenerBackButton(OnBack);
   ListenerFinder.OnOpen = new ListenerFinder.ListenerOpenButton(OnOpen);
   ListenerFinder.OnChoose = new ListenerFinder.ListenerChooseButton(OnChoose);

   // The listeners of the item selection
   ListenerFinder.OnSelectionItemDrive = new ListenerFinder.ListenerSelectedItemDrive(OnSelectedItemDrive);
   ListenerFinder.OnSelectedItem = new ListenerFinder.ListenerSelectedItem(OnSelectedItem);
}

How to change the appearance?

If you know to use NGUI, you probably know how to do. But, is important know the structure of the elements that can be changed and avoiding an unwanted mess.

The Hierarchy

All the elements be found inside the Window[Panel] game object, thus it is easer for usability, and to change the appearance and the elements disposition, without break the hierarchy. In the first place we go to see the labels that you can change.

Labels

  • Title[Label]: Inside the Header game object is the Title[Label] label, this corresponds to the name or title of the window or dialog that currently is "Directory Finder Widget for NGUI". You can change the text of the label.
  • Info[Label]: This is the information message detailing the cause of dialogue for the player. You can change the text of the label.
  • Label inside Drives UI: This label is located inside the Drives[Panel]/Drives UI/Label hierarchy, it specifies the name of the Drives[Popup List] which shows the drives found in the player's machine. You only can change the label that is inside Drives UI, and not the Label that is inside Drives[Popup List].
  • BackButton, OpenButton and ChooseButton: Last, you can change the text of the label elements inside each this buttons.
Note: It is not advisable change the text of the labels ItemSelected[Label] and Path[Label] that is inside Footer. Neither the ItemName[Label] label that is inside ItemF0.

Now we go to see what can we to change for using other atlas.

Sprites

  • Background[Sprite]: You can change the color and the sprite with your own NGUI's atlas. This sprite corresponds to dialog background and delimits the widget dimensions. If you need change the widget size, you do it about this game object, because all elements are anchored to him.
  • Border[Sprite]: To this appearance is the widget frame and you can change it, and too you can remove it, if your UI style is different.
  • Shadow[Sprite]: You can change the appearance or remove it.
  • Header: This sprite corresponds to the base of the widget title. You can change the appearance.
  • Footer: This sprite corresponds to the path data, that if you not need it, you can hide it, only hide it.
  • BackButton, OpenButton, ChooseButton and Drives[Popup List]: You can change the colors and the appearance of this interface.
  • Background and Foreground inside Scroll Bar[Panel]: You can change the appearance with your own NGUI's atlas.
  • ItemF0 inside Scroll View[Panel]: You can change the colors.
  • Checkmark and Hover inside ItemF0: You can change the colors and the appearance.
  • FileIcon[Sprite] and FolderIcon[Sprite] inside ItemF0: You can change the colors and the appearance with other icons.
  • All labels: You can change the font and the colors, what allow NGUI.

For Unity UI 4.6 or higher

How to use?

Exist one prefab to use, the DirectoryFinderWidget_Unity prefab. This prefab is the widget that you will use.

Using the prefab

The prefabs are a shortcut to use the widget a very fast way, or to find out how the widget is done and make your own widget with an appearance different and/or with other disposition.

DirectoryFinderWidget

The DirectoryFinderWidget_Unity prefab is the window or dialog that you will use in the scene. Has as component the following script.


The DFWDirectoryFinderController script is a controller of the widget, in this version are not the necessary component properties, now set by script, don’t worry it's very simple. Left me explain you.

You have access to properties end events by ListenerFinder class. Between the properties you can set a initial location using the initialPath property:

ListenerFinder.initialPath = Application.dataPath;

Also if it wants looking for the files, you can set the findFiles property:

ListenerFinder.findFiles = true;

To show the path on the interface, you can set showPath property:

ListenerFinder.showPath = true;

Between the events you have at your disposal the following methods listeners:

// The listener of the back button event.
public void OnBack (string previousPath, string pathToLookFor) {
   // previousPath : the previous path prior to the event.
   // pathToLookFor : the new path after to the event.
}

// The listener of the open button event.
public void OnOpen (string previousPath, string pathToLookFor) {
   // previousPath : the previous path prior to the event.
   // pathToLookFor : the new path after to the event.
}

// The listener of the choose button event.
public void OnChoose (string name, string path) {
   // name : the selected item name.
   // path : the selected item path.
}

// The listener of the drive selection.
public void OnSelectedItemDrive (string name, string path) {
   // name : the selected drive item name.
   // path : the selected drive item path.
}

// The listener of the item (file or folder) selection.
public void OnSelectionItem (string name, string path) {
   // name : the selected item name.
   // path : the selected item path.
}

However, to that this methods work it's necessary assign them in the following properties to execute them, you can locate them in the Start method:

public void Start () {
   // The listeners of the buttons
   ListenerFinder.OnBack = new ListenerFinder.ListenerBackButton(OnBack);
   ListenerFinder.OnOpen = new ListenerFinder.ListenerOpenButton(OnOpen);
   ListenerFinder.OnChoose = new ListenerFinder.ListenerChooseButton(OnChoose);

   // The listeners of the item selection
   ListenerFinder.OnSelectionItemDrive = new ListenerFinder.ListenerSelectedItemDrive(OnSelectedItemDrive);
   ListenerFinder.OnSelectedItem = new ListenerFinder.ListenerSelectedItem(OnSelectedItem);
}

How to change the appearance?

If you know to use Unity UI, you probably know how to do. But, is important know the structure of the elements that can be changed and avoiding an unwanted mess. 

The Hierarchy

All the elements be found inside the DirectoryFinderWidget_Unity game object, thus it is easier for usability, and to change the appearance and the elements disposition, without break the hierarchy. In the first place we go to see the labels that you can change.

Labels

  • Title: Inside the Header game object is the Title text, this corresponds to the name or title of the window or dialog that currently is “Directory Finder Widget for Unity UI 4.6”. You can change the text of the label.
  • Info: This is the information message detailing the cause of dialogue for the player. You can change the text of the label.
  • DriveLabel: This label specifies the name of the DrivesSelectionList which shows the drives found in the player’s machine. You only can change this DriveLabel text, and none Text object that is inside DrivesSelectionList.
  • BackButton, OpenButton and ChooseButton: For last, you can change the text of the elements inside each this buttons.
Note: It is not advisable change the text of the objects ItemSelected and Path (this is inside Footer). Neither the ItemName text that is inside Container/ItemF0, as also the Text that is inside DriveSelectionList/ScrollRect/Item0.

Now we go to see what can we to change for using other sprites.

Sprites

  • DirectoryFinderWidget_Unity: You can change the appearance with your own sprites of your project. This sprite corresponds to the dialog background and delimits the widget dimensions. If you need change the widget size, you do it about this game object, because all elements are anchored to him.
  • Border: To this appearance is the widget frame and you can change it, and too you can remove it, if your UI style is different.
  • Shadow: You can change the appearance or remove it.
  • Header: This sprite corresponds to the base of the widget title. You can change the appearance.
  • Footer: This sprite corresponds to the path data, that if you not need it, you can hide it, ¡only hide it!
  • BackButton, OpenButton, ChooseButton and DrivesSelectionList/Button: You can change the appearance of this interfaces.
  • All Scrollbars inside Container/Scrollbar and DriveSelectionList/ScrollRect/Scrollbar: You can change the appearance of the interface.
  • Container: You can change the appearance with your own sprites
  • ItemF0 inside Container and Item0 inside DriveSelectionList/ScrollRect: You can change the appearance.
  • Checkmark inside ItemF0: You can change the appearance.
  • FileIcon and FolderIcon inside ItemF0: You can change the appearance with other icons.
  • ScrollRect inside DriveSelectionList: You can change the appearance.
  • All labels: You can change the font, the colors, until add a effect.
Note Important: Please do not modify any of the events assigned to all the elements that use them.

Thank you for read the manual. Have fun!

Available in Unity Asset Store.