PDF - Source : www.pcsoft-windev-webdev.com

More documents

Recommendations

Info

3. The fi rst wizard screen is used to enter the name of the project, its location and itsdescription. In our case, this project will be named "My_iOS_Project". By default, WinDevMobile proposes to create this project in the "\My Mobile projects\My_iOS_Project" directory.You can keep this location or modify it via the [...] button.10. Click the validation button at the bottom of the wizard. The project is automatically created.WinDev Mobile displays the different possible actions.11. Click "WinDev Mobile editor".My first windowOverviewThe fi rst window will allow the user to display a welcome message via the "Display" button.You may think this is too basic, too simple, but we recommend that you create this window.You may be surprised by how intuitive and how easy it is to use the editor of WinDev Mobile.Furthermore, this window will allow you to discover concepts that are fundamental for the rest ofthis tutorial and to see the entire process for developing an iOS application with WinDev Mobile.Creating the window To create the window:1. Click among the quick access buttons of the WinDev Mobile menu:4. Go to the next screen via the arrows found at the bottom.5. The wizard proposes to add documents. Keep the default options and go to the next screen.6. The next screen is used to select the device for which the application is developed. In thisexample, we will keep "iPad" and "iPhone".2. A window shaped like a wheel is displayed. This window is used to create all the elementsthat can be associated with a project.3. Click "Window". The wizard for window creation starts.4. Select "Blank for iPhone" in the list of windows displayed on the left. In the list of skintemplates found on the right, the "ActivPhone 5" skin template is selected by default. You canchoose another skin template proposed in the list.NoteThe skin templates allow you to quickly create outstanding interfaces. A skintemplate defi nes the style of the window but also the style of all the controls thatwill be used in this window. No ugly interface anymore.7. In the left section of the wizard, click "3-Charters". This step is used to defi ne theprogramming charter. Don't modify the suggested options. Go to the next screen via thearrows found at the bottom.8. This step is used to defi ne the style book. Select "ActivPhone 5".9. The other wizard steps not being important for our fi rst project, click "6-End" in the leftsection of the wizard.5. Validate. The window is automatically created in the editor.86 Part 3: iOS applicationPart 3: iOS application 87
Save the window by clicking among the quick access buttons. During the fi rst backup, aspecifi c window is displayed. This window proposes to enter:• the title of the element: enter "Welcome". In our case, this title will be displayed in the titlebar of the window.• the name of the element is the name of the window. This name will be used in programming.By default, this name includes "WIN_" that corresponds to the programing charter and"Welcome" that corresponds to the title of the window.NoteLet's take a look at the window name proposed by WinDev Mobile: this namestarts with the letters "WIN_". This prefi x is automatically added because theproject uses a programming charter.The programming charter is used to defi ne a prefi x for each type of object,allowing you to quickly identify the element handled:• a window starts with WIN,• a button starts with BTN,• etc.If you don't want to use this charter, all you have to do is disable it: on the"Project" pane, in the "Other actions" group, expand "Charter" and uncheck "Usethe charter" .• the location that corresponds to the fi le name created for the window. The window is a fi lewhose extension is "WPW", saved in the project directory.Displaying a messageYou are now going to create a button used to display a message.To create the "Display" button:1. On the "Creation" pane, in the "Usual controls" group, click . The button appears increation under the mouse.2. Move the mouse in the window toward the position where the control must be created (atthe top of the window for example). To drop the control in the window, all you have to do isperform a new left mouse click.3. Perform a right mouse click on the control that was just created. The popup menu of thecontrol is displayed. Select "Description" from this popup menu. The description window of thebutton is displayed.Modify the characteristics of the control by entering the following information:1. Name of this control: "BTN_Display".2. Caption of this control: "Display"Validate the description window of the control (green button). The control is displayed in thewindow editor.We are going to display a message in a dialog box (a small window proposed by the system).To do so, we will be using our fi rst WLanguage function: Info. Click the green button to validate.NotesWLanguage is the programming language supplied with WinDev Mobile. It's a 5thgeneration language (5GL) that uses highly sophisticated commands.1. Select the "Display" button with the mouse: all you have to do is click it.2. Display the popup menu of the control (right mouse click).3. Select the "Code". This option opens the code editor of WinDev Mobile, in which all theWLanguage statements can be entered.4. Enter the following code in the "Click BTN_Display" process:Note about the assisted input: As soon as the fi rst two characters are typed, WinDev Mobileproposes all the words of the WLanguage vocabulary containing these characters. The aideddevelopment is very a powerful feature. No more mistake when typing the name of an element:the syntax errors are reduced to a minimum. All you have to do is select the requested word andpress [Enter] to validate. You can focus on the algorithm.88 Part 3: iOS applicationPart 3: iOS application 89
Page 3 and 4: Lesson 2.3. DatabasesThe available
Page 5 and 6: Managing the creation and the modif
Page 7 and 8: And don't forget to take a look at
Page 9 and 10: PART 1Overview ofWinDev Mobile16 In
Page 12 and 13: 4. Bar of opened documents. This ba
Page 14 and 15: LESSON 2.1. MY FIRST ANDROID PROJEC
Page 16 and 17: 6. The next screen is used to confi
Page 18 and 19: NotesWhen entering this code in the
Page 20 and 21: LESSON 2.2. INTERFACE (GUI)This les
Page 22 and 23: Management of touchscreen6. Display
Page 24 and 25: The synchronizationThe synchronizat
Page 26 and 27: 5. Select the items to display:We a
Page 28 and 29: Displaying the form from the list o
Page 30 and 31: Deploying the applicationIf you own
Page 32 and 33: Selecting a photo in the photo albu
Page 34 and 35: Displaying the stores on the mapPri
Page 36 and 37: Modifying the 1st line: access to t
Page 38 and 39: OverviewWinDev Mobile allows you to
Page 40 and 41: QuestionHow do I establish the dial
Page 42 and 43: LESSON 3.1. MY FIRST IOS PROJECTThi
Page 46 and 47: NotesWhen entering this code in the
Page 48 and 49: LESSON 3.2. INTERFACE (GUI)This les
Page 50 and 51: In order for the button to remain c
Page 52 and 53: The available databasesOverviewIn i
Page 54 and 55: 3. This analysis includes 3 data fi
Page 56 and 57: 4. Reorganize the controls in the w
Page 58 and 59: 4. The code of this option is used
Page 60 and 61: Managing the bar code of the produc
Page 62 and 63: Modifying the multiline zone contro
Page 64 and 65: 8. Go to the next screen. This scre
Page 66 and 67: Questions/AnswersQuestionHow do I e
Page 68 and 69: PART 4Windows Mobileapplication134P
Page 70 and 71: OverviewTo start working with WinDe
Page 72 and 73: • the location that corresponds t
Page 74 and 75: 7. This screen is used to defi ne t
Page 76 and 77: TestWhen running the test (in simul
Page 78 and 79: OverviewIn this lesson, we are goin
Page 80 and 81: We are going to run a fi rst test i
Page 82 and 83: Managing the creation and the modif
Page 84 and 85: 4. The wizard for creating a Window
Page 86 and 87: 6. This screen is used to defi ne t
Page 88 and 89: 8. Specify the fi les to install. T
Page 90 and 91: Controls, windowsQuestionHow do I d
Page 92 and 93: EnvironmentCaution!Only the propert
Page 94 and 95:
Example of code:QuestionHow do I ma
show all

PDF - Source : www.pcsoft-windev-webdev.com

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?