Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

What happened to HTML & CSS?

I'm playing around with the mobile 1.0 SDK…and I don't see any way to use HTML and CSS anymore. Now that our apps are 'native' does that mean we've got nothing but javascript and the APIs to make our apps? This seams like a huge change in direction, and while apps will be faster, they will certainly be uglier and more restrictive. I want to be able to use the new HTML5 <canvas> to draw custom charts etc. Anybody?

— asked March 9th 2010 by David Geddes
0 Comments

27 Answers

  • Accepted Answer

    If you prefer to use HTML and CSS, you can embed a fullscreen WebView into your application, and use it as the UI. To get access to our suite of native APIs from the WebView, you simply need to make use of the event APIs that we expose to our WebView, i.e:

    var win = Titanium.UI.createWindow();
var webview = Titanium.UI.createWebView({url: 'index.html'});
win.add(webview);
win.open();

Titanium.App.addEventListener('do_something_native', function(e) {
  // do something with "e" here, it contains the properties passed from the webview
  Ti.API.info('foo='+e.foo);
});

    <html>

Titanium.App.fireEvent('do_something_native', {foo: 'bar'});

</html>
    — answered March 9th 2010 by Marshall Culpepper
    permalink
    1 Comment

    • @Marshall I've set the html prop of a WebView. The HTML string is dynamically created. Here's a snippet that creates a Website link that attempts to fireEvent but it doesn't seem to work. Can you comment?

      var website = '<a href="javascript:Titanium.App.fireEvent(\'do_something_native\', {foo: \'bar\'});">Website</a>';

      That website var is added to the <body> section of the html string then html str is set on the WebView. I do have a listener set up but it's not picking up the event. Should that work?

      — commented June 13th 2010 by Andrew Blair

  • With 1.0 Titanium is moving away from WebViews as the main view. The main reason, as I have seen it, is performance. I have to disagree that just using JS to make the apps will make them ugly. I am currently doing a project that is pure JS and it looks nothing like a typical app.

    What part of HTML 5 are you wanting to use?

    — answered March 9th 2010 by Clint Tredway
    permalink
    0 Comments

  • Hi there,

    A recent change made in Titanium was to switch the approach whereby everytime a window was created it would automatically create a webView (and you would reference the JS code in the head of the HTML. Now creating a window is the other way around, calling a window references a javaScript file from which you can create the views you need. This means that apps using mostly native views aren't penalised performance-wise by the app loading-up webViews it will never use.

    In terms of CSS I think you can do what you did before (to the webView that you'll need to explicitly create). Only if you are interrogating the window DOM is where you might have problems.

    Checkout this page for more info on WebViews

    cheers
    Chris

    — answered March 9th 2010 by Chris Reed
    permalink
    1 Comment

    • what????

      The only thing that take me here is that i can make a app using all the thing that I mastered… CSS, HTML, PHP, JS… if it get dropped… change all your headline that say:

      A Titanium application generally consists of a number of HTML, CSS, JavaScript, Python, Ruby, and PHP scripts

      — commented June 26th 2010 by Edouard Duplessis

  • Not sure why my question was posted twice. Anyway, I specifically want to use the HTML5 canvas tag to draw custom charts. With this new javascript-only model I don't see how to even style an app. If CSS is out, and we don't have anything like Interface Builder, what have we got? Ugly apps. Don't get me wrong I'm all about native apps, but this just seems like a step backwards. This is like GWT (google web toolkit) all over again. But even GWT is moving to UiBinder which lets you write your app using HTML/CSS instead of nothing but javascript. One of GWT's problems has been that apps built with it all look ugly and the same. I'm afraid Titanium mobile is about to face the same problem.

    — answered March 9th 2010 by David Geddes
    permalink
    0 Comments

  • To make a unique looking UI, you just use graphics for the buttons etc.. you can still style it the way you want, just not totally with CSS.

    — answered March 9th 2010 by Clint Tredway
    permalink
    0 Comments

  • Hi David, there are a bunch of objects and properties that are get/set'able through the API (i.e. top, left, height, width, backgroundColor, backgroundImage, color). It's not as easy if your used to a wysiwyg editor for css, but if you wireframe first, it'll save a lot of fiddling around.

    For example, here's a chunk of my code where I position and style 3 labels to go into a row in a tableView:

    var authorAvatar = Titanium.UI.createImageView({url:createdByAvatar, top:4, left:4, width:44, height:44});

var authorName = Ti.UI.createLabel({text:createdByName,
                    font:{fontSize:18,fontWeight:'bold'},
                    top:8,left:66,height:24,width:200, color:'#000000'});

var commentDate = Ti.UI.createLabel({text:'wrote on '+createdDate,
                    font:{fontSize:16,fontWeight:'normal'},
                    top:32,left:66,height:24,width:200, color:'#666666'});

    cheers
    Chris

    — answered March 9th 2010 by Chris Reed
    permalink
    0 Comments

  • Personally I wouldn't call the native apps "ugly", but I guess that's a matter of personal preference. I quite enjoy this move to native controls, but you still have the ability to use web views, and then do everything the way you did it before, if that's what you prefer.

    — answered March 9th 2010 by Tristan Bendixen
    permalink
    0 Comments

  • Excuse me, but if now all code is only JavaScript, where is gone the Titanium promise that "Titanium let’s you create native mobile and desktop application experiences using EXISTING WEB SKILLS like Javascript, HTML, CSS…".
    I begun to take attention to Titanium for the idea that I can do my Apps with HTML and CSS.
    :'(

    — answered March 17th 2010 by Gabriel Porras
    permalink
    0 Comments

  • So I guess there has to be a tutorial from the appcelerator team to show how one can still develop something with HTML5 and CSS3.

    And then another tutorial or something that explains what is happening under the hood, to answer questions like:

    • What happens when you use CSS3 and HTML5? Does it somehow embed webkit into the final app or is CSS and HTML somehow converted to native API calls? Or something else?
    • If webkit is embedded, is it embedded just for the web view, but not other views?
    • What happens when you don't use css3 features? Does it result in a smaller app?
    • What happens to all the code (JS, PHP, etc.)? Is it compiled into native (e.g. Objective-C) code?
    — answered June 20th 2010 by Rok Carl
    permalink
    0 Comments

  • Yeah we can still use a web view I suppose. I'll have to play around with it some more to figure out how to position and style the native elements. I guess I was excited because I thought they were somehow converting HTML/CSS/Javascript into native objective-C when in reality all they've made is a javascript to objective-C compiler. I'm not too thrilled with the complete ditching of HTML5/CSS3. "Code like it's 1995".

    — answered March 9th 2010 by David Geddes
    permalink
    0 Comments

  • @Marshall Thanks for the response. That does make sense. I'm warming up to the idea. So I can have most of my app native, and use a web view just for my special html5 canvas graphs page. I'm cool with that. I guess the only question remaining is how to style and position the native elements, to create custom looking apps like Facebook, Evernote, Things, TweetDeck etc.

    — answered March 9th 2010 by David Geddes
    permalink
    0 Comments

  • Having a forum like this where responses are ordered by votes is great however already I can see people responding to messages with new responses which then get in the wrong order as voting happens. This results in really confusing 'discussions' where you have to spend a long time working out which comments are in reply to with other ones.

    Stackoverflow gets around this neatly by allowing direct replies to 'solutions', here there is no option for that yet. Is it planned to add this? If not, I feel it should be considered…

    — answered March 9th 2010 by Paul Banks
    permalink
    0 Comments

  • I'm sure I posted that last message on a different thread! There seems to be some bugs in this forum…

    — answered March 9th 2010 by Paul Banks
    permalink
    0 Comments

  • We're working on changes to the forums as we speak to improve the threading, etc.

    — answered March 9th 2010 by Scott Schwarzhoff
    permalink
    0 Comments

  • So is it realistic to think one can build a desktop app and a mobile client and have them share much of the same code?

    — answered March 30th 2010 by Zach Copley
    permalink
    0 Comments

  • I'm new to this environment. I'm quite excited to go the all-javsscript way of app development. I am a Java developer trying to learn Objective C, and I'm a bit weak in my CSS. So this seems to fit perfectly. I'm impressed so far.

    — answered April 6th 2010 by shawn gordhamer
    permalink
    0 Comments

  • I have created few webViews content with pure HTML CSS and javascript (jquery, making it look great at least in the emulator and hoping it runs faster in the device), unfortunately I have hit a big brick wall and I can't get around it… yet
    I'm not able to run the app in an android device yet, I've followed most of the steps recommend and still can't, any one with the same problem, please I don't want to give up yet.

    — answered April 27th 2010 by Edison Leon
    permalink
    0 Comments

  • Where can I delete my answer? I'm sorry for the multiple posts.

    — answered June 20th 2010 by Rok Carl
    permalink
    0 Comments

  • Where can I delete my answer? I'm sorry for the multiple posts.

    — answered June 20th 2010 by Rok Carl
    permalink
    0 Comments

  • I have html text coming from feed which i set in webview.It's looking fine on iphone device but on ipod touch it display with big fonts.So i can't understand it's device base issue or titanium issue itself.

    Any help appreciated !

    Thanks,
    Hiren

    — answered June 4th 2012 by hiren patel
    permalink
    0 Comments

  • Where can I delete my answer? I'm sorry for the multiple posts.

    — answered June 20th 2010 by Rok Carl
    permalink
    0 Comments

  • Where can I delete my answer? I'm sorry for the multiple posts.

    — answered June 20th 2010 by Rok Carl
    permalink
    0 Comments

  • Where can I delete my answer? I'm sorry for the multiple posts.

    — answered June 20th 2010 by Rok Carl
    permalink
    0 Comments

  • Where can I delete my answer? I'm sorry for the multiple posts.

    — answered June 20th 2010 by Rok Carl
    permalink
    0 Comments

  • Where can I delete my answer? I'm sorry for the multiple posts.

    — answered June 20th 2010 by Rok Carl
    permalink
    0 Comments

  • Where can I delete my answer? I'm sorry for the multiple posts.

    — answered June 20th 2010 by Rok Carl
    permalink
    0 Comments

  • Where can I delete my answer? I'm sorry for the multiple posts.

    — answered June 20th 2010 by Rok Carl
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.