Edcomp.ru

Советы по настройке и оптимизации компьютера
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Xcode уроки. Урок 3. Элементы управления и представления

Первый шаг в разработке приложений под Mac. Обзор и установка Xcode.

Xcode — это пакет инструментов для разработки приложений под Mac OS X и iPhone OS, разработанный Apple. Последняя версия Xcode 3.2, бесплатно поставляется на дистрибутивном диске Mac OS X Install DVD вместе с операционной системой Mac OS X 10.6, хотя и не устанавливается по умолчанию. Третья версия не поддерживается старыми версиями Mac OS, для которых XCode также доступен бесплатно через Apple Developer Connection. Обновления можно бесплатно скачать на официальном сайте поддержки.

Xcode тесно интегрирован с фреймворком Cocoa. Создается производительная и простая в использовании среда разработки. Его используют и при разработке самой Apple Mac OS X. Этот набор инструментов включает:

  • Xcode IDE (для кодирования, создания и отладки приложений)
  • Interface Builder (для разработки пользовательского интерфейса)
  • Инструменты для анализа поведения и производительности
  • Десятки дополнительных инструментов

Остановимся на каждом инструменте поподробнее, а затем установим Xcode.

Xcode IDE

Xcode IDE

Xcode IDE предоставляет вам все, что нужно: от профессиональных редакторов, с функцией автозавершения кода и Cocoa рефакторинга, до настройки open-source компиляторов. Xcode IDE р азработан с нуля, чтобы вы могли воспользоваться всеми возможностями Cocoa и новейшими технологиями Apple.

Разработка с Xcode позволяет сосредоточиться именно на самом процессе разработки, а не на прочих процессах. Просто нажмите на зеленую кнопку Build and Go , чтобы начать процесс создания вашего приложения. Если будут найдены ошибки в вашем исходном коде, отображается сообщение в виде пузырей. 🙂 После создания вашего проекта, в окне редактора появляется панель отладчик а, и при наведении мыши показываются значения переменных. Если вы разработали приложение для iPhone, Xcode автоматически установит его на устройство.

Interface Builder

Interface Builder

Interface Builder упрощает создание пользовательского интерфейса (UI). С его помощью можно легко, без написания кода, создать слои из окон, различные кнопки, ползунки и другие элементы управления. Затем вы можете превратить этот прототип UI в реальное приложение, добавив новые возможности. Xcode работает с Interface Builder в режиме реального времени, так что вы видите в графическом интерфейсе (Interface Builder) то, что вы пишете в Xcode.

Cocoa Model View Controller

Вы можете легко создавать пользовательские интерфейсы, поскольку Cocoa был построен с использованием шаблона Model-View-Controller (MVC). На самом деле, UI фактически являются архивами объектов Cocoa, которые не требуют генерации кода. Изменения в интерфейсе пользователя (UI) не требуют перекомпиляции (перепроверки) кода, а изменения в коде, не требуют перекомпиляции UI.

Instruments and Shark

Инструменты и Shark

Огромный мир Mac и iPhone приложений предоставляет пользователю большой опыт, на который следует опираться при создании своей программы. Приложение должно содержать в себе элегантный пользовательский интерфейс и оптимальную производительность. Developer Tools включает мощные инструменты оптимизации и анализа ( Instruments and Shark ), которые помогут вам найти «проблемные места» в вашем Mac и iPhone приложении.

Есть инструменты и для сбора данных об использование дисков, памяти и процессора вашего Mac или вашего iPhone, подключенного к компьютеру. Собранные данные отображаются графически в реальном времени , что позволяет легко определить проблемные зоны приложения, и затем перейти к проблемным строкам кода.

Эти инструменты помогают создать великолепный пользовательский интерфейс, который будет сопровождаться столь же впечатляющей отзывчивостью.

Что такое Cocoa

Технологии Cocoa и Objective-C

Большая часть Cocoa осуществляется в Objective-C. Objective-C — это компилируемый объектно-ориентированный язык программирования корпорации Apple, построенный на основе языка С и парадигм Smalltalk.

