I'm interested in such a thing - are there some tools, libraries, etc which will allow to design native iOS UI (UILabels margins, etc.) with the help of CSS? I am not talking about libraries such as PhoneGap or Appcelator. I'm interested in something like CSS parser which will allow me to transform CSS code into Objective-C UI code or Interface Builder.xib files. Let's say I have a good web-designer fluent in CSS and HTML and I want him to write UI code for my iOS application in CSS+HTML and then I transform it in Objective-C UI code or IB .xib files.
I think my question is clear and I hope for some good answers.
Services that allow you to design "native apps" or, more accurately, "hybrid apps" are actually bare bones app dominated by a web view or frame for a webpage so that you provide content and styling on a website that is being displayed by the app. It expands the capabilities of the "app" and allows you to put an app in the store but it is not on a par with true native apps.
There is no elegant conversion from HTML to Objective-C.
Seriously, if you want a native app, make an actual native app. Otherwise, just stick with a web app.
http://www.nativecss.com/docs/tutorials/intro/ios
for native ios development,it is very good tutorial for ios+CSS
Also check out: http://www.pixate.com/
It's not free but let's you do exactly what you're looking for.
The reason for PhoneGap, AppCelator etc. to exist is the reason that HTML+CSS (in other words "web pages") cannot be converted into Objective-C easily.
I suggest you take the straightforward way. Teach your designer to use the Interface Builder. It's just a WYSIWYG editor, nothing complicated even for a designer.
Related
For Android I see there is a very good solution Json2View:
https://github.com/Avocarrot/json2view
for creating Android app UI on the fly. Is there any similar solution available for iOS? Is there any constraint is having JSON based UI concept for iOS, the way json2view does for Android? Or best would be some common open source library that has flavor for both Android and iOS.
Using React Native you can accomplish the same.
Strictly speaking, its not Json to View but its JavaScript to View.
Whatever views you create in ReactJS, will be created using native UIKit Framework.
For example, if you use scrollview component in JS, it will use a scrollview subclassed of UIScrollView.
Please check this link for in-depth overview
https://facebook.github.io/react-native/
https://github.com/facebook/react-native/issues/823
You cannot do anything like this, you will get apple rejected because of using any kind of code injection.
HTML has CSS styles e.g. class="styleName"
Windows8/XAML has static style resources e.g. Style="{StaticResource styleName}"
Android has style tags e.g. style="#style/styleName"
iOS has ???
I'm using the interface builder for iOS in Xcode, how do I start to build up a style set or equivalent to styles? I want the ability to apply 'styles' to elements and then if I update that style's properties, the changes are applied to all elements that have been given that style. Is this possible in iOS development? Can someone please enlighten me as to how this is achieved or the equivalent please in iOS development. I'm very new to iOS development as you can see.
Is it more related to skins or themes? I don't have a clue.
There's Appearence. You often see this being used for colours, but it also does fonts, sizes, and a few other things. Here's another good article from a well known source.
Additionally, a common way to style/'skin' is by having different sets of background/button/... images.
You can also style by parameterizing drawing code. Have a look at the fabulous tool PaintCode.
Then, some companies do (part of the) UI in HTML/JavaScript.
Another thing to mention in this context is iOS' Auto Layout
You can do this with MarkupKit. See the section in the README entitled "Template Properties".
There isn't a good API in UIKit for this, unfortunately, but there are third party solutions with various tradeoffs.
I created a library that uses style classes, like CSS, which you can define in code, or inside a JSON file, and then apply to views in your app. As an extra benefit, the library uses #IBDesignable to live render your styles inside Storyboards without having to compile the app first to see the results.
https://github.com/daniel-hall/Stylish
I want to build an iPhone app, but I only know PHP, JavaScript, CSS and HTML. I heard that I can use Phonegap to build the app in javascript and it converts the JavaScript to Objective-C. Is that true? The phone gap documentation was hard to understand. What other solutions do I have?
Yes and no.
Phonegap (nowadays known as Apache Cordova) enables you to bundle web pages/applications as native phone apps. It also provides you with some JavaScript bindings to native phone APIs that you otherwise wouldn't be able to access (=with a plain webpage). These bindings include (just to name a few) Accelerometer, Camera and Compass. That's pretty much all it does - you still have to figure out how to write your application with JavaScript, HTML and CSS.
Try out how it works by checking out "Getting Started with iOS".
If you know all these languages you mentioned that is well enough for developing an iOS App(as well as you can develop the same apps in Android).
I would suggest you to go for PhoneGap(Cordova) framework to develop these apps. Using this framework you'll have to use HTML/HTML5, JavaScript, CSS, PHP and get the iOS App running on your device. Here to StartWith and then check out APIDocs. You will always get a lot of tutorials on google itself.
You can also refer This Question for gathering some knowledge about other frameworks available in market.
Hope it helps.
I would suggest Phonegap, but you can't use PHP with Phonegap apps directly... There are a few hacks around this though.
Although Phonegap is supposed to be "one codebase, distribute everywhere", if you want a really great looking app you'll have to spend a liitle time adjusting the UX for every platform or device. The thing I really like about Phonegap is that you can open up a HTML page locally on your browser and move thing around in firebug, making the process faster.
I see three20 a very powerful lib, spicily because Facebook and Twitter use it. I just want to know if there are any competitors/alternatives for Three20? or even simple.
nimbus seems to be a project that will address some of the issues.
I use Three20 a lot, but I'm always in search of an alternative, because Three20 is not a lightweight framework and because importing only a few features of Three20 is not practical. But I don't know any good alternative. If you only need a few features I prefer to write my own code for it or use another library.
For some features of Three20 I know other libraries that does the same thing. It's always a better way to use small libraries, because of file size and side-effects.
UILabel with styled text: OHAttributedLabel
Load and cache images asynchroniously: ImageLoader
Pull to refresh on a table view: PullToRefresh
In addition to this list you can have a look at TapkuLibrary which adds features like CoverFlow or a CalendarView to your app.
Finally GitHub is always a good resource, when you search libraries for special features.
Check this list of iOS controls.
You'll find over 200 open source custom controls there. I've used some of them (star rating, confirm button), it's lightweight and easy to embed. Check that the license suits your needs before though!
THree20 is one of the few libs but if you look around github you can find plenty of sample ios projects with source code to learn from and adapt to your app.
Three20 provides a lot of useful wrapper to facilitate development. It's biggest advantages and until know nothing could replace it.
i'm trying to create an app which uses the combination of native functionality and the phoneGap framework. The native app has a button, upon the click of which the phoneGap ui has to be added to the view. Is there any way to achieve this? Are there any tutorials for the same?
Yes, this is possible. Although you might be getting yourself into some headaches. My app kind of goes the other way around, it's mostly phonegap, but occasionally i'll pop open a view that is native. Here is the link to code that shows an excellent example of how to switch between the iOS and phonegap worlds.
new updated recommended article (see update below)
These files represent a standard plugin used in phonegap. In this particular plugin, a native view is opened on top of a phonegap view. Notice you have a custom xib and everything. This plugin can be modified to display any xib with any functionality you could think of.
If you implement this plugin you will easily see how to jump back and forth. I've successfully heavily modified these classes to add LOTS of native capabilities to my phonegap project. Also you should probably check out the official phonegap guide to phonegap plugins. Here
Important Edit
Was informed original linkwas broken (not terribly surprised as this answer is very old and i've long since moved away from Phonegap) so I replaced the original link with an article that shows how to do these plugins well. In the article it explains the link is broken and gives several links where these older files are maintained, but in fact those are broken as well. Here is a branch of one of them I found that still hosts the original files on an "archive" branch. But I haven't investigated whether these files are wildly different from my original work. Good luck!
That's not how Phonegap is meant to be used.
To achieve what you are asking for you just need to create a Phonegap app and add the extra native functionality by writing a Phonegap plugin in Objective-C. You may add as much native code as you want.
I'm actually wanting to do the same thing as the original poster. Theoretically it would be comparatively easy, but non-trival to do. I'd love it if there was a PhoneGapView that one could integrate into an existing project. Bonus points if said PhoneGapView could be integrated in Interface Builder as a re-sizeable and re-positional object, basically think of it as an Object that extends UIWebView.
This is wishful thinking on my part seeing as this is how the higher-ups want my project.