某储备粮的“学习笔记” - GUI 2011-06-24T12:29:35+08:00 Typecho http://blog.gregwym.info/feed/atom/tag/GUI/ <![CDATA[Java现学现卖之Layout Managers]]> http://blog.gregwym.info/java-xian-xue-xian-mai-zhi-layout-managers.html 2011-06-24T12:29:35+08:00 2011-06-24T12:29:35+08:00 咳嗽di小鱼 http://blog.gregwym.info Java里一共提供了8种Layout Manager

  • BorderLayout
  • BoxLayout
  • CardLayout
  • FlowLayout
  • GridBagLayout
  • GridLayout
  • GroupLayout
  • SpringLayout

这其中最后两种是专门为GUI Builder设计的, 并不是很适合手动写, 我就没花时间研究, 但应该是这几种Layout Manager中, 灵活性最大的两种.

网上有人说GridBagLayout是手写UI时`功能最强大的Layout...可一般强大就是复杂的代名词, 我也把它跳过了= =`(好吧, 我确实比较懒, 但更主要是时间不够)

先说说基础,
给一个container设置Layout使用 .setLayout(LayoutManager) 这个方法.
针对不同的Layout, 添加component时候, .add()有时可能需要额外的参数

然后来说说我玩明白了的几种Layout

BorderLayout

http://download.oracle.com/javase/tutorial/figures/uiswing/layout/BorderLayoutDemo.png
这是所有content pane的默认Layout. 它将整个界面划分为PAGE_START, PAGE_END, CENTER, LINE_START, LINE_END 五个部分. 可以分别理解为一个页面的header, footer, content, left-sidebar, right-sidebar.

.add() 的时候需要在后边增加一个额外的参数, 标识这个component该被添加到哪个区域.
例: pane.add(button, BorderLayout.PAGE_END);

BoxLayout

http://download.oracle.com/javase/tutorial/figures/uiswing/layout/BoxLayoutDemo.png
这个Layout适用于单纯的将components纵向或横向直线排列. 在Constructor中, 用X_AXIS或者Y_AXIS标识排列方向.
BoxLayout本身无视components的 preferredSize, 但如果设置了maximumSize那就另当别论了. 这点在设置自适应宽度或高度的components时候, 很有用处.

BoxLayout还有两个很有用的排版小工具, 通过 .add这几个小东西, 可以很轻松的调整Layout中的空间

  • Box.createHorizontalGlue(); 水平的自动填充空间
  • Box.createRigidArea(new Dimension(width, height)); 创建一个占据多大空间的空白

Trick: RigidArea的width或者height可以为0, 而且可以添加到任意其他Layout中

FlowLayout

http://download.oracle.com/javase/tutorial/figures/uiswing/layout/FlowLayoutDemo.png
这是JPanel的默认Layout. 和Box类似, 也是把components直线排列. 区别在于, 它更智能(当然有时候太聪明不是好事儿). 可以很方便的设置

  • .setAlignment() 左/右对齐
  • .setComponentOrientation() 从左到右/从右到左
  • .setHgap() .setVgap() components之间的水平/垂直间距

GridLayout

http://download.oracle.com/javase/tutorial/figures/uiswing/layout/GridLayoutDemo.png
这个Layout就是画格子. 把一个矩形空间分成n * m的格子, 可以自适应大小, 同Flow可以设置间距.

其实还是很好用的, 但在排版中比较awkward...因为很多时候并不需要像表格一样的空间.
创建方法很简单, new GridLayout(col, row);

CardLayout

http://download.oracle.com/javase/tutorial/figures/uiswing/layout/CardLayoutDemo.png http://download.oracle.com/javase/tutorial/figures/uiswing/layout/CardLayoutDemo-2.png
啊哈哈哈...这个我的最爱啊`!
这个Layout其实就像一摞卡片, 每次你只能看到最上边的一张卡. 你可以按顺序前后切换, 也可以要求显示特定的一张, 在这次做翻页的时候非常给力!

.add() 的时候, 需要增加一个额外的String参数, 标识这个card的name, 在.show(c, name)的时候会用到
切换Card可以用.first(c) .last(c) .previous(c) .next(c)


参考资料: enter link description here

]]>
<![CDATA[这辈子写的第一个给人用的程序...]]> http://blog.gregwym.info/zhe-bei-zi-xie-de-di-yi-ge-gei-ren-yong-de-cheng-xu.html 2011-06-24T05:29:17+08:00 2011-06-24T05:29:17+08:00 咳嗽di小鱼 http://blog.gregwym.info 埋头写了3整天的code`...不用Interface Builder写GUI真是自虐啊`
不过结果还是不错的`啊哈哈哈

