Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@nanbuwks

Xojo プログラムを体験してみよう

More than 1 year has passed since last update.

2016/07/04 (月) 11:00 ~ 14:00 株式会社XSHELLで行った、
「寝ながら作るXojo #1 ~最初の一歩・ランチオンハンズオン~」
https://atnd.org/events/79095
のハンズオンテキスト。
https://www.slideshare.net/YoshimasaKawano/xojo

昔の資料で、結構間違いも入っていたもの。今の環境(2020年2月)で動作確認と正確な説明を改めて。

環境

Linux Ubuntu 18.04.4 LTS ( AMD64 )
xojo 2019r3.1

初期メニュー

ここから開始
image.png

デスクトップアプリ作ってみる

初期メニューから「Desktop」を選ぶ

Hello作ってみる

OKボタンを置いて適当にサイズを変更します。

image.png

OKボタンをダブルクリックして以下の画面がでてきたら 「Action」 を選んで 「 OK 」
image.png

コードウィンドウ内にMsgBox("Hello")と書く

image.png

実行
image.png

OKボタンを押すとHelloが出ました。

image.png

Webブラウザつくってみる

初期画面から「Desktop」を選び、ボタン、TextField,HTMLVIewerを配置

image.png

ボタンをダブルクリック→Action→OK
コードウィンドウ内に
HTMLViewer1.LoadURL(TextField1.Text)
と書く

実行
image.png

画像取得作ってみる

http://blog.xojo.com/2015/10/01/cats-up-using-httpsocket-with-the-cat-rest-api/
で公開されていた「Cats Up: Using HTTPSocket with the Cat REST API」

以前は「HTTPSocketとCat REST APIを使って幸せになる方法」として日本語訳がありましたが、
https://xojo.grapecity.com/topics/article-20151014
現在はリンク切れです。アーカイブがこちらから見えます
https://web.archive.org/web/20151114015228/https://xojo.grapecity.com/topics/article-20151014

サンプルプログラムはiOS用ですが、日本語訳ページにはデスクトップアプリへの移植方法が追加されてました。この記事を元にクラウドから画像取得するサンプルプログラムを作ってみます。

初期画面から「Desktop」を選び、OKボタン、ImageWallを配置する
image.png

「Insert」-「Class」でCatCloudをつくり、Superとしてxojo.Net.HTTPSocketを選ぶ。
image.png

「Insert」-「Method」でGetCatを作り、コードを書く


Try
    Self.Send("GET","http://thecatapi.com/api/images/get")
Catch t As UnsupportedOperationException
    Return
End Try

image.png

ImageViewを表示して、クラスCatCloudをImageViewにドラッグ&ドロップします。そうすると画面下にCatCloud1ボタンができるので、
image.png

画面下のCatCloud1マークをクリック→PageRecievedでOK
image.png

コードを追加


Dim picBlock As New MemoryBlock(Content.Size)
Dim lastByteIndex As integer = Content.Size - 1
For i As Integer = 0 To lastByteIndex
    picBlock.Byte(i) = Content.Data.Byte(i)
Next
Dim catPic As Picture
catPic = Picture.FromData(picBlock)
ImageWell1.Image = catPic

OKボタンをダブルクリックしてAction→コードを追加
image.png


Dim picBlock As New MemoryBlock(Content.Size)
Dim lastByteIndex As integer = Content.Size - 1
For i As Integer = 0 To lastByteIndex
    picBlock.Byte(i) = Content.Data.Byte(i)
Next
Dim catPic As Picture
catPic = Picture.FromData(picBlock)
ImageWell1.Image = catPic

画像の加工表示作ってみる

先のアプリのPageRecievedを以下のように書き換える


  Dim picBlock As New MemoryBlock(Content.Size)
  Dim lastByteIndex As integer = Content.Size - 1
  Dim file As FolderItem
  For i As Integer = 0 To lastByteIndex
    picBlock.Byte(i) = Content.Data.Byte(i)
  Next
  Dim catPic As Picture
  Dim thumbnail As New Picture(100, 100, 32)
  catPic = Picture.FromData(picBlock)
  thumbnail.Graphics.DrawPicture(catPic, 0, 0, 100,100, 0, 0,catPic.Width, catPic.Height)
  ImageWell1.Image = thumbnail
  file = SpecialFolder.Pictures.Child("ThumbCat.jpg")
  ImageWell1.Image.Save(file, Picture.SaveAsJPEG)

image.png

画像の表示作ってみる

Picturesディレクトリにある画像の一覧を出す。自分の画像フォルダに合わせてプログラムは変更してください。また、自分の画像フォルダを表示すると犯罪になる場合は別フォルダを適宜指定してください。

以下を配置!
- 6 x ImageWall
- 6 x Label
- 1 x PushButton

image.png

ImageWallとLabelをそれぞれ配列にする
同じ名前にすると自動的に配列になる
image.png

image.png

OKボタンのActionにつけるコード


  Dim itemIdx, dirCount as Integer
  Dim dir as FolderItem
  dim item as FolderItem
  Dim Pic As Picture
  Dim thumbnail As New Picture(100, 100, 32)

  dir = SpecialFolder.Pictures
  dirCount = dir.Count
  For itemIdx = 1 to 6
    item = dir.Item(itemIdx)
    If item <> nil Then
      dim thisExt as string = item.Name.Right(4)
      if thisExt = ".jpg" or  thisExt = ".png"  Then
        Pic = Picture.Open(item)
        thumbnail = new Picture(100,100,32)
        thumbnail.Graphics.DrawPicture(Pic, 0, 0, 100,100, 0, 0,Pic.Width, Pic.Height)
        ImageWall1(itemIdx-1).Image = thumbnail
      end If
      Label1(itemIdx-1).text=item.Name
    end if
  Next

実行!

image.png

Webアプリ作ってみる

「Choose Project」→「Web」
ListBoxとTextFieldを配置

image.png

ボタン配置→ダブルクリック→Action→OK
コードウィンドウ内にListBox1.AddRow(TextField1.Text)と書く

実行するとブラウザが立ち上がります。
image.png

入力エリアに文字を入力してボタンを押すとリストに追加されます。

DBアクセスしてみる

ワークショップ時での説明ではRaspberryPiでMySQLを動かして、それにアクセスする方法を案内しました。
今回Qiita記事化するに伴い以下の内容を参照してください。

「Xojo + SQLite で遊ぶ」
https://qiita.com/nanbuwks/items/507ed3a21e04512d31ce

「Xojo で Web+DBアプリを作ってみる (SQLite編)」
https://qiita.com/nanbuwks/items/2cefc72528a16d60a329

「Xojo で Web+DBアプリを作ってみる (MySQL/MariaDB編)」
https://qiita.com/nanbuwks/items/0ccf38fc3f6ec2648d07

shell 呼び出してみる

CUIに皮を被せられるので便利!


Dim Command as new Shell
Command.Execute("ls")
MsgBox(Command.Result)

image.png

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
nanbuwks
iotlt
IoT縛りの勉強会です。 毎月イベントを実施しているので是非遊びに来てください! 登壇者を中心にQiitaでも情報発信していきます。 https://iotlt.connpass.com

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?