Creo beta 5.5

Creo b5.5 is available today with a lot of changes and improvements.
A full list of changes is available in the official Version History page.

The most important changes in this release are the new async non blocking database calls, the new Apple based Map control and the new Bluetooth controls. Bluetooth controls in particular are very powerful and with a minimal amount of work you can create very complex task (we’ll post detailed tutorials soon).

We know that we have to create more documentation, more tutorial and more examples and we are working hard on producing new content. Our plan (if no major issues will be reported for b5.5) is to release b6 with app ready to be submitted to Apple Store in January and then give more details about prices and an official release date.

We have really big plans with Creo and we hope you’ll be satisfied with all the news that will be announced soon. With Creo we have only one simple aim: “Reinvent how people develop mobile apps”.

Creo b5.5


A markdown editor built-into b5

As I already wrote, Creo b5 will be a very big under the hood update, that means that the foundation, the language and the functionalities will be much more stables and powerful. In b5 we are investing much of our time in non UI related changes. UI and UX changes will be applied to b6.

An exception to this statement was the SplitView work we did a couple of weeks ago and the new HTML/Markdown functionalities we added to text based controls like Label, TextField and TextView. With this functionality you can literally write a Markdown editor for iPhone/iPad without a single line of code.

Let me show you how powerful this new feature is:
 


Radio silence and upcoming b5

I am sure some of you are wondering what happened in the latest month, a month without an update and without any new blog post. Well, except for few days off, all the Creo team is working hard on the next b5.

Creo b5 will be an huge update with Gravity finalized and documented, with the iOS app released and with some important internal changes. For example Andrea has rewritten from scratch the SplitView navigation control and it is now even more powerful and useful. Take a look at this short demo about the new SplitView control that automatically creates the master view for you (you’ll be able to completely customize it).

 


OAuth-1 and OAuth-2 with Creo

In this tutorial we’ll create a simple Twitter reader (using the HTTPClient class and OAuth-1) and a Google Drive browser (using OAuth-2). Up until Creo b6 all these HTTPClient parameters cannot be dynamically accessed from the code so they must be statically set from the configuration panel. Just a couple of beta versions and we’ll extend dynamic properties to all the classes.

