What happened to HTML & CSS?

You must Login before you can answer or comment on any questions.

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?

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 5 years ago by Marshall Culpepper
answer 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 4 years ago 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?

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 5 years ago by Chris Reed
answer 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 4 years ago 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.

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.

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

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.

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. :'(

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?

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".

@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.

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...

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

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

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?

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.

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.

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

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

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

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

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

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

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

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

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

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

Your Answer

Think you can help? Login to answer this question!