I found this presentation about Mulberry and wanted to share it.
It explains the core functionality of Mulberry.
tl;dr Thinks to retain:
Routes manage high-level application state.
Components receive and render data and react to user input.
Capabilities provide data to components and broker communications between them.
Page definitions are reusable groupings of components and capabilities.
Stores persist data on the device, make that data query-able, and return model instances.
/C
Follow up on last week’s post about Mulberry.
There have been a couple of changes with Xcode 4.3, iOS 5.1 and some updates in Mulberry that gave me a hard time…
In the end, I had to re-scaffold my test-apps from scratch and move my content over because of a few noteworthy changes.
Incidentally, those changes concern the parts I did not treat in detail in my last post (or just brushed over without investigating it into depth),
thus this follow-up makes a lot of sense.
Giving the demo-app “kitchensink” (located in demos) a closer look cleared a couple of questions I still had, so here I go:
A page-def defines the template for generated pages, i.e. the layout, components and capabilities to be used on a page.
Custom page-defs can be generated with the command below:
mulberry create page_def <name>
which will create a file at <app-root>/page_defs/<name>.yml.
More info here
All pre-existing page-defs lie in <mulberry-root>/base_apps/toura/page_defs and have their purpose written in their name, making it easy to guess what they may be intended for.
Here’s a list of them, subject to changes as new versions arise:
audio-with-images-phone.yml
audio-with-images-tablet.yml
debug.yml
default.yml
favorites.yml
feed-item.yml
feed-list-phone.yml
feed-list-tablet.yml
full-screen-images.yml
google-map-phone.yml
google-map-tablet.yml
grid-view.yml
home-phone.yml
home-tablet.yml
home-with-header-phone.yml
home-with-header-tablet.yml
hotspots.yml
images-and-text-phone.yml
images-and-text-tablet.yml
location-list.yml
node-gallery.yml
search.yml
videos-and-text-phone.yml
videos-and-text-tablet.yml
If you are creating your own page-defs for more than one project, it would probably make sense to put them inside this folder (and to commit them back to the Mulberry project in order to contribute to it).
A page-def defines which components will be visible for pages based on it. E.g.:
home-with-header-phone:
screens:
- name: index
backgroundImage: true
regions:
- className: header-image
components:
- PageHeaderImage
- scrollable: true
components:
- BodyText
- ChildNodes
- className: nav
components:
- AppNav
mulberry create component <name>
which will create a Dojo UI component at <app-root>/app/components/<name>.js and <app-root>/app/components/<name>/<name>.haml).
See here for more info.
obsolete
mulberry create capability <name>
which will create a file at <app-root>/javascript/capabilities/<name>.js.
More info
mulberry create datasource <name>
which will create a JSON file at <app-root>/assets/data/<name>.json. It can hold any data (as long as it’s valid JSON) and it’s up to the app to implement the functionality to read and use it.
See here for info on feature flags that determine whether a given feature is active or not.
When generating the app, the default PhoneGap app icon and splash screen, as well as the default Toura (xcodeproj) projects are copied into the app’s <app-root>/build folder,
where they can be further customized. (Although I’m not sure if re-generating the app overwrites the customized versions).
The source files are located at <mulberry-root>/builder/project_templates/iOS/Toura for the projects and further below in <mulberry-root>/builder/project_templates/iOS/Toura/Resources/icons
and <mulberry-root>/builder/project_templates/iOS/Toura/Resources/splash respectively for icons and splash screens.
It would be a nice extension to Mulberry if I could refer to my custom icons, loading screens, etc. in the config.yml and having those replace the default versions.
At the moment, the iPhone and iPad have 2 separate projects (Toura.xcodeproj and Toura-iPad.xcodeproj).
But I guess, having a third Toura-universal.xcodeproj for universal apps might be another welcome extension.
Command line and Jenkins integration This link looks helpful.
tl;dr I hope this short guide was useful to you.
I’ve created a help page and although it’s more a reminder for myself, you can use it as an easy overview.
Next up: Further Mulberry app customization — adapting style and layout.
/C
What will this blog be about?
I stated in my opening post that I will blog about graphics programming, programming on a general level, and add some tadbits about web programming. To concretize this plan, or rather as a TODO list, I wrote this post.
I might want to write (more or less academic) papers and submit them for review. You will find them here as well.
I will probably edit this list over time…
tl;dr
I have no clue what I will write about on this blog. But be sure that it’ll be code-related.
/C
If you’ve followed this blog, you might have noticed a couple of changes in the last days. In fact, I’ve been playing around with customizing Octopress and added a couple of custom asides.
I wanted to add my Coderwall badges in the asides. A bit of googling lead me to another Octopress blog, which was using Mizzy’s code to display the badges. From there, it was pretty easy to extract the Javascript code from the page source. I only found the original author’s page later today, but by then, I had already a working version.
As customization on the original code, I added the img@alt and img@title attributes to be generated from Coderwall’s JSON response data. This gives a nice addition for hovering over the badge to get its description, and an alternative description for non-graphic browsers.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | |
The second custom aside I created follows the implementation as described on the official Xbox site, which is using an iframe to embed the card. I don’t really like the iframe to embed an external page, but this implementation was small and function, which is the essential.
1 2 3 4 5 6 | |
The coderwall_user and xboxlive_user need to be specified in _config.yml.
Given you have a website that generates nice gamercards (there are ton of thems), you can use the above code to include your custom gamercard as an aside.
tl;dr Creating asides is super easy with Jekyll/Octopress. And I’ll probably create a few more for fun.
/C
I’m not a web developer by birth. I’ve done some web development as cheap jobs when I was a student. As such, I knew the vital parts of PHP, some bits of Javascript and of course the HTML4 DOM and the basics of CSS. Just enough to pound out a (-cheap-looking- programmer art) webpage, with MySQL for database support. That was between 1999 and 2006. Then I graduated.
Not that web development was boring, but since the web bubble just exploded when I was in my 2nd year at University, I had some prejudices to web development being a good career path. Plus, game programming was something I wanted to do since my childhood, and graphics programming was something I studied, I chose the path of a graphics programmer, and not the one of a web developper.
Hence, I didn’t follow the evolutions that closely. Well, I saw XHTML coming during the XML boom — put everything into XML, and if you need the data in a different format, add some XML layer on top of it — and going, I saw HTML5 arriving to make the web better (and played Apple’s “Checkers” demo countless of times), saw the rise of CSS, to the point of CSS3 (I liked the part where it killed the old tablosaurs), and WebGL arriving (after seeing VRML and X3D dying their all-to-merited death), all that without really taking part in those changes.
And now, in 2012, I finally decided to relaunch my blog in a different form (I had a self-hosted WordPress blog, but I let it die without updates, neither in the form of WP patches, nor in content) and found this Octopress thingy I am using, which looks to me that it’s using a great bunch of new technologies, that didn’t ring any bells until now: SASS, Liquid, Jekyll, jQuery, etc.
So I’m entering totally new terrain, which is both terrifying (in the amount of new stuff to learn) and interesting (in the amount of new stuff to discover) at the same time, and I’ll be blogging about my discoverings here from time to time.
Besides trying to configure this site to look a bit “different” from the vanilla Octopress theme, I have one other motivation to go all this way: I was asked by some very good friends if I could produce some small iOS app for their organization. Hence I’ve been spending some time to look into possible solutions to produce an app (possibly not limited to iOS) in the short amount of time I have besides work.
I already knew PhoneGap from some earlier “research”, but haven’t come to use it yet. But then I found Octopress, and Jekyll as a static page generator as its base, and this idea kinda stuck with me: If I’m going to put out a little app that’s going to contain little more than text, I could use those technologies to pound out an app pretty quickly. Modifying the styles could even be done by my friends, and since I could easily host its sources on github, it would make the updates pretty easy.
Looking closer at my requirements, I found out that there’s already been someone with a similar idea, which has resulted in a project called Mulberry.
Mulberry is based on PhoneGap and Jekyll and allows to generate the “scaffolding” of an app for iOS and Android. I’ve been toying with for a couplke of hours today, but it looks pretty promising.
tl;dr Web development has gone a long way, and I’m looking forward to learn more about all these new technologies. Actually, it’s awesome to see all the new evolutions of web technologies, and even to be using them.
On this matter of thought, if anyone knows how to put in a WebGL-powered tag cloud for the categories of my posts, I’d like to hear about it.
/C
tl;dr I hereby declare this blog opened!
Since my old WP blog died of (wilfull) neglect at least 2 years ago, I am starting a new one, and will try to keep it updated regularly. (I don’t promise anything, though). My old blog was a more a mixture of political stuff, life blog, and coding, and also written in several languages, meaning that each post was a lot of extra work translating it. This time, I’ll keep it easy and blog only about coding stuff, and only in English.
What coding stuff? (There’s a lot that would merit to be talked about).
Since I’m a graphics programmer, there will be posts about graphics programming, i.e. shaders, graphics algorithms.
But I will also cover more general programming, be it with subjects like refactoring,
“dark magic” programming (the arcanes of mixing languages that should better not be mixed — more on that later), programming languages, etc.
Also, I plan to write about my learning of C# with Unity3D.
And since I’m currently rediscovering a lot of web programming that I just saw passing by in the last years, I will write about that as well.
So far, for what I plan to blog about, but I will write a more specific post with some ideas later.
/C
Like the first words an infant says, a coder starts his “coder life” by printing those simple words.
More in detail, the point of creating a program that prints a little message is to prove that the programming statements are understood by the parser, can be translated into an abstract syntax, and finally translated into binary instructions understandable by the machine. In short, if this simple program can be compiled and linked, any other program can be built as well.
As such, there’s nothing more appropriate as to start this dev blog by stating “Hello World”. I.e. if this post can be generated, any post can be generated.
tl;dr This looks nicer than a generic lorem ipsum.
/C