Запущенное приложение Objective-C может загрузить интерфейс (Interface Builder автоматически создаст nib файл ), подключиться к Cocoa объектам интерфейса вашего приложения, а затем выполнить построение UI. Нет необходимости перекомпиляции. Поскольку Objective-C является расширением языка С, можно легко «смешивать» С и даже C + + в приложениях Cocoa.

Читайте так же:
Как потратить бонусы в приложении Санлайт

Где взять Xcode

Xcode находится на втором установочном диске Mac OS X. Программа не устанавливается по умолчанию вместе Mac OS X, поэтому попробуйте сделать это сами с диска. Но бывает, что программа уже установлена (путь к Xcode: Macintosh HD › Developer › Application). Если такой папки нет, попробуйте воспользоваться поиском.

Есть 3 версии: только Xcode, только iPhone SDK, Xcode + SDK вместе. На данный момент у меня установлен Xcode + iPhone SDK версии 3.1.2. Получить бесплатно последнюю версию Xcode и SDK можно и на developer.apple.com. Предпочтительнее этот вариант, потому что велика вероятность, что Xcode на диске далеко не последней версии. Но для этого придется зарегистрироваться в сети Apple Developer Network. Она предусматривает несколько вариантов членства, включая бесплатный (на этом уровне закрыт доступ к продажам через магазин iPhone).

Ну вот и все! Первый шаг на пути становления Mac-разработчиком сделан! В этой статье я описал основные характеристики, возможности Xcode и принципы его работы. Далее я расскажу, как сделать свое первое приложение для iPhone/iPod Touch «Hello World». Чтобы случайно его не пропустить и быть в курсе новых материалов сайта, рекомендую подписаться на RSS-ленту или присоединиться к нам в твиттер.

Установка

Как я упомянул ранее, Xcode предоставлен компанией Apple. Для того чтобы установить его на свой Mac, необходимо сделать следующее:

  1. Открыть App Store на Mac.
  2. В поиске ввести «Xcode».
  3. Выбрать Xcode из списка найденных приложений.
  4. Нажать на кнопку «Install» и дождаться загрузки/установки.

Всё легко и просто, правда?

Первое знакомство

Xcode установлен, глаза горят, руки хотят начать писать код и внести свой вклад в разработку мобильных приложений. Но для начала, нужно ознакомится с новой IDE, иначе ничего дельного у нас не получится.

Запустите Xcode и перед Вами появится окно приветствия:

Знакомство с Xcode - 1

Здесь мы видим, что оно условно разделено на 2 секции:

  1. Левая часть позволяет создавать новые проекты
  2. Правая часть — открывать уже существующие.

Воспользуемся первым вариантом и создадим новый проект. Нажмите на «Create a new Xcode project» и Вы увидите следующее меню выбора:

hello_xcode_2

Знакомство с Xcode — 1

IDE тут же предложит Вам выбрать один из шаблонов:

  • Master-Detail Application — в данном шаблоне используется раздвоение контроллера представления для отображения списка элементов и их содержание. Примерно так устроены стандартные «Настройки» на iPad.
  • Page-Based Application — в основе шаблона лежит UIPageViewController.
  • Single View Application — наиболее используемый и самый простой шаблон. Включает в себя стандартный UIViewController и его класс.
  • Tabbed Application представляет из себя UITabBarController с двумя «вложенными» UIViewController‘ами.

Со временем мы рассмотрим их все и Вас не будут пугать эти контроллеры, упомянутые выше. Но на данном этапе нам понадобится Single View Application. Выберите его и нажмите кнопку «Next«.

Знакомство с Xcode - 1