写的是个Twitter-like Web Service的客户端, 网页端在这里
https://hci-courses.cs.uwaterloo.ca/channelw/
不是开放注册, 但可以邀请...有人想玩玩看的话, 可以留言回复哈`
Post上来得瑟一下

Java运行文件下载:
mikrocalendar.jar

截图如下:
Channel W 截图

]]>
<![CDATA[XLib初接触]]> http://blog.gregwym.info/xlib-chu-jie-chu.html 2011-05-15T04:24:52+08:00 2011-05-15T04:24:52+08:00 咳嗽di小鱼 http://blog.gregwym.info XLib是X Window编程的基础Library, 使用时首先需要在文件头中

#include <X11/Xlib.h>

在绘制图形界面之前, 第一步要连接到一个Display. 就好比画画之前先要找到一张桌子或者画板, 你不能举着一张纸直接就往上泼墨...

// Open display 
Display* display; 
display = XOpenDisplay(""); 
if(!display){ 
    printf("Cannot open display\n"); 
    exit(-1); 
} 

之后可以通过一些函数, 获取当前Display的各种信息. 如需要, 可以保存到variable里供后边绘图时候使用.

int printScreenInfo(Display* display){ 
    int screen_num;  // 当前屏幕的编号 
    int screen_width;    // 当前屏幕的宽度 
    int screen_height;   // 当前屏幕的高度 
    Window root_window; // root窗口的编号 
    unsigned long white_pixel;   // 白色像素的编号 
    unsigned long black_pixel;   // 黑色像素的编号 
    screen_num = DefaultScreen(display); 
    screen_width = DisplayWidth(display, screen_num); 
    screen_height = DisplayHeight(display, screen_num); 
    root_window = RootWindow(display, screen_num); 
    white_pixel = WhitePixel(display, screen_num); 
    black_pixel = BlackPixel(display, screen_num); 
    printf("Screen Number: \t%d\n
                    Width: \t%d\n
                   Height: \t%d\n
                     Root: \t%d\n
                    White: \t%d\n
                    Black: \t%d\n", 
           screen_num, screen_width, screen_height, 
           root_window, white_pixel, black_pixel); 
    return 0; 
}

画板摆好以后, 就要在上边铺上一张用来画画的纸, 也就是一个窗口...

// Define window properties 
Window window; 
int x, y; 
unsigned int width, height, border_width; 
width = 850; 
height = 470; 
x = y = 50; 
border_width = 0; 

// Define display constants 
int screen_num = DefaultScreen(display); 
unsigned long white_pixel = WhitePixel(display, screen_num); 
unsigned long black_pixel = BlackPixel(display, screen_num); 

// Create window 
window = XCreateSimpleWindow(display, RootWindow(display, screen_num), 
                             x, y, width, height, border_width, 
                             black_pixel, white_pixel); 

// Map win to display & Flush display 
XMapWindow(display, win); 
XFlush(display);

万事俱备只欠画画儿了`XLib的function都挺容易看懂的...

int drawInterface(Display* display, Window window, unsigned long black_pixel, unsigned long white_pixel ){
    // Define GCs for drawing 
    GC foregc; 
    foregc = XCreateGC (display, window, 0, 0); 
    XSetBackground( display, foregc, black_pixel ); 
    XSetForeground( display, foregc, white_pixel ); 

    // Start Drawing 
    XClearWindow(display, window); 
    // Door 
    XDrawRectangle(display, window, foregc, 1, 1, 630, 460); 
    XFillRectangle(display, window, foregc, 66, 66, 480, 330); 
    // Dashboard 
    XDrawRectangle(display, window, foregc, 633, 1, 215, 460); 
    XDrawRectangle(display, window, foregc, 650, 45, 185, 330); 
    // Timer 
    XDrawRectangle(display, window, foregc, 660, 60, 160, 65); 
    // And More... 

    // Flush display to show everything changed 
    XFlush(display);
}

Event Handling的部分晚点再整理

]]>