Twitter and OAuth-1

  • Create a new Twitter App from https://apps.twitter.com/
    Twitter1
  • Fill-in the fields with your app’s data. The Callback URL must be a valid HTTP URL and the callback locking option must be disabled to allow custom callback URLs in the requests.
    Twitter2
  • Get the Consumer Key and the Consumer Secret.
    Twitter3
  • In Creo, create a new HTTPClient instance with the Twitter parameters and the Consumer Key/Secret just obtained.
    Twitter4
  • Create a new request from HTTPClient instance (right click on HTTPClient1). Twitter offers a lot of API, in this example we’ll list the tweets from a user (https://dev.twitter.com/rest/reference/get/statuses/user_timeline).
    Twitter6
  • Finally, add a TableView and set your HTTP request as the DataSet.
    Twitter5

You can download a sample project from: http://media.creolabs.com/examples/Twitter.zip

Google Drive and OAuth-2

  • Create (if you don’t have one) a Google account and access the following url: https://console.developers.google.com
    Google1
  • Create a new project and enable the API you want to use (Google Drive API in this case).
    Google2
     
    Google3
  • Configure the OAuth consent screen with the details of your app.
    Google5
  • Create Credentials (OAuth client ID).
    Google4
  • Use the following parameters:
    Application Type: iOS
    Name: your app name
    Bundle ID: the identifier of your app configured in the Application inspector in Creo
    Google6
  • In order to be able to test the requests inside Creo you have to add another credentials for the Creo simulator with the following parameters:
    Name: CreoApp
    Bundle ID: com.creolabs.creo
    Google7
  • In Creo, create a new HTTP Client with the following parameters:
    Google8
  • Create a new request for this HTTP Client, for example to list the Google Drive file (API documentation: https://developers.google.com/drive/v3/reference/files/list#request):
    Google9
  • In order to customize your request, you could also configure the optional query parameters.
    Google10
  • Add a Table View and set your HTTP request as the DataSet.
    Google11
  •   

  • Enjoy your Google Drive inside Creo 🙂
    Google12

You can download a sample project from: http://media.creolabs.com/examples/Google.zip


What’s new in Creo beta 4?

Yesterday we announced Creo b4 and among other changes there are some really relevant features that I would like to further explain.

There is a new advanced sqlite table editor that enables you to create and modify database tables. This is especially useful because it does not force you to use any external database sql tool for your sqlite models.

SQLite Editor

We also introduced a new logging system and panel. Errors and warnings will be redirected to that window and you can log messages from the code using: Console.write("Your message here"); or more easily using the Log action.

Log Panel

You can download a simple HelloWorldConsole project (it uses an Action bound to a Button) from: http://media.creolabs.com/examples/HelloWorldConsole.zip.

  

HTTP authentications

Under the hood we greatly enhanced the HTTP client class and we added all supported authentications like password, OAuth1 and OAuth2. These are very important features that enables you to gain full access to thousands of web services. We’ll publish a more detailed article pretty soon about the new authentications and how to setup all of them.

Internally we were able to use password authentication to gain access to our subversion repository at http://beanstalkapp.com. Without any code we were able to list our latest commits from one of our repositories. Beanstalk API are documented at: http://api.beanstalkapp.com

Beanstalk

Using OAuth1 we created a minimal Twitter client in few seconds:

Twitter

As an OAuth2 example we used Google services to gain access to our Google Drive:

GoogleDrive

From now on, thanks to these enhancements, possibilities are really endless and all the examples you see listed here were setup inside Creo in few seconds without any written code. We really believe that Creo b4 is a great starting point for the future of Creo.


Creo b4

Creo b4 is available today with the following changes:

  • Added support for OAuth1 and OAuth2 to HTTPClient
  • New built-in SQLite table editor
  • New Log console window
  • Exposed Console class
  • UIButton improved
  • UITextView and UITextField improved
  • UIScrollbar improved
  • Fix for navigations inside navigations hierarchy
  • Fix for a crash in binding
  • A lot more other fixes and improvements

If you have Creo 1.0b3.2 just use the in-app update feature, otherwise use the original beta download link to get the latest version.


Creo b3

Creo b3 is available today with the following changes:

  • Added support for Sketch files, more details here
  • New icons for files inside Assets and Documents
  • UIWebView on MacOS rewritten using WKWebKit (was WebView)
  • Greatly improved HTTPClient
  • Various internal fixes to CREOKit (our custom UIKit on Mac)
  • Improved rotations
  • Improved CustomViews
  • Improved SQLite database
  • Fixed code generation for navigation hierarchies
  • Fixed some issues related to TextView
  • Added schema/table support for all sql databases
  • Fixed an UIWindow issues that leads to have black CustomViews and SplitViews
  • Fixed a compiler issue that prevents to discover methods declared by user inside the same object
  • A lot of other fixes and improvements

Sketch integration in upcoming b3

We all love Sketch and starting from upcoming b3 Creo we’ll support Sketch files. The only requirements are that Sketch App must be installed on the same computer as Creo and the file format must be the new one introduced in Sketch 3.1.

From Sketch 3.1 changeset: “Sketch’s file format has changed; documents are now truly single files and can be safely emailed or shared via Dropbox and other services without having to zip them up first”.

So, how it works in Creo?
First let’s start with a Sketch file that contains some artworks:

Sketch

It is mandatory to setup correct slices in order to be able to use that file inside Creo, then just drop the file to Assets or Documents in order to be able to use it.

Creo and Sketch

This short video will show you how integration works.


What’s new in Creo beta 2

Creo beta 2 will be released on Monday and this post briefly summarize what changed. We worked really hard in the past three weeks trying to fix as many issues as possible. Some issues remain, some has been fixed and a lot more exciting news will come in the next releases 🙂


Documentation

With b2 we finally added on-line documentation that can be accessed from the Creolabs website or within the Creo application (just select “Documentation” from the Help menu). More important, documentation will be constantly enhanced and users will be able to contribute with suggestions. Documentation can be accessed from http://docs.creolabs.com/

Screen Shot 2016-02-05 at 16.10.41


Actions

As you probably know you can customize every object inside Creo using the Gravity built-in language. For some very common tasks it would be easier if you can customize behaviors using a graphical user interface instead of writing code. That’s exactly the reason why we created the Actions inspector where you can combine object’s actions in response to other events using a very intuitive interface.

For example look how easily I create an action that opens Window2 when Button1 is touched:

With actions you can start/stop animations, play/pause sounds, execute Gravity code, log messages and much more. Actions is an extensible part and we plan to expose a lot of common tasks via the new Actions inspector.


Windows specialization

Starting from this version we introduced a very powerful concept for Windows. Windows by default are created as Universal, it means that the same Window will run on any device (iPhone, iPad and others) and on any orientation (portrait and landscape). What if you want to have a different Window1 based on device or based on orientation or both! Usually you should handle this situation with a code that looks like (pseudo code):

The new Window specialization feature enables you to just open Window2 and all the underline logic is automatically handled for you by Creo at runtime. Window is just a logical container that will contain the right instance based on some runtime variables (device and orientation). You do not need to write any special code and you do not need to create a lot of if statements to control flow execution. This is a very powerful concept that I tried to summarize in this quick video where you can see a Window specialization by orientation.


SoftKeyboards

 
 

Complete Version History can now be found in the new Documentation section.

If you already have b1 installed you should be notified of the new version the first time you’ll open the app, if you haven’t downloaded beta version yet please SignUp to receive a beta link.


The one minute eBook project

A friend of mine is a very talented artist, he is specialized in comics books and every time I see him drawing something it feels like something magic is happening to me. Some time ago he gave me some drawings in order to try to build an eBook with Creo so I decide to write this post in order to show how easily a simple eBook app can be created.

1. Start with a folder full of images you want to use for your eBook (mine are 2048×1536 jpeg images).
Images folder

2. Drag that folder from the Finder to your project Assets.
Assets

3. We do not need a NavigationBar in this app so drag Window1 out of Navigation1 and delete Navigation1.
image3

4. We want our app to be Landscape and without a StatusBar, so from Window inspector set StatusBar to Hidden and then press “cmd+right arrow” to rotate the window in landscape mode. (Then press cmd+0 (zero) to zoom to fit screen if you want).
image4

5. We want iPad preview so select iPad from the device topbar selector.
Change platform

6. Drop a view from Objects pane to Project Templates, then resize view to be 1024×768.
image6

7. Drop an ImageView from Objects pane, resize it to fit view size and adjust its autoresizing mask.
image7

8. Select Properties from Inspector and drag from the ImageView binding point to the exposed properties list.
image8

9. Set Property Name to Image (it is the name that will be used in the container’s inspector) and select an appropriate key path value, in this case it is image.
image9

All done on custom view side so let’s switch to Window1.

10. Drag a PageContainer from Objects pane and resize it to fit window size.
image10

11. In PageContainer inspector:

  • IMPORTANT: there is a bug in version 1.0b1 Build 4558 that could lead to a crash, as a workaround just change Style to PageScroll (this bug has already been fixed in the upcoming b2 version).
  • Select CustomView1 as Template
  • Select Assets as DataSet (each folder inside Assets or Documents is automatically exposed as a DataSet), and KeyPath is automatically filled with Assets.Pages (Pages is the name of the folder that contains my images collection).

image11

Here you go a video that shows you how the app runs inside the simulator and inside a real device using Creo iOS dev player app.

Notes:

  • Creo builds universal app so if you want to test on a iPhone just adjust PageContainer autoresizing mask.
  • PageContainer is a very powerful control that enables you to create pages using a custom view and a dynamic source like a DataSet.