В новом окне нужно заполнить следующие поля:

  • Product Name — это, собственно, название Вашего проекта. Назовите его «HelloWorld».
  • В Organization name указывается название организации или разработчика. Система по-умолчанию берет имя Вашего аккаунта Mac.
  • Organization identifier зачастую представляет из себя доменное имя Вашей организации, записанное в обратном порядке. К примеру, web-адрес нашей команды woopss.com, следовательно нашим идентификатором является com.woopss. Немного запутано, но это стоит соблюдать, так как это поможет сделать идентификатор приложения уникальным.
  • Bundle idenitifier и является тем уникальным идентификатором приложения, упомянутым выше. Он создается на основе названия приложения и ID организации. Сейчас он должен выглядеть примерно так: «com.woopss.HelloWorld«.
  • В поле Language выбирается тот язык программирования, на котором будет написан проект. Выберите Swift.
  • В графе Devices нужно выбрать семью устройств, которые будут поддерживаться: iPhone, iPad или Universal (iPhone+iPad). Оставьте Universal.
Читайте так же:
Удаление сайта funday24.ru из автозагрузки

Все следующие опции на данный момент нам не нужны, поэтому можете снять с них выделения (если они выделены). Нажмите кнопку «Next» и выберите папку на Вашем Mac, куда нужно сохранить проект.

Верьте или нет, но Вы только что создали Ваш первый проект. Вы можете уже сейчас запустить его, нажав на cmd+R или кнопку Run в правом верхнем углу. Вы увидите просто белый экран. Это вполне логично, т.к. мы не добавляли никаких графических объектов. Так что можно это воспринимать как белый холст, на котором можно творить.

На этом наш урок подходит к концу. В следующем мы чуть более подробно рассмотрим все области Xcode и уже совсем скоро научим наше приложение что-то делать.

Проектирование интерфейса оконного приложения с использованием элементов управления кнопка (Button) и метка (Label)

Нажмите, чтобы узнать подробности

Задание 3. Добавить на форму метку TextL abel1. Изменить свойства шрифта для компонента TextL abel1. Нажать кнопку . в поле Font (цвет шрифта – жёлтый, размер – 24, стиль — жирный курсив). Очистить поле Caption у метки. Установить значение true у свойства метки Autosize. (см. скриншот Инспектор объектов)

В обработчик события Click для кнопки button1 дописать команду: TextLabel1.Caption:=’Зелёный’;

В обработчик события Click для кнопки button2 дописать команду: TextLabel1.Caption:=’Голубой’;

Просмотр содержимого документа
«Практика_3_PascalABCNET»

Задание 1. Создать новое приложение (форму).

Имя проекта – Гадание.

Цвет формы – голубой

Размер формы – 5 00; 400

Расположение на экране монитора – 200; 200

Задание 2. Добавить на форму три кнопки. Указать для них следующие свойства: (лучше создать одну кнопку, указать для неё все свойства, а затем скопировать её 2 раза и изменить свойство Location )

Arial, 18, очень жирный

Size: Height, Width

Location: Left, Top

100; 150, 200; 150, 300; 150

Создать обработчик события Click для кнопки button1 и изменить цвет формы на зелёный. Команда: BackColor:=Color.Green

Создать обработчик события Click для кнопки button2 и изменить цвет формы на изображение. Команда: BackgroundImage:=Image.FromFile(‘4.jpg’)

Для работы с изображениями:

файл с изображением должен находиться в папке проекта.

Чтобы картинка любого размера полностью вписывалась в форму, для формы в инспекторе объектов выполните настройку:

С оздать обработчик события Click для кнопки button3 – закрыть форму: Close;

Задание 3. Добавить на форму метку label1. Изменить свойства шрифта для компонента label1. Нажать кнопку . в поле Font (цвет шрифта – жёлтый, размер – 24, стиль — жирный курсив). Очистить поле Text у метки. Установить значение true у свойства метки Autosize. (см. скриншот Инспектор объектов)

В обработчик события Click для кнопки button1 дописать команду: label1.Text:= ‘Зелёный’;

В обработчик события Click для кнопки button2 дописать команду: label1.Text:= ‘Осень!’;

Просмотр содержимого документа
«план урока_3»

