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.

Hello World

Every new app needs its “Hello World” example in order to familiarize users about user interface and basic functionalities. An appropriate “Hello World” app for Creo could be a simple button that is able to open a new window.

1. Start Creo and choose “New Empty” from the Wizard window.

Creo Wizard

A new empty project is a Window1 inside a Navigation1.

Creo new empty project

2. Create a new window using the “New Window” button on bottom left and then reselect Window1.

Creo new window

3. Drop a button from the Objects pane to Window1.

Button dropped into Window1

4. Reveal Code Editor using the “Code Editor” button from the document toolbar. Select Button1 Action event from the Events group and write the following Gravity code:
Window1.open(Window2);
Window2.openIn(Navigation1);

Button1 open Window code

5. Press Run Simulator button into Toolbar:

Download “Hello World” project.

Notes about beta 5.3
Starting from Creo 1.0b5.3 you could also use Window2.open(); to achieve the same behavior.
It means open Window2 in current active Navigation.


CoverFlow magics

Few days ago we posted a short video that shows how to connect and customize data from a REST service (Spotify) to a Table.

Creo comes with all standard OS controls and thanks to the fact that we are able to execute any iOS code under Mac we decided to include some very cool (but not standard) controls like CoverFlow. To do so, we just grabbed iCarousel source code from its GitHub repository and then packed it as a built-in and ready to use Creo control.

In the following video I’ll show you how easy it is to connect data to our CoverFlow control and see all changes in real time.

P.S. Yes, Creo will support third-party plugins šŸ˜‰


Creo

Creo is the result of three years of hard work. It is a new way to think about mobile app development where there are no more differences between design phase and development phase. Both are combined into a single powerful Mac app.

Designing and developing mobile apps with traditional tools is a very hard and time consuming task. We believeĀ that there should be a better way.

It’s all aboutĀ being able to bridge the gap between design and development and that’s the reason why we were forced to think big and we needed to create a brand new technology. We could not rely on third party simulators or on traditional solutions (like web based tools) simply because Creo is something totally different from what is actually on the market.

  • Creo is a new way to develop and design mobile apps
  • Creo is a mobile operating system that can run iOS apps on MacĀ 
  • Creo is a new programming language
  • Creo is a way to give designers the possibility to work with real data
  • Creo is app development reinvented