Let's create the ActiveBarrier prefab by performing the following steps:

It doesn't look like anything. Let's configure it to look like an ActiveBarrier prefab by performing the following steps:

The slider of ActiveBarrier GameObject is ready. If you click on the play button and change the Slider value in the Inspector view during runtime, you will see the ActiveBarrier prefab building itself.

Let's add a label that will show the status of ActiveBarrier: either Building or Built.

Ok, our ActiveBarrier prefab is ready. Now, add the following localization strings to English.txt:

//Game
Barrier = [99FF99]Barrier
BuildingBarrier = [FF6666]Building
Barrier...
Wait = Wait

Also, add the following localization strings to French.txt:

//Game
Barrier = [99FF99]Barrière
BuildingBarrier = [FF6666]Construction
Barrière...
Wait = Attendez

Now, everything is set for our ActiveBarrier prefab.

Now that we have our prefab, we need to instantiate it when a BarrierObject prefab is dropped inside the Viewport GameObject.

Open our ViewportHolder.cs script and declare our necessary variables:

//We need our two barriers Prefabs
public Object barrierObjectPrefab;
public Object activeBarrierPrefab;

//We need the BarrierObject container
public GameObject barrierContainer;

Save the script. Let's go back to the scene and assign these variables in the Inspector view:

The necessary variables are assigned. Go back to our ViewportHolder.cs script, and add the following two lines to call the appropriate methods, after Destroy(droppedObj):

RecreateBarrierObject();
CreateActiveBarrier(droppedObj.transform);

Now, we can add these two methods that will recreate our BarrierObject prefab. Also, we can add an ActiveBarrier prefab to the Viewport GameObject:

void RecreateBarrierObject()
{
  //Add a BarrierObject to the container
  Transform newBarrierTrans = NGUITools.AddChild(barrierContainer, barrierObjectPrefab as GameObject).transform;
  //Reset its localPosition to {0,0,0}
  newBarrierTrans.localPosition = Vector3.zero;
}

void CreateActiveBarrier(Transform barrierObjectTrans)
{
  //Add an ActiveBarrier to the Viewport
  Transform newActiveBarrierTrans = NGUITools.AddChild(gameObject, activeBarrierPrefab as GameObject).transform;
  //Set position to the droppedObject's position
  newActiveBarrierTrans.position = barrierObjectTrans.position;
}

Click on the play button. When you drag the BarrierObject prefab onto the Viewport GameObject, it creates our ActiveBarrier prefab; and it recreates a BarrierObject prefab to be able to drag another one.

Right now, our dropped ActiveBarrier instances stay empty and never build. Let's make them fill themselves at a speed depending on the number of barriers in the scene:

Open this new ActiveBarrierController.cs script, and add these necessary variables and the Awake() method to initialize them:

//We will need the Slider and the Label's UILocalize
private UISlider slider;
private UILocalize loc;

void Awake()
{
  //Get necessary components at Awake()
  slider = GetComponentInChildren<UISlider>();
  loc = GetComponentInChildren<UILocalize>();
}

Now that we have our necessary variables initialized, let's add a coroutine that will increase the UISlider value over time, at a rate depending on a given buildTime:

public IEnumerator Build(float buildTime)
{
    while(slider.value < 1) {
    slider.value += (Time.deltaTime / buildTime);
    yield return null;
  }
  //When slider value is > 1
  BuildFinished();
}

Ok. Let's add the BuildFinished() method that will set the Slider value to 1 (in case this value is higher), and change the UILocalize key:

private void BuildFinished()
{
  //Make sure it's at 1
  slider.value = 1;
  //Set the key to "normal" barrier and update Localization
  loc.key = "Barrier";
  loc.Localize();
}

Good. We just need to edit the ViewportHolder.cs script to add a barrierCount variable, and start the new Build() coroutine from ActiveBarrier.

Open the ViewportHolder.cs script and declare a new int after our barrierContainer:

public int barrierCount = 0;

Now, let's add these two simple lines of code to update the barrierCount variable and start the Build() coroutine on our new ActiveBarrier prefab:

//Update barrierCount
barrierCount++;
//Start the Build Coroutine with the correct buildTime
StartCoroutine(newActiveBarrierTrans.GetComponent<ActiveBarrierController>().Build(barrierCount *2));

Click on the play button. Now, our ActiveBarrier prefab builds itself depending on the number of ActiveBarriers on the scene!

You may have noticed that you cannot scroll if you click on an ActiveBarrier prefab. That's because it catches the events instead of our viewport.

Let's simply forward its events to the viewport:

We need to assign the target variable of the UIForward Event component when the ActiveBarrier prefab is created. To do so, add a new Start() method with the following:

void Start()
{
  //Set the UIForwardEvents' target to the viewport
  GetComponent<UIForwardEvents>().target = transform.parent.gameObject;
}

We can now scroll no matter what. We are missing something: a cooldown on the BarrierObjects that also depends on the number of ActiveBarriers.