Урок 3/3

Тема урока: Проектирование интерфейса оконного приложения с использованием элементов управления

Тип урока: урок изучения нового материала

Читайте так же:
Что делать, если в Вайбере не открываются фото

Организационная форма проведения урока: комбинированный

Оборудование, используемое на уроке: компьютеры с локальной (глобальной) сетью, мультиборд или другой демонстрационный экран, учебник по предмету.

образовательные: формирование представлений об основные элементах управления. Знакомство с. Формирование навыков по созданию и работе с элементами управления кнопка (Button) и метка (Label).

развивающие: развивать умения анализировать, систематизировать и обобщать; самостоятельность, внимание и память; умение работать с литературой.

воспитательные: воспитывать внимательность; сосредоточенность; интерес к самостоятельной работе, творчеству;

Учебная задача 1: Проверить навыки, полученные на предыдущем уроке: создать новое приложение (форму). Практика_3. docx – задание 1.

Учебная задача 2: Изучить Основные элементы управления, используя учебник §3.1. Составить конспект по основным понятиям – стандартные элементы управления.

Учебная задача 3: Изучить Элемент управления кнопка (Button), используя учебник §3.2

Учебная задача 4: Для закрепления нового материала, выполнить пример из учебника – пример 3.6. Практика_3. docx – задание 2.

Учебная задача 5: Изучить Элемент управления метка (Label), используя учебник §3.3

Учебная задача 6: Для закрепления нового материала, выполнить практическую работу. Практика_3. docx – задания 3 – 4.

Введение

Перед тем как перейти непосредственно к OpenGL вы узнаете как откомпилировать код, которым сопровождается каждый урок и как его запустить.

Навыки

Чтобы работать с данными уроками вам не потребуется дополнительных навыков. Опыт в любом языке программирования (C, Java, Lisp, JavaScript и других) поможет вам лучше понимать суть, но вовсе не обязателен.

Все уроки написаны на “легком” C++ и мы потратили много усилий, чтобы сделать код настолько простым, насколько это вообще возможно. Здесь не будет шаблонов, классов и указателей, что позволит вам понять все, даже если вы знаете только Java.

Забудьте все

Забудьте все, что вы знали об OpenGL ранее, если ваши знания касаются glBegin() и подобных функций. Здесь вы будете изучать новые стандарты OpenGL (OpenGL 3 и 4), в отличие от многих онлайн-уроков, в которых до сих пор рассматривается “старый” OpenGL (OpenGL 1 и 2).

Компиляция исходного кода уроков

Весь исходный код к урокам может быть скомпилирован на таких платформах, как Windows, Linux, Mac. Общая процедура для всех этих платформ будет приблизительно одинакова:

  • Обновите драйверы! Обязательно сделайте это, если что мы вас предупреждали 🙂
  • Скачайте компилятор, если у вас его до сих пор нет.
  • Установите CMake
  • Скачайте исходный код урока
  • Создайте проект используя CMake
  • Скомпилируйте проект
  • Изменяйте его 🙂

Теперь рассмотрим процедуру подробнее для каждой платформы. Вполне возможно вам потребуется что-то адаптировать под ваши требования и возможности, для этого можете руководствоваться инструкцией для Windows.

