When you need to learn a new language and a new development environment the first app that you usually develop is a simple Hello World app. With the same amount of time you usually spend to develop a Hello World app, with Creo you can build a fully featured and more complex application, in this case we'll show you how to create a web browser.
1. Start Creo and select "New Creo project" from the Wizard dialog.
You'll end up with a new empty project:
2. Drag Window1 (in the Layout section) above Navigation1 (we do not need a Navigation in this example):
3. Delete the Navigation1 right-clicking on it and selecting "Delete..." from the contextual menu.
4. Drop a WebView from the Objects panel to the Design Board (and adjust its size according to the screenshot): 5. Drop a TextField from the Objects panel to the Design Board (and adjust its size according to the screenshot): 6. Drop a Button from the Objects panel to the Design Board (and adjust its size according to the screenshot). Change its Title property in the Inspector panel from Button to Go:
Application user interface is now completed and so far you have already learned how to setup a Navigation Hierarchy, how to instantiate Objects and how to modify their settings using the Inspector.
Connecting user interface
We now need to connect user interface with user's actions and in this particular case we want to load into the WebView1 control the URL entered by the user in the TextField1. All we need to do is to write the connection code into the Button1 action event. More information about objects and events can be found here.
According to TextField documentation, the text property contains the text entered by the user, while according to the WebView documentation the url property is the value to set to force the WebView to navigates to that specific URL. What we need to find out is a way to set the WebView1.url property to the TextField1.text value each time the user touches the Button1 button. According to the Button documentation the Action event is what we are looking for.
This code is executed every time a user presses the Go button.
WebView1.url = TextField1.text;
Finishing your application
If you try to execute your application inside Creo Simulator you'll notice that when you press the Go button the Keyboard is not correctly dismissed: This issue can be fixed with a line of code:
Run your project again and you'll notice that everything works as expected now.
So far we created and tested our application only on iPhone7, what happens if you try to run your app on an iPad? Just select iPad from the Info Panel and you'll notice that there are some UI issues that need to be fixed: Again, all these issues can be easily fixed. Switch back to iPhone7 and then apply the following constraints to the three controls: Try to select iPad again and you'll notice that everything works as expected now on all the iOS devices: You can now send the app to CreoPlayer or build it and then submit to the App Store.
- Browser.creoproject (12KB)