Do famo.us surface have any support for pseudo CSS selectors? Specifically, I'm trying to style the placeholder text on an InputSurface. Any way of doing this without giving it a class and using CSS?
Famo.us at this time has not created any special pseudo-element styling helper. Famo.us supports the changing of styles through setProperties of the Surface object.
Surfaces in version 0.3.0 also support the attributes option. Add an attribute for the placeholder as shown in the code below.
Example of working code here
var surface = new InputSurface({
size: [200, true],
content: '',
attributes: {
placeholder: 'Enter Something'
}
});
You could also use the setAttributes method:
var surface = new InputSurface({
size: [200, true],
content: ''
});
surface.setAttributes({ placeholder: 'Enter Something'});
surface.setProperties({borderColor:'red'});
Related
In one appcelerator application I have create a resource file of string (string.xml). In this file I have put any resource like this:
<string name="en_clinical_document">Treatments</string>
and in my controller .js I set the text of the label in this mode:
$.label.text= L("en_clinical_document");
this code works, but how can I use the same method in View.XML?
for example, I have this:
<Label id="labelRegistry"></Label>
and I want insert the content of en_clinical_document in labelregistry.
It is possible to do this?
[EDITED: warning, it doesn't work]
from the internationalization documentation
you can use the titleid property of Titanium UI objects, such as labels or buttons, to directly reference a string resource without using the L() macro.
var label = Ti.UI.createLabel({
titleid: 'welcome_message'
});
/*
* is equivalent to
* var label = Ti.UI.createLabel({
* text: L('welcome_message')
* });
*/
So I guessed in view's xml one could use the titleid attribute, like
<Label titleid="welcome_message"></Label>
but, after some tests, I've found it does not work as expected, neither in the XML, nor creating plain js Ti.UI object: the following snippet only showing the first labelA
var labelA = Ti.UI.createLabel({
top: 100,
text: L('welcome_message'),
backgroundColor:"green",
font: {
fontSize: "50dp"
}
});
var labelB = Ti.UI.createLabel({
top: 200,
titleid: 'welcome_message',
backgroundColor:"red",
font: {
fontSize: "50dp"
}
});
$.index.add(labelA);
$.index.add(labelB);
$.index.open();
So it appears that the documented functionality provided by titleidis no longer available.
I have looked everywhere in the ProMotion docs and examples but I am unable to find a way to change a TableScreen layout, specifically the TableView cell's vertical starting position.
I have an UIView on the top of my screen to show some buttons, and the TableView cells should start underneath, but right now they are on top of each other.
I have even managed to move the TableView using the REPL console:
rmq(4496872960).nudge d: 10
where 4496872960 is the id of my UITableViewWrapperView object, but I have no idea where to put the layout coordinates for this object in code.
My screen code:
class HomeScreen < PM::TableScreen
title I18n.t("home_screen.title")
tab_bar_item title: I18n.t("home_screen.title"), item: "icon-home_32x32.png"
row_height :auto, estimated: 30
stylesheet HomeScreenStylesheet
def on_load
#matches = [{attributes: {status: "dummy1", player2: {email: "dummy1#match.com"}}},{attributes: {status: "dummy2", player2: {email: "dummy2#match.com"}}}]
append(TopHomeView, :top_home_view)
set_nav_bar_button :left, title: I18n.t("home_screen.sign_out_label"), image: image.resource("icon-logout-32x32.png"), action: :sign_out
set_nav_bar_button :right, title: (Auth.current_user ? Auth.current_user["email"] : ""), image: image.resource("icon_user_50x50.png"), action: :open_profile
load_async
end
def table_data
[{
cells: #matches.map do |match|
{
title: match[:attributes][:player2][:email],
subtitle: match[:attributes][:status],
action: :play_round,
arguments: { match: match }
}
end
}]
end
EDIT:
I have kept trying to solve this and I have now added a style to my UITableViewWrapperView object like this:
def viewDidLoad
super
rmq(UITableViewWrapperView).apply_style(:style_for_table_wrapper)
end
In my stylesheet I am able to therefore style everything: background_color, hidden status, but the frame style is just ignored.
def top_home_view(st)
st.frame = {l:20, t: 20, w: 300, h: 60}
st.background_color = color.white
end
As indicated in this Github issue:
https://github.com/infinitered/ProMotion/issues/784#issuecomment-230962988
the solution here lies in implementing a Header view for the TableScreen. This lets us have an area on top of the cells for our own use:
Define a table_header_view returning an instance of a UIView (required):
class HomeScreen < PM::TableScreen
# ...
def table_header_view
create!(TopHomeView, :top_home_view)
end
Note that the "bang method" (create!) will return an instance of UIView.
Credit goes to https://github.com/andrewhavens for clearing this up
The image generated using the following example Famo.us example: ImageSurface generates an <img> tag without alt or title attributes.
Is there a built-in function that allows adding HTML attributes?
There are currently no built in functions but by looking at the source code I figured out a way to do such a thing. Keep in mind though, I think the better alternative would be to just use a Surface and inject and img tag with all the attributes you want into the content attribute..
Here is what I had to do using the ImageSurface. Note that the function is in a Timeout, and this is only because the image tag needed time to load for me to access it via the Surface..
var Engine = require("famous/core/Engine");
var Modifier = require("famous/core/Modifier");
var ImageSurface = require("famous/surfaces/ImageSurface");
var Timer = require("famous/utilities/Timer")
var mainCtx = Engine.createContext();
var image = new ImageSurface({
size: [200, 200],
});
image.setContent("content/famous_symbol.svg");
mainCtx.add(new Modifier({origin: [.5, .5]})).add(image);
add_title_alt = function(){
if (image._currTarget) {
image._currTarget.alt = "my-alt";
image._currTarget.title = "my-title";
} else {
Timer.setTimeout(add_title_alt,100);
}
}
Timer.setTimeout(add_title_alt,100);
Again though, to make things less sticky.. I would just do something like this..
image = new Surface({
content:"<img alt='my-alt' title='my-title' src='content/famous_symbol.svg' />"
})
Hope this helps!
I'm creating an app with some custom gauges using Rally SDK 2.0. This requires some custom HTML. I took a rake-compiled app.html file from the examples as a starting point. Using JustGage for my gauges. Here is my launch function.
launch: function () {
var info = this.getStoriesForProject(); //Gets some aggregate info
$('#header label').html(info.Title);
var g = new JustGage({
id: "devgauge",
value: info.DevPercent,
levelColors: ['#f80404', '#f8f804', '#50ed0e'],
min: 0,
max: 100,
title: "Dev %"
});
this.add('foo');
},
Then I added some custom HTML in app.html.
Now, if i run this without the code "this.add('foo')", the app adds a new div in the body with class="x-container" and puts my custom HTML outside that div effectively hiding it.
If i use the "this.add('foo') it does NOT create the div class=x-container and it shows my widget just fine.
What is the PROPER way to accomplish what I'm attempting using the 2.0 sdk? I realize the add method is for adding Ext components, but somehow calling this is causing my HTML to render ok. Looking at some apps we developed in the old SDK, using the custom HTML worked just fine in those.
Ext likes to know what is going on layout-wise and often gets confused if you're manually manipulating the dom beneath it without its knowledge. Usually if we have some known set of initial layout we add those via the items collection on the app:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
itemId: 'header'
},
{
xtype: 'container',
itemId: 'devguage'
}
]
});
Then inside of launch you can add content to those like so:
this.down('#devguage').add({
//some other component
});
You can always just drop all the way down to the element level though as well:
this.down('#header').getEl().dom //the raw html element
By default apps use an auto layout, so any items should flow as you would expect with normal html.
Or, instead of using itemId, you can set the id of the container's element using its id property:
Ext.define('My.App', {
extend: 'Rally.app.App',
items: [
{
xtype: 'container',
id: 'header'
},
{
xtype: 'container',
id: 'devguage'
}
]
});
The resulting html elements will use those ids, which allows you to target them directly with your own custom rendering.
I'm a newbie to all the Sencha Touch stuff, but until now I'm very enthousiastic about it's capabilities. There is one problem, i somehow can't solve.
I would like to use a Tpl (XTemplate) for a calender view. The idea is to create a div element for every appointment, which i can place within containers to layout them. Somehow i can't get the dataview to work.
I've stripped down my code to the bare minimum: a panel containing a DataView. When i use the itemTpl, everything works fine. But when I use the tpl (with or without the XTemplate) i don't see anything. I checked if it was just a display malfunction (searched for the XXX from the template), but that's not the case.
This is my code:
Ext.define('InfoApp.view.CalendarDay', {
extend: 'Ext.Panel',
xtype: 'calendarday',
requires: [ 'InfoApp.store.sAppointments'],
config: {
title: 'Dag',
layout: 'fit',
items: [
{
xtype: 'dataview',
store: 'appointmentStore',
//itemTpl: [ 'XXX {day} {course}' ] --> Works
tpl: new Ext.XTemplate('<tpl for=".">XXX {day} {course}</tpl>')--> Doesn't Work...
}
]
}
});
Thanks in advance for any suggestions or improvements!
Assuming ST2 and not ST1
From http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-tpl and the comments on the tpl: config in the docs, it appears there's a bug when using a remote store. Even if your store has data it. tpl: apparently only works right now if your data is hardcoded in data:[]
you can use itemTpl: new XTemplate(), or itemTpl: XTemplate.from('someid') or you can defer specifying until afterwards, grab your dataview and go dv.setItemTpl(new XTemplate()), etc.
Tanks #brink for your answer.
It took me a couple of days, but this worked for me:
// Load the store
var store = Ext.getStore('appointmentStore');
// Get the current range of the store
var data = store.getRange();
// Create a custom template
var tpl = new Ext.XTemplate(<tpl for=".">{day} {course}</tpl>);
// Loop through the data array
var showData = array();
for(var i=0;i<data.length;i++){
showData.push(data[i].data);
}
// Get the panel by ID and push the html template
var panel = Ext.getCmp('appointmentspanel');
panel.updateHtml(tpl.applyTemplate(showData));