##Компиляция в Windows

  • Обновление драйверов должно быть для вас легкой задачей. Все что вам нужно — это просто сходить на сайт NVidia или AMD, скачать оттуда драйверы и установить их. Если вдруг вы не знаете точно модель вашей видеокарты, то вы можете посмотреть ее в свойствах адаптера, для этого перейдите в Панель управления -> Система -> Диспетчер устройств -> Видео адаптер. Если у вас встроенный Intel GPU, то драйверы всегда поставляются в комплекте.
  • Мы предлагаем вам использовать Visual Studio 2015 Express for Desktop в качестве среды, которую вы можете бесплатно скачать здесь. Если же вы захотите использовать MinGW, то мы рекомендуем вам Qt Creator. В любом случае, устанавливайте то, что вам необходимо и хотя шаги в уроках рассматриваются в Visual Studio, скорее всего различия в других IDE будут минимальны.
  • Скачайте CMake и установите его. , распакуйте его к примеру в C:/Users/XYZ/Projects/OpenGLTutorials
  • Запустите CMake. В первом поле укажите путь к распакованной папке. Если сомневаетесь, то это та папка, где находится файл CMakeLists.txt. Во втором поле укажите папку, в которую будут записываться исполняемые файлы, например вы можете указать здесь C:/Users/XYZ/Projects/OpenGLTutorials-build-Visual2010-32bits или что-то подобное. К слову, эта папка может находиться где угодно.
  • Нажмите кнопку Configure. Так как вы впервые настраиваете проект CMake спросит вас, какой именно компилятор вы хотите использовать. Здесь все упирается в ваш инструментарий, который вы выбрали в шаге 2. Кстати, если у вас Windows 64-bit, то вы можете выбрать 64 разрядные компиляторы, но если вы не уверены, то используйте 32.
  • Нажимайте Configure до тех пор, пока не исчезнут все красные строки. Далее нажмите Generate. Теперь ваш Visual Studio проект создан и вы можете забыть про CMake. Можете даже удалить его, если хотите 🙂
  • Откройте в Visual Studio файл Tutorials.sln в папке, которую вы указывали во втором поле главного окна CMake (C:/Users/XYZ/Projects/OpenGLTutorials-build-Visual2010-32bits). В меню Build нажмите Build All. Исходный код каждого урока и зависимостей будет откомпилирован. Также, каждый исполняемый файл будет скопирован обратно в C:/Users/XYZ/Projects/OpenGLTutorials . Надеемся у вас не возникнет ошибок.
  • Откройте C:/Users/XYZ/Projects/OpenGLTutorials/playground и запустите playground.exe. Если все прошло гладко, то у вас должно появиться черное окно.
Читайте так же:
Как вернуть в рабочее состояние беспроводную мышь

Вы также можете запустить любой урок из Visual Studio. Для этого нажмите правой кнопкой мыши на Playground и выберете “Choose as startup project”. Для отладки используйте клавишу F5.

##Компиляция в Linux

Существует большое количество разных дистрибутивов Linux и естественно рассмотреть особенности каждого дистрибутива выходит за рамки данного урока, поэтому не забудьте почитать документацию своего дистрибутива.

    Установите последние драйверы. Мы настоятельно рекомендуем вам использовать закрытые драйверу. Это не GNU, но они работают. Если ваш дистрибутив не предоставляет автоматической установки, можете попробовать посмотреть в документации к Ubuntu

Установите все необходимые компиляторы, утилиты и библиотеки. Полный список выглядит так:

Используйте sudo apt-get install *** или su && yum install ****.

    и распакуйте его, к примеру в

/Projects/OpenGLTutorials/ и введите следующие команды:

Обратите внимание, что лучшим решением будет использовать IDE, такую как Qt Creator. Она имеет поддержку CMake и предоставляет удобные инструменты для отладки. Инструкция для QtCreator:

  • В QtCreator перейдите в меню File -> Tools -> Options -> Compile&Execute -> CMake
  • Установите путь к CMake. Чаще всего это /usr/bin/cmake
  • File -> Open Project и выберите tutorials/CMakeLists.txt
  • Выберите директорию, в которую необходимо помещать скомпилированные файлы. Лучше всего выбрать директорию вне tutorials
  • Опционально установите -DCMAKE_BUILD_TYPE=Debug в Parameters и используйте Validate.
  • Нажмите на иконку молота внизу. Теперь уроки могут быть запущены из директории tutorials/
  • Чтобы запускать уроки непосредственно из QtCreator, перейдите в Projects -> Execution parameters -> Working Directory и выберете директорию, в которой находятся шейдеры, текстуры и модели. К примеру для Урока 2 это будет:

##Компиляция в Mac

Mac OS не поддерживает OpenGL 3.3. Последние Маки с MacOS 10.7 Lion и совместимыми GPU могут работать с OpenGL 3.2, но не с 3.3. Поэтому используйте исходный код уроков для 2.1. В остальном процедура компиляции очень похожа на процедуру в Windows (Makefile также поддерживаются, но не будут рассматриваться):

    Установите XCode из Mac App Store и установите .dmg . Нет необходимости устанавливать утилиты командной строки. (обязательно версия 2.1) и распакуйте его к примеру в

##Внимание для пользователей Code::Blocks

Из-за 2 багов (один в C::B, один в CMake), вам необходимо изменить командную строку Project -> Build Options -> Make commands, как указано на скриншоте:

Вам также необходимо установить рабочую директорию: Project -> Properties -> Build targets -> tutorial N -> рабочая директория исполняемых файлов (это src_dir/tutorial_N)

Запуск уроков

Чтобы запустить исполняемый файл урока просто выполните двойной щелчок мышью на файле в нужной директории. Если вы предпочитаете командную строку, то не забудьте использовать команду cd, чтобы перейти в нужную директорию.

Если вы хотите запустить урок из IDE, То не забудьте прочитать инструкции, данные выше, чтобы установить корректную рабочую директорию.

Как работать с уроками

К каждому уроку прилагается исходный код и все необходимые файлы данных, которые могут быть найдены в tutorialXX/. Тем не менее вы вряд ли будете изменять эти проекты, так как они даются для справки. Лучшим решением будет открыть playground/playground.cpp и изменять его так, как вам захочется. Если по каким-то причинам у вас его нет, то просто скопируйте код любого урока туда и все.

Мы предоставляем фрагменты кода в каждом уроке. Не стесняйтесь копировать эти фрагменты в playground, пока читаете и экспериментировать с ними — это хорошая практика, гораздо лучшая, чем просто читать готовый код или просто копировать его.

Открываем окно

Наконец! Настало время кода OpenGL!

Хотя… Все уроки будут показывать вам низко-уровневый путь для тех или иных задач, таким образом вы будете видеть, что здесь нет никакой магии, однако открытие окна — задача скучная, поэтому мы будем использовать внешнюю библиотеку GLFW для этой работы. Если вы хотите сделать это сами, то вам необходимо использовать Win32 API в ОС Windows, X11 API в Linux, Cocoa API в Mac. Также вы можете использовать другие библиотеки, такие как: SFML, FreeGLUT, SDL и подобные (см. страницу Ссылки).

Итак, поехали! Первое что мы делаем — это разбираемся с зависимостями. Нам необходимо базовый функционал для вывода в консоль:

Далее нам необходим GLEW. Здесь есть немного магии, но перейдем к пояснениям позднее.

Мы будем использовать GLFW для обработки окна и клавиатуры, так что включаем его тоже.

Следующий заголовок не является необходимым в данный момент, так как является библиотекой трехмерной математики, но позже будет очень полезен. В нем нет никакой магии и если вы знаете математику, то вполне можете написать свой аналог. Что касается “using namespace glm”, то эта строка переводит пространство имен в glm, чтобы можно было писать “vec3”, вместо “glm::vec3”.

Если вы скопировали код представленный выше в playground.cpp, то компилятор предупредит вас, что нет функции main(), поэтому добавим ее:

В теле функции первым делом инициализируем GLFW:

Теперь мы можем создать наше первое OpenGL окно! 🙂

Скомпилируйте и запустите этот исходный код. Если все сделано правильно, то у вас откроется и тут же закроется окно с контекстом OpenGL и это правильно, так как мы не указали, что хотим ждать до тех пор, пока пользователь не нажмет клавишу Escape. Самое время сделать это:

И это завершает наш первый урок! Во втором уроке мы узнаем как выводить простейший треугольник. Увидимся 🙂

голоса
Рейтинг статьи
Ссылка на основную публикацию