I need to get the feedback star ratings for 5 questions, I'm using titanium alloy mobile development. For the same reason I have used the star rating widget from the below link,
https://github.com/AppceleratorSolutions/AlloyWidgets/tree/master/starrating
From the above link there is only one set of stars, But I need to use the star ratings for 5 times. How can I do that. I need the following format
1. Question?
*****
2. Question?
*****
3. Question?
*****
4. Question?
*****
5. Question?
*****
The widget is working fine but the stars are displaying only for one question, I need the stars for all the five questions, below is my current output,
questionnaire.xml:
<Alloy>
<Window id="questionnaireWin" title="Plan India" platform="android,ios">
<View id="header">
<Label id="title">Feedback</Label>
</View>
<Label id="question1" class="question">1. Question 1?</Label>
<Require type="widget" src="starrating" id="widget" name="widget" />
<Label id="question2" class="question">2. Question 2?</Label>
<Require type="widget" src="starrating" id="widget" name="widget" />
<Button class="button" onClick="submitRatings">Proceed</Button>
</Window>
</Alloy>
Though, I'm using widget twice it is showing only once. Please help how to do this?
Else any easy way to do this using any plugins or something esle?
You have required the same widget tow times using the same id. you should define different id.
<Alloy>
<Window id="questionnaireWin" title="Plan India" platform="android,ios">
<View id="header">
<Label id="title">Feedback</Label>
</View>
<Label id="question1" class="question">1. Question 1?</Label>
<Require type="widget" src="starrating" id="widget1" name="widget" />
<Label id="question2" class="question">2. Question 2?</Label>
<Require type="widget" src="starrating" id="widget2" name="widget" />
<Button class="button" onClick="submitRatings">Proceed</Button>
</Window>
and the in you js file initialize widget1 & widget2 ...
$.widget1.init();
$.widget2.init();
EDIT you can test this example that i have created ...
Related
I hope you can help me to solve my problem.
I am working on a Nativescript-Vue Application and I want to render this conditionally:
<Label if="isRendering" text="This is a text"></Label>
But this does not work.
I already tried it with <v-template if="..."></v-template> but this also does not work.
If i am not mistaken, in Vue.js it is possible to render conditionally with v-if and i am searching for a possibility to make it in Nativescript-Vue.
Thank you
It's the same like in Vue.js.
Instead of using if you should be using v-if.
Playground example
Example:
<Label v-if="isRendering" text="This is a text"></Label>
But if you want to use an if in a ListView it's different.
Example:
<ListView for="item in listOfItems" #itemTap="onItemTap">
<v-template>
<Label :text="item.text" />
</v-template>
<v-template if="$odd">
<!-- For items with an odd index, shows the label in red. -->
<Label :text="item.text" color="red" />
</v-template>
</ListView>
But more info about that in the docs
In Alloy Titanium, I can access XML elements with their id $.element_id but how can I get elements of other class? or xml?
EDIT
I have two files.
1. file1.js, file1xml.xml
2. file2.js, file2xml.xml
In File1.js i want to access the variable of file2xml.xml. how can i achieve this?
Anything with an id can be accessed:
file1.xml
<Alloy>
<View id="myView" />
</Alloy>
file2.js
var ctrl1 = Alloy.createController('file1');
ctrl1.myView.backgroundColor = 'red';
if you have required file2.xml in file1.xml like
<Require src="common/viewToolBar" id="viewToolBar"/>
then you can get the element with the id in file1.js like
$. viewToolBar.getView('viewSynch').visible = false;
link for more details
You can use Require tag in alloy with an Id and you can access its elements as below.
**File1.xml**
<Alloy>
<View>
<Label id="labelId">Middle</Label>
</View></Alloy>
**File2.xml**
<Window>
<Require src="File1" id="File1View" type="View"/>
<View id="header"><Label id="headerText">Header</Label></View>
<View id="nav">
<Label class="navButton" onClick="openTab" controllerName="home">Home</Label>
<Label class="navButton" onClick="openTab" controllerName="news">News</Label>
<Label class="navButton" onClick="openTab" controllerName="info">Info</Label>
<Label class="navButton" onClick="openTab" controllerName="more">More</Label>
</View>
</Window>
**File2.js**
$.File1View.labelId.text = "hi";
The following code to print the "local" model in tableview, its working, now my problem is to fetch the row id or row detail by clicking the each row. I have attached the showDetail function on each row to get the row detail.But unable to get the row attch data. How can i achieve this please help me, I really appreciate your answers.
<TableView dataCollection="local">
<TableViewRow onClick="showDetail">
<View layout="horizontal">
<ImageView image="{image}" width="50" height="50"/>
<Label id="name" text="{title}"></Label>
</View>
</TableViewRow>
</TableView>
function showDetail(e){
console.log(e.index);
}
Have a look at the TableView API click Event:
http://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.TableView-event-click
There are all properties: e.g. index=the number of the row
And have a look at row and rowData
I'm trying to customize my alloy TabGroup to look like the image below (with no luck). no "height" properties on Tab item in the default documentation and with my current version of titanium 3.4.0 can't add View to TabGroup.
anybody know how to create a raised center button using alloy?
that's my index.xml view
<Alloy>
<TabGroup tabsBackgroundColor="white" barColor="#f15b26" activeTabIconTint="black" tintColor="white">
<Require src="home" nr="1" />
<Require src="play" nr="2" />
<Tab icon="/menu/logo.png" height="100">
<Window title="" id="">
<Label></Label>
</Window>
</Tab>
<Require src="chat" nr="3" />
<Require src="config" nr="4" />
</TabGroup>
</Alloy>
you can use an image in the middle of the that exceed the height of the bar.
When we implemented this solution in the past, we did a completely custom tabBar. I dont think you can accomplish what you are trying to do with the base tabBar control
I am trying to implement a simple app in Alloy that has a very basic structure but I cannot get it to layout reliably. I am trying to bottom align a group of navigation buttons with a working area above them which in the following example would be a TableView.
<Alloy>
<Collection src="book">
<Window height="100%" id="main" title="My Library {opts.username}" exitOnClose="true" onOpen="loadExtras">
<TableView id="content" dataCollection="book" top="10px" bottom="100px" onDragEnd="refreshTable">
<TableViewRow title="{title}" color="black" onClick="showBook"/>
</TableView>
<View bottom="0px" height="72px" layout="horizontal" id="actionPanel">
<Button class="footerBtn" onClick="refreshTable">View</Button>
<Button class="footerBtn" onClick="refreshTable">Help</Button>
<Button class="footerBtn" onClick="refreshTable">List</Button>
<Button class="footerBtn add" onClick="addBook"></Button>
</View>
</Window>
The only way I can get this to work is to specify a height for the TableView such as height="80%" and then play with this value until things layout as I would prefer but I do not want to do as I need this to work independently of the devices physical screen size.
How can I implement this kind of layout in Alloy to get a view to pin to the bottom of the screen with a variable working area above it - or, do I have to assume a standard height and work relative to that?
Try pinning the table to the bottom of the parent view and then setting the height to be 80% of the parent view height. Also, use dp values to be screen independent.
<TableView id="content" height="80%" bottom="100dp"
onDragEnd="refreshTable"
dataCollection="book">