Search code examples
appceleratorappcelerator-alloy

Require a view and add with a variable (Appcelerator Alloy)


I do not know if I am doing it right or using any good practices, but I am trying to require and add views on my view.

but here I have a view container in my index.xml

<View id="containerDays" layout="vertical" height="Titanium.UI.SIZE">
    <Require id="requiredDay" src="NewDay"/>
</View>
<Label id="buttonAddDay"  class="button" >Adicionar outro dia</Label>

also on the index.js I have:

$.buttonAddDay.addEventListener("click", addNewDay);
function addNewDay () {
  var novoDia  = $.getView("NewDay");
  $.containerDays.add(novoDia);
}

also I have the view here in another folder on:

/app/views/NewDay.xml

and inside that view is a simple input

<Alloy>
  <View class="containerNewDay" layout="vertical" height="Titanium.UI.SIZE">
    <TextField id="Day" >write a new day</TextField>
  </View>
</Alloy>

so summing everything up,

  1. I am trying to add my $.containerNewDay inside my $.containerDay, but I am not having any success with the getView() or the .open()

  2. I will have to use all the textfield items to send it to a server, how can I set the ids but unfortunately I have no Idea how to do that on appcelerator.


Solution

  • Re the answer above, are you including the .add method from your original block of code? so it should be:

    $.buttonAddDay.addEventListener("click", addNewDay);
    
    function addNewDay () {
      var novoDia  = Alloy.createController("NewDay").getView();
      $.containerDays.add(novoDia);
    }
    

    or better, would be:

    function addNewDay () {
      $.containerDays.add(Alloy.createController("NewDay").getView());
    }
    

    as this doesn't leave a pointer open to the view.

    if you wanted to make it even cleaner:

    $.buttonAddDay.addEventListener("click",  function addNewDay () {
      $.containerDays.add(Alloy.createController("NewDay").getView());
    });
    

    or if you want to stick to a "pure" Alloy way, then leave the addNewDay function in place and just add an onClick="addNewDay" handler in the button XML.

    Crucially, remember that you'll need your containing view ContainerDays to have a layout of horizontal or your added views will simply sit on-top of each other.