Help us understand the problem. What is going on with this article?

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

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(catPic, 0, 0, 100,100, 0, 0,catPic.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

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした