CODEWITHSUNDEEP
appceleratormobile-websiteappcelerator-titanium
theThought
theThought

Reputation: 57

How to set the DIV attribute id in Appcelerator (mobileweb) when not using Alloy

I am using Appcelerator in a cross platform solution (iOS, Android, MobileWeb). I want to be able to see id attributes for my UI elements in mobileweb. I have seen examples of how to set the id using Alloy but I don't use Alloy, I script all my elements in JavaScript.

Can someone tell me the property I have to apply to a view to have the id set in the resulting DIV in html.

The following is an example view:

this.Viewer = Ti.UI.createScrollView(
{
    left:25,
    right:5,
    bottom:5,
    top: 0,
    width: this.App.Width - 40,
    height:  200,
    contentHeight: Ti.UI.SIZE,
    borderColor: "#333333",
    borderWidth: 3,
    horizontalWrap: false,
    layout:"vertical",
    scrollType: "vertical",
    scrollsToTop: true,
    showVerticalScrollIndicator: true,
    showHorizontalScrollIndicator: false,
    verticalBounce: false,
    visible: true,
    zIndex:100
});

and the resulting HTML

<div class="TiUIElement TiUIView TiLayoutsComposite" data-widget-id="Ti.UI.View:36" style="background-color: rgb(0, 255, 0); background-repeat: no-repeat; background-size: 100% 100%; border-color: rgb(51, 51, 51); border-width: 2px; left: 5px; top: 90px; width: 507px; height: 626px;"></div>

Upvotes: 0

Views: 214

Answers (2)

Chris Barber
Chris Barber

Reputation: 456

Titanium Mobile Web was designed to mimic the native iOS and Android platforms. Since iOS and Android do not have the concept of a DOM, there is no Titanium API to expose the DOM.

In other words, you're not suppose to be able to set an "id" on a <div>, or even know that the <div> exists.

However, you can do it if you absolutely need to. There is a property on all UI elements called domNode. This is ONLY available on Titanium Mobile Web. You need to case this out in order to run your app on iOS or Android.

var myButton = Ti.UI.createButton({ title: 'click me' });
if (Ti.Platform.name === 'mobileweb') {
    myButton.domNode.setAttribute('id', 'foo');
}

Pro tip: Titanium Mobile Web can't access a the browser's garbage collector, so if you remove a UI element, you must explicitly call the undocumented destroy() method so that events will be disconnected, DOM nodes will be destroy, and the state will be garbage collected.

myButton.destroy && myButton.destroy()

Upvotes: 2

Bert G.
Bert G.

Reputation: 354

You should just be able to add an id property to your View creation function like this.

this.Viewer = Ti.UI.createScrollView(
{
    id: 'myView',   // <---- HERE IS YOUR ID
    name: 'myView', // <---- IF YOU NEED THE `NAME` ATTRIBUTE AS WELL
    left:25,
    right:5,
    bottom:5,
    top: 0,
    width: this.App.Width - 40,
    height:  200,
    contentHeight: Ti.UI.SIZE,
    borderColor: "#333333",
    borderWidth: 3,
    horizontalWrap: false,
    layout:"vertical",
    scrollType: "vertical",
    scrollsToTop: true,
    showVerticalScrollIndicator: true,
    showHorizontalScrollIndicator: false,
    verticalBounce: false,
    visible: true,
    zIndex:100
});

Upvotes: 0

Related Questions